从ES6开始认识Javascript中的解构赋值

2023-09-29 00:07:26

ES6中的Javascript解构

ES6中的解构赋值是一个非常实用的特性，它可以让我们从对象（Object）或者是数组（Array）中更方便地取值，同时写出来的代码在可读性方面也更强。之前接触过python语言的小伙伴应该对这个不会陌生，这个特性早已在python中实现了。在python中，我们可以通过下面的代码来取值：

person = {'name': 'John', 'age': 30, 'city': 'New York'}

name, age, city = person['name'], person['age'], person['city']

print(name)  # John
print(age)  # 30
print(city)  # New York

而在ES6中，我们也可以使用类似的方式来取值：

const person = { name: 'John', age: 30, city: 'New York' };

const { name, age, city } = person;

console.log(name);  // John
console.log(age);  // 30
console.log(city);  // New York

这种方式在可读性方面显然要优于传统的方式，尤其是当我们要从一个对象中取多个值的时候。另外，解构赋值还支持很多其他的特性，比如默认值、展开运算符、嵌套解构和参数解构等，这些特性使得解构赋值变得更加灵活和强大。

对象解构

对象解构允许我们从一个对象中提取特定的属性，并将其赋给变量。我们可以使用花括号（{}）来表示我们要提取的属性，并使用冒号（:）来将属性名与变量名相关联。例如：

const person = { name: 'John', age: 30, city: 'New York' };

const { name, age } = person;

console.log(name);  // John
console.log(age);  // 30

如果我们只想提取对象中的一部分属性，我们可以使用逗号（,）来分隔这些属性名。例如：

const person = { name: 'John', age: 30, city: 'New York' };

const { name, age } = person;

console.log(name);  // John
console.log(age);  // 30

数组解构

数组解构允许我们从一个数组中提取特定的元素，并将其赋给变量。我们可以使用方括号（[]）来表示我们要提取的元素，并使用逗号（,）来分隔这些元素。例如：

const numbers = [1, 2, 3, 4, 5];

const [first, second, third] = numbers;

console.log(first);  // 1
console.log(second);  // 2
console.log(third);  // 3

如果我们只想提取数组中的一部分元素，我们可以使用逗号（,）来分隔这些元素。例如：

const numbers = [1, 2, 3, 4, 5];

const [first, , third] = numbers;

console.log(first);  // 1
console.log(third);  // 3

默认值

解构赋值还支持默认值，这使得我们可以为不存在的属性或元素指定一个默认值。例如：

const person = { name: 'John' };

const { name, age = 30 } = person;

console.log(name);  // John
console.log(age);  // 30

如果对象中存在age属性，那么age的值将被赋给变量age。否则，age的值将被赋给默认值30。

展开运算符

展开运算符（...）允许我们将一个数组或对象的元素展开成一个新的数组或对象。例如：

const numbers = [1, 2, 3, 4, 5];

const newNumbers = [...numbers, 6];

console.log(newNumbers);  // [1, 2, 3, 4, 5, 6]

上面的代码中，我们将numbers数组中的元素展开成一个新的数组newNumbers，并在newNumbers数组的末尾添加了一个元素6。

嵌套解构

解构赋值还可以用于嵌套对象和数组。例如：

const person = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    state: 'NY'
  }
};

const { name, age, address: { city, state } } = person;

console.log(name);  // John
console.log(age);  // 30
console.log(city);  // New York
console.log(state);  // NY

上面的代码中，我们将person对象中的name、age和address属性解构出来，并将address对象中的city和state属性解构出来。

参数解构

解构赋值还可以用于函数的参数。例如：

function printPerson({ name, age }) {
  console.log(name);  // John
  console.log(age);  // 30
}

const person = { name: 'John', age: 30 };

printPerson(person);