【JavaScript】面试手写题精讲之数组(中)-Toy模板网

这篇具有很好参考价值的文章主要介绍了【JavaScript】面试手写题精讲之数组(中)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

引入

续借上文，这篇文章主要讲的是数组原型链相关的考题，有些人可能会纳闷，数组和原型链之间有什么关系呢？我们日常使用的数组forEach,map等都是建立在原型链之上的。举个🌰，如我有一个数组const arr = [1,2,3]我想要调用arr.sum方法对arr数组的值进行求和，该如何做呢？我们知道数组没有sum函数，于是我们需要在数组的原型上定义这个函数，才能方便我们调用，具体代码如下。接下来我们就是采用这种方式去实现一些数组常用的方法。

Array.prototype.sum = function () {
  let sum = 0;
  for (let i = 0; i < this.length; i++) {
    sum += this[i];
  }
  return sum;
};

const arr = [1,2,3];
console.log(arr.sum()); // 6

正文

forEach实现

首先，我们先了解forEach这个函数有哪些参数。我们先看一个例子, forEach的使用

const arr = [1,2,3];
arr.forEach((item,index,arr) => {
  console.log(item,index,arr);
})
/**
输入如下
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
**/

所以我们观察发现forEach传的是一个回调函数

function(currentValue, index, array) {}

这个回调函数有三个参数，分别如下

currentValue：必需，当前正在遍历的数组元素的值。
index：可选，当前正在遍历的数组元素的索引。
array：可选，指向正在被遍历的数组对象本身。

了解上述资料后，于是我们可以自己实现一个myForEach，代码如下

Array.prototype.myForEach = function (fn) {
  for (let i = 0; i < this.length; i++) {
    fn(this[i], i, this);
  }
};

const arr = [1, 2, 3];
arr.forEach((item, index, arr) => {
  console.log(item, index, arr);
});
/**
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
**/

map实现

同样，我们了解下map的方法有哪些参数，调研发现map的参数与forEach的参数前面一致，多了一个thisArg的参数

thisArg: 在执行回调函数时作为其上下文（即this值）的对象。如果提供了这个参数，回调函数内部的 this将指向它；如果不提供，则在严格模式下 this 会是 undefined，在非严格模式下 this 通常是全局对象（如浏览器环境中的window对象

我们也看一个🌰，帮助大家会一起map是如何使用的

const arr = [1, 2, 3];
// 这里为了能让大家看到所有的参数，于是将三个参数全部写了下来
const douleArr = arr.map((value,index,array) => value * 2);
console.log(douleArr);
/**
输入如下
[2, 4, 6]
**/

那么该如何实现呢，其实依靠forEach照葫芦画瓢即可，代码如下

Array.prototype.myMap = function (fn, thisArg) {
  const res = [];
  for (let i = 0; i < this.length; i++) {
    const mappedValue = fn.call(thisArg, this[i], i, this);
    res.push(mappedValue);
  }
  return res;
};

const arr = [1, 2, 3];
const douleArr = arr.myMap((value,index,array) => value * 2);
console.log(douleArr);
/**
输入如下
[2, 4, 6]
**/