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>控制台输出: