ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js中数组常用的API(二)之迭代函数

2021-10-10 18:31:15  阅读:182  来源: 互联网

标签:迭代 element API let 数组 numArr every js


有时,我们需要迭代数组中的元素,可以使用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)
        })
``
`

标签:迭代,element,API,let,数组,numArr,every,js
来源: https://blog.csdn.net/zhang_cherry/article/details/120688966

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有