今天也有很努力的在赚猫粮钱
工作中接到了一个优化代码的工作: 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 方法找到符合条件的值后会返回符合条件的那一项 ,所以在开发中视业务需求选择对应的方法。
看几个实际开发中遇到的情况吧:
原代码:
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)
},
同样的情况在看下面的这一段代码:
在使用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)