1、ES6数组与对象的解构赋值详解
八、知识拓展
1、ES6数组与对象的解构赋值详解
数组的解构赋值
基本用法
ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称之为解构(Destructuring)
// 以前为变量赋值，只能直接指定值
var a = 1;
var b = 2;
var c = 3;
// ES6允许写成这样
var [a,b,c] = [1,2,3];本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
下面是一些使用嵌套数组进行解构的例子：
let [foo,[[bar],baz]] = [1,[[2],3]];
foo // 1
bar // 2
baz // 3
let [,,third] = ["foo","bar","baz"];
third // "baz"
let [head,...tail] = [1,2,3,4];
head // 1
tail // [2,3,4]
let [x,y,...z] = ['a'];
x // "a"
y // undefined
z // []
默认值
解构赋值允许制定默认值
var [foo = true] = [];
foo // true
[x,y='b'] = ['a'];
// x='a', y='b'
注意，ES6内部使用严格相等运算符(===)，判断一个位置是否有值。
所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。
var [x=1] = [undefined];
x //1
var [x=1] = [null];
x // null
如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值：
function f(){
console.log('aaa');
}
let [x=f()] = [1];上面的代码中，因为x能取到值，所以函数f()根本不会执行。上面的代码其实等价于下面的代码：
let x;
if([1][0] === undefined){
x = f();
}else{
x = [1][0];
}默认值可以引用解构赋值的其他变量，但该变量必须已经声明：
let [x=1,y=x] = [];
// x=1; y=1
let [x=1,y=x] = [2];
// x=2; y=2
let [x=1,y=x] = [1,2];
// x=1; y=2
let [x=y,y=1] = []; // ReferenceErro
上面最后一个表达式，因为x用到默认值是y时，y还没有声明。
对象的解构赋值
1、最简单的案例
看下面的案例
let person = {
name: 'yhb',
age: 20
}
/*
注意：下面虽然看起来是创建了一个对象，对象中有两个属性 name 和 age
但是：其实是声明了两个变量
name:等于对象person 中的name属性的值
age：等于对象person 中的 age属性的值
*/
let { name, age } = person
console.log(name,age)
如上面注释中所说，声明了变量 name和age，然后分别从对象person中寻找与变量同名的属性，并将属性的值赋值给变量
所以，这里的关键，就是首先要知道对象中都有哪些属性，然后再使用字面量的方式声明与其同名的变量
2、属性不存在怎么办
如果不小心声明了一个对象中不存在的属性怎么办？
或者，实际情况下，可能是我们就是想再声明一个变量，但是这个变量也不需要从对象中获取值，这个时候，此变量的值就是 undefined
let person = {
name: 'yhb',
age: 20
}
let { name, age,address } = person
console.log(name,age,address)此时，可以给变量加入一个默认值
let { name, age,address='北京' } = person
1
3、属性太受欢迎怎么办
当前声明了 name 和 age 变量，其值就是person对象中name和age属性的值，如果还有其他变量也想获取这两个属性的值怎么办？
let { name, age, address = '北京' } = person
console.log(name, age, address)
let { name, age } = person
console.log(name, age)
上面的方法肯定不行，会提示定义了重复的变量 name 和 age
那怎么办呢？
难道只能放弃结构赋值，使用老旧的方式吗？
let l_name=person.name
let l_age=person.age
console.log(l_name,l_age)其实不然！
let {name:l_name,age:l_age}=person
console.log(l_name,l_age)说明：
声明变量 l_name 并从对象person中获取name属性的值赋予此变量
声明变量 l_age， 并从对象person中获取age属性的值赋予此变量
这里的重点是下面这行代码
let {name:l_name,age:l_age}=person
1
按照创建对象字面量的逻辑，name 为键，l_name 为值。但注意，这里是声明变量，并不是创建对象字面量，所以争取的解读应该是
声明变量 l_name，并从person 对象中找到与 name 同名的属性，然后将此属性的值赋值给变量 l_name
所以，我们最后输出的是变量 l_name和l_age
console.log(l_name,l_age)
当然这种状态下，也是可以给变量赋予默认值的
let { name:l_name, age:l_age, address:l_address='北京' }=person4、嵌套对象如何解构赋值
let person = {
name: 'yhb',
age: 20,
address: {
province: '河北省',
city: '保定'
}
}
// 从对象 person 中找到 address 属性，并将值赋给变量 address
let {address}=person
// 从对象 address 中找到 province 属性，并将值赋给变量 province
let {province}=address
console.log(province)上面代码一层层的进行结构赋值，也可以简写为如下形式
let {address:{province}}=person 1
从peson 对象中找到 address 属性，取出其值赋值给冒号前面的变量 address，然后再将 变量address 的值赋值给 冒号 后面的变量 {province}，相当于下面的写法
let {province}=address1
字符串的解构赋值
1、字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
