javascript的12种遍历循环方式你都了解吗？

while 循环

包含一个循环条件和一段代码块，只要循环条件为真就不断执行代码块

var i = 0;
while (i < 100) { //循环100次，输出0到99
    console.log(i);
    i++;
}

do....while 循环

do...while 与while唯一区别就是，do...while 会先执行代码块再验证

var i =0;
do { // 只执行一次，随后因为1（0加了1）不满足条件而不再循环
    i++;
    console.log(i);
} while (i > 10);

for循环

for (var i=0;i<100;i++) { //循环100次，输出0到99
    console.log(i)
}

for...in 循环

在遍历对象时使用，我们通常需要键名才能取出对象里的值，在不知道键名时非常有效

// 循环对象
var data = {a:100, b:1000};
for (var i in data) { // 输出 a 100  和  b 1000
    console.log(i,data[i]); // i为键值，我们需要通过键值获取内容
}
// 循环数组
var data = [100, 1000, 5000];
for (var i in data) { // 输出 0 100  和  1 1000   和  2 5000
    console.log(i,data[i]);
}

for...of 循环（ES6 新增）

for...of 可以输出数组里的每一个值。但只能循环数组，无法遍历对象

var data = [100, 1000, 5000];
for (var i in data) { // 输出100 1000 5000
    console.log(i); // 直接拿到数值，不需要知道下标值
}

forEach 循环

forEach 方法调用数组里的每个元素，并将元素传递给回调函数

var arr = [2, 5, 9];
function log(value, index, arr){ // 传入的参数分别为当前元素、索引、数组
    console.log(value, index, arr); // 第一次输出 2 0 [2,5,9]  后面省略
}
arr.forEach(log);
​
// ES6简洁写法
arr.forEach((value, index, arr) => {
    console.log(value, index, arr);
});

map 循环

map 与 forEach 较为相似，map 方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回

我们可以使用 map 方法做一些对数组的操作或格式化等

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

filter 过滤循环

filter 方法用于过滤数组成员，将不满足规则的成员剔除后返回一个新的数组

它的参数是一个函数，所有数组成员依次执行，结果为true的成员组成一个新的数组返回

let result = [1, 'abc', false, 20].filter((val) => {
    return typeof val === 'number'
}); // result为[1, 20]

some和every 统计数组

some 只要一个成员满足条件就返回 true

every 所有成员都要满足条件才返回 true

let arr = [1, 'abc', false, 20];
​
// 数组中至少有一项为数字
let result = arr.some((val) => {
    return typeof val === 'number'
}); // result为true
​
// 判断数组为全数字数组
let result = arr.every((val) => {
    return typeof val === 'number'
}); // result为false

reduce()，reduceRight()方法可依次处理数组的每个成员

reduce 方法和 reduceRight 方法依次处理数组的每个成员，最终累计为一个值。

reduce从左到右处理，reduceRight 从右到左处理

// reduce
[1, 2, 3, 4, 5].reduce((a, b) => { // a为累计变量，b为下一个变量    第一次循环时，a为数组第一个值，b为数组第二个值
    console.log(a,b);
    return a + b;
});
// 1 2   结果为 3
// 3 3   结果为 6
// 6 4   结果为 10
// 10 5  结果为 15
// 最后结果     15
​
// reduce可以为计算设置一个初始值（默认是0）
[1, 2, 3, 4, 5].reduce((a, b) => {
    console.log(a,b);
    return a + b;
}, 10);
// 结果为  25