在es6以前,我们常用arr[i]的形式,来获取下标为i的数组值;在es6里面提供了解构,使我们的代码更加简洁;
比如:
var arr = [1, 2, 3];
//传统方式
var a = arr[0],
b = arr[1],
c = arr[2];
在es6语法中解构赋值,就简洁了很多。
var [a, b, c] = arr;
console.log(a);//1
console.log(b);//2
console.log(c);//3
对嵌套数组解构:
var arr = [[1, 2, [3, 4]], 5, 6];
var [[a, b, [c, d]], e, f] = arr;
console.log(d);//4
console.log(f);//6
console.log(a);//1
更好的是函数传参解构:
var arr = [1, 2, 3];
function fn1([a, b, c]) {
console.log(a);
console.log(b);
console.log(c);
}
fn1(arr);
//1
//2
//3
对象传参解构
var obj = {
name: 'jack',
sex: 'male',
age: 26,
son: {
sonname: 'bill',
sonsex: 'male',
sonage: 1
}
};
function fn2({sex, age, name}) {
console.log(name + ' ' + sex + ' ' + age);
}
箭头函数写法: const f3 =({sex,age,name})=>{
console.log(name + ' ' + sex + ' ' + age);
}
fn2(obj);
//jack male 26
f3(obj);
//jack male 26
变量名与对象属性名不一致解构:
var obj = {
name: 'jack',
sex: 'male',
age: 26
};
var { name: nickname, age: howold } = obj;
console.log(nickname + ' ' + howold); //jack 26
嵌套对象解构:
var obj = {
name: 'chris',
sex: 'male',
age: 26,
son: {
sonname: 'bill',
sonsex: 'male',
sonage: 1
}
};
var {name, sex, age, son: {sonname, sonsex, sonage}} = obj;
console.log(sonname + ' ' + sonsex + ' ' + sonage);
//bill male 1
循环解构对象:
var arr = [{name: 'jack', age: 26}, {name: 'bill', age: 27}, {name: 'rose',age: 28}];
for (let {age, name} of arr) {
console.log(name + ' ' + age);
}
//jack 26
//bill 27
//rose 28