题解 | #移除数组中的元素# 附 filter箭头函数注意
移除数组中的元素
https://www.nowcoder.com/practice/edbc7496a36e433c89d298b9256af856
{"html":"<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <style>\n /* 填写样式 */\n </style>\n</head>\n\n<body>\n <!-- 填写标签 -->\n <script type=\"text/javascript\">\n // 填写JavaScript\n function remove(arr, item) {\n let res = arr.filter(element => element !== item\n )\n\n return res\n\n}\n </script>\n</body>\n\n</html>","css":"","js":""}
这是一个很好的问题。在 JavaScript 中，箭头函数有两种不同的语法形式，它们的行为有所不同。让我们详细解释一下这两种形式的区别。
箭头函数的基本形式
- 简洁形式：在这种形式中，箭头函数的主体是一个表达式，该表达式的返回值会自动成为函数的返回值。例如：这里，element !== item 是一个表达式，它的结果（布尔值）会自动返回。
- 块形式：在这种形式中，箭头函数的主体是一个代码块（用大括号 {} 包围）。在这种情况下，你需要显式地使用 return 关键字来返回值。例如：
问题分析
当你将 element => element !== item 改成 element => { element !== item } 时，发生了什么？
- 简洁形式：这里，element !== item 是一个表达式，它的结果会自动返回。因此，filter 方法会正确地过滤掉所有等于 item 的元素。
- 块形式：这里，{ element !== item } 是一个代码块，而不是一个表达式。在代码块中，element !== item 被计算为一个布尔值，但这个布尔值不会自动返回。因此，filter 方法会认为每个元素的回调函数返回值是 undefined，而 undefined 被视为 false，所以没有任何元素会被保留。
正确的块形式
为了使块形式的箭头函数返回正确的值，你需要显式地使用 return 关键字：
element => { return element !== item; }
完整示例
function removeItems(arr, item) {
return arr.filter(element => { return element !== item; });
}
// 测试代码
const inputArray = [1, 2, 3, 4, 2];
const itemToRemove = 2;
const resultArray = removeItems(inputArray, itemToRemove);
console.log(resultArray); // 输出：[1, 3, 4]
总结
- 简洁形式：
element => expression，表达式的返回值会自动成为函数的返回值。 - 块形式：
element => { statement }，需要显式地使用return关键字来返回值。
