1、使用数组成员对变量赋值时,优先使用解构赋值。
const arr=[3,54,6,6];
//这是不好的写法
const first=arr[0];
const second=arr[1];
//最佳表示
const [first,second]=arr; //first:3 second:54
2、函数的参数如果是对象的成员,优先使用解构赋值。
function getFullName(user){
const firstName= user.firstName;
const lastName=user.lastName;
}
//以上写法可以利用解构赋值优化 可优化成以下样式
function getFullName(obj){
const {firstName,lastName}=obj;
}
//最佳写法如下:
function getFullName({firstName,lastName}){}
3、如果函数返回多个值,优先使用对象的解构赋值,而不是数组的解构赋值。
function processInput(input){
return [left,right,top,bottom];
}
//以上写法不利于以后添加值,以及更改返回值的顺序。
//以对象的形式作为返回值,是最佳的,便于以后添加返回值,以及更改返回值的顺序。
function processInput(input){
return {left,right,top,bottom};
}
const {left,right}=processInput(input);
总结:解构赋值是我们ES6里面新添加的一个特性,主要是用在从数组与对象中提取数据,直接对应的获取就ok了;比起ES5里面的获取数据要更加简洁,清晰易懂,还能达到减少代码量的目的。
4、由以上的分解,可清晰的了解到解构赋值分为两种: 数组解构 与 对象解构。
数组解构的深层嵌套:
const arrs = [ 'simth', ['Tom', 'Rose'], ['Tony', 'James'] ]; // 数组解构赋值 const [firstName, [secondName, threeName], [fourName, fiveName]] = arrs;
const arrs = [ 'simth', ['Tom', 'Rose'], ['Tony', 'James'] ]; // 数组解构赋值 const [firstName, [secondName, threeName], [fourName, fiveName]] = arrs;
//上面的得到的结果值 // firstName = 'simth // second = 'Tom' // threeName = 'Rose' // fourName = 'Tony' // fiveName = 'James'
5、利用数组解构深层次的解构一个值出来。// 从该数组中提取 出Rose const arrs = [ 'simth', [['Tom', 'Rose'], 'Steve'], ['Tony', 'James'] ]; // Destructure const [ , // 跳过 'simth' [[ , // 跳过 'Tom' Name // Rose 赋值给变量 'Name' ]]] = arrs; // 请注意:你也可以这样写 // const [, [[, Name ]]] = arrs; // 输出 Name: rose Name;
6、除了以上的情况,还可以利用rest(...)操作符捕获所有剩下的数值。const arrs = [ 'simth', ['Tom', 'Rose'], ['Tony', 'James'] ]; // 数组解构赋值 const [firstName, ...Names] = arrs; //[...Names]=[['Tom','Rose'],['Tony','James']];
7、对象解构赋值://简单的对象解构赋值 const {name:a}={name:'simth'}; //输出变量 a 为 simth。
// 创建对象,并在对象里提取多个属性值: const obj = { ironMan: 'Tony Stark', cap: 'Steve Rogers', blackWidow: 'Natasha Romanoff' }; // 解构对象进行单个的获取 const { ironMan: a, cap: b, blackWidow: c } = avengers; // a = 'Tony Stark ' // b = 'Steve Rogers' // c ='Natasha Romanoff' // 输出 a:Tony Stark a;
ES6里面的解构赋值操作的使用参考:最深刻而易懂的ES6解构教程。 以及阮一峰的ES6基础入门。