phparray_slice技巧_深度解析 JavaScript 数组方法自定义实现 slice

文章目录 [+]

在 JavaScript 中，Array.prototype.slice 方法用于从一个数组中返回一个浅拷贝的子数组。
为了更好地理解这个方法的内部机制，我们将从零开始实现一个自定义的 slice 方法，并逐步解析实在现步骤。

手搓 slice 方法

slice 方法会返回数组的一个子数组。
以下是我们自定义实现的 slice 方法的代码：

phparray_slice技巧_深度解析 JavaScript 数组方法自定义实现 slice

Array.prototype.mySlice = function(start, end) { // 将传入的数组转换为工具 if (this == null) { throw new TypeError('Array.prototype.mySlice called on null or undefined'); } const O = Object(this); const len = O.length >>> 0; // 设置默认值 const relativeStart = start >> 0; const relativeEnd = (end === undefined) ? len : end >> 0; const k = Math.max(relativeStart >= 0 ? relativeStart : len + relativeStart, 0); const final = Math.min(relativeEnd >= 0 ? relativeEnd : len + relativeEnd, len); const count = Math.max(final - k, 0); const A = new Array(count); for (let n = 0; n < count; n++) { const from = k + n; if (from in O) { A[n] = O[from]; } } return A;};解析实现步骤

1. 检讨数组是否为 null 或 undefined

phparray_slice技巧_深度解析 JavaScript 数组方法自定义实现 slice

（图片来自网络侵删）

确保 this 不为空：

if (this == null) { throw new TypeError('Array.prototype.mySlice called on null or undefined');}

2. 将 this 转换为工具，并获取数组长度

将 this 转换为工具并获取数组长度：

const O = Object(this);const len = O.length >>> 0;

3. 设置默认值并处理负索引

处理 start 和 end 参数，支持负索引：

const relativeStart = start >> 0;const relativeEnd = (end === undefined) ? len : end >> 0;const k = Math.max(relativeStart >= 0 ? relativeStart : len + relativeStart, 0);const final = Math.min(relativeEnd >= 0 ? relativeEnd : len + relativeEnd, len);

4. 打算须要提取的元素数量，并创建新数组

打算子数组的长度，并初始化一个新数组 A 来存储结果：

const count = Math.max(final - k, 0);const A = new Array(count);

5. 将元素复制到新数组

利用 for 循环将元素从原数组复制到新数组 A：

for (let n = 0; n < count; n++) { const from = k + n; if (from in O) { A[n] = O[from]; }}

6. 返回新数组

返回新数组 A：

return A;示例利用

下面是一个示例，展示如何利用自定义的 mySlice 方法：

const arr = [1, 2, 3, 4, 5];const slicedArr = arr.mySlice(1, 3);console.log(slicedArr); // 输出 [2, 3]

在这个示例中，我们利用 mySlice 方法提取了数组的一部分，并返回了 [2, 3]，这与原生 slice 方法的行为同等。