Array方法及其实现

深藏阁楼爱情的钟 2024-04-19 14:46 55阅读 0赞

2019年都快过完了，你还在用老掉渣的`for`循环和`forEach`么？

教你几招，让你秒变代码最清爽的仔！！！

### 基础篇 ###

数组方法`map`、`filter`、`some`、`reduce`与`forEach`的pk

Round 1: map vs forEach

1.  `// double number`
2.  `const number = [1,2,3,4,5];`
3.   
4.  `// forEach Version`
5.  `const doubleNumber = []；`
6.  `number.forEach(item => doubleNumber.push(item * 2))`
7.   
8.  `// map Version`
9.  `const douberNumber = number.map(item => item * 2);`
10. `复制代码`

map函数一行搞定，简直完胜；

Round2： filter vs forEach

1.  `// filter number that less than 10`
2.  `const number = [1,12,3,24,5];`
3.   
4.  `// forEach Version`
5.  `const filterNumber = [];`
6.  `number.forEach(item => {`
7.  `if (item < 10) {`
8.  `filterNumber.push(item);`
9.  `}`
10. `})`
11.  
12. `// filter Version`
13. `const filterNumber = number.filter(item => item < 10);`
14. `复制代码`

filter函数一行搞定，forEach要6行。 filter简直是减轻工作量利器！

Round3: some vs forEach 类似的还有every方法

1.  `// is there anyone element greater than 10`
2.  `const number = [1,12,3,24,5];`
3.   
4.  `// forEach Version`
5.  `const flag = false;`
6.  `number.forEach(item => {`
7.  `if (flag > 10) {`
8.  `flag = true;`
9.  `}`
10. `})`
11.  
12. `// some Version`
13. `const flag = number.some(item => item > 10)`
14. `复制代码`

some同样一行搞定

Round4: reduce vs forEach

1.  `const number = [1,2,3,4,5];`
2.   
3.  `// forEach Version`
4.  `const total = 0;`
5.  `number.forEach(item => total += item)`
6.   
7.  `// reduce Version`
8.  `const total = number.reduce((total, value) => total + value)`
9.  `复制代码`

reduce同样简洁明了

优势（使用map、filter、reduce、every、some等函数优势）

*  减少代码量
 *  语义化表达其他人很容易明白代码用意
 *  函数化编程，少引入额外的作用
 *  易于维护、测试和扩展

劣势

相比于`for`循环，`map`这些方法可能在极其严苛的情况下会相对来说慢点。  
但是和`forEach`相比性能是一样的。

### 提高篇 ###

详细介绍具体数组方法及其实现

map介绍

map方法： 接收两个参数，一个是函数，另一个是函数的this值。 arr.map(callback(currentValue\[\[, index\[, array\]\]), \[,thisArg\])

*\[\]中内容代表可选参数 下同*

map用法

1.  `const number = [0.1, 1.5, 2.9];`
2.  `const ceil = number.map(item => Math.ceil(item));`
3.  `// number值不会改变， ceil值是[0,1,2]`
4.   
5.  `const number = [{a: 1}, {a: 2}, {a: 3}];`
6.  `const sumNumber = number.map(function(item) {`
7.  `return item.a + this;`
8.  `}, 100)`
9.  `// number值不会改变， sumNumber值为[101, 102, 103]`
10. `// notice: 当map有第二个参数时，第一个参数callback就不能写成箭头函数的形式了。是由于箭头函数的this是在定义的时候已经确定，而不是调用的时候确定。`
11.  
12. `'paprika is a good gril'.split('').map(item => item.charCodeAt(0));`
13. `Array.prototype.map.call('paprika is a good gril', item => item.charCodeAt(0))`
14. `// 两种方式给字符串应用map方法`
15.  
16. `['1', '2', '3'].map(parseInt) // [1, NaN, NaN]`
17. `['1', '2', '3'].map(item => parseInt(item)) // [1, 2, 3]`
18. `复制代码`

map实现

// 实现 ECMA-262, Edition 5, 15.4.4.19
    // 参考: http://es5.github.com/#x15.4.4.19
    if (!Array.prototype.map) {
      Array.prototype.map = function(callback, thisArg) {
    
        var T, A, k;
    
        if (this == null) {
          throw new TypeError(" this is null or not defined");
        }
    
        // 1. 将O赋值为调用map方法的数组.
        var O = Object(this);
    
        // 2.将len赋值为数组O的长度.
        var len = O.length >>> 0;
    
        // 3.如果callback不是函数,则抛出TypeError异常.
        if (Object.prototype.toString.call(callback) != "[object Function]") {
          throw new TypeError(callback + " is not a function");
        }
    
        // 4. 如果参数thisArg有值,则将T赋值为thisArg;否则T为undefined.
        if (thisArg) {
          T = thisArg;
        }
    
        // 5. 创建新数组A,长度为原数组O长度len
        A = new Array(len);
    
        // 6. 将k赋值为0
        k = 0;
    
        // 7. 当 k < len 时,执行循环.
        while(k < len) {
    
          var kValue, mappedValue;
    
          //遍历O,k为原数组索引
          if (k in O) {
    
            //kValue为索引k对应的值.
            kValue = O[ k ];
    
            // 执行callback,this指向T,参数有三个.分别是kValue:值,k:索引,O:原数组.
            mappedValue = callback.call(T, kValue, k, O);
    
            // 返回值添加到新数组A中.
            A[ k ] = mappedValue;
          }
          // k自增1
          k++;
        }
    
        // 8. 返回新数组A
        return A;
      };      
    }

转载：[https://juejin.im/post/5d79af9ef265da03f233fa04][https_juejin.im_post_5d79af9ef265da03f233fa04]

[https_juejin.im_post_5d79af9ef265da03f233fa04]: https://juejin.im/post/5d79af9ef265da03f233fa04