Fe-interview: [js] 第143天 自己实现数组的 `map`、`filter`、`find` 方法

[haizhilin2013]

第143天 自己实现数组的 map、filter、find 方法

[NicholasBaiYa]

map

Array.prototype.newMap = function(fn, context) {
    let newArr = new Array;
    if(typeof fn !== "function") {
        throw new TypeError(fn + "is not a function");
    }
    var context = arguments[1];
    for (var i = 0; i < this.length; i++) {
        newArr.push(fn.call(context, this[i], i, this))
    }
    return newArr
}

find

Array.prototype.newFind = function(fn, context) {
    let str;
    if(typeof fn !== "function") {
        throw new TypeError(fn + "is not a function");
    }
    var context = arguments[1];
    for (var i = 0; i < this.length; i++) {
        if(fn.call(context, this[i], i, this)) {str = this[i];break; }
    }
    return str
}

filter

Array.prototype.newfilter = function (fn, context) {
    let newArr = new Array;
    if (typeof fn !== "function") {
        throw new TypeError(fn + "is not a function");
    }
    var context = arguments[1];
    for (var i = 0; i < this.length; i++) {
        if (fn.call(context, this[i], i, this)) { newArr.push(this[i]) }
    }
    return newArr
}

[HuoXiaoYe]

forEach()方法的实现

forEach()：无返回值，单纯的遍历数组。

Array.prototype.myForEach = function(cb){ // 在Array对象的原型上添加 myForEach()方法， 接受一个回调函数
    for(let i=0; i<this.length; i++){ // this指的是当前实例化的数组对象
        let item = this[i]; // 定义回调函数接受的三个参数
        let index = i;
        let array = this;
        cb(item,index,array) // 调用
    }
}

map()方法的实现

map()：有返回值，无论返回什么都添加到新数组中。

Array.prototype.myMap = function(cb) {
    let newArr = []; // 定义一个新的数组，用来接受返回值
    for (let i = 0; i < this.length; i++) {
        let item = this[i];
        let index = i;
        let array = this;
        let result = cb(item, index, array);
        newArr.push(result) // 将回到函数的结果push到新的数组中
    }
    return newArr // 返回这个新的数组
}

filter()方法的实现

filter(): 有返回值，将返回结果为true的每一项push到一个新的数组中。

Array.prototype.myFilter = function(cb) {  // 实现方法和map()方法差不多
    let newArr = [];
    for (var i = 0; i < this.length; i++) {
        let item = this[i];
        let index = i;
        let array = this;
        let result = cb(item, index, array); 
        if (result) { // 判断回调函数的结果否为true，为true则将 该项的item push到新的数组中
            newArr.push(item);
        }
    }
    return newArr; // 返回新的数组
}

every()方法的实现

every(): 有返回值，如果数组中的每一项都通过了测试，则返回true;反之返回false.

Array.prototype.myEvery = function(cb){
    for (var i = 0; i < this.length; i++) {
        let item = this[i];
        let index = i;
        let array = this;
        let result = cb(item, index, array);
        if (!result) { // 当返回false时，怎停止遍历，返回false。
            return false; 
        }
    }
    return true;
}

some()方法的实现

Array.prototype.mySome = function() {
    for (var i = 0; i < this.length; i++) {
        let item = this[i];
        let index = i;
        let array = this;
        let result = cb(item, index, array);
        if (result) {
            return true; // 有一个通过了测试 则终止遍历，返回true
        }
    }
    return false; // 一个都没有通过测试，返回false
}

[xxf1996]

function map (arr, fun) {
  let res = []
  arr.forEach((...args) => {
    res.push(fun(...args))
  })
  return res
}

function filter (arr, fun) {
  let res = []
  arr.forEach((...args) => {
    if (fun(...args)) {
      res.push(args[0])
    }
  })
  return res
}

function find (arr, fun) {
  let res = undefined
  arr.some((...args) => {
    if (fun(...args)) {
      res = args[0]
      return true
    }
    return false
  })
  return res
}

[cyj1209]

发现大家好像都忽略了两句话
A callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。map和filter 在MDN上都有这么一句话。
B 注意 callback 函数会为数组中的每个索引调用即从 0 到 length - 1，而不仅仅是那些被赋值的索引，这意味着对于稀疏数组来说，该方法的效率要低于那些只遍历有值的索引的方法。 find方法上的关于未赋值元素的说明。
大体的概括一下，array的方法中除了 find，findIndex，lastIndex这三个方法，对于回调方法的调用是属于B类别的。其他的都是属于A类别的。