前端 js 基础(2)

js  For In

  • for in 循环遍历 person 对象
  • 每次迭代返回一个 (x)
  • 键用于访问键的
  • 键的值为 person[x]
  • 如果索引顺序很重要,请不要在数组上使用 for in

    索引顺序依赖于实现,可能不会按照您期望的顺序访问数组值。

    当顺序很重要时,最好使用 for 循环、for of 循环或 Array.forEach()

 

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For In</h2>

<p>for in 语句可以遍历数组值:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x] + "<br>"; 
}

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

js  array.for Each()

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.forEach()</h2>

<p>为每个数组元素调用一次函数。</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
//forEach  循环 myFunction数据
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value, index, array) {
  txt += value + "<br>"; 
}
</script>

</body>
</html>

js  For Of 循环

JavaScript for of 语句循环遍历可迭代对象的值。

它允许您循环遍历可迭代的数据结构,例如数组、字符串、映射、节点列表等:

 遍历数组

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of 循环</h2>

<p>for of 语句循环遍历任何可迭代对象的值:</p>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

 遍历字符串

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of 循环</h2>

<p>for of 语句循环遍历可迭代对象的值。</p>

<p id="demo"></p>

<script>
let language = "JavaScript";

let text = "";
for (let x of language) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

js Break 和 Continue

break 语句“跳出”循环。

continue 语句“跳过”循环中的一个迭代。

在本教程稍早的章节中,您已见到了 break 语句。它被用于“跳出” switch 语句。

break 语句也可用于跳出循环。

break 语句会中断循环,并继续执行循环之后的代码(如果有):

continue 语句(不论有无标签引用)只能用于跳过一个迭代

break 语句,如果没有标签引用,只能用于跳出一个循环或一个 switch

如果有标签引用,则 break 语句可用于跳出任意代码块

Break 语句 

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript break</h2>

<p id="demo"></p>

<script>
var cars = ["BMW", "Volvo", "porsche", "Ford"];
var text = "";

