<!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.