前言
新手或从其他语言转前端的同学刚接触js时，涉及到的数组循环一般都是for、while，以for居多。
内容
forEach和map
比如输入某个const a = [1,2,3]，要输出数组[2,3,4]。for操作会像下面这样（返回新数组）
const a = [1,2,3];
const b = [];
for (let i = 0; i < a.length; i++) {
b[i] = a[i] + 1;
}
console.log(b); // [2,3,4]
或（修改原数组）
const a = [1,2,3];
for (let i = 0; i < a.length; i++) {
a[i] += 1;
}
console.log(a); // [2,3,4]
而ES5新增的数组方法forEach与map也可以更优雅的实现
（返回新数组）
const a = [1,2,3];
const b = a.map(value => value + 1);
或（修改原数组）
const a = [1,2,3];
a.forEach((value,index) => a[index] = value + 1);
some和every
或许有人会说forEach不能中断，达不到for循环中的break的效果
即
const a = [1,2,3];
for (let index = 0; index < a.length; index ++) {
if (index === 1) {
break;
}
// do something
}
forEach确实不能，但是ES5新增的数组方法some和every都可以实现类似的效果。
some方法的作用为：如果数组中至少有一个元素满足测试函数，则返回 true，并且退出循环。
every方法的作用为： 如果数组中的每个元素都满足测试函数，则返回 true；否则返回 false， 并退出循环。
const a = [1,2,3];
a.some((value, index) => {
if (index === 1) {
return true; // 此处达到break的效果
}
// do something
return false;
})
const a = [1,2,3];
a.every((value, index) => {
if (index === 1) {
return false; // 此处达到break的效果
}
// do something
return true;
})
至于for中的continue，用forEach实现就好了
const a = [1,2,3];
a.forEach(value => {
if (value === 3) return; // 此处达到continue的效果
// dosomething
})
filter
过滤a中的偶数，for的实现方式（返回新数组）
const a = [1,2,3];
const b = [];
for(let index = 0; index < a.length; index++) {
if (a[index] % 2 === 0) {
b.push(a[index]);
}
}
ES5新增的数组方法filter也可以更优雅的做到
const a = [1,2,3];
const b = a.filter(value => value % 2 === 0);
reduce和reduceRight
某些场景下可能需要对数组的每一项都进行某种操作。比如获取数组a中元素的和。
for的实现方式
const a = [1,2,3];
let sum = 0;
for(let index = 0; index < a.length; index++) {
sum += a[i];
}
ES5新增的数组方法reduce也可以实现,
其作用为: 从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。
const a = [1,2,3];
const sum = a.reduce((prev, next) => prev + next, 0)
数组方法还有个reduceRight，作用跟reduce近似，不过是从右往左执行回调函数
findIndex
for循环获取第一个偶数的index
const a = [1,2,3];
let i = -1;
for(let index = 0; index < a.length; index++) {
if (a[index] % 2 === 0) {
i = index;
break;
}
}
ES6数组方法findIndex实现
const a = [1,2,3];
const i = a.findIndex(value => value % 2 === 0);
find
for循环获取第一个偶数
const a = [1,2,3];
let i;
for(let index = 0; index < a.length; index++) {
if (a[index] % 2 === 0) {
i = a[index];
break;
}
}
ES6数组方法find实现
const a = [1,2,3];
const i = a.find(value => value % 2 === 0);
find未找到偶数时，会返回undefined
结尾
以上例子只是针对一些很简单的场景，复杂的场景就需要同学们举一反三了。希望对刚入坑的同学有所帮助。该文也是我在掘金的第一篇文章，由简入繁，希望在新的一年里自己能多总结多产出多分享。
