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