深入理解 You Don't Know JS 中的 ES6 数组与对象 API 增强

前言

在 ES6 中，JavaScript 对内置原生对象（如 Array 和 Object）进行了大量增强，增加了许多静态属性和方法。这些新特性极大地提升了开发效率，让一些常见任务变得更加简单。本文将深入探讨这些新增的 API，帮助开发者更好地理解和使用它们。

数组(Array)增强

Array.of() 静态方法

传统的 Array() 构造函数有一个广为人知的陷阱：当传入单个数字参数时，它会创建一个指定长度的空数组，而不是包含该数字的数组。Array.of() 方法解决了这个问题，它总是创建一个包含所有传入参数的数组。

// 传统方式的问题
let a = Array(3);    // [empty × 3]
a.length;            // 3
a[0];                // undefined

// 使用 Array.of()
let b = Array.of(3); // [3]
b.length;            // 1
b[0];                // 3

使用场景：

1. 需要将参数包装成数组的回调函数
2. 继承 Array 的子类需要创建和初始化实例

Array.from() 静态方法

Array.from() 用于将类数组对象或可迭代对象转换为真正的数组。它比传统的 Array.prototype.slice.call() 方法更加直观和优雅。

// 类数组对象
let arrLike = {
    length: 3,
    0: "foo",
    1: "bar"
};

// 传统方式
let arr1 = Array.prototype.slice.call(arrLike);

// ES6方式
let arr2 = Array.from(arrLike);

重要特性：

• 处理可迭代对象时会使用迭代器
• 不会产生空槽位(empty slots)，而是用 undefined 填充
• 支持第二个参数作为映射函数

// 映射功能示例
let arr = Array.from(arrLike, (val, idx) => 
    typeof val == "string" ? val.toUpperCase() : idx
);

原型方法增强

copyWithin()

copyWithin() 方法可以在数组内部复制元素，覆盖目标位置的现有元素。

[1,2,3,4,5].copyWithin(3, 0); // [1,2,3,1,2]

注意：复制算法会智能处理重叠区域，避免重复复制已复制的值。

fill()

fill() 方法用指定值填充数组的全部或部分元素。

Array(4).fill(undefined); // [undefined, undefined, undefined, undefined]

find() 和 findIndex()

这两个方法提供了更灵活的搜索功能：

// find() 返回匹配的元素
[1,2,3].find(v => v == "2"); // 2

// findIndex() 返回匹配元素的索引
points.findIndex(p => p.x % 3 == 0 && p.y % 4 == 0); // 2

entries(), values(), keys()

这些方法返回数组的迭代器，可用于解构或循环：

let a = [1,2,3];
[...a.values()]; // [1,2,3]
[...a.entries()]; // [[0,1], [1,2], [2,3]]

对象(Object)增强

Object.is() 静态方法

Object.is() 提供了比 === 更严格的比较方式，主要区别在于：

NaN === NaN; // false
Object.is(NaN, NaN); // true

0 === -0; // true
Object.is(0, -0); // false

建议：常规比较仍使用 ===，只有在需要区分 NaN 或 -0 时才使用 Object.is()。

Object.getOwnPropertySymbols() 静态方法

此方法返回对象自身的所有 Symbol 属性，是 Object.getOwnPropertyNames() 的 Symbol 版本。

let obj = {
    [Symbol('a')]: 'a',
    b: 'b'
};

Object.getOwnPropertySymbols(obj); // [Symbol(a)]

总结

ES6 为 Array 和 Object 新增的这些 API 极大地增强了 JavaScript 的表达能力。理解这些新特性的工作原理和适用场景，可以帮助开发者写出更简洁、更健壮的代码。在实际开发中，应根据具体需求选择合适的 API，而不是盲目使用新特性。

记住，虽然这些新方法很强大，但传统的解决方案（如 === 比较或 slice() 转换）在大多数情况下仍然适用且性能良好。选择最合适的工具，而不是最新的工具，才是优秀开发者的标志。