js数组不通过for循环找到对应条件的值

最新推荐文章于 2023-02-15 00:04:21 发布

qinghui hu

最新推荐文章于 2023-02-15 00:04:21 发布

阅读量1.3k

点赞数 2

分类专栏：前端文章标签： js javascript filter 前端数组

本文链接：https://blog.csdn.net/weixin_42344227/article/details/112948326

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言：其实都是有用到循环的，只不过是用函数封装了。
使用到的知识点：
filter:创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
array.filter(function(currentValue,index,arr), thisValue)

reduce :接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

find:返回通过测试（函数内判断）的数组的第一个元素的值。
array.find(function(currentValue, index, arr),thisValue)

以下是具体应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js数组不通过for循环找到对应条件的值</title>
</head>
<body>
<script>
    // 前言：其实都是有用到循环的，只不过是用函数封装了。
    // 例如某个数组
    var arr = [
        {
            id: 1,
            name: "you"
        },
        {
            id: 2,
            name: "hello"
        },
        {
            id: 2,
            name: "beauty"
        },
        {
            id: 2,
            name: "god"
        },
    ]
    // 找到数组中name为beauty的对象
    // 方法一,filter：使用过滤器检查指定数组中符合条件的所有元素创建一个新数组
    var findArr = arr.filter(item=>item.name == "beauty")
    console.log(findArr);
    
    // 方法二,reduce：为数组中的每一个元素依次执行回调函数，返回的是对象
    var findObj1 = arr.reduce((prev,curr)=>{
        if(curr.name == "beauty"){
            return curr
        }
        return prev
    })
    console.log(findObj1);
    
    // 方法三,find：数组中的每个元素都调用一次函数执行，返回的是对象
    var findObj2 = arr.find(item=>item.name == "beauty")
    console.log(findObj2)
    
    // 后序：如果是普通的数组，像[1,3,1]之类的。还可以使用的函数有includes(val),indexOf(val)
</script>
</body>
</html>