用这样的方式了解一下数组的搜索吧

Co哥编程杂谈
128 阅读5分钟

上一期Co哥给大家介绍了数组的遍历以及非常强大的map()和reduce()，这一期Co哥想给大家介绍数组另外的一类方法——搜索，仔细想想，我们就会发现我们在日常生活中做的最多的事情就是搜索，不管是醒着还是睡着，我们不是在找这个就是在找那个，很少有停下来的时候不是吗？好像有点扯远了😆，我们下面开始聊正题吧。

对于数组的搜索类方法，我们按照返回值可以分为三类：

  • 返回值为满足条件的元素在数组中的索引（从0开始），包括：indexOf()，lastIndexOf()，findIndex()
  • 返回值为满足条件的第一个元素，此类方法只有一个：find()
  • 返回值为true/false，用以判断数组中是否存在满足特定条件的元素，包括：includes()，every()，some()

返回值为索引

indexOf()和lastIndexOf()是数组中最早支持的搜索类方法，但是这两个方法的用途都非常单一，只能搜索指定的元素，不能根据更灵活的条件进行搜索，后来ES2015规范中又增加了findIndex()用以支持条件搜索，这三个方法的返回值有相同的模式：如果找到满足条件的元素，就返回该元素所在位置的第一个索引，如果没有找到，就返回-1。我们用实际的例子展示一下它们的用法：

const courses = ['语文', '数学', '物理', '数学']
//从前往后查找，返回找到的第一个索引
console.log(courses.indexOf('数学'))
//控制台输出：1

//从后往前查找，返回找到的第一个索引
console.log(courses.lastIndexOf('数学'))
//控制台输出：3

//indexOf和lastIndexOf都可以指定开始查找的位置
console.log(courses.indexOf('数学', 2))
//控制台输出：3

//使用findIndex可以指定更加灵活的条件
const nums = [1, 3, 5, 6, 8]
const index = nums.findIndex(element => element >= 5)
console.log(index)
//控制台输出：2

返回值为元素

很多时候，我们更想要从一个数组中找到一个满足条件的元素的值，而非索引，虽然拿到索引之后通过array[index]的方式也能拿到值，不过ES2015引入了一个新的方法find()，使这一过程变得更为简单和直观：

const candidates = [
    {name: 'Philip Barney', subject1: 80, subject2: 90},
    {name: 'Jack Louisa', subject1: 78, subject2: 85},
    {name: 'Don Doherty', subject1: 90, subject2: 89},
    {name: 'Kelly Ward', subject1: 92, subject2: 95},
    {name: 'Iris Bert', subject1: 85, subject2: 93}
]
//该函数用来判断候选者的两科考试分数是否都达标了
function isPass(candidate) {
    return candidate.subject1 >= 90 
      && candidate.subject2 >= 90
}
//从候选人中选出第一个双科都达标的人作为录取人
const admitted = candidates.find(isPass)
console.log(admitted)
//控制台输出：
//{name: 'Kelly Ward', subject1: 92, subject2: 95}

find()的第一个参数为一个测试函数，会在数组的每个元素上执行一次，直到测试函数返回true，表示找到了该元素，然后立即返回该元素的值，如果对所有元素执行该函数后都返回false，那么find()方法将返回undefined。第二个参数为thisArg，表示this作用域，是个可选参数，我们在这里不做介绍。

返回值为true/false

判断在数组中是否存在指定条件的元素在实际开发中非常常见，就以大家最常用的Vue来说，我们会经常定义一个computed属性，根据数组中是否包含满足某种条件的元素来控制在页面上显示或隐藏某些内容，这样的例子随处可见，ES2015增加了every()和some()，ES2016增加了includes来解决这种情况。

其中，every()和some()都需要提供一个测试函数，every()的含义是数组中的每一个元素都需要满足测试函数的条件，返回的才会是true，否则为false。而some()的含义是只要有一个元素满足测试函数的条件，就返回true，没有任何元素满足条件，则返回false。看个例子：

const nums = [1, 3, 4, 7, 9]
//该函数判断数字是否为奇数
function isOdd(num) {
    return num % 2 != 0
}
//该函数判断数字是否为偶数
function isEven(num) {
    return num % 2 == 0
}
//判断数组中的数字是否都为奇数
console.log(nums.every(isOdd))
//控制台输出：false

//判断数组中是否有偶数
console.log(nums.some(isEven))
//控制台输出：true

includes()方法用来判断一个数组中是否包含某一个指定的值，如果包含，则返回true，否则返回false，在进行包含判断的时候，不会进行潜在的类型转换，看下面的例子：

const values = ['Apple', 'Xiaomi', 'HuaWei', false]

console.log(values.includes('Apple'))
//控制台输出: true

//并不会将空字符串强制转换为false
console.log(values.includes(''))
//控制台输出: false

总结

不知道大家在看完上面的介绍之后，有没有对数组的搜索类方法有更加深入的了解呀，Co哥的介绍总体来说是偏简单的，因为Co哥希望大家对每个方法有一个概念上的了解，尤其是按照返回值来进行一个归类更有助于我们在遇到实际问题的时候，有效的使用合适的方式来解决问题。而更具体的方法参数，还是希望大家在实际使用的时候，去查询MDN的文档，MDN的文档异常的强大和详细，Co哥每次遇到一些盲点，都会查MDN的文档去找答案，建议大家也可以试试哦！

如果Co哥的文章对你有帮助，那就来个点赞吧！ 🤓

avatar
文章
阅读
粉丝