处理Array方法及其实现新方式

小灰灰 2023-10-09 12:05 20阅读 0赞

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

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

基础篇  
数组方法map、filter、some、reduce与forEach的pk

Round 1: map vs forEach

// double number 
    const number = [1,2,3,4,5];
     
    // forEach Version
    const doubleNumber = []；
    number.forEach(item => doubleNumber.push(item * 2))
     
    // map Version
    const douberNumber = number.map(item => item * 2);

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

Round2： filter vs forEach

// filter number that less than 10
    const number = [1,12,3,24,5];
     
    // forEach Version
    const filterNumber = [];
    number.forEach(item => {
        if (item < 10) {
            filterNumber.push(item);   
        }
    })
     
    // filter Version
    const filterNumber = number.filter(item => item < 10);

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

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

// is there anyone element greater than 10
    const number = [1,12,3,24,5];
     
    // forEach Version
    const flag = false;
    number.forEach(item => {
        if (flag > 10) {
            flag = true;
        }
    })
     
    // some Version
    const flag = number.some(item => item > 10)

some同样一行搞定

Round4: reduce vs forEach

const number = [1,2,3,4,5];
     
    //  forEach Version
    const total = 0;
    number.forEach(item => total += item)
     
    // reduce Version
    const total = number.reduce((total, value) => total + value)

reduce同样简洁明了

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

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

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

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

map介绍

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

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

map用法

map实现

if (!Array.prototype.map) {
        Array.prototype.map = function(callback, thisArg) {
            var T, A, k;
            if (this == null) {
                throw new TypeError('this is null not defined');
            }
            // 让this一定会有length方法；
            // 如果通过Array.prototype.map.call(111),这个时候this是Number类型111，没有length方法。主要是处理这种类似的特殊情况。
            var O = Object(this);
            
            // >>> 0 的作用是让len的值始终为正整数
            var len = O.length >>> 0;
            
            if (typeof callback !== 'function') {
                throw new TypeError(callback + 'is not a functon');
            }
            
            if (arguments.length > 1) {
                T = arguments[1];
            }
            
            A = new Array(len);
            
            k = 0;
            
            while (k < len) {
                var kValue, mappedValue;
                
                if (k in O) {
                    kValue = 0;
                    
                    mappedValue = callback.call(T, kValue, k, 0);
                    A[k] = mappedValue;
                }
                
                k++;
            }
            
            return A;
        }
    }

filter介绍

arr.filter((callback\[\[, index\], array\])\[, thisArg\]) filter参数格式和map一致，一个函数，一个可选的this参数

filter用法

复制代码  
剩下内容，我们后续见(\#.\#)

引用：  
developer.mozilla.org/en-US/docs/…

有问题的话，请多多交流ღ( ´･ᴗ･\` )。

作者：forgetandforward  
链接：https://juejin.im/post/5d79af9ef265da03f233fa04  
来源：掘金  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。