ES6学习 （二）ES6数组方法

ES6中新增的数组知识

• JSON数组格式转换

           JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式，跟普通的JSON对比是在最后多了一个length属性，这种特殊的json格式都可以使用ES6的语法转变成数组。在ES6中绝大部分的Array操作都存在于Array对象里。我们就用Array.from(xxx)来进行转换，把上边的JSON代码转换成数组，并打印在控制台。

        let  json = {
            '0': 'www',
            '1': 'baidu',
            '2': 'com',
            length:3
        }
        let arr=Array.from(json);    
        console.log(arr)            //输出长度为3的数组

• Array.of()方法

           它可以把一堆文本或者变量转换成数组 

        let arr =Array.of(3,4,5,6);
        console.log(arr);                   // [3, 4, 5, 6]

        let arr =Array.of('a','b','c');
        console.log(arr);                   // ["a", "b", "c"]

•  find( )实例方法     

          所谓的实例方法就是并不是以Array对象开始的，而是必须有一个已经存在的数组，然后使用的方法，这就是实例方法。这里的find方法是从数组中查找。在find方法中我们需要传入一个匿名函数，函数需要传入三个参数：

• value：表示当前查找的值。
• index：表示当前查找的数组索引。
• arr：表示当前数组。

        let arr=[1,2,3,4,5,6,7,8,9];
        console.log(arr.find(function(value,index,arr){           // 6 
            return value > 5;
        }))                    

           返回第一个符合条件的值，如果找不到会显示undefined。

• fill( )实例方法

         fill()也是一个实例方法，它的作用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置(不包括此位置)。

        let arr2=[0,1,2,3,4,5];
        arr2.fill('apple',1,3);
        console.log(arr2);           //  [0, "apple", "apple", 3, 4, 5]

• for…of循环

        let arr=['apple','banana','orange']
        for (let item of arr){
            console.log(item);                //   apple banana orange
        }                               

          ① for…of数组索引:    用keys()实例方法

        let arr=['apple','orange','banana']
        for (let index of arr.keys()){
            console.log(index);               // 0 1 2
        } 

         ② 同时输出数组的内容和索引：用entries()实例方法

        let arr=['apple','orange','banana']
        for (let [index,val] of arr.entries()){
            console.log(index+':'+val);                // 0:apple 1:orange 2:banana
        }

         ③  entries()实例方式生成的是Iterator形式的数组，这种形式的好处就是可以在我们需要时用next()手动跳转到下一个值。

        let arr=['apple','orange','banana']
        let list=arr.entries();
        console.log(list.next().value);      // [0, "apple"]
        console.log(list.next().value);      // [1, "orange"]
        console.log(list.next().value);      // [2, "banana"]

• in的用法 

             ①  对象判断

        let obj={
            a:'jspang',
            b:'技术胖'
        }
        console.log('a' in obj);  //true

              ②  数组判断

            看一下ES5判断的弊端，以前会使用length属性进行判断，为0表示没有数组元素。但是这并不准确，或者说真实开发中有弊端。

        let arr=[,,,,,];
        console.log(arr.length); //5

上边的代码输出了5，但是数组中其实全是空值，这是一个坑。那用ES6的in就可以解决这个问题(0指的是数组下标位置是否为空。)

        let arr=[,,,,,];
        console.log(0 in arr);         //false
        let arr1=['zhou','daniel'];
        console.log(0 in arr1);        // true

• 数组的遍历方法

         ①   forEach

        let arr=['apple','orange','','banana']
        arr.forEach((val,index)=>console.log(index,val));      // 0 "apple"
                                                               // 1 "orange"
                                                               // 2 ""
                                                               // 3 "banana"

        ②    filter

let arr=['apple','orange','banana']
arr.filter(x=>console.log(x));           // apple orange banana

       ③    some

       ④    map

        let arr=['apple','orange','banana']
        console.log(arr.map(x=>'fruit'));              //  ["fruit", "fruit", "fruit"]

• join()方法

        let arr=['apple','orange','banana']
        console.log(arr.join('|'));             // apple|orange|banana

• toString()方法

          let arr=['apple','orange','banana']
          console.log(arr.toString());          // apple,orange,banana