那些遍历数组的方法~

实例方法 forEach 用于遍历数组，替代 for 循环

 // 实现 myForEach 方法, 功能和 forEach 一模一样
        const arr = [1, 2, 3, 4]
        Array.prototype.myForEach = function (fn) {
            for (let i = 0; i < this.length; i++) {
                fn(this[i], i, this)
            }
        }
  // 遍历每一项
        arr.myForEach((item, index, arr) => console.log(item, index, arr))

实例方法 map 迭代原数组，生成新数组

 const arr = [1, 2, 3, 4]
// 实现 myMap 方法, 功能和 map 一模一样
        // 返回一个新数组
        Array.prototype.myMap = function (fn) {
            let newArr = []
            for (let i = 0; i < this.length; i++) {
                newArr.push(fn(this[i], i, this))
            }
            return newArr
        }
        const result = arr.myMap(item => `<span>${item}</span>`)

forEach 和 map 都是 JavaScript 中 Array 类型的方法，但它们主要的区别在于返回值和副作用。

forEach 方法是对数组中的每个元素执行一次指定的操作，没有返回值，它主要是通过副作用来改变代码的状态。例如，可以使用 forEach 方法来更新页面上的 DOM 元素，或者向服务器发送请求等。如果需要遍历数组并执行某个操作，但不需要创建新的数组，则可以使用 forEach。

---

实例方法 filter 过滤数组单元值，生成新数组

       const arr = [1, 2, 3, 4]
 // 实现 myFilter 方法, 功能和 filter 一模一样
        // 返回一个满足条件新数组
        Array.prototype.myFilter = function (fn) {
            let newArr = []
            for (let i = 0; i < this.length; i++) {
                if (fn(this[i], i, this)) {
                    newArr.push(this[i])
                }
            }
            return newArr
        }
        // const result1 = arr.myFilter(function (item) {
        //     return item > 30
        // })
        const result1 = arr.myFilter(item => item > 1)
        console.log(result1);

实例方法 find 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined

 const arr = [1, 2, 3, 4]
// 实现 myFind 方法, 功能和 find 一模一样
        // 找到该元素后，不会继续查找其他元素。
        // 返回满足条件的元素
        Array.prototype.myFind = function (fn) {
            for (let i = 0; i < this.length; i++) {
                if (fn(this[i], i, this)) {
                    return this[i]
                }
            }
        }
        const result2 = arr.myFind(item => item > 2)
        console.log(result2);

实例方法 findIndex 查找元素的索引值

  const arr = [1, 2, 3, 4]
// 实现 myFindIndex 方法, 功能和 findIndex 一模一样
        // 找到该元素后，不会继续查找其他元素。
        // 返回满足条件的索引
        Array.prototype.myFindIndex = function (fn) {
            for (let i = 0; i < this.length; i++) {
                if (fn(this[i], i, this)) {
                    return i
                }
            }
            return -1
        }
        const result3 = arr.myFindIndex(item => item > 2)
        console.log(result3);

实例方法every 检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回 true，否则返回 false

 const arr = [1, 2, 3, 4]
// 实现 myEvery 方法, 功能和 every 一模一样
        // 返回值: 布尔值
        Array.prototype.myEvery = function (fn) {
            for (let i = 0; i < this.length; i++) {
                if (!fn(this[i], i, this)) {
                    return false
                }
            }
            return true
        }

        const result4 = arr.myEvery(item => item > 0)
        console.log(result4);

实例方法some 检测数组中的元素是否满足指定条件 如果数组中有元素满足条件返回 true，否则返回 false

const arr = [1, 2, 3, 4]
// 实现 mySome 方法, 功能和 some 一模一样
        // 返回值: 布尔值
        Array.prototype.myEvery = function (fn) {
            for (let i = 0; i < this.length; i++) {
                if (fn(this[i], i, this)) {
                    return true
                }
            }
            return false
        }

reduce 返回累计处理的结果，经常用于求和等

   const arr = [1, 2, 3, 4] 
// 实现 myReduce 方法, 功能和 reduce 一模一样 (必须传入初始值)
        // 返回值: 求和的结构
        Array.prototype.myReduce = function (fn, initValue) {
            for (let i = 0; i < this.length; i++) {
                initValue = fn(initValue, this[i], i, this)
            }
            return initValue
        }


        const result6 = arr.myReduce(function (prev, item) {
            return prev + item
        }, 0)
        console.log(result6);

find 和 filter的区别 返回值不一样, filter 返回的是数组 find 返回的是数组元素 查找方式不一样, filter是查找所有满足条件的数组元素, find只查找第一个满足条件的, 找到就终止查找

总结: find 是找元素, findIndex 是找索引, 使用方法完全一样 filter 是以筛选为目的的遍历, 而 find 是以找到元素为目的的遍历