参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

Array.prototype.forEach

  1. 描述：为数组中的每个元素执行一次回调函数。
  2. 特点：
  • 不直接改变原数组
  • 返回 undefined
  • 不可链式调用
  • 不可中止或跳出循环，除非抛出异常
  1. 使用：

1
2
3
4
5
6
7
// currentValue 正在处理的当前元素
// index 正在处理的当前元素的索引
// array 数组本身
// thisArg 执行回调函数用的this，可选
arr.forEach(function (currentValue: any, index: number, array: []): void{
  //...do something
},thisArg:{})

  1. polyfill：

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
41
42
43
if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(callback, thisArg) {
    var newThis;
    var index;

    // this就是调用arr.forEach的arr
    // 校验arr，callback
    if (this == null) {
      throw new TypeError('this is null or not defined');
    }

    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    if (arguments.length > 1) {
      newThis = thisArg;
    }

    var arr = Object(this);

    // >>>为无符号移位，移位前将不是number类型的数据转换成number，将number转为无符号的Uint32类型
    // Unit32类型转换：不能转为number就为0，非整数先转为整数，如果是正数返回正数，负数返回负数+2^32
    // >>>0保证len为数字类型且为正整数，缺省值为0
    var len = arr.length >>> 0;

    index = 0;

    // 循环每个元素执行回调函数
    while (index < len) {
      var currentValue;

      if (index in arr) {
        currentValue = arr[index];

        // currentValue, index, arr是给回调函数的参数
        callback.call(newThis, currentValue, index, arr);
      }

      index++;
    }
  };
}

Array.prototype.map

  1. 描述：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
  2. 特点：
  • 不直接修改原数组
  • 返回 callback 执行后的返回值组合的新数组
  • 不可中止或跳出循环
  1. 使用：

1
2
3
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array
}[, thisArg])

  1. polyfill：

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
if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {
    var newThis = thisArg || void 0,
      newArr,
      index;

    if (this == null) {
      throw new TypeError('this is null or not defined');
    }

    if (Object.prototype.toString.call(callback) != '[object Function]') {
      throw new TypeError(callback + ' is not a function');
    }

    var arr = Object(this);

    var len = arr.length >>> 0;

    newArr = new Array(len);

    index = 0;

    while (index < len) {
      var currentValue, mappedValue;

      if (index in arr) {
        currentValue = arr[index];

        mappedValue = callback.call(newThis, currentValue, index, arr);

        newArr[index] = mappedValue;
      }

      index++;
    }

    return newArr;
  };
}

Array.prototype.filter

  1. 描述：创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
  2. 特点：
  • 返回执行 callback 后返回 true 或者等价于 true 的元素组成的新数组
  • 不会直接改变原数组
  1. 使用：

1
2
3
4

var new_array = arr.filter(function callback(currentValue[, index[, array]]) {
 // Return element for new_array
}[, thisArg])

  1. polyfill：

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
if (!Array.prototype.filter) {
  Array.prototype.filter = function(callback, thisArg) {
    'use strict';
    if (!((typeof callback === 'Function' || typeof callback === 'function') && this)) {
      throw new TypeError();
    };

    var len = this.length >>> 0,
      newArr = new Array(len),
      arr = this,
      c = 0, // newArr的索引
      i = -1; // arr的索引，从-1开始++i
    if (!thisArg) {
      // 没有传入this，直接循环执行callback
      while (++i !== len) {
        if (i in arr) {
          // 如果callback执行返回true，则将当前条赋值给newArr
          if (callback(arr[i], i, arr)) {
            newArr[c++] = arr[i];
          }
        }
      }
    } else {
      while (++i !== len) {
        if (i in this) {
          if (callback.call(thisArg, arr[i], i, arr)) {
            newArr[c++] = arr[i];
          }
        }
      }
    }

    newArr.length = c;
    return newArr;
  };
}

** 注：可中止循环的有：简单循环、for...of 循环、every()、some()、find()、findIndex()，数组的其他迭代方法 polyfill 可以根据以上方法的写法进行改造。 **