filter和map的实现

1.filter的用法

菜鸟教程:

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

filter方法会将数组中所有符合条件的元素组成一个新数组，并将新数组作为返回值。判断条件是由回调函数的返回值决定的。另外，filter具有第二个参数，用于绑定回调函数中的this。

    const arr = [1, 2, 3]
    console.log(arr.filter(i => i > 1));//[2,3]

2.filter的实现

    Array.prototype.myFilter = function (cb, thisValue) {
            if (typeof cb !== 'function') {
                throw new Error('第一个参数应当为函数')
            }
            //声明res 作为返回值
            const res = [];
            //this不是空数组时，进入，this是空数组是，直接返回res
            if (this.length) {
                for (let i = 0; i < this.length; i++) {
                //遍历this，如果回调函数返回值为真，将该项添加到res中，否则不添加，以此实现过滤功能
                    cb.call(thisValue, this[i], i, this) ? res.push(this[i]) : null;
                }
            }
            return res
        }

3.map的用法

菜鸟教程:

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。返回空数组
注意： map() 不会改变原始数组。

map返回一个长度和原数组相同的新数组，回调函数中返回值将会依次作为新数组中的元素。和filter相同，map同样具有第二个参数，用于给回调函数绑定this。
map使用十分广泛，比如将购物车中的数据存储在本地时，由于商品的全部信息很多，我们更希望只存储必要的信息。

    
    const products = [
            {
                id: 1,
                name: 'xxx',
                price: 'xxx',
                img: 'xxx',
                count: 2

            },
            {
                id: 2,
                name: 'xxx',
                price: 'xxx',
                img: 'xxx',
                count: 2

            },
            {
                id: 3,
                name: 'xxx',
                price: 'xxx',
                img: 'xxx',
                count: 2

            },
            {
                id: 4,
                name: 'xxx',
                price: 'xxx',
                img: 'xxx',
                count: 2
            },
        ]
        //将商品的id和数量存储到本地 回调函数的返回值{ id: item.id, count: item.count } 将作为新数组中的元素
        const mapProducts = products.map(item => ({ id: item.id, count: item.count }))
        console.log(mapProducts);//[{id:1,count:2}...]
        localStorage.setItem('products', JSON.stringify(mapProducts))

map的实现

Array.prototype.myMap = function (cb, thisValue) {
            if (typeof cb !== 'function') {
                throw new Error('第一个参数应当为函数')
            }
            const res = [];
            if (this.length) {
                for (let i = 0; i < this.length; i++) {
                //遍历数组时，将每次回调函数的返回值添加到res中
                    res.push(cb.call(thisValue, this[i], i, this))
                }
            }
            return res
        }

仅为个人理解，如有错谬，欢迎指正。

如果对您有所帮助，请您点个赞吧！