list: {
  text += cars[0] + "<br>"; 
  text += cars[1] + "<br>"; 
  break list;
  text += cars[2] + "<br>"; 
  text += cars[3] + "<br>"; 
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

 continue

<!DOCTYPE html>
<html>
<body>

<p>这个循环在 i=3 时跳过这一步:</p>

<p id="demo"></p>

<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
  if (i === 3) { continue; }
  text += "数字是 " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

js  typeof

在 JavaScript 中有 5 种不同的可以包含值的数据类型:

  • string
  • number
  • boolean
  • object
  • function

有 6 种类型的对象:

  • Object
  • Date
  • Array
  • String
  • Number
  • Boolean

以及 2 种不能包含值的数据类型:

  • null
  • undefined

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 运算符</h1>

<h2>typeof 运算符</h2>

<p>typeof 操作符返回变量、对象、函数或表达式的类型:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"'Bill' 是 " + typeof "Bill" + "<br>" +
"3.14 是 " + typeof 3.14 + "<br>" +
"NaN 是 " + typeof NaN + "<br>" +
"false 是 " + typeof false + "<br>" +
"[1, 2, 3, 4] 是 " + typeof [1, 2, 3, 4] + "<br>" +
"{name:'Bill', age:19} 是 " + typeof {name:'Bill', age:19} + "<br>" +
"new Date() 是 " + typeof new Date() + "<br>" +
"function () {} 是 " + typeof function () {} + "<br>" +
"myCar 是 " + typeof myCar + "<br>" +
"null 是 " + typeof null;
</script>

</body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/280441.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

元旦特辑:Note6---选择排序

目录 前言❌ 1. 基本思想⚠️ 2. 直接选择排序&#x1f7e2; 2.1 思路分析✳️ 2.2 代码实现❎ 2.2.1 sort.h 2.2.2 sort.c 2.2.3 test.c 2.3 问题解决❇️ 2.3.1 sort.c修改 2.4 特性总结✅ 3. 堆排序&#x1f535; 3.1 代码实现&#x1f3e7; 3.2 特性总结&…

Centos安装Kafka(KRaft模式)

1. KRaft引入 Kafka是一种高吞吐量的分布式发布订阅消息系统&#xff0c;它可以处理消费者在网站中的所有动作流数据。其核心组件包含Producer、Broker、Consumer&#xff0c;以及依赖的Zookeeper集群。其中Zookeeper集群是Kafka用来负责集群元数据的管理、控制器的选举等。 由…

c++ 简单实用万能异常捕获

多层捕获异常&#xff0c;逐渐严格。并打印出错信息和位置&#xff1a;哪个文件&#xff0c;哪个函数&#xff0c;具体哪一行代码。 #include <stdexcept> // 包含标准异常类的头文件try {int a 2 / 0; }catch (const std::runtime_error& e) {// 捕获 std::runt…

浅谈 JSON 对象和 FormData 相互转换,打通前端与后端的通信血脉

前言 大家都知道&#xff0c;前端在和后台进行交互联调时&#xff0c;肯定避免不了要传递参数&#xff0c;一般情况下&#xff0c;params 在 get 请求中使用&#xff0c;而 post 请求下&#xff0c;我们有两种常见的传参方式&#xff1a; JSON 对象格式和 formData 格式&#x…

AtCoder Beginner Contest 334 G

G.Christmas Color Grid 2&#xff08;枚举&#xff0c;Tarjan&#xff09; 题意&#xff1a; 本题与问题 E E E类似。有一个 H H H行和 W W W列的网格&#xff0c;每个单元格都被涂成红色或绿色。用 ( i , j ) (i,j) (i,j)表示从上到下第 i i i行、从左到右第 j j j列的单元…

UIToolKit使用心得

起因 因为那个uitoolkit自己写了一套graphView&#xff0c;所以想着来用用但是用完之后发现也不过如此 怎么构建自己的组件 我在继承Node之后想修改node的样式该怎么办呢是这样的。先用pick点击默认的node节点元素- 在pick默认创建的node节点之后&#xff0c;可以把它的uxml…

跨境电商迎来综合竞争力比拼时代 五大趋势解读跨境2024

过去几年&#xff0c;跨境电商成为外贸出口增长的一大亮点&#xff0c;随着年底国务院办公厅《关于加快内外贸一体化发展的若干措施》的发布&#xff0c;跨境电商在促进经济发展、助力内外贸一体化发展方面的价值更加凸显。 这是跨境电商变化最快的时代&#xff0c;也是跨境电…

CCSK认证:开启云安全领域的黄金大门

&#x1f31f;你是否对云安全领域充满热情&#xff1f;是否希望提升自己在云安全领域的专业性和竞争力&#xff1f;CCSK认证是你的不二之选&#xff01; &#x1f525;CCSK简介&#xff1a; CCSK是国际云安全联盟&#xff08;Cloud Security Alliance&#xff0c;CSA&#xff…

Vue3-29-路由-编程式导航的基本使用

补充一个知识点 路由配置中的 name 属性 &#xff1a; 可以给你的 路由 指定 name属性&#xff0c;称之为 命名路由。 这个 name 属性 在 编程式导航 传参时有重要的作用。 命名路由的写法如下 &#xff1a; 像指定 path 一样&#xff0c;直接指定一个 name 属性即可。{path:/d…

【已解决】 ubuntu apt-get update连不上dl.google.com

在终端使用apt-get update时&#xff0c;连接dl.google.com超时&#xff0c;一直卡在0%&#xff0c;原因是当前ip无法ping到google&#xff08;墙&#xff09;。 解决方法&#xff1a; dl.google.com国内可用IP 选一个&#xff0c;然后按以下命令操作&#xff1a; cd ~ vim …

RSA加密解密——用shell加密java解密

功能描述 使用shell opensll对明文进行RSA加密&#xff0c;将密文用java的RSA工具对密文解密。这应该是全网第一个同时用到shell和java的RSA加密解密教程。中间有很多坑&#xff0c;都踩过了&#xff0c;可以放心使用代码。 正确的实现流程 shell端 首先生成公钥私钥 &…

飞企互联-FE企业运营管理平台 登录绕过漏洞复现

0x01 产品简介 飞企互联-FE企业运营管理平台是一个基于云计算、智能化、大数据、物联网、移动互联网等技术支撑的云工作台。这个平台可以连接人、链接端、联通内外&#xff0c;支持企业B2B、C2B与O2O等核心需求&#xff0c;为不同行业客户的互联网转型提供支持。 0x02 漏洞概…

大数据Doris(四十五):物化视图选择最优

文章目录 物化视图选择最优 物化视图选择最优 下面详细解释一下第一步最优物化视图是被如何选择出来的。 这里分为两个步骤: 对候选集合进行一个过滤。只要是查询的结果能从物化视图数据计算(取部分行,部分列,或部分行列的聚合)出都可以留在候选集中,过滤完成后候选集合…

图像中的傅里叶变换及低通与高通滤波

傅里叶变换 高频&#xff1a;在图像中变化剧烈的灰度分量&#xff0c;如边界。 低频&#xff1a;在图像中变化缓慢的灰度分量。 OpenCV中函数为cv2.dft()和cv2.idft()&#xff0c;输入图像要先转换成np.float32格式。得到的结果频率为0的部分会在左上角&#xff0c;为方便处理…

【yolofastest上手】

一、前言 yolofastest网上资料比较少&#xff0c;也没有视频教学&#xff0c;所以想要使用参考了很多资料&#xff0c;只能说各资料都不尽全&#xff0c;让刚接触的小白无从下手。 参考资料: github地址 yolo-fastest 快速上手 修改参数遇到的问题 能在ARM-CPU上实时识别图像的…

MES系统中的电子看板:真正实现数字化车间可视化

在生产制造过程中&#xff0c;看板管理扮演着至关重要的角色。通过看板&#xff0c;我们能够实时了解生产情况、物料需求、质量预警等信息&#xff0c;从而更好地控制生产过程。作为万界星空科技MES管理系统中的一个基本模块&#xff0c;看板管理为企业的生产管理提供了有力支持…

【Pytorch】学习记录分享10——PyTorchTextCNN用于文本分类处理

【Pytorch】学习记录分享10——PyTorchTextCNN用于文本分类处理 1. TextCNN用于文本分类2. 代码实现 1. TextCNN用于文本分类 具体流程&#xff1a; 2. 代码实现 # coding: UTF-8 import torch import torch.nn as nn import torch.nn.functional as F import numpy as np…

嵌入式科普(8)ESP-IDF newlib相关介绍和对比分析

一、目的/概述 二、资料来源 三、ESP-IDF简介 3.1 ESP-IDF FreeRTOS 3.2 ESP-IDF heap_caps 3.3 ESP-IDF newlib 四、对比 嵌入式科普(8)ESP-IDF newlib相关介绍和对比分析 一、目的/概述 1、在我的嵌入式科普(6)你听说过FreeRTOS heap6吗&#xff1f;…

图文证明 牛顿-莱布尼茨公式

牛顿-莱布尼茨公式 牛顿-莱布尼茨公式是微积分中的基本定理之一&#xff0c;它描述了函数的导数和不定积分之间的关系。 该公式通常用来计算定积分。设函数f(x)在区间[a, b]上连续&#xff0c;且F(x)是f(x)在该区间上的一个原函数 即F’(x) f(x)。则牛顿-莱布尼茨公式表示为&…

一篇五分生信临床模型预测文章代码复现——Figure 10.机制及肿瘤免疫浸润(九)——ssGSEA——倒数第三节

之前讲过临床模型预测的专栏,但那只是基础版本,下面我们以自噬相关基因为例子,模仿一篇五分文章,将图和代码复现出来,学会本专栏课程,可以具备发一篇五分左右文章的水平: 本专栏目录如下: Figure 1:差异表达基因及预后基因筛选(图片仅供参考) Figure 2. 生存分析,…