如何删除 JavaScript 数组中的虚值

41次阅读

共计 2529 个字符,预计需要花费 7 分钟才能阅读完成。

翻译:疯狂的技术宅 https://medium.freecodecamp.o…

本文首发微信公众号:前端先锋欢迎关注,每天都给你推送新鲜的前端技术文章

引用自 MDN:
falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换 (Type Conversion) 将值转换为布尔值,比如:在条件语句或者循环语句中。
falsy 有时写作 falsey

在 JavaScript 中有很多方法可以从数组中删除元素,但是从数组中删除所有虚值的最简单方法是什么?为了回答这个问题,我们将仔细研究 truthy 与 falsy 值和类型强制转换。

算法说明
从数组中删除所有虚值。JavaScript 中的虚值是 false、null、0、“”、undefined 和 NaN。提示:尝试将每个值转换为布尔值。
function bouncer(arr) {
return arr;
}

bouncer([7, “ate”, “”, false, 9]);
提供的测试用例

bouncer([7, “ate”, “”, false, 9]) 应该返回 [7, “ate”, 9]。

bouncer([“a”, “b”, “c”]) 应该返回 [“a”, “b”, “c”]。

bouncer([false, null, 0, NaN, undefined, “”]) 应该返回 []。

bouncer([1, null, NaN, 2, undefined]) 应该返回 [1, 2]。

解决方案:.filter() 和 Boolean()
理解问题:我们有一个作为输入的数组。目标是从数组中删除所有的虚值然后将其返回。
freeCodeCamp 上的好心人告诉我们,JavaScript 中的虚值是 false、null、0、“”、undefined 和 NaN。
他们也给了我们一个重要的提示!他们建议将数组的每个值转换为布尔值以完成此挑战。我认为这个提示很不错!
示例 / 测试用例:前面提供的测试用例告诉我们,如果输入数组只包含虚值,那么应该只返回一个空数组。这非常简单。
数据结构:在这里我们将坚持使用数组。
我们来谈谈.filter():
.filter()创建一个新数组,其中包含通过所提供函数测试的所有元素。
换句话说,.filter() 遍历数组中的每个元素并保留通过其中某个测试的所有元素。数组中未通过该测试的所有元素都被过滤掉了 —— 被删除了。
如果我们有一个数组并且只想保留大于 100 的数字,可以用 .filter() 来实现:
let numbers = [4, 56, 78, 99, 101, 150, 299, 300]
numbers.filter(number => number > 100)
// returns [101, 150, 299, 300]
我们再来谈谈那个将每个元素转换为布尔值的提示。这是一个很好的提示,因为我们可以用 .filter() 返回只有真值(truthy)的数组。
我们将通过 JavaScript 类型转换来实现这一目标。
JavaScript 为我们提供了将一种数据类型转换为另一种的有用函数,String()转换为字符串,Number() 转换为数字,Boolean() 转换为布尔值。
例如:
String(1234)
// returns “1234”
Number(“47”)
// returns 47
Boolean(“meow”)
// returns true
Boolean() 是我们完成这个挑战所需要的函数。如果提供给 Boolean() 的参数是真值,那么 Boolean() 将返回 true。如果提供给 Boolean() 的参数是虚值,那么 Boolean() 将返回 false。
这对我们非常有用,因为我们从指令中知道只有 false,null,0,””,undefined 和 NaN 在 JavaScript 中是虚值。其他每一个值都是真值。知道如果我们将输入数组中的每个值都转换为布尔值,就可以删除所有值为 false 的元素,这就满足了此挑战的要求。
算法:

确定 arr 中的哪些值是虚值。
删除所有虚值。
返回仅包含真值(truthy)的新数组。

代码:
function bouncer(arr) {
// Use filter to remove falsy elements from arr.
let onlyTruthyValues = arr.filter(element => Boolean(element) === true)
// 7 Boolean(7) is true
// “ate” Boolean(“ate”) is true
// “” Boolean(“”) is false
// false Boolean(false) is false
// 9 Boolean(9) is true

// Return the new array.
return onlyTruthyValues
// [7, “ate”, 9]
}

bouncer([7, “ate”, “”, false, 9]);
去掉注释并删除局部变量:
function bouncer(arr) {
return arr.filter(element => Boolean(element) === true)
}

bouncer([7, “ate”, “”, false, 9]);
如果你有其他解决方案或建议,请在评论中分享!

本文是该系列 freeCodeCamp Algorithm Scripting 的一部分。
本文引用了 freeCodeCamp Basic Algorithm Scripting:Falsy Bouncer。

本文首发微信公众号:前端先锋
欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章:

12 个令人惊叹的 CSS 实验项目
必须要会的 50 个 React 面试题
世界顶级公司的前端面试都问些什么
11 个最好的 JavaScript 动态效果库
CSS Flexbox 可视化手册
从设计者的角度看 React
过节很无聊?还是用 JavaScript 写一个脑力小游戏吧!
CSS 粘性定位是怎样工作的
一步步教你用 HTML5 SVG 实现动画效果
程序员 30 岁前月薪达不到 30K,该何去何从
14 个最好的 JavaScript 数据可视化库
8 个给前端的顶级 VS Code 扩展插件
Node.js 多线程完全指南
把 HTML 转成 PDF 的 4 个方案及实现

正文完
 0