Customize the array methods provided by ES6 (foreach, filter, map, some, every, find, FindIndex)

Time:2022-5-28

Principle part

After the ES6 version, JavaScript provides some more convenient methods for developers to use. The implementation principle isProvide methods in the corresponding constructor prototype. Then for developers to use. Next, let’s customize these simple functions provided by ES6.

Implementation principle of method

Some methods provided by ES6, the bottom layer mainly usesFor loopIt is implemented. In the process of use, we mainly passcallbackTo control the output. The implementation of the later part is mainly the structure of the lower part.

Array.prototype.xxx = function (callback) {
    if (callback && typeof (callback) === 'function') {
        for (let i = 0; i < this.length; i++) {
            callback(this[i], i, this)
            //Control the result through this callback
        }
    }
}

code implementation

//Case data
var arr = [
    {
        Name: "Zhang San",
        id: 1
    },
    {
        Name: "Lisi",
        id: 2
    },
    {
        Name: "Wang Mazi",
        id: -1
    }
]

Foreach (each element of the array executes the callback function once)

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

Filter (detects numeric elements and returns an array of all elements that meet the conditions)

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 (process each element of the array through the specified function and return the processed array)

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 (detect whether any element in the array element meets the specified conditions)

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 (check whether each element of the numeric element meets the condition)

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 (return the array elements that meet the conditions of the incoming test (function))

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 (returns the index of array elements that meet the conditions of the incoming test (function))

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
}