深入浅出ES6教程『数组的循环』

大家好，本人名叫苏日俪格，大家叫我 （格格） 就好，在上一章节中我们学到了扩展运算符的用法，下面我们一起来继续学习数组的循环：

这里我们先说ES5中的循环，以下几种循环的前五种接受的参数是一样的，都有两个参数：
第一个参数：循环里面执行的回调函数，循环调用执行的语句
第二个参数：this的指向(可有可无)
循环中回调函数的参数有三个：
第一个参数：循环出来的值
第二个参数：循环出来的值的索引
第三个参数：数组本身

1. forEach()

let arr = ['aaa','bbb','ccc'];
arr.forEach(function(val,index,arr){
    console.log(this,val,index,arr);
    // {111} "aaa" 0 ["aaa", "bbb", "ccc"]
    // {111} "bbb" 1 ["aaa", "bbb", "ccc"]
    // {111} "ccc" 2 ["aaa", "bbb", "ccc"]
},111);

上面的这个例子中输出的111就是改变this之后的值，如果没有做任何修改的话当然是window，用箭头函数写的话是这样的：

let arr = ['aaa','bbb','ccc'];
arr.forEach((val,index,arr)=>{
    console.log(this,val,index,arr);
    // window "aaa" 0 ["aaa", "bbb", "ccc"]
    // window "bbb" 1 ["aaa", "bbb", "ccc"]
    // window "ccc" 2 ["aaa", "bbb", "ccc"]
},111);

你会发现this并没有改变，因为在这个箭头函数的例子里this本身指向的就是window

2. map()

这个方法还是挺有用的，一般在和后台数据交互的时候，做映射，所谓映射就是一一对应的关系，与forEach不一样的地方就是有返回值，如果不加return就和forEach完全一样，因为forEach没有返回值；如果加了return，就会返回一个新数组，下面看两个例子：
(1) 没给return放入值的时候，返回的是undefined：

let arr = ['aaa','bbb','ccc'];let newArr = arr.map((val,index,arr) => {
    console.log(val,index,arr);
    // "aaa" 0 ["aaa", "bbb", "ccc"]
    // "bbb" 1 ["bbb", "bbb", "ccc"]
    // "ccc" 2 ["ccc", "bbb", "ccc"]
    // [undefined, undefined, undefined]
});
console.log(newArr);

(2) return一个值的时候：

let arr = ['aaa','bbb','ccc'];let newArr = arr.map((val,index,arr) => {
    console.log(val,index,arr);    return 1;
    // "aaa" 0 ["aaa", "bbb", "ccc"]
    // "bbb" 1 ["bbb", "bbb", "ccc"]
    // "ccc" 2 ["ccc", "bbb", "ccc"]
    // [1, 1, 1]
});
console.log(newArr);

小白：说了半天这个东西到底有什么用呢？
格格：别着急哈，下面就来介绍一下：

map方法一般会用在整理数据结构上，在数据交互的时候，根据需求我们需要改一些前端部分需要的数据形式：

let aNews = [
    {aaa: '为排行暴走万步', bbb: 404512},
    {aaa: '李荣浩庆生杨丞琳', bbb: 444512},
];let newArr = aNews.map((val,index,arr) => {    let json = {};
    json.title = `标题:${val.aaa}`;
    json.read = `阅览量:${val.bbb}`;    return json;
});console.log(newArr);

执行效果：

3. filter()

用来过滤一些不合格的元素，如果回调函数返回的是true，那么自然会被留下来，为false的就会被过滤掉，看一个例子就懂了哈：

let aNews = [
    {title: '为排行暴走万步', read: 404512, hot: false},
    {title: '李荣浩庆生杨丞琳', read: 444512, hot: true},
];let newArr = aNews.filter((val,index,arr) => {    return val.hot==true;
});console.log(newArr);

执行结果：

4. some()

这个方法类似于查找一个字符串存在不存在，举个例子说明：

let aNews = ['aaa','bbb','ccc'];let newArr = aNews.some((item,index,arr) => {    return item=='aaa';
});console.log(newArr);  // true

5. every()

和some一样，只不过是查找数组中的每一项，所有元素都要符合条件，才返回true：

let arr = [1,3,5,7,9];let newArr = arr.every((val,index,arr)=>{    return val%2==1;  // 判断是不是奇数});console.log(newArr);  // true

6. reduce()

从左往右运算

7. reduceRight()

从右往左运算
上面这两种方法可以用来求数组的和、阶乘、幂运算；接受4个函数参数，举个例子：

let arr = [2,3,3];let newArr = arr.reduce((prev,curr,index,arr)=>{    return prev-curr;   // 运算的方式});console.log(newArr);  // -4

let arr = [2,3,3];let newArr = arr.reduceRight((prev,curr,index,arr)=>{    return prev-curr;   // 运算的方式});console.log(newArr);  // -2

相信大家已经看出其中的端倪了。

下面说一个ES2017新增的幂运算符(**)，它的用法及其优点呢，还是要通过例子来看：

let arr = [2,3,2];let newArr = arr.reduce((prev,curr,index,arr)=>{    return Math.pow(prev,curr);        //return prev**curr;});console.log(newArr);    // 64

例子中的两种写法都可以，结果是一样的，ES5的语法到此为止。

下面来说一下ES6新增的一些东西：

8. for...of...

let arr = ['aaa','bbb','ccc'];for (let val of arr) {    console.log(val);   // 输出每一项
    // aaa
    // bbb
    // ccc}for (let index of arr.keys()) {    console.log(index); // 输出每一项的索引
    // 0
    // 1
    // 2}for (let item of arr.entries()) {    console.log(item);  // 输出三个数组
    // [0, "aaa"]
    // [1, "bbb"]
    // [2, "ccc"]
    console.log(item[0]);   // 0 1 2
    console.log(item[1]);   // aaa bbb ccc}for (let [key,val] of arr.entries()) {    console.log(key,val);   
    // 0 "aaa"
    // 1 "bbb"
    // 2 "ccc"}

for...of循环你可以大胆放心的用，绝对没有任何隐患，也不用担心把它玩坏(ง •̀_•́)ง (*•̀ㅂ•́)و

关于数组的循环我们都已经了然于心，预知数组新增方法如何，请听下回分解 （＾∀＾）/~~~

本文的所有内容均是一字一句敲上去的，希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~支持转载但要下标注

作者：苏日俪格
链接：https://www.jianshu.com/p/e26def31b2ee