一、.find()
1⃣️定义和用法
find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。
2⃣️实例
搜索所有段落中的后代 span 元素，并将其颜色设置为红色：
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age > 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
结果：
20
3⃣️详细说明
.find() 方法允许我们在 DOM 树中搜索这些元素的后代，并用匹配元素来构造一个新的对象。.find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历单一层级。
4⃣️react中可以如何使用?
<Select
defaultValue={
subShopList.find((item) => item.shop_flag === 0)
? subShopList.find((item) => item.shop_flag === 0).shop_id
: null
}
>
{subShopList.map((item) => (
<Select.Option key={item.shop_id} value={item.shop_id}
{item.shop_name}
</Select.Option>
))}
</Select>
二、.exec()
1⃣️定义和用法
exec() 方法用于检索字符串中的正则表达式的匹配。
2⃣️实例
<html>
<body>
<script type="text/javascript">
var str = "1a2b3a4c5a6d7a";
var patt = new RegExp("a","g");
var result;
while ((result = patt.exec(str)) != null) {
document.write(result);
document.write("<br />");
document.write(patt.lastIndex);
document.write("<br />");
}
</script>
</body>
</html>
结果：
a
2
a
6
a
10
a
14
3⃣️说明
如果 exec() 找到了匹配的文本，则返回一个结果数组。
否则，返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本，第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），以此类推。
除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看得出，在调用非全局的 RegExp 对象的 exec() 方法时，返回的数组与调用方法 String.match() 返回的数组是相同的。
但是，当 RegExpObject 是一个全局正则表达式时，exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说，您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。
网友评论