手写es5数组API

1. 数组filter方法,参数传入一个函数,不改变数组本身,不对空数组操作,返回一个新数组。

Array.prototype.filterTest = function (callback) {
  if (typeof callback != 'function') {
    throw Error(`${callback}is not a functuon`)
  }
  const _this = this;
  if (_this.length <= 0) return;
  const arr = [];
  _this.forEach((item, index) => {
    arr.push(callback(item, index, this));
  })
  return arr;
}

const arr = [1, 2, 3, 5];
const result = arr.filterTest((item, index) => { return item == 2 });
console.log(result) //[ 2 ]

2. some方法:不会对空数组进行检测,不改变原数组,如果有一个为true就返回true不检测下边的元素,如果都没有符合条件的则返回false

Array.prototype.someTest = function (callback) {
  if (typeof callback != 'function') {
    throw Error(`${callback}is not a functuon`)
  }
  const len = this.length;
  if (len <= 0) return;
  let result = false;
  for (let i = 0; i < len; i++) {
    if (callback(this[i], i, this)) {
      result = true;
      break;
    }
  }
  return result;
}

const result = arr.someTest((item) => item >= 3);
console.log(result)  //  true

3. every方法:数组所有元素都符合则返回true,如果有一个不符合则返回false并剩余的元素不会进行检测,不会对空数组进行检测,不改变原数组。

Array.prototype.everyTest = function (callback) {
  if (typeof callback != 'function') {
    throw Error(`${callback}is not a functuon`)
  }
  const len = this.length;
  if (len <= 0) return;
  let result = true;
  for (let i = 0; i < len; i++) {
    if (!callback(this[i], i, this)) {
      result = false;
      break;
    }
  }
  return result;
}
const arr = [1, 2, 3, 5];
const result = arr.everyTest((item) => item > 2)
console.log(result) // false

4. map方法: 数组map方法不改变原数组,不对空数组进行检测,返回一个新数组,map的callback需要返回值如果没有return则会是undefined。

Array.prototype.mapTest = function (callback, thisValue) {
  if (typeof callback != 'function') {
    throw Error(`${callback} is not a function`);
  }
  const len = this.length;
  if (len <= 0) return;
  const arr = [];
  this.forEach((item, index) => {
    if (callback(item, index, this)) {
      arr.push(callback.call(thisValue, item, index, this));
    }
  })
  return arr;
}
const arr = [1, 2, 3, 5];
const result = arr.mapTest((item) => item * 2)
console.log(result) // [ 2, 4, 6, 10 ]

 

上一篇:原型对象中的this指向问题,ES5继承


下一篇:与 ES5 相比,React 的 ES6 语法有何不同?