以手撸的方式研究 Array.prototype.slice()

2023-11-06 14:30:31

引言
大家好，今天我们来聊一聊 Array.prototype.slice() 方法，这是一个在 JS 中经常被用到的 API，它可以从数组中提取出一个子数组。之前我也没有细致地研究过它是怎么实现的，所以我想在这里再深入学习一下，加深一下印象。
在正式开始之前，我们先来简单地回顾一下数组的基础知识。数组是一种有序的数据结构，它可以存储多个值，并且这些值可以是任意类型。数组的索引从 0 开始，最后一个元素的索引等于数组的长度减一。

Array.prototype.slice() 方法

语法

Array.prototype.slice() 方法的语法如下：

slice(start, end)

start：必需。要提取的子数组的开始索引。如果该值小于 0，则它将被视为数组的长度加上该值。
end：可选。要提取的子数组的结束索引。如果该值未指定，则子数组将一直提取到数组的末尾。如果该值小于 0，则它将被视为数组的长度加上该值。

参数

start：要提取的子数组的开始索引。
end：要提取的子数组的结束索引。

返回值

slice() 方法返回一个新的数组，该数组包含从开始索引到结束索引之间的元素（不包括结束索引）。

实现原理

function slice(start, end) {
  // 如果没有传入结束索引，则默认值为数组的长度
  if (end === undefined) {
    end = this.length;
  }

  // 如果开始索引小于 0，则将其转换为数组的长度加上该值
  if (start < 0) {
    start = this.length + start;
  }

  // 如果结束索引小于 0，则将其转换为数组的长度加上该值
  if (end < 0) {
    end = this.length + end;
  }

  // 检查开始索引和结束索引是否有效
  if (start < 0 || start >= this.length || end < 0 || end > this.length) {
    throw new RangeError("Invalid start or end index");
  }

  // 创建一个新的数组来存储子数组
  const newArr = [];

  // 将从开始索引到结束索引之间的元素添加到新数组中
  for (let i = start; i < end; i++) {
    newArr.push(this[i]);
  }

  // 返回新数组
  return newArr;
}

实例

const arr = [1, 2, 3, 4, 5];

// 从索引 2 开始提取子数组
const subArr1 = arr.slice(2);
console.log(subArr1); // [3, 4, 5]

// 从索引 1 到索引 3 提取子数组（不包括索引 3）
const subArr2 = arr.slice(1, 3);
console.log(subArr2); // [2, 3]

// 从索引 -2 开始提取子数组
const subArr3 = arr.slice(-2);
console.log(subArr3); // [4, 5]

// 从索引 -3 到索引 -1 提取子数组（不包括索引 -1）
const subArr4 = arr.slice(-3, -1);
console.log(subArr4); // [3, 4]