news 2026/8/6 12:26:51

JS几种主要的循环方法

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JS几种主要的循环方法

一、for循环

for循环是最基础的循环结构,适用于已知循环次数的场景。

for (let i = 0; i < array.length; i++) { console.log(array[i]); }

二、for...in循环

for...in循环用于遍历对象的可枚举属性。

注意:fo…in循环一般用于对象的遍历,但是这里有一个坑需要注意:

任何对象都继承了Object对象,或者其它对象,继承的类的属性是默认不可遍历的,for...in循环遍历的时候会跳过,但是这个属性是可以更改为可以遍历的,那么就会造成遍历到不属于自身的属性。

举例来说,对象都继承了toString属性,但是for...in循环不会遍历到这个属性。

const obj = {a: 1, b: 2, c: 3}; for (let key in obj) { console.log(key, obj[key]); }

如果继承的属性是可遍历的,那么就会被for...in循环遍历到。但如果只想遍历自身的属性,使用for...in的时候,应该结合使用hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。

var person = { name: '老张' }; for (var key in person) { if (person.hasOwnProperty(key)) { console.log(key); } }// name

三、for...of循环

for...of循环用于遍历可迭代对象(如数组、Map、Set、字符串等)的值。

const arr = [1, 2, 3]; for (let value of arr) { console.log(value); }

四、forEach循环

forEach是数组提供的方法,用于遍历数组的每个元素。它不返回执行结果(即返回值总是undefined),适合执行不依赖于返回值的操作。

array.forEach(function(element) { console.log(element); }); 或者使用箭头函数: array.forEach(element => console.log(element));

五、while循环

while循环在给定条件为真时重复执行代码块。它适用于在开始迭代之前不知道循环次数的情况。

语法

while (条件) { 语句; }

// 或者

while (条件) 语句;

let i = 0; while (i < array.length) { console.log(array[i]); i++; }

六、do...while循环

do...while循环至少执行一次代码块,然后只要条件为真就继续执行。这与while循环的主要区别在于,do...while循环会先执行一次代码块,然后再检查条件。

语法

do 语句 while (条件);

// 或者

do { 语句 } while (条件);

let i = 0; do { console.log(array[i]); i++; } while (i < array.length);

七、map()循环

map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回

注意:是返回一个新数组,而不会改变原数组

var numbers = [1, 2, 3]; numbers.map(function (n) { return n + 1; }); // [2, 3, 4] numbers // [1, 2, 3]

map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身

var arr = [1, 2, 3] .map(function(elem, index, arr) { return elem * index; }); // [0, 2, 6]

map()循环还可以接受第二个参数,用来绑定回调函数内部的this变量,将回调函数内部的this对象,指向第二个参数,间接操作这个参数(一般是数组)。

var arr = ['a', 'b', 'c']; [1, 2].map(function (e) { return this[e]; }, arr) // ['b', 'c']

上面代码通过map方法的第二个参数,将回调函数内部的this对象,指向arr数组。间接操作了数组arr; forEach同样具有这个功能。

八、filter()

九、:reduce(),reduceRight()

reduce方法和reduceRight方法依次处理数组的每个成员,最终累计为一个值。它们的差别是,reduce是从左到右处理(从第一个成员到最后一个成员)reduceRight则是从右到左(从最后一个成员到第一个成员),其他完全一样。

const arr = [1, 2, 3, 4, 5] arr.reduce(function (a, b) { console.log(a, b); return a + b; })

reduce方法和reduceRight方法的第一个参数都是一个函数。该函数接受以下四个参数。

  1. 累积变量,默认为数组的第一个成员
  2. 当前变量,默认为数组的第二个成员
  3. 当前位置(从0开始)
  4. 原数组

这四个参数之中,只有前两个是必须的,后两个则是可选的。

如果要对累积变量指定初值,可以把它放在reduce方法和reduceRight方法的第二个参数。

const arr = [1, 2, 3, 4, 5] arr.reduce(function (a, b) { return a + b; }, 10);
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/6 12:24:55

骨折劈裂分类数据集:使用此数据集可以更快地训练深度模型

摘要&#xff1a;骨折分类数据集包含 12 类骨折的高分辨率医学图像&#xff08;撕脱性、压缩-挤压、螺旋、嵌入、发丝、青枝、病理性、斜行、骨折脱位、纵向、关节内、粉碎性&#xff09;&#xff0c;每张图像标注类别&#xff0c;专为深度学习快速训练设计。数据集简介数据集概…

作者头像 李华
网站建设 2026/8/6 12:24:17

MySQL与BI工具桥接:数据实时可视化实战指南

1. 为什么需要从MySQL到BI工具的桥接&#xff1f;在企业数据应用场景中&#xff0c;MySQL作为最流行的开源关系型数据库&#xff0c;承载着大量业务系统的核心数据。但原始数据就像未经雕琢的玉石——有价值却难以直接呈现其价值。我曾参与过一个零售企业的数据平台改造项目&am…

作者头像 李华