原理部分

JavaScript 在ES6版本后提供了一些更加便捷的方法供開發(fā)者使用锨用，實(shí)現(xiàn)原理其實(shí)是在對(duì)應(yīng)的構(gòu)造函數(shù)原型提供方法。然后供開發(fā)者使用隘谣。接下來讓我們自定義這些ES6提供的簡(jiǎn)易函數(shù)吧增拥。

方法的實(shí)現(xiàn)原理

ES6提供的一些方法，底層主要是用for循環(huán)實(shí)現(xiàn)的寻歧，咱們?cè)谑褂眠^程中也主要是傳遞callback來控制輸出結(jié)果跪者。后邊的實(shí)現(xiàn)也主要是下邊的結(jié)構(gòu)。

Array.prototype.xxx = function (callback) {
    if (callback && typeof (callback) === 'function') {
        for (let i = 0; i < this.length; i++) {
            callback(this[i], i, this)
            // 通過這個(gè)callback 控制結(jié)果
        }
    }
}

代碼實(shí)現(xiàn)

// 案例數(shù)據(jù)
var arr = [
    {
        name: "張三",
        id: 1
    },
    {
        name: "李四",
        id: 2
    },
    {
        name: "王麻子",
        id: -1
    }
]

forEach（數(shù)組每個(gè)元素都執(zhí)行一次回調(diào)函數(shù)）

Array.prototype.forEach = function (callback) {
    if (callback && typeof (callback) === 'function') {
        for (let i = 0; i < this.length; i++) {
            callback(this[i], i, this)
        }
    }
}

filter(檢測(cè)數(shù)值元素熄求，并返回符合條件所有元素的數(shù)組)

Array.prototype.filter = function (callback) {
    let temp = []
    if (callback && typeof (callback) === 'function') {
        for (let i = 0; i < this.length; i++) {
            if (callback(this[i], i, this)) {
                temp.push(this[i])
            }
        }
    }
    return temp
}

map(通過指定函數(shù)處理數(shù)組的每個(gè)元素渣玲，并返回處理后的數(shù)組)

Array.prototype.map = function (callback) {
    let temp = []
    if (callback && typeof (callback) === 'function') {
        for (let i = 0; i < this.length; i++) {
            temp.push(callback(this[i], i, this))
        }
    }
    return temp
}

some(檢測(cè)數(shù)組元素中是否有元素符合指定條件)

Array.prototype.some = function (callback) {
    let temp = false;
    if (callback && typeof (callback) === 'function') {
        for (let i = 0; i < this.length; i++) {
            if (callback(this[i], i, this)) {
                temp = true
                break
            }
        }
    }
    return temp
}

every(檢測(cè)數(shù)值元素的每個(gè)元素是否都符合條件)

Array.prototype.every = function (callback) {
    let temp;
    if (callback && typeof (callback) === 'function') {
        for (let i = 0; i < this.length; i++) {
            if (!callback(this[i], i, this)) {
                temp = false
                break
            } else {
                temp = true
            }
        }
    }
    return temp
}

find (返回符合傳入測(cè)試（函數(shù)）條件的數(shù)組元素)

Array.prototype.find = function (callback) {
    let temp;
    if (callback && typeof (callback) === 'function') {
        for (let i = 0; i < this.length; i++) {
            if (callback(this[i], i, this)) {
                temp = this[i]
                break
            }
        }
    }
    return temp
}

findIndex(返回符合傳入測(cè)試（函數(shù)）條件的數(shù)組元素索引)

Array.prototype.findIndex = function (callback) {
    let temp;
    if (callback && typeof (callback) === 'function') {
        for (let i = 0; i < this.length; i++) {
            if (callback(this[i], i, this)) {
                temp = i
                break
            }
        }
    }
    return temp
}