Array方法及其实现

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用法

const number = [0.1, 1.5, 2.9];
const ceil = number.map(item => Math.ceil(item));
// number值不会改变， ceil值是[0,1,2]

const number = [{a: 1}, {a: 2}, {a: 3}];
const sumNumber = number.map(function(item) {
    return item.a + this;
}, 100)
// number值不会改变， sumNumber值为[101, 102, 103]
// notice: 当map有第二个参数时，第一个参数callback就不能写成箭头函数的形式了。是由于箭头函数的this是在定义的时候已经确定，而不是调用的时候确定。

'paprika is a good gril'.split('').map(item => item.charCodeAt(0));
Array.prototype.map.call('paprika is a good gril', item => item.charCodeAt(0))
// 两种方式给字符串应用map方法

['1', '2', '3'].map(parseInt) // [1, NaN, NaN]
['1', '2', '3'].map(item => parseInt(item)) // [1, 2, 3]
复制代码

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
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。