编写 JavaScript 原生数组 API 指南

2024-01-08 04:31:27

在 JavaScript 中，数组是一种有序的数据结构，可存储任何类型的值。本指南将探讨 JavaScript 原生数组 API 的用法，并提供如何模拟实现这些 API 的示例。

forEach 方法

forEach 方法对数组中的每个元素执行指定的回调函数。语法如下：

array.forEach(callback(currentValue, index, array))

我们可以模拟实现 forEach 方法如下：

const myForEach = (array, callback) => {
  for (let i = 0; i < array.length; i++) {
    callback(array[i], i, array);
  }
};

map 方法

map 方法返回一个新数组，其中每个元素都是原数组中相应元素的回调函数结果。语法如下：

array.map(callback(currentValue, index, array))

模拟实现 map 方法如下：

const myMap = (array, callback) => {
  const newArr = [];
  for (let i = 0; i < array.length; i++) {
    newArr.push(callback(array[i], i, array));
  }
  return newArr;
};

filter 方法

filter 方法返回一个新数组，其中包含满足回调函数条件的所有元素。语法如下：

array.filter(callback(currentValue, index, array))

模拟实现 filter 方法如下：

const myFilter = (array, callback) => {
  const newArr = [];
  for (let i = 0; i < array.length; i++) {
    if (callback(array[i], i, array)) {
      newArr.push(array[i]);
    }
  }
  return newArr;
};

reduce 方法

reduce 方法将数组中的所有元素逐个累积，返回一个最终值。语法如下：

array.reduce(callback(accumulator, currentValue, index, array))

模拟实现 reduce 方法如下：

const myReduce = (array, callback, initialValue) => {
  let accumulator = initialValue || array[0];
  for (let i = initialValue ? 0 : 1; i < array.length; i++) {
    accumulator = callback(accumulator, array[i], i, array);
  }
  return accumulator;
};

find 方法

find 方法返回数组中第一个满足回调函数条件的元素。语法如下：

array.find(callback(currentValue, index, array))

模拟实现 find 方法如下：

const myFind = (array, callback) => {
  for (let i = 0; i < array.length; i++) {
    if (callback(array[i], i, array)) {
      return array[i];
    }
  }
  return undefined;
};

findIndex 方法

findIndex 方法返回数组中第一个满足回调函数条件的元素的索引。语法如下：

array.findIndex(callback(currentValue, index, array))

模拟实现 findIndex 方法如下：

const myFindIndex = (array, callback) => {
  for (let i = 0; i < array.length; i++) {
    if (callback(array[i], i, array)) {
      return i;
    }
  }
  return -1;
};

includes 方法

includes 方法判断数组中是否存在某个元素。语法如下：

array.includes(valueToFind, fromIndex)

模拟实现 includes 方法如下：

const myIncludes = (array, valueToFind, fromIndex = 0) => {
  for (let i = fromIndex; i < array.length; i++) {
    if (array[i] === valueToFind) {
      return true;
    }
  }
  return false;
};

sort 方法

sort 方法对数组中的元素进行排序。语法如下：

array.sort([compareFunction])

模拟实现 sort 方法如下：

const mySort = (array, compareFunction) => {
  const newArr = [...array];
  newArr.sort(compareFunction);
  return newArr;
};

reverse 方法

reverse 方法反转数组中的元素顺序。语法如下：

array.reverse()

模拟实现 reverse 方法如下：

const myReverse = (array) => {
  const newArr = [];
  for (let i = array.length - 1; i >= 0; i--) {
    newArr.push(array[i]);
  }
  return newArr;
};

slice 方法

slice 方法返回数组中指定范围的元素。语法如下：

array.slice(start, end)

模拟实现 slice 方法如下：

const mySlice = (array, start = 0, end = array.length) => {
  const newArr = [];
  for (let i = start; i < end; i++) {
    newArr.push(array[i]);
  }
  return newArr;
};

concat 方法

concat 方法返回一个新数组，其中包含原数组和一个或多个附加数组的所有元素。语法如下：

array.concat(array1, ..., arrayN)

模拟实现 concat 方法如下：

const myConcat = (...arrays) => {
  const newArr = [];
  for (const arr of arrays) {
    newArr.push(...arr);
  }
  return newArr;
};

splice 方法

splice 方法删除数组中的元素，并可以添加新元素。语法如下：

array.splice(start, deleteCount, ...itemsToAdd)

模拟实现 splice 方法如下：

const mySplice = (array, start = 0, deleteCount = 0, ...itemsToAdd) => {
  const newArr = [...array];
  newArr.splice(start, deleteCount, ...itemsToAdd);
  return newArr;
};

copyWithin 方法

copyWithin 方法将数组中指定范围内的元素复制到另一个指定的范围。语法如下：

array.copyWithin(target, start, end)

模拟实现 copyWithin 方法如下：

const myCopyWithin = (array, target, start = 0, end = array.length) => {
  const newArr = [...array];
  const arrToCopy = array.slice(start, end);
  newArr.splice(target, 0, ...arrToCopy);
  return newArr;
};

join 方法

join 方法将数组中的所有元素连接成一个字符串。语法如下：

array.join(separator)

模拟实现 join 方法如下：

const myJoin = (array, separator = ',') => {
  let str = '';
  for (let i = 0; i < array.length; i++) {
    str += array[i];
    if (i < array.length - 1) {
      str += separator;
    }
  }
  return str;
};

shift 方法

shift 方法删除数组中的第一个元素并返回该元素。语法如下：

array.shift()

模拟实现 shift 方法如下：

const myShift = (array) => {
  const newArr = [...array];
  const firstElement = newArr[0];
  newArr.splice(0, 1);
  return firstElement;
};

unshift 方法

unshift 方法在数组开头添加一个或多个元素并返回新数组的长度。语法如下：

array.unshift(...itemsToAdd)

模拟实现 unshift 方法如下：

const myUnshift = (array, ...itemsToAdd) => {
  const newArr = [...itemsToAdd, ...array];
  return newArr.length;
};

push 方法

push 方法在数组末尾添加一个或多个元素并返回新数组的长度。语法如下：

array.push(...itemsToAdd)

模拟实现 push 方法如下：

const myPush = (array, ...itemsToAdd) => {
  const newArr = [...array];
  for (const item of itemsToAdd) {
    newArr[newArr.length] = item;
  }
  return newArr.length;
};