《重学ES6：数组的扩展》——2021-02-05

[isbaselvy]

/***
 * 数组的扩展
 */
{
    // 结合扩展运算符使用
    function foo(a, b, c) {
        console.log(a);
        console.log(b);
        console.log(c);
    }
    // foo(...[1, 3, 2]);

    // 数组的聚合
    const arr1 = [1, 2, 3, 4];
    const arr2 = [4, 2, 2, 1];
    const arr3 = [2.2, '123', false];
    const cArr1 = [1, 2, 3, ...arr3]; 
    const cArr2 = [...arr1];
    const [...cArr3] = arr3;
    const cArr4 = [...arr1, ...arr2, ...arr3];

    // 迭代器类似
    function *g() {
        console.log(1);
        yield 'hi~';
        console.log(2);
        yield 'imooc~';
    }

    // const arr = [...g()]; // 等价下面
    // const gg = g();
    // gg.next();
    // gg.next();
}

{
    // set 元素唯一，利用此特性可做数组去重
    let set = new Set([1, 2, 2, 3]);
    // console.log([...set]);
}

{
    // 新的属性和方法
    // 1.Array.from：将类数组转换为数组，且可接受一个函数参数
    const obj = {
        0: 1,
        1: '22',
        2: false,
        length: 2
    };

    // console.log(Array.from(obj, item => item * 2));
    // 以下方法也可
    // Array.prototype.slice.call();
    // [].slice.call();
    // [...]

    // 2.Array.of
    // console.log(Array.of(1, 2, '123', false)); // [1, 2, '123', false]

    // 3.Array#fill 填充值
    let arr = new Array(10).fill(0, 0, 3);
    // console.log([1, 2, 3].fill(0));

    // 4.Array.includes：判断数组内是否包含某个元素
    let arr2 = [1, 2, 3, 4];
    // console.log(arr.includes(1)); // true
    // console.log(arr.includes(55)); // false

    // 5.keys, values, entries
    const arr3 = [1, 2, 3, 444];
    // console.log(arr3.keys()); // 迭代器
    // for (let i of arr.keys()) {
    //  console.log(i);
    // }

    for (let v of arr3.values()) {
        // console.log(v);
    }

    for (let [i, v] of arr3.entries()) {
        // console.log(i, v);
    }

    // 6.find 根据条件(回调) 按顺序遍历数组 当回调返回true时 就返回当前遍历到的值
    const res = [1, 7, 6, 4].find((value, index, arr) => value % 2 === 0);
    // console.log(res); // 6 返回找到的第一个

    // 7.findIndex 根据条件(回调) 按顺序遍历数组 当回调返回true时 就返回当前遍历到的下标
    const res2 = [1, 7, 6, 3, NaN].findIndex((value, index, arr) => Number.isNaN(value));
    console.log(res2); // 4 返回索引，没有则返回-1
}

[sworlife]

迭代器可以这样执行，厉害了 const arr = [...g()]

这个也厉害 let set = new Set([1, 2, 2, 3]); console.log([...set]);

[AwakenedSomeone]

const arr3 = [2.2, '123', false];
const [...cArr3] = arr3;

我有点儿不明白这个地方，放在赋值运算符的左侧是啥子意思啊？我猜想是跟形参赋值那个意思差不多？

[isbaselvy]

这样就有没有很熟悉？ @AwakenedSomeone ...这个东西，既可以是做剩余参数，做聚合，比如我们常见的函数里参数有...agrs，就把我们所有的参数转成了一个数组； 又可做扩展运算符，把数组里的元素取出来一个个展开 接上图例子 console.log(...arr) // 2 "3" false // 多个数组合并也类似，把多个数组的元素取出来展开，放到一个数组[]里，就成了数组合并，上面那个例子我觉得也是可以解释做，把cArr3里面的元素取出来展开放到数组里后 等于arr3，反推过来，cArr3里的元素就和arr3一致 const cArr4 = [...arr1, ...arr2, ...arr3];

[AwakenedSomeone]

这样就有没有很熟悉？ @AwakenedSomeone ...这个东西，既可以是做剩余参数，做聚合，比如我们常见的函数里参数有...agrs，就把我们所有的参数转成了一个数组； 又可做扩展运算符，把数组里的元素取出来一个个展开 接上图例子 console.log(...arr) // 2 "3" false // 多个数组合并也类似，把多个数组的元素取出来展开，放到一个数组[]里，就成了数组合并，上面那个例子我觉得也是可以解释做，把cArr3里面的元素取出来展开放到数组里后 等于arr3，反推过来，cArr3里的元素就和arr3一致 const cArr4 = [...arr1, ...arr2, ...arr3];

嗯嗯，我又去了解了一下，这里...可以分为两类，在等号右边和实参的情况，是展开的作用，在等号左边和形参的情况，又是聚合的作用，即将arr3的值展开放到[]中，并凝聚给cArr3，是这样的意思吧？