陣列的七個 API 的簡單實現

Panthon發表於2019-03-02
陣列API

首先是哪個七個API？join、slice、sort、forEach、map、filter和reduce。

有些公司要求員工要三句話說清一個概念，大致就是“是什麼？有什麼用？怎麼用？”。對於我們的學習知識，我想我們有些時候至少還得知道它是怎麼來的。所以今天就來幹怎麼一件事，簡單實現，沒有在乎細節，只是功能實現而已，比如所有些像map這種的可以傳第二個引數，改變this指向，在這裡我就沒有處理了。

廢話不多說。

join

var ary = [1,2,3];
ary.join(`=`)
//"1=2=3"
複製程式碼

好，你要確定你知道join的用法，現在我們來實現

Array.prototype.join = function(char) {
    let result = this[0] || `` 
    let length = this.length 
    for(let i = 0; i < length; i++) {
        result += char + this[i]
    }

    return result
}複製程式碼

this是Array。

slice

var ary = [1,2,3];
ary.slice(1,2)
//[2]
複製程式碼

這是一個切片，您得確定您知道它的用法。

Array.prototype.slice = function(begin, end) {
    let result = []
    begin = begin || 0
    end = end || this.length    //這一步很重要，需要您理解
    for(let i = begin; i < end; i++) {
        result.push(this[i])
    }

    return result
}複製程式碼

您注意到我程式碼中的那行註釋了嗎？

因為它很重要，我必須標出來，這是為什麼我們可以寫如下程式碼的原因。

ary = Array.prototype.slice.call(likeArray);    //我們常用這種方式將類陣列轉化為陣列複製程式碼

當然現在不用寫這麼多了，ES6給我提供了Array.from()這個API，專門用來將類陣列轉為真陣列。

sort

這裡不用快排，用選擇排序。

var ary = [1,3,2];
ary.sort((a,b)=>a>b)
//(3) [1, 2, 3]
複製程式碼

您得確定您知道它的用法，並且知道一些細節，但這裡我們只是簡單實現，就不在乎一些細節啦。

Array.prototype.sort = function(fn) {
    fn = fn || (a,b)=> a-b
    let roundCount = this.length - 1    //比較的輪數
    for(let i = 0; i < roundCount; i++) {
        let minIndex = this[i]
        for(let k = i + 1; k < this.length; k++) {
            if( fn.call(null, this[k], this[i]) < 0) {
                [ this[i], this[k] ] =  [ this[k], this[i] ]    //    ES6的方法

            }
        }
    }
}

複製程式碼

forEach

var ary = [1,3,2];
ary.forEach((item)=>{
	console.log(item)
})
// 1
// 3
// 2
複製程式碼

與for用法一樣，但也有區別，您是知道它的用法的。

Array.prototype.forEach = function(fn) {
    for(let i = 0; i < this.length; i++) {
       fn.call(undefined, this[i], i, this)
    }
}複製程式碼

for迴圈沒有作用域或說只有一個。而forEach因為傳了一個函式，所以遍歷一項都會產生一個作用域。

map

這是一個對映，他很強大，你甚至可以不要forEach，用它就夠了。我在之前的系列中已經寫過一次map方法了。所以這裡，還是在寫一次吧。

Array.prototype.map = function(fn) {
    let result = []
    for(let i = 0; i < this.length; i++) {
        result[i] = fn.call(undefined, this[i], i, this )
    }

    return result
}複製程式碼

filter

Array.prototype.filter = function(fn) {
    let result = []
    let temp
    for(let i = 0; i < this.length; i++) {
        if(temp = fn.call(undefined, this[i], i, this)) {
            result.push(this[i])
        }
    }

    return result
}複製程式碼

reduce

reduce方法接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值。

Array.prototype.reduce = function(fn, init) {
    let result = init
    for(let i = 0; i < this.length; i++) {
        result = fn.call(undefined, result, this[i], i,this)
    }

    return result
}複製程式碼

好吧，就到這啦。最近玩的有點多，要早點休息，前幾天報名的方應杭的vue造輪子課都落課了，https://xiedaimala.com/courses/6d63da67-6eea-4711-aeb4-0c3a949341dc。（我推薦您也可以瞭解一下）學習啊，滿腦子全是學習。

相關文章