js中数组常用的API（二）之迭代函数

2024-01-19 22:15:58

有时，我们需要迭代数组中的元素，可以使用for循环进行迭代。不过，数组自带了很多迭代方法，方便我们调用。
这些迭代函数的第一个参数是一个函数，这个函数可以带三个参数，分别表示数组元素、数组的索引和数组本身。

every(function (element, index, array){

})

1、every

every函数是测试该数组的元素是否都满足某个条件。
返回值：都满足，返回true，只要有一个不满足，则返回false

        let numArr = [1, 343, 123, 5, 7]
        let ood = numArr.every(function (element) {
            return element %2 !== 0
        })
        console.log(ood) // true

        let than100 = numArr.every(function (element) {
            return element > 100
        })
        console.log(than100) // false

说明：let ood = numArr.every() 这条语句是判断数组中的所有元素是否都是奇数，若都是奇数则返回true; let than100 = numArr.every() 这条语句是判断数组中的所有元素是否都大于100。
every函数在迭代过程中，只要有一个为false就会中止迭代，返回false.

2、some

some迭代函数是测试数组中的元素是否至少有一个满足条件。
返回值：有一个满足条件，则返回true；若都不满足条件，则返回false

        let than100 = numArr.every(function (element) {
            return element > 100
        })
        console.log(than100) // false

        let than100_2= numArr.some(function (element) {
            return element > 100
        })
        console.log(than100_2) // true

可以看到，同样的条件，使用some方法时，函数返回true

every和some函数的区别

every函数的意思类似于数学上任意一个；
some函数的意思类似于数学上的至少存在一个；
every方法是数组中的任意一个元素都要满足条件才返回true；
some方法是数组中至少存在一个元素满足条件，就返回true。

3、map

map方法：处理数组中的每个元素，然后将其返回值组成一个新的数组

        let numArr = [1, 2, 3, 4, 5]
        let numSquareArr = numArr.map((element) => {
            return Math.pow(element, 2)
        })
        console.log(numSquareArr) // [1, 4, 9, 16, 25]

4、filter

filter方法：类似于数据库中的select查询语句，将满足条件的元素组成一个新数组返回。

        let ageArr = [18, 4, 60, 30, 45, 12]
        let adult = ageArr.filter((element) => {
            return element >= 19
        })
        console.log(adult) // [60, 30, 45]

5、reduce

参数说明：
previousValue: 前一个值
currentValue: 当前的值
currentIndex: 当前元素的索引
array: 数组本身
其中，currentIndex和array是可选的参数，如果用不到它们，可以不传。
这个函数会返回一个将被叠加到累加器的值，initialValue参数是累加器的初始值，reduce停止执行后会返回这个累加器。

// Arrow function
reduce((previousValue, currentValue) => { … } )
reduce((previousValue, currentValue, currentIndex) => { … } )
reduce((previousValue, currentValue, currentIndex, array) => { … } )
reduce((previousValue, currentValue, currentIndex, array) => { … }, initialValue)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reduce方法</title>
</head>
<body>
    <script>
        let arr1 = [1, 2, 3,4, 5, 8]
        let sum = arr1.reduce((previousValue, currentValue) => {
            return previousValue + currentValue
        }, 10)
        console.log(sum) // 33
    </script>
</body>
</html>

这是一个求数组和的功能，不过，我特意将sum的初始值设置为10，所以结果为33.

6、forEach

forEach：能迭代整个数组，它没有返回值，和for循环的功能类似。不过，貌似for循环的效率更高。

        let foodPrice = [10, 30, 23, 5, 60]
        foodPrice.forEach((element) => {
            console.log(element)
        })
``
`

码农公寓