学习前端第三十二天（Rest 参数与 Spread 语法，变量作用域，闭包）

一、Rest 参数与 Spread 语法

1.rest参数

...变量名：收集剩余的参数并存进指定数组中，需要放到最后；

2.arguments变量

        // arguments,以参数在参数列表中的索引作为键，存储所有参数,以类数组对象的形式输出所有函数参数

        // 箭头函数没有arguments和this对象，会去上级函数找，没有上级函数就报错

        function fn3(a, b, ...c) {

            console.log(arguments);

            console.log(Array.from(arguments)); // 转为数组

        }

        fn3(1, 2, 3, 4, 5, 6);

3.Spread 语法

使用...,把任意可迭代对象“展开”到参数列表中

        // 可传入多个可迭代对象

        const arr2 = [9, 77, 85, 12, 33];

        console.log(Math.max(...arr, ...arr2)); // 85

        // 可以与常规值结合使用

        console.log(Math.max(1, ...arr, 2, ...arr2, 25)); //85

        // 合并数组

        let sumArr = [0, ...arr, ...arr2];

        // 常用的复制数组方法

        let arr4 = [...arr];

使用 spread 语法将任意可迭代对象转换为字符数组

        let str = "Hello";

        console.log([...str]);  // ['H', 'e', 'l', 'l', 'o']

        let s = new Set();

        s.add("css").add("html");

        console.log([...s]);  // ['css', 'html']

        let m = new Map();

        m.set("name", "jack").set("age", 20)

        console.log([...m]);  // [Array(2), Array(2)]

4.浅复制/深复制

浅复制：

        // “001” => ["a","b","c"];
        // const arr = [1, "001", 2, 3];
        const arr = [1, ["a", "b", "c"], 2, 3];

        // 浅复制，修改一个影响到另一个
        const newArr = [...arr]; // [1, "001", 2, 3]; 
        newArr[1][0] = "X";
        console.log(arr);//[1, ['X', 'b', 'c'], 2, 3]

深复制方法一：

        // “001” => ["a","b","c"];
        // const arr = [1, "001", 2, 3];
        const arr = [1, ["a", "b", "c"], 2, 3];

        // 深复制，修改一个不会影响到另一个
        const newArr = JSON.parse(JSON.stringify(arr)); // [1, "001", 2, 3];
        newArr[1][0] = "X";
        console.log(newArr);  //[1, ['X', 'b', 'c'], 2, 3]
        console.log(arr);  //[1, ['a', 'b', 'c'], 2, 3]

 方法二方法三：

 <script src="../../../lodash.min.js"></script>
    <script>
        //  深度复制复杂对象 (面试题)
        const o1 = { a: undefined, b: function () { }, list: [1, 2, 3] };

        // 方法一：JSON.parse(JSON.stringify(o1))，无法复制复杂的
        // 方法二：递归深度赋值
        Object.entries(o1).forEach((el) => {
            if (Array.isArray(el[1])) {
                newObj[el[0]] = [];
                el[1].forEach((elx) => {
                    newObj[el[0]].push(elx);
                });
            } else {
                newObj[el[0]] = el[1];
            }
        });

        // 方法三：第三方代码，引用js文件后，使用里面规定的代码实现
        const newObj = _.cloneDeep(o1);
        console.log(newObj)

二、变量作用域，闭包

1.代码块

如果在代码块 {...} 内声明了一个变量，那么这个变量只在该代码块内可见。

对于 if，for 和 while 等，在 {...} 中声明的变量也仅在内部可见。

let i 位于 {...} 之外。但是 for 构造很特殊：在其中声明的变量被视为块的一部分。

2.嵌套函数（重要）

 如果一个函数是在另一个函数中创建的，该函数就被称为“嵌套”函数。

function makeCounter() {
  let count = 0;

  return function() {
    return count++;
  };
}

let counter = makeCounter();

alert( counter() ); // 0
alert( counter() ); // 1