javascript实现常用数组方法重写

1.Array.prototype.map实现

const arr = [1, 22, 66, 77];
//先看看内置方法map怎么实现
// const res = arr.map((item, index) => {
//     console.log(item); // 运行结果 1 22 66 77
//     return item + index;
// },100);
// console.log(res);

/* 
运行结果：[1, 23, 68, 80]
*/

// 根据map的用法 我们来实现一个map 为了和内置的map命名不冲突 我们把名字叫做arrayMap
// 1.map的基本实现
Array.prototype.arrayMap = function (fn) {
  // arrayMap被调用返回的结果
  let arr = [],
    index = 0;

  while (index < this.length) {
    // 每次都调用fn函数 并且将每一项数组和下标传给fn函数
    const result = fn(this[index], index);
    // 如果fn有返回值 则将fn的返回值push到arr数组
    if (result) {
      arr.push(result);
    }
    index++;
  }
  // 将arr每次的fn的返回值 return出去
  return arr;
};

// 测试我们的arrayMap方法
const res1 = arr.arrayMap((item, index) => {
  return item + index;
});
console.log(res1, 'arrayMap');
/* 
运行结果：[1, 23, 68, 80] arrayMap
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

2.实现Array.prototype.filter

/* ----------------------------------------------------- */
Array.prototype.arrayfilter = function (fn) {
  const that = arguments[1] || window,
    newArr = [];
  let index = 0;

  while (index < this.length) {
    // this[i], i, this 分别对应三个参数 item-每一项数组 i=下标 this-调用数组
    const result = fn.call(that, this[index], index, this);
    if (result) {
      newArr.push(this[index]);
    }
    index++;
  }
  return newArr;
};

const res2 = arr.arrayfilter((item, index, arr) => item > 10);
console.log(res2, 'arrayfilter'); // [22, 66, 77]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.实现Array.prototype.forEach

Array.prototype.arrayforEach = function (fn) {
  const that = arguments[1] || window;
  let index = 0;

  while (index < this.length) {
    // this[i], i, this 分别对应三个参数 item-每一项数组 i=下标 this-调用数组
    fn.call(that, this[index], index, this);
    index++;
  }
};
/*
arr.forEach((item, index, arr) => {
    console.log(item, index, arr);
});
*/

