JS 解构赋值

458 阅读2分钟

解构赋值语法是一种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