ES6 学习 -- 解构赋值

一、数组解构

**数组解构，解构出来的值跟数组下标是一一对应的，如果左边变量多于右边数组，则左边后面部分变量值为undefined，如果右边数组元素个数多于左边解构变量个数，则左边变量全都有值，且一一对应

1.简单解构
let arr = [1, 2, 5];
let [a , b , c] = arr; // a=1, b=2, c=5

2.复杂解构
let [a, [b, [c]], d] = [1, [2, [3]], 4]; // a=1, b=2, c=3, d=4

 

二、对象解构
**对象解构，键名顺序不用考虑，只要有对应的键名，就能获取键值

1.简单解构（新定义的变量名与键名相同时）
let obj = { name: 'lucy', age: 18};
let {age, name} = obj; // name:'lucy', age: 18

2.简单解构（新定义的变量名与对象键名不同时，冒号“：”右边是新定义的变量名，左边为原对象的键名）
let obj = { name: 'lucy', age: 18};
let {age: userAge, name: userName} = obj; //此时 userName：‘lucy’, userAge: 18

3.复杂对象解构
let obj = {
status: 200,
id: 123,
data: [{name: '苹果', price: 5}, {name: '葡萄', price: 6}, {name: '香蕉', price: 3.5}]
}
let {status: goodsStatus, id: goodsId, data: resultData} = obj;
// console.log(goodsStatus) // 200,
// console.log(goodsId) // 123,
// console.log(resultData) // [{name: '苹果', price: 5}, {name: '葡萄', price: 6}, {name: '香蕉', price: 3.5}],

 

三、其他解构

1.字符串长度获取:
(1)、ES5字符串长度方法：string.length();
(2)、ES6字符串长度解构：let {length} = string; // 此时length即为字符串string的长度值

2.字符串解构:将字符串解构成一个数组，然后赋值：
let [a, b, c] = string; // 将字符串中的每个字符拆分，然后像数组一样进行解构赋值
例如：let [a, b, c] = "hello"; // a="h", b="e", c="l"

3.函数传参解构
let arr = [1, 2];
let obj = {a:1, b:2};
function test() {
console.log(a);
console.log(b);
}
test(arr); // a=1, b=2, 函数的参数arr此时被解析成 test([a, b])，但是有个隐患，参数是根据下标顺序来的， 如果数组有多个元素，但是我们只需要其中一些元素，那么传参就不行了，所有最好使用对象进行传参
test(obj); // a=1, b=2 函数test解析成test({a, b}),此时参数a, b顺序可以随意打乱，只要对象中有键名a、b即可

**函数test(a, b)参数的默认值设置
在ES5中，参数默认值设置一般为：a = a || 10;

ES6中，可以这样设置test(a=10, b); // 如果实参没有传入参数a时，启用参数a的默认值，此时参数a=10