谈谈Javascript中那些For循环的事

 

let arr = [1, 2, 3, 4, 5];

One

从初学编程就开始用的最基础的一种循环：

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

输出结果：1，2，3，4，5

Two

数组原型方法：Array.prototype.forEach()。forEach() 方法对数组的每个元素执行一次提供的函数。

语法

arr.forEach(callback[, thisArg]);

参数

callback

为数组中每个元素执行的函数，该函数接收三个参数：

currentValue

数组中正在处理的当前元素。

index可选

数组中正在处理的当前元素的索引。

array可选

forEach() 方法正在操作的数组。

thisArg可选

可选参数。当执行回调函数时用作 this 的值(参考对象)。

详细信息可看：Array.prototype.forEach()

 arr.forEach(function (element) {
        console.log(element);
    });

输出为：1，2，3，4，5

改变为箭头函数：

arr.forEach(element => {
  console.log(element);
})

不过对于forEach循环来说：在循环体中不能进行判断，不能跳过或者终止循环：

arr.forEach(element => {
    if (element == 2) {
        //不能跳过或者终止
        break;
        // continue;
    }
    console.log(element);
})

continue同样的报错，违法使用方法。

Three

for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。

JavaScript for...in 语句

for...in 语句用于对数组或者对象的属性进行循环操作。

for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

语法：

for (变量 in 对象)
{
    在此执行代码
}
“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。

for (let index in arr) {
    //属性 输出
    console.log(index);
}

输出：0，1，2，3，4

如果想输出数组值：

for (let index in arr) {
    console.log(arr[index]);
}

输出：1，2，3，4，5

注意： 

1. 对于for...in函数：会遍历数组上的可枚举属性，加上属性：

arr.source = 0;

再次使用上面代码进行遍历，输出：

对于第一段代码（输出index）的输出值：0，1，2，3，4，source

对于第二段代码（输出arr[index]）的输出值：1，2，3，4，5，0

2.同样会输出自己设置的数组上的原型方法：

Array.prototype.first = function(){
    return this[0];
}

对于第一段代码（输出index）的输出值：

对于第二段代码（输出arr[index]）的输出值：

Four

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

详细信息可看：for...of

与forEach()方法不同的是，可以进行跳过或者终止。其循环的值是属性值，不会遍历非数字属性：

for (const element of arr) {
    if (element == 2) {
        //可以跳过或者终止
        break;
        // continue;
    }
    console.log(element);
}

由于条件判断，输出为：

Other -- Array.prototype.reduce()

最近刷题一直用，但是一直没怎么好好学习这个方法。reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

语法：

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

接收四个参数：

• accumulator 累计器
• currentValue 当前值
• currentIndex 当前索引
• array 数组

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});

更多信息：Array.reduce()