【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