2018-06-13深入简出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} "aaa" 1 ["aaa", "bbb" , "ccc"]
  // {111} "aaa" 2 ["aaa", "bbb" , "ccc"]
},111);

上线这个例子终属楚的111 就是改变this之后的值,如果没有做任何修改的话当然是window,用箭头函数写的话就是这样的:

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

你会发现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 ['aaa','bbb','ccc']
   // "ccc" 2 ['aaa','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 ['aaa','bbb','ccc']
   // "ccc" 2 ['aaa','bbb','ccc']
   // [1,1,1]
});
console.log(newArr);
map方法一般用在整理数据结构上,在数据交互的时候,根据需求我们需要改一些前端部分需要的数据样式:
       let aNews = [
           {
               aaa: 'I am a teacher!',bbb: 25
           },
           {
               aaa: 'I am your students!',bbb: 10
           }
       ];
       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,name自然会被留下来,为false的就会被过滤掉,看一个例子:

       let aNews = [
           {
               aaa: 'I am a teacher!',bbb: 25,hot:true
           },
           {
               aaa: 'I am your students!',bbb: 10,hot:false
           }
       ];
       let newArr = aNews.filter((val,index,arr) => {
           return val.hot == true;
       });
       console.log(newArr);

执行结果:


1528885809(1).jpg

4、some()

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

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

5、every();

        let aNews = [1,2,3,5,7,9];
        let newArr = aNews.every((item,index,arr) => {
            return item%2 == 1;
        });
        console.log(newArr);

6、reduce();

从左向右运算

7、reduceRight()

从右向左运算,这两种方法都可以用来求数组的和,阶乘,幂运算;接受4个函数参数,例子:
        let arr = [2,3,3];
        let newArr = arr.reduce((prev,end,index,arr) => {
            return prev-end; //运算的方式
        });
        console.log(newArr); //-4
        let arr = [2,3,3];
        let newArr = arr.reduceRight((prev,end,index,arr) => {
            return prev-end; //运算的方式
        });
        console.log(newArr); //-2

ES2017新增的幂运算(**),用法及其优点:

        let arr = [2,3,2];
        let newArr = arr.reduce((prev,end,index,arr) => {
            return Math.pow(prev,end); //运算的方式
            //return prev**end
        });
        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']
        }
        for(let [ke,va] of arr.entries()){
            console.log(ke,va);
            // 0 'aaa'
            // 1 'bbb'
            // 2 'ccc'
        }

GitHub个人主页 :https://github.com/Cyrildog

有些事情,要等到你渐渐清醒了,才明白它是个错误;有些东西,要等到你真正放下了,也许才知道它的沉重。

image

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 3,296评论 0 13
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 3,465评论 0 5
  • 第一章:块级作用域绑定 块级声明 1.var声明及变量提升机制:在函数作用域或者全局作用域中通过关键字var声明的...
    BeADre_wang阅读 619评论 0 0
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 12,426评论 0 39
  • 王琦瑶阅读 73评论 1 0
  • 正如那些人是的一样的,我并没有什么特别,和别人一样。但是最可悲的还是和他们一样的懒散,有点浪费这时光,浪费这么好的...
    zs97阅读 79评论 0 0
  • 最近总听到身边有人在抱怨心情不好,要出去散心;或者工作压力太大,待遇太低,心里不平衡需要减压等等。有个同事平...
    _荷包蛋_阅读 170评论 4 1
  • 今天我在英语课外班当了第一次英语小助教,不是我自告奋勇,而是被请来的。当助教的好处有很多,比如:可以得很多的瑞...
    小马哥家的栗子阅读 469评论 1 3