前端面试手写题之数组filter方法的实现

962 阅读2分钟

现如今的前端面试中,常常会考察候选人的编码能力。不仅会考察基本的数据结构与算法,还会考察javascript基本功,看候选人对js基础的理解和掌握程度。

面试官:请你简单实现一下数组方法filter

要想实现一个东西,必须要懂这个东西是做什么用的,filter的基本功能是遍历一个数组,并返回一个符合过滤条件的新数组且不改变原有数组

filter方法接收两个参数,第一个参数是一个函数,第二个参数是改变this指向的值(很多人都没注意到)。 函数接收三个参数,分别为数组每一项、数组的下标以及数组本身。

let arr = [1, 2, 3];
let res = arr.filter((item, index, array) => {
  return item === 2
}, thisArg)

// res = [2]

懂了filter是什么了之后,我们就可以用代码实现他啦~

第一步:把filter方法挂载到Array构造函数的原型上来进行模拟,并定义方法的返回值

Array.prototype.myFilter = function () {
  let result = [];
  
  return result;
}

第二步:确定回调函数的this指向,看是否传了第二个参数

Array.prototype.myFilter = function () {
  let result = [];
  
  let context = arguments[1] || window;
  
  return result;
}

第三步:判断传的第一个参数是否为函数,若不是则抛出一个错误

Array.prototype.myFilter = function (fn) {
  let result = [];
  
  let context = arguments[1] || window;
  
  if (typeof fn === 'function') {
  
  } else {
    throw new Error('parameter1 is not a function')
  }
  
  return result;
}
复制代码

第四步:对数组进行遍历处理

这里使用ES3的call方法调用函数,并指定this指向,依次传入数组项、下标以及数组自身,若满足过滤条件则push到结果数组中。

Array.prototype.myFilter = function (fn) {
  let result = [];

  let context = arguments[1] || window;
  
  if (typeof fn === 'function') {
    for (let i = 0; i < this.length; i++) {
      let condition = fn.call(context, this[i], i, this)
      if (condition) {
         result.push(this[i]);
      }
    }
  } else {
    throw new Error('parameter1 is not a function')
  }
  
  return result;
}
仅需10行左右代码就完成coding考察了~~~~~~~~: