谈谈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()