深入剖析JavaScript数组常用函数的手动实现，进阶您的开发技能

2023-12-02 13:15:30

JavaScript 的数组是强大的数据结构，提供了各种内置方法来操作数据。然而，为了更深入地理解数组的工作原理，我们可以尝试手动实现这些函数。这不仅有助于巩固我们的 JavaScript 知识，还能提升我们的编码技巧。

1. 实现Array.isArray()

目标： 确定变量是否为数组

方法： 使用 Object.prototype.toString.call() 方法

const isArray = (value) => {
  return Object.prototype.toString.call(value) === '[object Array]';
};

2. 实现Array.join()

目标： 将数组元素连接成字符串

方法： 使用 Array.prototype.reduce() 方法

const join = (array, separator = ',') => {
  return array.reduce((acc, curr) => acc + curr + separator, '');
};

3. 实现Array.slice()

目标： 从数组中提取子数组

方法： 使用 Array.prototype.slice() 方法

const slice = (array, start = 0, end = array.length) => {
  return Array.prototype.slice.call(array, start, end);
};

4. 实现Array.push()

目标： 在数组末尾添加一个或多个元素

方法： 使用 Array.prototype.push() 方法

const push = (array, ...items) => {
  for (let item of items) {
    array[array.length] = item;
  }
  return array.length;
};

5. 实现Array.pop()

目标： 从数组末尾删除并返回最后一个元素

方法： 使用 Array.prototype.pop() 方法

const pop = (array) => {
  if (array.length === 0) return undefined;
  const lastItem = array[array.length - 1];
  array.length--;
  return lastItem;
};

6. 实现Array.map()

目标： 将数组中的每个元素映射到一个新数组

方法： 使用 Array.prototype.map() 方法

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

7. 实现Array.filter()

目标： 创建一个包含数组中通过指定条件的元素的新数组

方法： 使用 Array.prototype.filter() 方法

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

8. 实现Array.reduce()

目标： 将数组的所有元素累积成一个值

方法： 使用 Array.prototype.reduce() 方法

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