13

    技术2022-07-11  87

    ES6之前我们要把一个数组赋值给某一个变量时是这样做的

    <script> let arr = [1, 2, 3]; a = arr[0]; b = arr[1]; c = arr[2]; console.log("a的值为:" + a); console.log("b的值为:" + b); console.log("c的值为:" + c); </script>

    控制台输出:

    而ES6中,出现了结构赋值的做法

    <script> let arr = [1, 2, 3]; let [a, b, c] = arr; console.log("a的值为:" + a); console.log("b的值为:" + b); console.log("c的值为:" + c); </script>

    控制台输出:

    1.在数组的解构赋值中,等号左边的格式必须和等号右边的格式一模一样才能完全结构。

    <script> let [a, b, c] = [1, 2, [3, 4]]; console.log("a的值为:" + a); console.log("b的值为:" + b); console.log("c的值为:" + c); </script>

    控制台输出:

    正确做法是:

    <script> let [a, b, [c, d]] = [1, 2, [3, 4]]; console.log("a的值为:" + a); console.log("b的值为:" + b); console.log("c的值为:" + c); console.log("d的值为:" + d); </script>

    控制台输出:

    2.在数组的解构赋值中,左边的个数可以和右边的个数不一样。

    <script> let [a, b, c] = [1, 2]; console.log("a的值为:" + a); console.log("b的值为:" + b); console.log("c的值为:" + c); </script>

    控制台输出:

    <script> let [a, b, c] = [1, 2, 3, 4]; console.log("a的值为:" + a); console.log("b的值为:" + b); console.log("c的值为:" + c); </script>

    控制台输出:

    3. 在数组的解构赋值中,如果右边的个数和左边的个数不一样,我们可以给左边指定默认值。

    <script> let [a, b = 666, c = 888] = [1]; console.log("a的值为:" + a); console.log("b的值为:" + b); console.log("c的值为:" + c); </script>

    控制台输出:

    4.在数组的解构赋值中,如果左右两边数目不一样,那么设置的默认值会被覆盖

    <script> let [a, b = 666, c = 888] = [1, 2, 3]; console.log("a的值为:" + a); console.log("b的值为:" + b); console.log("c的值为:" + c); </script>

    控制台输出:

    5.在数组的解构赋值中,,还可以使用ES6中新增的扩展运算符来打包剩余数据,如果使用了扩展符,那么扩展运算符只能写在最后

    ES6新增的扩展运算符号: …

    <script> let [a, ...b] = [1, 2, 3]; console.log("a的值为:" + a); console.log("b的值为:" + b); </script>

    控制台输出:

    Processed: 0.013, SQL: 9