處理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
來源：掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。