处理数组_查找数组元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查找数组元素</title>
    <script src="../unitl/test.js"></script>
    <style>
        #results li.pass {color:green;}
        #results li.fail {color:red;}
    </style>


</head>

<body>
    <ul id="results"></ul>

</body>

<script>


    const ninjas = [
        {name:"Yagyu",weapon:"shuriken"},
        {name:"Yoshi"},
        {name:"Kuma",weapon:"wakizashi"}
    ];

    //如果find方法查找满足回调函数指定的第1个元素。
    const ninjaWithWakizashi = ninjas.find(ninja =>{
        return ninja.weapon === "wakizashi"
    });

    console.log(ninjaWithWakizashi);

    //如果未查找到满足条件的元素,使用find方法返回undefined。
    assert(ninjaWithWakizashi.name === "Kuma"
            && ninjaWithWakizashi.weapon === "wakizashi",
            "Kuma is wielding a wakizashi" 
    );

    const ninjaWithKatana = ninjas.find(ninja=>{
        return ninja.weapon === "Katana";
    });

    assert(ninjaWithKatana === undefined,"We could't find a ninja that wields a katana");


    //使用filter方法查找满足条件的多个元素。
    const armedNinjas = ninjas.filter(ninja =>"weapon" in ninja);
    console.log(armedNinjas);

    assert(armedNinjas.length === 2,"There are two armed ninjas;");
    assert(armedNinjas[0].name === "Yagyu" && armedNinjas[1].name === "Kuma","Yagyu and Kuma");





</script>
</html>

查找满足一定条件的数组很容易:使用内置的find方法,传入回调函数,针对集合中的每个元素调用回调函数,直到查找目标元素。由回调函数返回true.例如:

      ninjas.find(ninja=>ninja.weapon==="wakizashi");

查找Kuma,ninjas数组中的第1元素,该元素的weapon是wakizashi。如果数组中没有一项返回true元素,则查找的结果是undefined。例如:

      ninjaWithKatana = ninjas.find(ninja=>ninja.weapon==="katana");

返回undefined,因为没有一项数组的weapon是katana。图9.8显示了find函数的内部工作原理。
如果需要查找满足条件的多个元素,可以使用filter方法,该方法返回满足条件的多个元素的数组。例如:

const armedNinjas = ninjas.filter(ninja=>"weapon" in ninja);

返回undefined,因为没有一项数组的weapon是katana.

posted @ 2020-12-03 14:00  yongjar  阅读(110)  评论(0编辑  收藏  举报