【JS新手向】对for说byebye

前言

新手或从其他语言转前端的同学刚接触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

结尾

以上例子只是针对一些很简单的场景，复杂的场景就需要同学们举一反三了。希望对刚入坑的同学有所帮助。该文也是我在掘金的第一篇文章，由简入繁，希望在新的一年里自己能多总结多产出多分享。

Array | MDN

转载于:https://juejin.im/post/5c2f47ede51d45524a11f1b7