javaScript 数组方法 find 和 some

7,461

今天也有很努力的在赚猫粮钱

工作中接到了一个优化代码的工作: warning Expected to return a value in arrow function array-callback-return

解释:当使用.map、.some、.every等数组方法时,必须包含return值

优化点:使用了.some或.every,但存在部分特殊情况没有return任何值,则需要补全return语句


some

定义和用法:some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

some() 方法会依次执行数组的每个元素:

如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。

如果没有满足条件的元素,则返回false。

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。

find

定义和用法 : find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。 如果没有符合条件的元素返回 undefined

注意: find() 对于空数组,函数是不会执行的。

注意: find() 并没有改变数组的原始值。

用法和区别

同样是用来检测数组中符合条件的元素,但是 some 和 find 的返回值不同,some方法找到符合条件的值则立即返回true,全都不符合则返回false,而 find 方法找到符合条件的值后会返回符合条件的那一项 ,所以在开发中视业务需求选择对应的方法。

看几个实际开发中遇到的情况吧:

image.png

原代码:

     getValueText (value) {
       let arr = this.items
       let res
      arr.some(item => {
        if (item.value === value) {
          if (item.isOther) {
            res = value
          } else {
            res = item.text
         }
          return true
        }
      })
       return res
     },

这段代码是公司之前同事写的一段代码,首先if做的判断可以用三元运算替代,其次,返回值是res的情况所以没有必要用some方法,直接使用find方法就可以实现。

优化后:

     getValueText (value) {
       let arr = this.items
       let res
     const val = arr.find(item => item.value === value)
     val && (res = val.isOther ? value : val.text)
       return res
     },

其次像res这种临时变量尽量避免在代码中滥用

     getValueText (value) {
       let arr = this.items
       const val = arr.find(item => item.value === value)
       return val && (val.isOther ? value : val.text)
     },

同样的情况在看下面的这一段代码:

image.png

在使用map、filter、some、every的数组方法时,必须要有返回值,不然容易造成错误和误解

// bad case
arr.map(item => {
  if (item) {
    return item
  }
})

// bad case
arr.filter(item => {
  if (item) {
    return item
  }
})

// good case
arr.filter(item => item)

// bad case
arr.some(item => {
  if(item) {
    return true
  }
})
// good case
arr.some(item => item)

// bad case
arr.every(item => {
  if(!item) {
    return false
  }
})

// good case
arr.every(item => item)