实现Array常用的8种原生方法，谁的长度有我短

2021年12月06日 18:02 · 阅读 1636

Array.prototype.forEach()

forEach() 方法对数组的每个元素执行一次给定的函数。

数据

const arr = [
  { name: "赵云", num: 1 },
  { name: "狄仁杰", num: 2 },
  { name: "吕布", num: 3 },
  { name: "凯", num: 4 },
  { name: "刘备", num: 5 },
];
复制代码

语法

arr.forEach(callback(element[, index[, array]])[, thisArg])
复制代码

参数

callback
为数组中每个元素执行的函数，该函数接收一至三个参数：
- element
  
  数组中正在处理的当前元素。
- index 可选
  
  数组中正在处理的当前元素的索引。
- array 可选
  
  当前的数组。
thisArg 可选
可选参数。当执行回调函数 callback 时，用作 this 的值。

代码实现：

Array.prototype.my_forEach = function (callback, thisArg = this) {
  for (let i = 0; i < this.length; i++) {
    callback.call(thisArg, this[i], i, this);
  }
};

arr.my_forEach((item, index, array) => console.log(item, index));
// { name: '赵云', num: 1 } 0
// { name: '狄仁杰', num: 2 } 1
// { name: '吕布', num: 3 } 2
// { name: '凯', num: 4 } 3
// { name: '刘备', num: 5 } 4
复制代码

Array.prototype.filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

代码实现：

Array.prototype.my_filter = function (callback, thisArg = this) {
  const newArray = [];
  for (let i = 0; i < this.length; i++) 
     if (callback.call(thisArg, this[i], i, this)) {
      newArr.push(this[i]);
    }
  }
  return newArray;
};

const list = arr.my_filter((item) => item.num > 6);
// [ { name: '凯', num: 4 }, { name: '刘备', num: 5 } ]
const list2 = arr.my_filter((item) => item.num > 8);
// []
复制代码

Array.prototype.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefind

代码实现：

Array.prototype.my_find = function (callback, thisArg = this) {
  for (let i = 0; i < this.length; i++) {
    if (callback.call(thisArg, this[i], i, this)) {
      return this[i];
    }
  }
  return undefined;
};
console.log(arr.my_find((item) => item.name === "吕布"));
// { name: '吕布', num: 3 }
console.log(arr.my_find((item) => item.num > 3));
// { name: '凯', num: 4 }

复制代码

Array.prototype.findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

代码实现：

Array.prototype.my_findIndex = function (callback, thisArg = this) {
  for (let i = 0; i < this.length; i++) {
    if (callback.call(thisArg, this[i], i, this)) {
      return i;
    }
  }
  return -1;
};
console.log(arr.my_find((item) => item.name === "吕布"));
// 2
console.log(arr.my_findIndex((item) => item.name > 8));
// -1

复制代码

Array.prototype.every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

注意：若收到一个空数组，此方法在一切情况下都会返回 true。

代码实现：

Array.prototype.my_every = function (callback, thisArg = this) {
  for (let i = 0; i < this.length; i++) {
    if (!callback.call(thisArg, this[i], i, this)) {
      return false;
    }
  }
  return true;
};
console.log(arr.every((item) => item.num > 0));
// true
console.log(arr.every((item) => item.num > 8));
// false
复制代码

Array.prototype.some()

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

注意： 如果用一个空数组进行测试，在任何情况下它返回的都是false。

代码实现：

Array.prototype.my_some = function (callback, thisArg = this) {
  for (let i = 0; i < this.length; i++) {
    if (callback.call(thisArg, this[i], i, this)) {
      return true;
    }
  }
  return false;
};

console.log(arr.every((item) => item.num > 3));
// true
console.log(arr.every((item) => item.num > 8));
// false
复制代码

Array.prototype.map()

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

代码实现：

Array.prototype.my_map = function (callback, thisArg = this) {
  const newArray = [];
  for (let i = 0; i < this.length; i++) {
    newArray.push(callback.call(thisArg, this[i], i, this));
  }
  return newArray;
};
const list = arr.my_map((item) => {
  if (item.num === 3) return 22;
  return item;
});
console.log(list);
/*[
  { name: '赵云', num: 1 },
  { name: '狄仁杰', num: 2 },
  22,
  { name: '凯', num: 4 },
  { name: '刘备', num: 5 }
]*/
复制代码

Array.prototype.reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

语法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
复制代码

参数

callback
- 执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：
- accumulator
  - 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue。
  - currentValue
    
    数组中正在处理的元素。
  - index 可选
    
    数组中正在处理的当前元素的索引。如果提供了initialValue，则起始索引号为0，否则从索引1起始。
  - array可选
    
    调用reduce()的数组
initialValue可选

作为第一次调用 callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。

代码实现：

Array.prototype.my_reduce = function (callback, initialValue) {
  if (this && this.length < 1) {
    throw new TypeError("Reduce of empty array with no initial value");
  }

  let accumulator = this[0];
  let start = 1;
  if (initialValue !== undefined) {
    start = 0;
    accumulator = initialValue;
  }

  for (let i = start; i < this.length; i++) {
    accumulator = callback(accumulator, this[i], i, this);
  }
  return accumulator;
};

const num = arr.my_reduce((acc, cur, index, array) => {
  console.log(acc, cur, index);
  return acc + cur.num;
}, 10);

console.log(num);
// 10 { name: '赵云', num: 1 } 0
// 11 { name: '狄仁杰', num: 2 } 1
// 13 { name: '吕布', num: 3 } 2
// 16 { name: '凯', num: 4 } 3
// 20 { name: '刘备', num: 5 } 4
// 25

复制代码