什么是解构赋值
解构赋值就是分解一个数据的结构，并从这数据解构中提取数据的过程，它可以从数组中取出值赋给变量或是将对象中的属性提取出来赋给另一个对象的属性；
解构的目的是为了简化提取数据的过程，增强代码的可读性；
把变量放在 [] 或者 {} 中来获取目标对象上的对应的值；
数组的解构赋值
基本用法
var [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
默认值
为了防止从数组中取出一个值为 undefined 的对象，可以在表达式的左边的数组中为任意变量预设一个默认的值；
在 ES6 中，判断一个数组中是否有值，使用严格相等运算符 （===） 来进行判断，只有当一个数组成员严格等于 undefined，默认值才会生效；
let [a = 3, b = 9] = [1]; // a=1 b=9
let [a, b = 1] = [10, '']; // a=10, b=''
let [a, b = 1] = [10, undefined]; // a=10, b=1
let [a = 1] = [null]; // a=null
交换变量
var a = 1;
var b = 4;
// 在交换 a、b 值时，需要借助中间的变量来中转，使用 ES6 解构赋值就很简单
[a, b] = [b, a] // a=4, b=1
跳过某项值使用逗号隔开
解构数组时，可以忽略不需要解构的值，可以使用逗号对解构的数组进行忽略操作，这样就不需要声明更多的变量去存值了；
在 a、b 中间用逗号隔开了两个值，可以看出逗号之间组成了多少间隔，就是间隔了多少个值；
var [a, , , b] = [10, 20, 30, 40];
console.log(a); // 10
console.log(b); // 40
剩余参数中的使用
可以借助展开语法把剩下的数组中的值，作为一个单独的数组；
…rest 是剩余参数的解构，所以只能放在数组的最后，在它之后不能再有变量，否则则会报错；
var [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
对象的解构赋值
基本用法
var obj = { name: 'hello', age: 7 };
var { name, age } = obj; // name: hello, age: 7
默认值
对象的默认值和数组的默认值一样，只能通过严格相等运算符 （===） 来进行判断，只有当一个对象的属性值严格等于 undefined，默认值才会生效；
var {a = 10, b = 5} = {a: 3}; // a = 3, b = 5
var {a = 10, b = 5} = {a: 3, b: undefined}; // a = 3, b = 5
var {a = 10, b = 5} = {a: 3, b: null}; // a = 3, b = null
重命名属性
var { a: x = 8, b: y = 3 } = { a: 2 };
console.log(x); // 2
console.log(y); // 3
剩余参数中的使用
var {a, c, ...rest} = {a: 1, b: 2, c: 3, d: 4}
console.log(a); // 1
console.log(c); // 3
console.log(rest); // { b: 2, d: 4 }
解构字符串
const [a, b, c, d, e] = 'hello';
console.log(a); // "h"
console.log(b); // "e"
console.log(c); // "l"
console.log(d); // "l"
console.log(e); // "o"
let { length: len } = 'hello';
console.log(len); // 5
解构复杂的数据结构
var data = {
a: 1,
arr: [
{
b: 2,
c: 3
}
]
}
var {
a: newA,
arr: [
{
b: newB
}
]
} = data;
console.log(newA, newB) // 1, 2
小结
解构赋值一般针对对象和数组，如果解构对象是 undefined 或是 null 都会报错；
默认值的生效条件是，只有当解构的对象的值是严格模式下的 undefined 的情况下，默认值才会生效；
可以不借助中间变量来交换两个值；
在解构复杂的数据解构时，注意声明的对象要和目标的对象有着相同的解构形式，才能去解构目标对象；
打赏作者
您的打赏是我前进的动力
微信
支付宝
ES6+ 展开语法、剩余参数
上一篇
评论
