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基础入门。