在学习ES6的解构赋值之前,我们先了解一下ES5中,如果想要获取某个属性的值,我们一般采用obj.属性名
ES5
const person = {
name: "木柔",
age: 20,
sex: "女"
}
console.log(person.name);
console.log(person.age);
console.log(person.sex);
解构赋值
const person = {
name: "木柔",
age: 20,
sex: "女"
}
const {name,age,sex}=person;
console.log(name,age,sex);
常见的解构赋值有3种:
对象的解构赋值
开发技巧
1.指定别名
function fn(user) {
const {name:userName,age:userAge}=user;
console.log(`${userName},${userAge}`);//木柔,23
}
const name="木柔";
const age=23;
fn({name,age})
2.部分解构
function fn(user) {
const {name}=user;
console.log(`用户名:${name}`);//木柔
}
const name="木柔";
const age=23;
fn({name,age})
3.嵌套解构
function fn (user) {
const { name: { firstname, lastname } } = user;
console.log(`姓:${firstname}`);//姓:木
console.log(`名:${lastname}`);//名:柔
}
const user = {
name: {
firstname: "木",
lastname: "柔"
},
age: 23
}
fn(user);
4.解构方法
const {max,min}=Math;
console.log(max(1,2,3));//3
console.log(min(1,2,3));//1
//分析
//对象的方法本质上就是对象的属性,只不过这个属性的值是一个函数而已。如果一个对象有很方法,我们只需要用到其中几个的话,就可以像上面的例子这样进行解构赋值。
上面这个例子等价于下面的代码:
console.log(Math.max(1,2,3));
console.log(Math.min(1,2,3));
数组的解构赋值
数组解构和对象解构其实是非常相似的,两者都可以进行这些操作:完全解构、部分解构、嵌套解构。
1.完全解构
const [a,b,c]=[20,30,40];
const result=a+b+c;
console.log(result);//90
2.部分解构
const [a,b]=[20,30,40];
console.log(a);//20
console.log(b);//30
3.嵌套解构
const [a,b,[c,d]]=[20,30,["html","css"]];
console.log(c);//html
console.log(d);//css
深入了解数组解构
应用场景
总结
字符串解构
字符串其实是一个类数组,因此我们也可以对字符串进行解构赋值。
let [a,b,c,d]="我爱代码";
console.log(a);//我
//分析
//既然字符串是一个类数组,我们也可以使用数组解构赋值的其他功能,比如默认值、连续逗号。