欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

谈谈Javascript中那些For循环的事

程序员文章站 2022-05-05 18:00:13
...

 

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);
})

谈谈Javascript中那些For循环的事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)的输出值:

谈谈Javascript中那些For循环的事

对于第二段代码(输出arr[index])的输出值:

谈谈Javascript中那些For循环的事

Four

for...of语句可迭代对象(包括 ArrayMapSetStringTypedArrayarguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。

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

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

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

由于条件判断,输出为:

谈谈Javascript中那些For循环的事

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;
});

谈谈Javascript中那些For循环的事

更多信息:Array.reduce()