JavaScript 解构赋值指南

大前端爱好者
226 阅读3分钟

你好，前端开发爱好者。

在现代 JavaScript 编程中，解构赋值已经成为一项非常常见的技术。无论是调用函数，处理数组还是对象，解构赋值都能够让代码变得更简洁、更直观。今天的文章我们将详细介绍解构赋值的用法，包括数组和对象的解构、剩余属性和扩展运算符的使用以及一些实战中的应用场景。

什么是解构赋值？

解构赋值（Destructuring Assignment）可以让你从数组或对象中提取值，并将其赋给独立的变量，而不需要访问每个元素。举一个简单的例子：

const myArray = [ true, false, false ];
const firstElement  = myArray[0];   // 手工解构
const secondElement = myArray[1];
const thirdElement  = myArray[2];

通过解构赋值，可以将上面的代码简化为：

const myArray = [10, 200, 3000];
const [firstElement, secondElement, thirdElement] = myArray;
console.log(firstElement);  // 10
console.log(secondElement);  // 200
console.log(thirdElement);  // 3000

通过解构赋值，我们可以非常方便地从数组或对象中提取值并赋值给变量。对于数组，使用方括号 [] ；对于对象，使用花括号 `{}``。

跳过元素

在解构数组时，可以通过逗号来跳过某些元素：

const myArray = ["goose", "duck", "duck", "goose"];
const [firstElement, , , fourthElement] = myArray;
console.log(firstElement);  // goose
console.log(fourthElement);  // goose

这种方式不会修改原数组的数据，而只是从中提取需要的内容。

对象的解构赋值

对于对象的解构赋值，语法稍有不同，主要使用花括号 {} 而不是方括号 []。请看下例：

const myImage = {
  src: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs",
  alt: "A single black pixel.",
  size: {
    width: 600,
    height: 400
  }
};

// 解构对象
const { alt, size, src } = myImage;
const { height, width } = size;

console.log(alt);  // A single black pixel.
console.log(width);  // 600
console.log(height);  // 400

同样，你也可以在解构时设置默认值：

const { size, src, alt = "" } = myImage;
const { width = 800, height = 450 } = size;

console.log(alt);  // A single black pixel.
console.log(width);  // 600
console.log(height);  // 400

嵌套解构

有时候，对象的属性本身又是一个对象，这时可以使用嵌套解构一次性提取：

const { src, alt = "", size: { width = 800, height = 450 } } = myImage;

console.log(width);  // 600
console.log(height);  // 400

剩余属性（Rest Properties）

在解构时，你可以使用剩余属性语法 ...，将剩余的属性收集到一个新对象中：

const myObject = {
  key1: "first value",
  key2: "second value",
  key3: "third value"
};
const { key1, ...otherProperties } = myObject;

console.log(key1);  // first value
console.log(otherProperties);  // { key2: "second value", key3: "third value" }

这种方式在处理大型数据结构时非常有用，能够把复杂对象拆分成可控的部分。

实战例子

假设我们从一个 API 接收到一个包含图片信息的对象，我们希望从中提取出有用的信息并生成一个 img 标签：

const myImage = {
  src: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs",
  alt: "A single black pixel.",
  size: {
    width: 600,
    height: 400
  }
};

const imgContainer = document.querySelector(".img-container");
const { src, alt = "", size: { width = 800, height = 450 } } = myImage;

if (src) {
  imgContainer.innerHTML = `<img src="${src}" alt="${alt}" height="${height}" width="${width}">`;
}

这段代码通过解构赋值简化了变量的提取过程，使代码更加简洁、直观。

扩展运算符（Spread Operator）

扩展运算符 ... 用于创建新数组和对象。它可以将一个数组或对象展开成单个元素：

const myArray = [4, 5, 6];
const myMergedArray = [1, 2, 3, ...myArray];

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

也可以用于对象的合并：

const oldObject = {
  key1: "first value",
  key2: "second value",
  key3: "third value"
};

const myObject = {
  key0: "zeroth value",
  ...oldObject
};

console.log(myObject);  // {key0: "zeroth value", key1: "first value", key2: "second value", key3: "third value" }

如果今天的文章有帮到你，希望能够得到一个免费的点赞和关注～

avatar
文章
阅读
粉丝