对象解构赋值

JS |

说明

在 JS 中，有一个表达式是解构，它允许从对象或数组中提取值，并将值赋给变量。在开发中使用，能让我们的代码变得更加简洁。

比如：

1
2
3
4
5
6
7
8
var person = ['John', 30, 'New York']
var name = person[0]
var age = person[1]
var city = person[2]

// 使用解构后
var person = ['John', 30, 'New York']
var [name, age, city] = person

对象解构

以下的赋值语法默认使用了 ES6，部分老旧的浏览器是不支持这样赋值的。
对对象而言，解构赋值相当于为多个属性创建不同的变量名，例如:

1
2
3
4
5
6
7
8
const person = {
  name: 'John',
  age: 30,
  city: 'New York' 
}

const { name, age } = person; // 这个是 ES6 新增的解构赋值
// name = 'John', age = 30

这里我们从 person 对象中解构出 name 和 age 属性，分别赋值给同名变量。这是一个非常实用的语法，可以让我们快速从对象中获取所需的属性。

非 ES6 语法进行赋值

1
2
3
4
5
6
7
8
9
10
11
12
// 对象
const person = {
  name: 'John',
  age: 30 
}; 
const name = person.name;
const age = person.age;

// 数组
const fruits = ['Apple', 'Orange', 'Banana'];
const first = fruits[0];
const second = fruits[1];

解构的变量名不需要与属性同名，我们可以在解构语句中自定义变量名：

1
2
const { name: firstName, age } = person;
// firstName = 'John', age = 30

这里我们将 name 属性解构到 firstName 变量。解构赋值语句可以有默认值，这样即使属性不存在，变量也会有值：

1
2
3
4
5
const { name, age = 20 } = person; 
// name = 'John', age = 30

const { name, height = 180 } = person; 
// name = 'John', height = 180

height 属性不存在，所以 height 变量取默认值 180。

解构嵌套对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
const user = {
  name: 'John',
  age: 30,
  address: {
    street: 'Main St',
    city: 'New York',
    state: 'NY' 
  }
}

const { address: { street, city } } = user;
// street = 'Main St'
// city = 'New York'

数组解构

我们上面举的例子都是对象解构，下面说明数组解构，也是类似的：
基本语法是：

1
2
let [x, y] = [1, 2];
// x = 1, y = 2

交换变量的值：

1
2
3
4
5
let a = 1;
let b = 2;

[a, b] = [b, a];
// a = 2, b = 1

这里我们从数组中解构出 x 和 y 两个值。如果解构不成功,值就等于 undefined：

1
2
let [x, y] = [1];
// x = 1, y = undefined

解构可以嵌套，从多维数组中解构：

1
2
let [x, [y], z] = [1, [2], 3]; 
// x = 1, y = 2, z = 3

解构也可以有默认值：

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

let [x, y = 3] = [1, null]; 
// x = 1, y = null // null 被认为是一个合法的值，所以 y 取值为 null 而非默认值 3。

数组解构赋值经常用于从函数返回多个值,并直接赋给不同的变量。例如：

1
2
3
4
5
6
7
8
9
function getUser() {
  return [
    'John',
    30
  ]
}

let [name, age] = getUser();
// name = 'John', age = 30

我们从 getUser() 的返回值中直接解构出 name 和 age 变量。