一、 对象的解构
对象结构赋值的语法就是在表达式的左侧使用了对象的字面量方式,将对象中的值赋值到左侧相同的变量上。语法如下:
let obj = {
name: '姓名',
age: '年龄'
}
let { name, age } = obj;
console.log(name, age); // 姓名 年龄
上面的对象结构都用于变量声明,也可以在赋值的时候使用解构,在声明变量后改变他们的值(注意:必须用圆括号包裹解构赋值语句,否则报语法错误)。语法如下:
let obj = {
name: '姓名',
age: '年龄'
},
name = 'lilei',
age = '20';
({ name, age } = obj);
console.log(name, age); // 姓名 年龄
默认值
当使用解构赋值语句时,如果所指定的本地变量在对象中没有找到同名属性,那么该变量 会被自动赋值为 undefined 。例如:
let obj = {
name: '姓名',
age: '年龄'
};
let { sex, name } = obj;
console.log(sex, name); // undefined "姓名"
赋值给不同的本地变量名
前面所说的都是将取出来的值赋值到本地变量上,有时候我们并不想使用这些变量,而想使用其他的变量名称这种语法也是支持的。它会先取出对象中的值并赋值到新定义的变量上,并且还支持添加默认值,当取不到的时候就使用默认值(如sex给设置默认值为‘男’,取不到值得时候不再显示undefined)。例如:
let obj = {
name: '姓名',
age: '年龄'
};
let { name: localName, age: localAge, sex: localSex = '男'} = obj;
console.log(localName, localAge, localSex); // 姓名 年龄 男
嵌套的对象解构
嵌套对象得解构和单层对象得结构赋值比较类似,需要先取出外层得值,在解构取出内层嵌套得值。例如:
let obj = {
name: {
nameOne: '姓名One',
nameTwo: '姓名Two'
},
age: '年龄',
};
let { name: { nameOne } } = obj;
console.log(nameOne); // 姓名One
二、数组得解构
数组解构有点与对象得解构类似,不过数组得解构不是作用在具体得属性名上,而是作用在值得内部位置上,根据位置进行赋值。 如:
let arr = ['姓名', '年龄'];
let [name, age] = arr;
console.log(name, age); // 姓名 年龄
取出指定位置的值
如果我们只想取第二个或者第三个值,那么只需要把需要取值得前几位进行占位就可以了。如:
let arr = ['姓名', '年龄'];
let [, age] = arr;
console.log(age); // 年龄
默认值
数组解构中同样支持没有取到值时设置默认值。如:
let arr = ['姓名', '年龄'];
let [, age, sex = '性别'] = arr;
console.log(age, sex); // 年龄 性别
嵌套得解构
数组嵌套得解构和单个解构类似,只需要在解构得位置插入[]就可以。如:
let arr = ['姓名', ['年龄']];
let [, [age], sex = '性别'] = arr;
console.log(age, sex); // 年龄 性别
数组解构的剩余项
前面得值进行解构后,可以使用 … 语法来将剩余的项目赋值给一个指定的变量,这个变量为没有解构得剩余值组成得数组。注意:剩余解构变量只能放在最后面。例如:
let arr = ['姓名', '年龄', '性别'];
let [name, ...data] = arr;
console.log(name, data); // 姓名 ["年龄", "性别"]
利用数组解构交换两个变量得值
在es5得时候交换两个变量需要声明第三个变量,作用中间层来实现,使用数组解构赋值来实现就不需要声明其他得变量了。如:
let a = 1,
b = 2;
[b, a] = [a, b];
console.log(a, b); // 2 1
三、混合解构
在我们平时开发中,接口返回得数据经常是对象和数组进行嵌套返回得,解构赋值同样也可以进行混合嵌套解构。例如:
let obj = {
name: {
nameOne: '姓名One',
nameTwo: '姓名Two'
},
age: ['年龄1', '年龄2']
};
let {
name: { nameOne },
age: [age1]
} = obj;
console.log(nameOne, age1); // 姓名One 年龄1
网友评论