《ES6标准入门（第3版）》学习笔记24：chapter_8 数组的扩展之扩展运算符

本文链接：https://blog.csdn.net/weixin_44582681/article/details/102263046
这是该系列的第24篇笔记！
让学习“上瘾”，成为更好的自己！！！
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1 扩展运算符</title>
</head>

<body>
    <div id="outer">
        <div id="inner">
            <p>我爱我的国家！！！</p>
        </div>
    </div>

    <script>
        // 扩展运算符：三个点(...)，他如同rest参数的逆运算，将一个数组转为用逗号分隔的参数序列

        // (1) 含义
        // console.log(...[1, 3, 4, 6]);
        // console.log(0, ...[1, 3, 4, 6], 23);

        // a, 该运算符主要用于“函数调用”
        // function push(array, ...items){
        //     array.push(...items);

        // }

        // function add(x, y){
        //     return x + y;

        // }

        // var nums = [4, 64];
        // console.log(add(...nums));

        // b, 扩展运算符可以与正常的函数参数结合使用，非常灵活
        // function f(v, w, x, y, z){
        //     return v + w + x + y + z;
        // }
        // var args = [0, 1];
        // console.log(f(-1, ...args, 2, ...[3]));  // 5

        // c, 扩展运算符后面可以放置表达式

        // let x = 2;
        // const arr = [
        //     ...(x > 0? ['a']: ['b']),
        //     'c'
        // ];
        // console.log(arr);

        // d, 如果扩展运算符后面是一个空数组，则不产生任何效果

        // console.log([...[], 2, 3]);  // [2 ,3]



        // (2) 替代数组的apply方法
        // 由于扩展运算符可以展开数组，所以不再需要使用apply方法将数组转为函数的参数

        // ES5 写法
        // function f(x, y, z){
        //     return x + y + z;

        // }

        // var args = [1,3,4];
        //  console.log(f.apply(null, args)); 


        // Es6写法
        function f(x, y, z) {
            return x + y + z;

        }

        var args = [1, 3, 4];
        console.log(f(...args));

        // 例子1 --> 扩展运算符取代apply方法:

        // ES5 写法
        console.log(Math.max.apply(this, [1, 3, 4, 90]));


        //  Es6写法
        console.log(Math.max(...[1, 3, 4343]));

    // 等同于 Math.max(1, 3, 4343);

    // 例子2 --> 通过push函数将一个数组添加到另一个数组的尾部:
     // ES5 写法
    //  var arr1 = [1, 3, 4];
    //  var arr2 = [2, 3, 44];
    //  Array.prototype.push.apply(arr1, arr2);
    //  console.log(arr1);


    //  Es6写法
    // var arr1 = [1, 3, 4];
    //  var arr2 = [2, 3, 44];
    //  arr1.push(...arr2);
    //  console.log(arr1);

    // // 例子3
    // // ES5
    // new (Date.bind.apply(Date, [null, 2015, 1, 1]));
    // // ES6
    // var d1 = new Date(...[2015, 1, 1]);
    // console.log(d1);



     // (3) 扩展运算符的应用

    // 应用1： 合并数组
    // ES5
    // console.log([1, 2].concat([3, 4]));
    // var arr1 = ['a', 'b'];
    // var arr2 = ['c', 'd'];
    // var arr3 = ['e', 'f'];
    // console.log(arr1.concat(arr2, arr3));
    // // ES6
    // console.log([1, 2, ...[3, 4]]);
    // console.log([...arr1, ...arr2, ...arr3]);


    // 应用2： 与解构赋值结合 --> 生成数组
    // ES5
    // a = list[0], rest = list.slice(1);
    // // ES6
    // [a, ...rest] = list;
    
    // const [first, ...rest] = [1, 2, 3, 4, 5];
    // console.log(first);
    // console.log(rest);
    
    // const [first, ...rest] = [ ];
    // console.log(first);  // undefined
    // console.log(rest);  // []
    
    // const [first, ...rest] = ['foo'];
    // console.log(first);  // 'foo'
    // console.log(rest);  // []

    // // 【注意】 如果将扩展运算符用于数组赋值，则只能将其放在参数的最后一位，否则会报错
    // const [...butLast, last] = [1, 3, 4, 5];
    // console.log(butLast);  // Rest element must be last element




    // 应用3： 函数的返回值
    // JavaScript的函数只能返回一个值，如果需要返回多个值，只能返回数组或者对象
    // 扩展运算符提供了解决这个问题的一种变通方法
    // var arr = [12, 2, 5];
    // function pushNum(p_num){
    //     arr.push(p_num);
    //     return arr;
    // }
    
    // console.log(Math.max(...pushNum(34)));

    

    // 应用4:  字符串 
    // 扩展运算符可以将字符串转为真正的数组
    // console.log(...'Hello');

    // // 使用扩展运算符可以正确地识别32位Unicode字符
    // console.log('x\uD83D\uDE80y'.length );  // 4
    // console.log([...'x\uD83D\uDE80y'].length );  // 3

    // 【写法】正确返回字符串长度的函数
    // function getStrLength (str){
    //     return [...str].length;
    // }
    // console.log(getStrLength('x\uD83D\uDE80y'));

    // 使用reverse方法时，扩展运算符情况下，字符串reverse操作才是对的
    let str = 'x\uD83D\uDE80y';
    str.split('').reverse().join('');
    console.log(str);  // 'y\uDE80\uD83Dx'
    let str1 = 'x\uD83D\uDE80y';
    [...str1].reverse().join('');
    console.log(str1);  // 'y\uD83D\uDE80x'

    // 应用5： 实现了Iterator接口的对象
    // 任何Iterator接口的对象，都可以扩展运算符转为真正的数组
    // var nodeList = document.querySelectorAll('div');
    // console.log(nodeList);
    // var arr = [...nodeList];
    // console.log(arr);
    
    // 对于那些没有部署Iterator接口的类似数组的对象，扩展运算符无法将其转为真正的数组
    // let arrayLike = {
    //     '0': 'a',
    //     '1': 'b',
    //     '2': 'c',
    //     length: 3
    // };
    // let arr = [...arrayLike];  // 报错



    // 应用6： Map, Set结构和Generator函数
    // 扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用扩展运算符，如Map结构
    let map = new Map([
        [1, 'one'],
        [2, 'two'],
        [3, 'three']
    ]);

    let arr = [...map.keys()];
    console.log(arr);  // [1, 2, 3]

    // Generator函数会返回一个遍历器对象，因此也可使使用扩展运算符
    var go = function*(){  
        // 变量go是一个Generator函数，执行后返回的是一个遍历器对象，对这个遍历器对象执行扩展运算符即可将内部遍历得到的值转为一个数组
        yield 4;
        yield 2;
        yield 3;
    }
    console.log([...go()]);


    


    </script>


</body>

</html>