美文网首页
自定义ES6提供的数组方法(forEach、filter、map

自定义ES6提供的数组方法(forEach、filter、map

作者: jw_fc89 | 来源:发表于2021-08-15 22:09 被阅读0次

    原理部分

    JavaScript 在ES6版本后提供了一些更加便捷的方法供开发者使用,实现原理其实是在对应的构造函数原型提供方法。然后供开发者使用。接下来让我们自定义这些ES6提供的简易函数吧。

    方法的实现原理

    ES6提供的一些方法,底层主要是用for循环实现的,咱们在使用过程中也主要是传递callback来控制输出结果。后边的实现也主要是下边的结构。

    Array.prototype.xxx = function (callback) {
        if (callback && typeof (callback) === 'function') {
            for (let i = 0; i < this.length; i++) {
                callback(this[i], i, this)
                // 通过这个callback 控制结果
            }
        }
    }
    

    代码实现

    // 案例数据
    var arr = [
        {
            name: "张三",
            id: 1
        },
        {
            name: "李四",
            id: 2
        },
        {
            name: "王麻子",
            id: -1
        }
    ]
    

    forEach(数组每个元素都执行一次回调函数)

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

    filter(检测数值元素,并返回符合条件所有元素的数组)

    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(通过指定函数处理数组的每个元素,并返回处理后的数组)

    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(检测数组元素中是否有元素符合指定条件)

    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(检测数值元素的每个元素是否都符合条件)

    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 (返回符合传入测试(函数)条件的数组元素)

    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(返回符合传入测试(函数)条件的数组元素索引)

    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
    }
    

    相关文章

      网友评论

          本文标题:自定义ES6提供的数组方法(forEach、filter、map

          本文链接:https://www.haomeiwen.com/subject/pbdpbltx.html