0
点赞
收藏
分享

微信扫一扫

解构赋值(ES6)

承蒙不弃 2022-05-01 阅读 205
es6

在学习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);//我

//分析
//既然字符串是一个类数组,我们也可以使用数组解构赋值的其他功能,比如默认值、连续逗号。
举报

相关推荐

0 条评论