什么是数组的解构赋值
解构赋值是 ES6 中新增的一种赋值方式。
数组解构赋值的注意点
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let arr = [1, 3, 5];
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log("a = " + a);
console.log("b = " + b);
console.log("c = " + c);
console.log("********************");
let [d, e, f] = arr;
console.log("d = " + d);
console.log("e = " + e);
console.log("f = " + f);
</script>
</head>
<body>
</body>
</html>
在数组的解构赋值中, 等号左边的格式必须和等号右边的格式一模一样, 才能完全解构。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let [a, b, c] = [1, 3, 5];
let [d, e, f] = [1, 3, [2, 4]];
let [g, h, [i, j]] = [1, 3, [2, 4]];
console.log("a = " + a);
console.log("b = " + b);
console.log("c = " + c);
console.log("d = " + d);
console.log("e = " + e);
console.log("f = " + f);
console.log("g = " + g);
console.log("h = " + h);
console.log("i = " + i);
console.log("j = " + j);
</script>
</head>
<body>
</body>
</html>
在数组的解构赋值中, 左边的个数可以和右边的个数不一样。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let [a, b] = [1, 3, 5];
console.log("a = " + a);
console.log("b = " + b);
</script>
</head>
<body>
</body>
</html>
在数组的解构赋值中, 右边的个数可以和左边的个数不一样。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let [a, b, c] = [1];
console.log("a = " + a);
console.log("b = " + b);
console.log("c = " + c);
</script>
</head>
<body>
</body>
</html>
在数组的解构赋值中, 如果右边的个数和左边的个数不一样, 那么我们可以给左边指定默认值。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let [a, b = 666, c = 888] = [1];
console.log("a = " + a);
console.log("b = " + b);
console.log("c = " + c);
</script>
</head>
<body>
</body>
</html>
在数组的解构赋值中, 如果左边的个数和右边的个数不一样, 那么如果设置默认值会被覆盖。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let [a, b = 666] = [1, 3, 5];
console.log("a = " + a);
console.log("b = " + b);
</script>
</head>
<body>
</body>
</html>
- 在数组的解构赋值中, 还可以使用 ES6 中新增的扩展运算符来打包剩余的数据。
- 在数组的解构赋值中, 如果使用了扩展运算符, 那么扩展运算符只能写在最后。
- ES6 中新增的
扩展运算符:...
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let [a, b] = [1, 3, 5];
let [c, d] = [1, 3, 5];
let [e, f] = [1, 3, 5];
console.log("a = " + a);
console.log("b = " + b);
console.log("c = " + c);
console.log("d = " + d);
console.log("e = " + e);
console.log("f = " + f);
</script>
</head>
<body>
</body>
</html>
