有了for循环 为什么还要forEach？

for循环和forEach的语法区别

了解了本质区别，在应用过程中，他们到底有什么语法区别呢？

1. forEach 的参数。

2. forEach 的中断。

3. forEach 删除自身元素，index不可被重置。

4. for 循环可以控制循环起点。

forEach 的参数

我们真正了解 forEach 的完整传参内容吗？它大概是这样：

arr.forEach((self,index,arr) =>{},this)

self： 数组当前遍历的元素，默认从左往右依次获取数组元素。

index： 数组当前元素的索引，第一个元素索引为0，依次类推。

arr： 当前遍历的数组。

this： 回调函数中this指向。

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

let person = {

name: ‘技术直男星辰’

};

arr.forEach(function (self, index, arr) {

console.log(当前元素为${self}索引为${index},属于数组${arr});

console.log(this.name+=‘真帅’);

}, person)

我们可以利用 arr 实现数组去重：

let arr1 = [1, 2, 1, 3, 1];

let arr2 = [];

arr1.forEach(function (self, index, arr) {

arr1.indexOf(self) === index ? arr2.push(self) : null;

});

console.log(arr2);   // [1,2,3]

forEach 的中断

在js中有break return continue 对函数进行中断或跳出循环的操作，我们在 for循环中会用到一些中断行为，对于优化数组遍历查找是很好的，但由于forEach属于迭代器，只能按序依次遍历完成，所以不支持上述的中断行为。

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

i = 0,

length = arr.length;

for (; i < length; i++) {

console.log(arr[i]); //1,2

if (arr[i] === 2) {

break;

};

};

arr.forEach((self,index) => {

console.log(self);

if (self === 2) {

break; //报错

};

});

arr.forEach((self,index) => {

console.log(self);

if (self === 2) {

continue; //报错

};

});

如果我一定要在 forEach 中跳出循环呢？其实是有办法的，借助try/catch：

try {

var arr = [1, 2, 3, 4];

arr.forEach(function (item, index) {

//跳出条件

if (item === 3) {

throw new Error(“LoopTerminates”);

}

//do something

console.log(item);

});

} catch (e) {

if (e.message !== “LoopTerminates”) throw e;

};

若遇到 return 并不会报错，但是不会生效

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

function find(array, num) {

array.forEach((self, index) => {

if (self === num) {

return index;

};

});

};

let index = find(arr, 2);// undefined

forEach 删除自身元素，index不可被重置

在 forEach 中我们无法控制 index 的值，它只会无脑的自增直至大于数组的 length 跳出循环。所以也无法删除自身进行index重置，先看一个简单例子：

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

arr.forEach((item, index) => {

console.log(item); // 1 2 3 4

index++;

});

index不会随着函数体内部对它的增减而发生变化。在实际开发中，遍历数组同时删除某项的操作十分常见，在使用forEach删除时要注意。

for 循环可以控制循环起点

如上文提到的 forEach 的循环起点只能为0不能进行人为干预，而for循环不同：

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

i = 1,

length = arr.length;

for (; i < length; i++) {

console.log(arr[i]) // 2 3 4

};

那之前的数组遍历并删除滋生的操作就可以写成

let arr = [1, 2, 1],

i = 0,

length = arr.length;

for (; i < length; i++) {

// 删除数组中所有的1

if (arr[i] === 1) {

arr.splice(i, 1);

//重置i，否则i会跳一位

i–;

};

};

console.log(arr); // [2]

//等价于

var arr1 = arr.filter(index => index !== 1);

console.log(arr1) // [2]

最后

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

,

i = 0,

length = arr.length;

for (; i < length; i++) {

// 删除数组中所有的1

if (arr[i] === 1) {

arr.splice(i, 1);

//重置i，否则i会跳一位

i–;

};

};

console.log(arr); // [2]

//等价于

var arr1 = arr.filter(index => index !== 1);

console.log(arr1) // [2]

最后

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。