变量的解构赋值

一.变量的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构.

解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者 obj[key]等传统方式进行赋值

1.数组的解构赋值

常规方法：

// let arr = [1, 2, 3, 4, 5];

// let a = arr[0];

// let b = arr[1];

// let c = arr[2];

// let d = arr[3];

// let e = arr[4];

// console.log(a, b, c, d, e); //1 2 3 4 5

解构实现：

// let arr = [1, 2, 3, 4, 5];

// let [a, b, c, d, e] = arr;

// console.log(a, b, c, d, e); //1 2 3 4 5

换一种写法，而且左右不匹配不影响输出，不会产生错误。如果要赋值的变量比数组项少，则按照顺序赋值；如果要赋值的的变量大于数组项，那么多出来的变量相当于未被赋值。

// let [a, b, c, d, e] = [1, 2, 3, 4, 5];

// console.log(a, b, c, d, e); //1 2 3 4 5

// let [a1, b1, c1, d1, e1] = [1, 2, 3, 4];

// console.log(a1, b1, c1, d1, e1); //1 2 3 4 undefined

// let [a2, b2, c2] = [1, 2, 3, 4];

// console.log(a2, b2, c2); //1 2 3

// let [a, b, [c, d, [e, f, [g, h, [i, j]]]]] = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]

// console.log(a, b, c, d, e, f, g, h, i, j); //1 2 3 4 5 6 7 8 9 10

2.对象的解构赋值 - 重点

对象是无序的，解构变得重要，而且跟后面学的模块化有关系。

解构的变量名必须和属性名相同，但是也可以修改

// const obj = {

// a: 1,

// b: 2,

// c: 3

// };

// let {

// c,

// a,

// b

// } = obj;

// console.log(a, b, c);//1, 2, 3

// const obj = {

// xingming: ‘zhangsan’,

// age: 18,

// sex: ‘男’

// };

// let {

// age

// } = obj;

// console.log(age);//18

修改名称，如果要修改名称，需要在原对象key键后面加上冒号，再将要赋值的变量名写在冒号后面，多个变量之间用逗号隔开

// let {

// xingming: username

// } = obj;

// console.log(username); //zhangsan

// console.log(xingming); //没有值，报错

3.对象配置函数进行解构操作

// function fn({ name,age,sex} = { name: ‘wangwu’,age: 20, sex: ‘女’ }) {

// console.log(‘我的名字叫’ + name + ‘,我今年’ + age + ‘岁，我是’ + sex + ‘的’);

// }

// 调用时如果没有传入实参，使用解构后面的默认参数，如果传入实参，使用传入的参数。

// fn({

// name: ‘zhangsan’,

// age: 18,

// sex: ‘男’

// });