解构赋值语法是一种Javascript表达式。可以通过简单的方式将值从数组或对象中取出来,赋给变量。
为什么要解构
在Javascript开发中我们经常会用到对象和数组的值,在ES6以前,都是通过.或者[]来取值,每个值都要声明一个变量来保存,写起来很麻烦。有了解构赋值之后,我们的代码量就减少了很多。
举个例子,让我们来取出数组中的每个元素,并分别用变量保存。
const arr = [1, 2, 3];
/* 常规方式 */
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a, b, c); // 1 2 3
/* 解构 */
let [num1, num2, num3] = arr;
console.log(num1, num2, num3); // 1 2 3
通过这个例子就能看出使用解构是真省事啊
解构的使用
数组的解构赋值
语法:
const [a, b] = array;
const [a, , b] = array;
const [a = aDefault, b] = array;
const [a, b, ...rest] = array;
const [a, , b, ...rest] = array;
const [a, b, ...{ pop, push }] = array;
const [a, b, ...[c, d]] = array;
注:数组元素是按顺序排列的,变量的取值由它的位置决定。
示例:
let a, b, c, rest;
[a, b] = [1, 2]; // a=1 b=2
[a, b, c] = [1, 2]; // a=1 b=2 c=undefined
[a = 4, b, c = 3] = [1, 2]; // a=1 b=2 c=3
[a, , b] = [1, 2, 3]; // a=1 b=3
[a, b, ...rest] = [1, 2, 3, 4, 5, 6]; // a=1 b=2 rest=[3,4,5,6]
对象的解构赋值
语法:
const { a, b } = obj;
const { a: a1, b: b1 } = obj;
const { a: a1 = aDefault, b = bDefault } = obj;
const { a, b, ...rest } = obj;
const { a: a1, b: b1, ...rest } = obj;
const { [key]: a } = obj;
注:与数组不同的是,对象的属性没有顺序,所以变量名必须与属性名相同,才能取到正确的值。
示例:
const { name, age } = { name: "张三", age: 20 }; // name = "张三" age = 20
const { sex } = { name: "张三", age: 20 }; // sex = undefined,因为对象中没有属性为sex的值
如果要变量名和属性名不同的写法,必须这样写:
const { name: a, age: b } = { name: "张三", age: 20 }; // a = "张三" b = 20