优雅而高效的JavaScript——解构赋值

原创

已于 2023-10-11 19:51:04 修改 · 2.6k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-10-11 19:46:09 首次发布

本文详细介绍了JavaScript中的解构赋值，包括数组和对象的解构、默认值、剩余参数的应用，以及其在代码简化、可读性提升、异步操作处理等方面的优势，同时提到了注意事项和常见问题及扩展应用。

在这里插入图片描述

🙃博主：小猫娃来啦
🙃文章核心：优雅而高效的JavaScript——解构赋值

什么是解构赋值

解构赋值是一种从数组或对象中提取值并赋给变量的语法。它可以简化代码，使得对多个变量的赋值更加便捷和直观。

数组解构赋值允许我们通过类似于数组字面量的语法，将数组中的元素解构到多个变量中。

在数组解构赋值中，我们可以使用方括号（[]）来表示数组，通过将变量放在方括号中，就可以将数组中对应位置的元素赋给这些变量。

let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

在解构赋值时，我们可以为变量指定默认值，当数组中对应位置的值不存在或为undefined时，就会使用默认值。

let [a, b, c = 0] = [1, , 3];
console.log(a); // 1
console.log(b); // undefined
console.log(c); // 3

在数组解构赋值中，我们还可以使用剩余参数（…）来获取数组中剩余的元素。

let [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

对象解构赋值允许我们通过类似于对象字面量的语法，将对象中的属性解构到多个变量中。

在对象解构赋值中，我们可以使用花括号（{}）来表示对象，通过将变量放在花括号中，就可以将对象中对应属性的值赋给这些变量。

let {
   
   name, age} = {
   
   name: 'Alice', age: 20};
console.log(name); // Alice
console.log(age); // 20

在解构赋值时，我们可以为变量指定默认值，当对象中对应属性的值不存在或为undefined时，就会使用默认值。

let {
   
   name, age = 0} = {
   
   name: