es6笔记——chapter6

扩展运算符 ... 将数组转为逗号分隔的参数序列

        console.log(...[1,2,3]);
        function push(arr,...nums) {
            arr.push(...nums);
            console.log(arr);
        }
        function add(x,y) {
            return x+y;
        }
        console.log(add(...[3,5]));

扩展运算符后可以放表达式 如果...数组为空 则没有任何效果

        let a = 10;
        console.log(...(a>0?['number']:[]));
        console.log([...[],2,3]);

扩展运算符放在（）中则被js引擎理解为函数调用  如果不是函数调用则会报错

        console.log((...[1,2,3]))

扩展运算符不再需要apply方法将函数参数由数组转化为参数列表

        function f(x,y,z) {
            console.log(x+y+z);
        }
        let args = [2,3,4];
        f.apply(null,args);
        f(...args);

        Math.max(...args);
        Math.max.apply(null,args);

        let arr1 = [2,3,4];
        let arr2 = [5,6,7];
        arr1.push(...arr2);
        Array.prototype.push.apply(arr1,arr2);

扩展运算符的应用 1.复制数组

        const a1 = [0,1];
        const a2 = a1.concat();

        const a3 = [...a1];

2.合并数组

        const arr1 = [1,2];
        const arr2 = [3];
        const arr3 = [4,5,6];

        arr1.concat(arr2,arr3);
        [...arr1,...arr2,...arr3];
    //    两种方法都是浅拷贝

3.与解构赋值结合 生成数组

        const [first, ...rest] = [1, 2, 3, 4, 5];
        console.log(first);
        console.log(rest) ;

        const [first1, ...rest1] = [];
        console.log(first1);
        console.log(rest1) ;

4.将字符串转换为真正的数组

        console.log([..."hello"]);
        //    返回字符串正确长度
        function getLen(str) {
            return[...str].length
        }

5.将实现了Iterator接口的对象转化为真正数组 没有Iterator接口使用扩展符会报错

        let nodeList = document.querySelectorAll('div');
        let array = [...nodeList];

6.将Map、Set结构，Generator转化为数组

        let map = new Map([
            [1, 'one'],
            [2, 'two'],
            [3, 'three'],
        ]);

        let arr = [...map.keys()];
        let arr2 = [...map.values()];

        const go = function*(){
            yield 1;
            yield 2;
            yield 3;
        };

        console.log([...go()] )

Array.from()方法 将类数组对象（有length属性）和可遍历对象（Iterator接口）转化为真正的数组

        let arrayLike = {
            '0': 'a',
            '1': 'b',
            '2': 'c',
            length: 3
        };
        Array.from(arrayLike);
        Array.prototype.slice.call(arrayLike);

        Array.from('hello');

        let namesSet = new Set(['a', 'b'])
        Array.from(namesSet)

如果参数是一个数组 会返回一个一模一样的数组

        console.log(Array.from([2,3,4]));

Array.from()接受第二个参数 对每个元素进行操作 将处理后的值放入返回的数组

        console.log(Array.from([3,4,5],x=>x*x));
        console.log([3,4,5].map(x=>x*x));

        //    将数组中布尔值为false的成员转为0
        console.log(Array.from([1,,2,,3],x=>x||0));
        console.log(Array.from({length:2},x=> "lynn"));

Array.of()方法 将一组值转换为数组 参数不存在返回空数组

        Array.of(2,3,4);
    
        Array() // []
        Array(3) // [, , ,]
        Array(3, 11, 8) // [3, 11, 8]
//    只有参数不少于2两个时 Array才会返回由参数组成的新数组

Array.of()方法的实现

        Array.of = function () {
            return Array.prototype.slice.call(arguments);
        }

copyWithin()方法 将指定位置的成员复制到其他位置 返回当前数组

        [1, 2, 3, 4, 5].copyWithin(0, 3)// [4, 5, 3, 4, 5]
            // 将3号位复制到0号位
        [1, 2, 3, 5].copyWithin(0, 3, 4)// [4, 2, 3, 4, 5]// -2相当于3号位，-1相当于4号位
        [1, 2, 3, 4, 5].copyWithin(0, -2, -1)// [4, 2, 3, 4, 5]// 将3号位复制到0号位
        Array.prototype.copyWithin.call({length: 5, 3: 1}, 0, 3);// {0: 1, 3: 1, length: 5}
        // 将2号位到数组结束，复制到0号位
        let i32a = new Int32Array([1, 2, 3, 4, 5]);
        i32a.copyWithin(0, 2);// Int32Array [3, 4, 5, 4, 5]

find()方法 返回符合条件的第一个成员 没有符合条件的成员返回undefined                                          findIndex()方法 返回符合条件的第一个成员的index 没有符合条件的成员返回 -1

        console.log([10,5,4,-5,0].findIndex(n => n<0));
        console.log([10,5,4,-5,0].find(n => n<0));

两个方法的回调函数接受三个参数 当前值 当前位置 原数组

        [1, 5, 10, 15].findIndex(function(value, index, arr) {
            return value > 9;
        })

两个方法接受第二个参数，绑定回调函数的this对象

        function f(v){
            return v > this.age;
        }
        let person = {name: 'John', age: 20};
        [10, 12, 26, 15].find(f, person);

fill方法使用给定值填充数组 返回填充后的新数组 可接受第二第三个参数指定填充的起始位置和结束位置

        console.log([1,2,3].fill(7));
        console.log([1,2,3].fill(7,1,2));

如果填充的类型为对象，那么被赋值的是同一个内存地址的对象 不是深拷贝对象

        let arr = new Array(3).fill({name:"lynn"});
        console.log(arr);
        arr[0].name = "coder";
        console.log(arr);

entries() keys() values() 返回一个遍历器对象 可用for  of遍历

        for(let index of [1,2,3].keys()){
            console.log(index);
        }
        for(let value of [1,2,3].values()){
            console.log(value);
        }
        for(let entry of [1,2,3].entries()){
            console.log(entry);
        }

数组的includes()方法类似字符串的includes（）方法 返回一个布尔值 数组中是否存在参数值   第二个参数表示开始搜索的位置 负数表示倒数开始 的位置，如果此时数字超过数组长度从0开始

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

flat()方法用于将多层嵌套的多维数组拉伸为一维数组 参数默认为1 Infinite参数可拉伸任意层 如果有空位 该方法会跳过空位

        console.log([1,[2,[3]]].flat(2));
        console.log([1,[2,[3]],,4].flat(2))

flatMap() 对原数组的每个元素执行一个函数 然后对返回值组成的数组执行flat方法

        console.log([2,3,4].flatMap((x)=>[x,x*x]));

数组的空位 是指数组的某个位置没有任何值 注意：空位不是undefined 一个位置的值等于undefined，依然是有值的 空位是没有任何值

        let arr = Array(3);

 es5数组方法 基本上是跳过空位           es6数组方法 将空位转化为undefined