JS中遍历数组的多个方法

方法名	描述
arr.forEach( )	仅仅是遍历索引元素
for of	仅遍历索引元素
arr.map( )	遍历数组所有索引元素,并把返回值存入新数组
arr.filter( )	过滤数组;如果回调函数返回true,则把elem存入新数组
arr.reduce( )	将每次return的值存入一个prev,最终返回prev
arr.every( )	如果全部符合条件则返回true,有一个不符合则返回false
arr.some( )	如果有一个符合条件则返回true,如果全部不符合则返回false

arr.forEach()

用法:arr.forEach((elem, i, arr)={回调函数} )
其中elem,i,arr为形参

例子:

    <script>
        var arr = ["北京", "武汉", "上海"]
        // my_arr.forEach((elem, i, arr)={回调函数} )  
        arr.forEach(elem => console.log(`中国的城市里有${elem}`))
    </script>

for of

语法: for (variable of iterable) {

//statements

}

可以被遍历的对象:包括 Array，Map，Set，String，TypedArray，arguments 对象等等
例子:

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

输出"a","b","c"

arr.map()

用法:arr.map((elem, i, arr)={回调函数} )
例子:

    <script>
        var arr = ["北京", "武汉", "上海"]
        var new_arr = arr.map((elem, i, arr) => {
            return "中国" + arr[i]
        })
        console.log(arr)
        console.log(new_arr)
    </script>

arr.filter()

语法:var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback
用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
element
数组中当前正在处理的元素。
index可选
正在处理的元素在数组中的索引。
array可选
调用了 filter 的数组本身。
thisArg可选
执行 callback 时，用于 this 的值。

    <script>
        var arr = ["北京", "武汉", "上海", "曼哈顿"]
        var new_arr = arr.filter((elem) => {
            return elem.length == 2
        })
        console.log(new_arr)
    </script>

arr.reduce()

语法:arr.reduce(回调函数(累计器, 当前值[, index[, array]])[, 累计器初始值])

注意：如果没有提供累计器初始值，reduce 会从索引1的地方开始执行 callback 方法,将索引0设为初始值，跳过第一个索引。如果提供了累计器初始值，从索引0开始。

例子1:

    <script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        var new_arr = arr.reduce((prev, elem) => {//数组求和例子
            console.log(`this is prev ${prev}`)
            return prev += elem
        })
        console.log(new_arr)
    </script>

例子2:

    <script>
        var str = "helloworld"  //统计各个字母出现次数
        var arr = str.split("")
        var result = arr.reduce(function (prev, elem) {
            if (`${elem}` in prev) {
                prev[elem] += 1
            } else {
                prev[elem] = 1
            }
            return prev
        }, {})
        console.log(result)
    </script>

arr.every()

用法:arr.every((elem, i, arr)={回调函数} )
其中elem,i,arr为形参
例子:

    <script>
        var my_arr = [2, 4, 6, 8, 10, 18]

        // my_arr.every((elem, i, arr)={回调函数} )    
        //如果全部符合条件则返回true,有一个不符合则返回false
        var bool_1 = my_arr.every((elem, i, arr) => { //判断数组是否递增
            return i < arr.length - 1 ? arr[i + 1] > elem : true
        })
        console.log(bool_1)		//true
    </script>

arr.some()

用法: arr.some((elem, i, arr)={回调函数} )
其中elem,i,arr为形参
例子:

    <script>
        var my_arr = [2, 4, 6, 8, 10, 18]
        // my_arr.some((elem, i, arr)={回调函数} )     
        //如果有一个符合条件则返回true,如果全部不符合则返回false
        var bool_2 = my_arr.some((elem, i, arr) => { //判断数组是有一个奇数
            console.log(elem % 2)
            return elem % 2
        })
        console.log(bool_2)		//false
    </script>

---

需要注意的是,在这些中 如果数组元素是 原始类型,即通过 值传递,在这种情况下无法通过修改elem的值来修改原数组; 必须通过arr[i]来修改原数组的值 如果数组元素是 引用类型,如对象,则可以通过修改elem的值来实现修改原数组内容