一、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方法的第一个参数都是一个函数。该函数接受以下四个参数。
- 累积变量,默认为数组的第一个成员
- 当前变量,默认为数组的第二个成员
- 当前位置(从0开始)
- 原数组
这四个参数之中,只有前两个是必须的,后两个则是可选的。
如果要对累积变量指定初值,可以把它放在
reduce方法和reduceRight方法的第二个参数。
const arr = [1, 2, 3, 4, 5] arr.reduce(function (a, b) { return a + b; }, 10);