对象、数组和解构

目的与范围

本文档概述了 Airbnb JavaScript 风格指南中关于处理对象、数组和解构模式的建议。这三个相互关联的概念构成了 JavaScript 开发的基础构建块，遵循一致的模式有助于提高项目代码的质量和可读性。本指南涵盖了对象创建和操作、数组操作以及使用解构来高效访问属性和元素。

有关其他语言特性的相关风格指南，请参阅类型、变量和引用或函数和箭头函数。

关键概念概述

下图说明了 JavaScript 语言生态系统中对象、数组和解构之间的关系。

来源： README.md164-341 README.md344-505 README.md509-575

对象

对象是 JavaScript 中基本的数据结构，用于存储相关数据和功能的集合。Airbnb 风格指南提供了关于以一致方式创建和操作对象的几项指导原则。

对象创建和属性

风格指南建议使用字面量语法创建对象，而不是构造函数模式。对象还应利用 ES6 特性，以实现更简洁、更易读的代码。

来源： README.md166-174 README.md177-201 README.md203-224 README.md226-242 README.md275-294

对象属性组织

风格指南建议对属性声明采取有组织的方针，尤其是在使用简写属性时。

建议	解释
对简写属性分组	将所有简写属性放在对象声明的开头。
仅为无效标识符加引号	不要为不需要的属性加引号
避免直接调用原型方法	使用替代方法直接调用 Object.prototype 方法
使用展开运算符进行浅拷贝	优先使用 `{...obj}` 而不是 `Object.assign({}, obj)`

来源： README.md245-273 README.md275-294 README.md296-320 README.md322-340

对象方法安全

一项重要的建议是避免直接调用 Object.prototype 方法，因为这些方法可能会被对象上的属性覆盖。

来源： README.md296-320

对象展开语法

指南提倡使用展开语法进行对象操作，而不是使用 Object.assign。

操作	推荐模式	避免
创建浅拷贝	`const copy = { ...original };`	`Object.assign({}, original)`
添加属性	`const newObj = { ...original, newProp: value };`	`Object.assign({}, original, { newProp: value })`
省略属性	`const { unwantedProp, ...rest } = obj;`	`const copy = Object.assign({}, obj); delete copy.unwantedProp;`

来源： README.md322-340

数组

数组是 JavaScript 中的有序集合，风格指南规定了有效处理它们的具体模式。

数组创建和操作

与对象类似，风格指南建议使用字面量语法创建数组，并使用现代方法进行数组操作。

来源： README.md346-354 README.md356-368 README.md370-385 README.md424-467

数组转换模式

风格指南对将不同类型的对象转换为数组提出了具体建议。

来源	推荐方法	备注
可迭代对象	`[...iterable]`	对于简单转换，比 Array.from 优先。
类数组对象	`Array.from(arrayLike)`	对于具有 length 属性但不可迭代的对象。
映射可迭代对象	`Array.from(iterable, mapFn)`	比 `[...iterable].map(mapFn)` 更高效。

来源： README.md387-399 README.md401-412 README.md414-422

数组方法回调

在使用需要回调的数组方法时，风格指南强调了正确的返回值处理。

来源： README.md424-467

数组格式化

风格指南为数组格式化提供了清晰的建议，特别是针对多行数组。

上下文	建议
单行数组	`const arr = [1, 2, 3];`
多行数组	在开括号后和闭括号前使用换行符。
对象数组	每个对象独占一行，并进行适当缩进。
简单值数组	每个值独占一行，并进行适当缩进。

来源： README.md469-505

解构

解构是一项强大的 ES6 特性，它提供了一种简洁的方式来从对象和数组中提取值，从而减少了重复代码并提高了可读性。

解构模式

风格指南建议使用解构模式来访问对象的多个属性和数组的元素。

来源： README.md511-534 README.md536-549 README.md551-574

对象 vs 数组解构返回值

样式指南特别建议使用对象解构而不是数组解构来处理多个返回值。

模式	建议	推理
返回对象	`return { left, right, top, bottom };`	✓ 调用者可以通过名称选择所需的属性
解构返回值	`const { left, top } = processInput(input);`	✓ 清楚显示正在使用哪些值
返回数组	`return [left, right, top, bottom];`	✗ 调用者必须知道值的顺序
解构数组	`const [left, , top] = processInput(input);`	✗ 造成跳过值的混淆

这种方法提供了灵活性，因为函数可以更新以返回其他属性，而不会破坏现有的调用点。

来源： README.md551-574

与ESLint规则的集成

Airbnb样式指南中关于对象、数组和解构的建议通过特定的ESLint规则强制执行，确保代码库之间的一致性。

来源： README.md167 README.md204 README.md276 README.md297 README.md323 README.md347 README.md426 README.md512 README.md537

总结

Airbnb JavaScript Style Guide 提供了关于处理对象、数组和解构的全面建议。

对象：使用字面量语法、计算属性、方法简写、属性简写和对象展开。
数组：使用字面量语法、恰当使用 Array 方法，以及展开语法进行复制。
解构：使用对象解构来访问属性，使用数组解构来访问元素。
返回值：对于多个返回值，优先返回对象而不是数组。

遵循这些指南可以创建更具可读性、可维护性的代码，并有效利用现代 JavaScript 功能。这些指南通过特定的 ESLint 规则强制执行，这些规则可以应用于使用 Airbnb ESLint 配置的任何项目。