编码面试题：从零开始实现数组方法来学习JavaScript

本文将介绍一些JavaScript数组问题，通过从零开始实现数组方法来学习更多关于JavaScript数组的知识，并练习使用它们进行常见的操作。

手动实现Array.prototype.map方法

Array.prototype.map 方法通过调用一个回调函数来进行映射，从而将每个数组项映射到新的项。它返回一个带有映射值的新数组。使用如下

let result = arr.map(function(item, index, array) {
  // 返回新值而不是当前元素
})

我们可以实现它如下：

const map = (arr, callback) => {
  if (!Array.isArray(arr)) {
    return [];
  }
  const newArr = [];
  for (let i = 0, len = arr.length; i < len; i++) {
    newArr.push(callback(arr[i], i, arr));
  }
  return newArr;
}

首先，我们检查 arr 是否为数组，如果不是，则返回一个空数组。

在上面的代码中，我们有 map 方法，它循环遍历每个数组项，并使用数组项、索引和传入的原始数组调用回调，每个条目都被推送到 newArr 数组。

然后它返回 newArr 数组，其中包含映射的项。

手动实现Array.prototype.filter方法

Array.prototype.filter 方法返回一个新数组，该数组从满足回调条件的原始数组中获取元素，将这些条目推入一个新数组，然后返回，使用如下：

let results = arr.filter(function(item, index, array) {
  // 如果 true item 被 push 到 results，迭代继续
  // 如果什么都没找到，则返回空数组
});

我们可以如下实现：

const filter = (arr, callback) => {
  if (!Array.isArray(arr)) {
    return [];
  }
  const newArr = [];
  for (let i = 0, len = arr.length; i < len; i++) {
    if (callback(arr[i], i, arr)) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

在上面的代码中，我们首先检查 arr 是否为数组。如果不是，我们将返回一个空数组。然后我们循环遍历 arr，然后使用 if 块来检查回调调用是否返回 true，然后将这些条目推到 newArr 并返回它。

手动实现Array.prototype.reduce方法

Array.prototype.reduce 方法通过重复调用回调以将数组项组合为一个值，从而将数组的项组合为一个。使用如下

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);

该函数一个接一个地应用于所有数组元素，并将其结果“搬运”到下一个调用。

参数：

• accumulator – 是上一个函数调用的结果，第一次等于 initial（如果提供了 initial 的话）。
• item — 当前的数组元素。
• index — 当前索引。
• arr — 数组本身。

我们可以如下实现：

const reduce = (arr, reduceCallback, initialValue) => {
  if (!Array.isArray(arr)) {
    return;
  }  
  let val = initialValue || 0;
  for (let i = 0, len = arr.length; i < len; i++) {    
     val = reduceCallback(val, arr[i]);    
  }
  return val;
}

我们首先检查 arr 是否是数组，然后我们遍历数组，使用 reduceCallback 组合 val 和 arr[i] 并返回新值并将其分配给 val。

循环完成后，我们返回 val。

arguments对象是什么？

arguments 对象是一个类似数组的对象，它返回传递给传统函数的参数。

它不适用于箭头函数。

这是一个类似数组的对象，因为它的项可以由索引访问，并且具有 length 属性。 arguments 没有数组方法。

而且，它可以通过 for…of 并被转换为一个具有扩展操作符的数组。

例如，如果我们写：

function logArgs() {
  console.log(arguments)
}
logArgs(1, 2, 3, 4, 5);
// Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]

我们可以看到项和 Symbol.iterator 迭代器方法，我们知道它是一个可迭代的对象。

我们可以使用扩展运算符将其转换为数组，如下所示：

function logArgs() {
  console.log([...arguments])
}
logArgs(1, 2, 3, 4, 5);
//  [1,2,3,4,5] 

然后 console.log 给出 [1,2,3,4,5] ，这是一个常规数组。

对于箭头函数，我们使用rest运算符来获取所有参数，如下所示：

const logArgs = (...args) => {
  console.log(args)
}
logArgs(1, 2, 3, 4, 5);
//  [1, 2, 3, 4, 5]

如何在数组的开头添加元素？

我们可以使用 Array.prototype.unshift 方法将元素添加到数组的开头。

例如，我们可以这样写：

const arr = [2, 3, 4];
arr.unshift(1);
// [1,2,3,4]

扩展操作符也可以实现：

letarr = [2, 3, 4];
arr.unshift(1, ...arr);
// [1,2,3,4]

请注意，由于我们分配了一个新值，因此将 const 更改为 let。

如何在数组末尾添加元素？

我们可以使用 push 方法将条目添加到数组的末尾。

const arr = [2, 3, 4];
arr.push(1);
// [2, 3, 4, 1] 

扩展操作符也可以实现：

let arr = [2, 3, 4];
arr = [...arr, 1];

请注意，由于我们分配了一个新值，因此将 const 更改为 let。

---

如果对你有所启发和帮助，可以点个关注、收藏，也可以留言讨论，这是对作者的最大鼓励。

作者简介：Web前端工程师，全栈开发工程师、持续学习者。

现在关注《前端外文精选》微信公众号，还送某网精品视频课程网盘资料啊，准能为你节省不少钱！