ES6学习之路(四) 数组拓展

数组扩展主要介绍了一些新的方法

Array.from()；

将类似数组的对象和可遍历的对象转换为真正的数组
只要拥有length属性 就可以用Array.from()来转换成真正的数组

        let arrayLike = {
            '0':'a',
            '1':'b',
            '2':'c',
            length:3
         }

         let arr2 = Array.from(arrayLike);
         console.log(arr2[0],arr2[1],arr2[2]);//a,b,c

         //转换字符串
         console.log(Array.from('hello'));//[h,e,l,l,o]

        //将数组中布尔值为false的值转换为0
         console.log(Array.from([1,,2,,3],(n)=>n||0));//[1,0,2,0,3]

        //返回各种数据类型
         function typeOf(){
            return console.log(Array.from(arguments,value => typeof value));
         }
         typeOf(null,[],'ss',NaN);//["object", "object", "string", "number"]

         //指定第二个参数的运行次数
         let ss = Array.from({length:2},()=>'jack')
         console.log(ss);//["jack", "jack"]

Array.of()

用来弥补Array构造函数的不足；用来将一组值转换为数组

        console.log(Array());//[]
        console.log(Array(3));//[undefined,undefiend,undefined]
        console.log(Array(3,10));//[3,10];

        //弥补了上方代码中参数不同导致的结果不一样；
        console.log(Array.of());//[]
        console.log(Array.of(undefined));//[undefined]
        console.log(Array.of(3,4,5));//[3,4,5]
        console.log(Array.of(3));//[3]
        console.log(Array.of(3).length)//1

数组实例的copyWithin()

它接受三个参数。
// target（必需）：从该位置开始替换数据。
// start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
// end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
// 这三个参数都应该是数值，如果不是，会自动转为数值。

        //从0开始替换，从3号位置开始读取，直到数组结束读取到【4,5】，那么就从0替换【1,2】
        var arr = [1,2,3,4,5].copyWithin(0,3);
        console.log(arr);//[4, 5, 3, 4, 5]

        //从0开始，读取三号位与4号位之间的数，替换
        console.log([1,2,3,4,5].copyWithin(0,3,4));//[4, 2, 3, 4, 5]

        //负数的情况是倒数的，-2等于是整数的3号位，-1相当于4号位
        console.log([1,2,3,4,5].copyWithin(0,-2,-1));//[4, 2, 3, 4, 5]

find() & findIndex()

查找数组中符合条件的第一个成员，没有找到就返回undefined,它的参数是一个回调函数

        console.log([1,2,3,-4,6].find((n)=>n<0));//-4
        console.log([1,2,3,4,6].find((n)=>n<0));//undefined

find()的回调函数可以接收三个参数，分别是当前的值，当前的位置，和原数组

        var arr1 = [1,5,10,15].find(function(value,index,arr){
            return value>9;
        })
        console.log(arr1);//10

//findIndex用法与find（）类似，只是结果返回的是符合条件成员的位置，没有找到就返回-1
        var arr2 = [1,5,10,15].findIndex(function(value,index,arr){
            return value>9;
        })
        console.log(arr2);//2
        var arr3 = [1,5,10,15].findIndex(function(value,index,arr){
            return value>20;
        })
        console.log(arr3);//-1

fill()

数组实例的填充方法，可以有三个参数，第一个是填充值，第二个是填充起始位置，第三个是填充结束位置；

        //一个参数就代表全部填充，之前的值会被删除
        let arr1 = ['a','b','c'].fill(7);
        console.log(arr1);//[7,7,7]
        //三个值
        let arr2 =['a','b','c'].fill(7,1,2);
        console.log(arr2);// ["a", 7, "c"]
        //用于初始化数组时
        let arr3 = new Array(3).fill(7);
        console.log(arr3);//[7,7,7]

数组实例 entries(),keys(),values()

都是用于遍历数组的，可以用for…of循环进行遍历；

        //keys(),遍历键名
        for(let index of ['a','b'].keys()){
            console.log(index);//0,1
        }
        //values()遍历键值
         for (let elem of ['a', 'b'].values()) {
           console.log(elem);//a,b
         }

        for(let [index,elem] of ['a','b'].entries()){
            console.log(index,elem);
        }
        // 0 "a"
        // 1 "b"

        //如果不使用for....of遍历器，那么可以调用遍历器的 next方法
        let letter = ['a','b','v'];
        let entries = letter.entries();
        console.log(entries.next().value);//[0,a];

Array.prototype.includes()

方法用来检测数组中是否包含给定的值，与字符串的includes方法类似

        console.log([1,2,3].includes(3));//true
        console.log([1,2,3].includes(0));//false
        //也可以用来检测NaN
        console.log([1,2,NaN].includes(NaN))//true

        //includes包含两个参数，第二个参数是开始检索的位置，如果是负数就是倒数，超出数组范围就从0开始检索；

        console.log([1,2,3].includes(3,3));//false
        console.log([1,2,3].includes(3,-1));//true