arr.arrayforEach((item, index, arr) => {
  console.log(item, index, arr, 'arrayforEach');
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4.实现Array.prototype.reduce

// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
Array.prototype.arrayReduce = function (fn) {
  let index = 0,
    initialValue = arguments[1];

  //第二个参数没传 取默认值
  if (!initialValue) {
    index++;
    initialValue = this[0];
  }

  // 累加计算
  while (index < this.length) {
    initialValue = fn(initialValue, this[index], index, this);
    index++;
  }

  return initialValue;
};

//测试arrayReduce
const res3 = arr.arrayReduce((pre, cur, index, curitem) => {
  // console.log(pre,cur,index,curitem);
  return pre + cur;
}, 100);
console.log(res3, 'arrayReduce');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

5.实现Array.prototype.findIndex

Array.prototype.arrayFindIndex = function () {
  const fn = arguments[0],
    _this = arguments[1] || window;
  let index = 0;

  // 找到对应值的下标就结束循环
  while (index < this.length) {
    if (fn.call(_this, this[index], index, this)) {
      return index;
    }
    index++;
  }

  // 否则找不到
  return -1;
};

const curIndex = arr.arrayFindIndex((item) => {
  return item > 10;
});

// console.log(curIndex);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

6.实现Array.prototype.find 返回第一个符合条件的元素 找到就停止循环

// const res4 = arr.find((item)=>item > 20)
Array.prototype.arrayFind = function (callBack) {
  const _this = arguments[1] || window;
  let index = 0;

  while (index < this.length) {
    if (callBack.call(_this, this[index], index, this)) {
      return this[index];
    }
    index++;
  }

  return undefined;
};

// 测试arrayFind
const res4 = arr.arrayFind((item) => item > 20);
console.log(res4); //22

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

7.实现Array.prototype.some 方法
/*
Array.prototype.some
(1) 如果数组中至少有一个符合条件 返回结果true 否则false
(2) 如果用一个空数组进行测试，在任何情况下它返回的都是false
*/

Array.prototype.arraySome = function (callBack) {
  let index = 0,
    _this = arguments[1] || window;

  while (index < this.length) {
    if (callBack.call(_this, this[index], index, this)) {
      return true;
    }
    index++;
  }

  return false;
};

const array = [1, 3, 4];
const res5 = array.arraySome((item) => item > 2);
// console.log(res5);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

7.实现every方法
/*
Array.prototype.every
(1) 如果数组中所有元素都符合条件 返回结果true 否则false
(2) 若收到一个空数组，此方法在任何情况下都会返回 true
*/

Array.prototype.arrayEvery = function (callBack) {
  let index = 0,
    _this = arguments[1] || window;

  while (index < this.length) {
    // 存在不符合条件的直接返回false 终止循环
    if (!callBack.call(_this, this[index], index, this)) {
      return false;
    }
    index++;
  }

  // 都符合条件 直接true
  return true;
};

// 测试arrayEvery
const ary = [1, 2, 4];
const res6 = ary.arrayEvery((item) => item > 2);
// console.log(res6);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

8.实现Array.prototype.findLast 方法
Array.prototype.findLast
(1) 方法返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素，则返回 undefined

Array.prototype.arrayFindLast = function (callBack) {
  let index = 0,
    arr = [],
    _this = arguments[1] || window;

  while (index < this.length) {
    // 存在不符合条件的直接返回false 终止循环
    if (callBack.call(_this, this[index], index, this)) {
      arr.push(this[index]);
    }
    index++;
  }

  if (arr.length > 0) {
    return arr[arr.length - 1];
  }

  // 都符合条件 直接true
  return undefined;
};

const arr1 = [2, 1, 9, 10, 0, 2, 4];
const res7 = arr1.arrayFindLast((item) => item > 1);
// console.log(res7);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

9.实现Array.prototype.findLastIndex方法
/*
Array.prototype.findLastIndex
(1) 方法返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素，则返回 -1。
*/

Array.prototype.arrayFindLastIndex = function (callBack) {
  let index = 0,
    arr = [],
    _this = arguments[1] || window;

  while (index < this.length) {
    // 存在不符合条件的直接返回false 终止循环
    if (callBack.call(_this, this[index], index, this)) {
      arr.push(index);
    }
    index++;
  }

  if (arr.length > 0) {
    return arr[arr.length - 1];
  }

  // 都符合条件 直接true
  return -1;
};

// 测试arrayFindLastIndex
const arr2 = [1, 2, 1, 4, 1, 10];
const res8 = arr2.arrayFindLastIndex((item) => item > 1);
// console.log(res8);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

10.实现Array.prototype.pop方法 删除数组最后一个元素 返回删除元素的下标

Array.prototype.arrayPop = function () {
  let arr = this;
  const remainIndex = arr[arr.length - 1];
  arr.length--;
  return remainIndex;
};

const ary2 = [32, 4, 2];
// console.log(ary2.arrayPop(),ary2);

1
2
3
4
5
6
7
8
9
10
11

11.实现 Array.prototype.push方法
(1) push 方法可以往数组末尾添加任意多个元素，并将数组长度作为返回值

Array.prototype.arrayPush = function (...args) {
  let arr = this,
    index = 0,
    argsLen = args.length;

  while (index < argsLen) {
    arr[arr.length] = args[index];
    index++;
  }

  return arr.length;
};

const ary3 = [2, 33];
// console.log(ary3.arrayPush('a','b',[1,299]),ary3);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

12.实现 Array.prototype.shift方法 (1) shift 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

Array.prototype.arrayShift = function () {
  const result = this[0];
  let index = 0;

  while (index < this.length) {
    // 将数组的后一项赋值给前一项
    this[index] = this[index + 1];
    index++;
  }

  //数组减少一位
  this.length > 1 && this.length--;

  return result;
};

const ary5 = [3, 45, 8, 0];
// console.log(ary5.arrayShift());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

13.实现Array.prototype.concat方法
(1) concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

Array.prototype.arrayConcat = function () {
  const argLen = arguments.length;
  if (argLen === 0) return this;

  let index = 0;
  const arr = this;
  let thisLen = this.length,
    arrIndex = thisLen + index;

  while (index < argLen) {
    const args = arguments[index];
    Array.isArray(args) ? argsToString(args) : (arr[arrIndex++] = args);
    index++;
  }

  function argsToString(args) {
    let i = 0;
    while (i < args.length) {
      arr[arrIndex++] = args[i];
      i++;
    }
  }

  return arr;
};

const ary6 = [];
// console.log(ary6.arrayConcat(22,[1,2,99,[3,8,99]],['b','a'],[9877,777,776,[9,7]],0,null));

// console.log(ary5);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

14.实现Array.prototype.unshift方法
(1) unshift 方法可以往数组头部添加任意多个元素，并将数组长度作为返回值

Array.prototype.arrayUnshift = function (...args) {
  const thisLen = this.length,
    argsLen = args.length,
    arr = JSON.parse(JSON.stringify(this));

  for (let index = 0; index < thisLen; index++) {
    this[argsLen + index] = arr[index];
  }

  for (let i = 0; i < argsLen; i++) {
    this[i] = args[i];
  }

  return this.length;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16