JavaScript数组slice与splice方法深度解析及API命名规范

前言

近期回顾JavaScript语言时，注意到数组对象提供了多种操作方法。其中有两个方法名称极为相似：slice和splice，二者仅相差一个字母'p'，但实际功能与使用场景截然不同。

在实际开发中，建议选用语义表达清晰的API，从而降低代码阅读时的混淆概率。

slice方法详解

1、slice方法详解

slice方法用于从现有数组中提取指定范围的元素，生成一个新的数组。该操作不会改变原始数组的内容。

根据ECMAScript 5.1标准第15.4.4.10节的规定，slice方法的行为与字符串的slice方法类似。它接收两个参数：起始索引和结束索引。返回的新数组包含从起始索引开始，直到结束索引之前（不包含结束索引）的所有元素。

理解slice的核心逻辑相对直观：

'abc'.slice(1,2)   // "b"
[14, 3, 77].slice(1, 2) // [3]

需要特别强调的是，slice方法执行后，原始数组保持不变。

以下代码示例展示了这一行为：变量x保持原样，而变量y存储了截取后的部分。

var x = [14, 3, 77];
var y = x.slice(1, 2);
console.log(x);   // [14, 3, 77]
console.log(y);   // [3]

splice方法详解

2、splice方法详解

splice是JavaScript数组中功能最为强大的方法之一，支持删除、插入和替换数组元素的操作。其返回值是被操作（删除或替换）的元素组成的数组。

splice用于删除元素：color.splice(1,2)（示例中删除color数组索引为1和2的两项）；

splice用于插入元素：color.splice(1,0,'brown','pink') （示例中在color数组索引为1的元素前插入'brown'和'pink'两个值）；

splice用于替换元素：color.splice(1,2,'brown','pink') （示例中在color数组中替换索引为1和2的元素）；

尽管splice（ECMAScript 5.1标准第15.4.4.12节）同样至少需要两个参数，但其语义与slice完全不同。

[14, 3, 77].slice(1, 2)  // [3]
[14, 3, 77].splice(1, 2) // [3, 77]

此外，splice方法会直接修改原始数组。

这并非意外，而是splice方法的设计初衷。

var x = [14, 3, 77]
var y = x.splice(1, 2)
console.log(x)   // [14]
console.log(y)   // [3, 77]

API命名规范建议

在开发自定义模块时，选择不易产生歧义的API至关重要。理论上，用户不应仅依赖查阅文档来区分方法用途。因此，遵循合理的命名规范显得尤为关键。

笔者熟悉的规范（源于QT开发经验）建议通过动词时态来区分行为：现在时动词表示该方法会修改原对象，过去时动词表示不修改原对象，而是返回一个新版本。理想情况下，这两种版本应同时提供。

参考以下示例：

var p = new Point(100, 75);
p.translate(25, 25);
console.log(p);  // { x: 125, y: 100 }
var q = new Point(200, 100);
var s = q.translated(10, 50);
console.log(q);  // { x: 200, y: 100 }
console.log(s);  // { x: 210, y: 150 }

注意（在二维笛卡尔坐标系中）调用 translate() 与仅创建移动后坐标的translated() 之间的区别。调用translate会直接修改点p的值。然而，由于translated() 不修改原对象，对象q保持不变，该方法仅返回一个新的拷贝s。

总结

若能将上述命名规范一致地应用于应用程序中，前述的混淆现象将得到最大程度的降低。以上就是本文的全部内容，希望能为读者的学习或工作提供有益的帮助。