关于数组方法Array.prototype.filter()方法中在回调函数体中是否需要使用return的超详细解析

2024-02-01 19:31:28

关于数组方法Array.prototype.filter()方法中在回调函数体中是否需要使用return的超详细解析

很多小伙伴可能会有这样的疑问，为什么有时候数组调用filter方法的时候需要加return 有时候不需要参考下面代码

test代码1 我们用正常函数在函数表达式中加return 会正常输出结果

// 这是一个利用数组 filter方法 去重的函数封装
function unique(arr) {
	return arr.filter(function(v, i, arr) {
		return arr.indexOf(v) === i;
	}
})
// 验证 
let arr = [1,1,2,2,3,3]
console.log(unique(arr));

// 控制台输入 [1,2,3] 
// 这里顺便说下这个方法的思路
 // filter() 方法会遍历数组 保留回调函数中 条件式为 true 的元素
 // 并创建一个新的数组,条件表达式的值为 false 的元素会排除掉不会存在新的数组中 
 // indexOf()方法会返回数组元素第一次出现的位置,用它来和循环的 i 对比 
 // 值为true 的会被filter方法 添加到新创建的数组中

test代码2 不添加return 无法正常输出结果

// 这是一个利用数组 filter方法 去重的函数封装
function unique(arr) {
	return arr.filter(function(v, i, arr) {
		 arr.indexOf(v) === i;
	}
})
// 验证 
let arr = [1,1,2,2,3,3]
console.log( unique(arr));

// 控制台输入 [] 
// 不加return 会返回空数组 因为没有满足条件

test代码3 这次我们改用箭头函数不加 return 还是不能正常返回数值

// 这是一个利用数组 filter方法 去重的函数封装
function unique(arr) {
	return arr.filter((v, i, arr) => {
		 arr.indexOf(v) === i;
	}
})
// 验证 
let arr = [1,1,2,2,3,3]
console.log( unique(arr));

// 控制台输入 []

test代码4 这次我们改用箭头函数不加 return 并让其正常输出结果

// 这是一个利用数组 filter方法 去重的函数封装
function unique(arr) {
	return arr.filter((v, i, arr) => arr.indexOf(v) === i)
}
// 验证 
let arr = [1,1,2,2,3,3]
console.log( unique(arr));

// 控制台输入 [1, 2, 3]

总结

很多小伙伴可能会以为用箭头函数不添加 return 也不会报错，这样理解是错误的，可以参考代码段 test3

filter方法是根据它回调函数的返回值来判断是否把遍历的元素添加到新数组的可以参考MDN关于filter方法的说明，

也就是说表达式必须返回一个值 true 或者 false, 也就是说不管是普通函数，还是箭头函数都是必须要添加return返回一个值的

test3 代码段就是一个箭头函数，他的表达式并没有返回一个值所以是null

js会先把null 这个值转换成数字，值为 0。 0的布尔值是 false。

filter方法中回调函数值为false 会跳过最后返回一个空数组，所以控制台输出的是空数组而不是报错

最后的test4代码段能正确输出的本质不是因为他是一个箭头函数而不用添加 return

test4代码使用了箭头函数根据箭头函数的特性 => 符号后面的表达式只有一条的话，可以省略花括号 {}, 还有 return 关键字，可以理解为他隐式添加了 return 而不是使用箭头函数不用添加return大家不要混淆了哦~

码农公寓

关于数组方法Array.prototype.filter()方法中在回调函数体中是否需要使用return的超详细解析