如何删除 JavaScript 数组中的虚值

Photo by Vincent van Zalinge on Unsplash

引用自 MDN:

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

算法说明

1function bouncer(arr) {
2 return arr;
3}
4
5bouncer([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() 来实现：

1let numbers = [4, 56, 78, 99, 101, 150, 299, 300]
2numbers.filter(number => number > 100)
3// returns [ 101, 150, 299, 300 ]

我们再来谈谈那个将每个元素转换为布尔值的提示。这是一个很好的提示，因为我们可以用.filter() 返回只有真值（truthy）的数组。

我们将通过JavaScript类型转换来实现这一目标。

JavaScript 为我们提供了将一种数据类型转换为另一种的有用函数， String()转换为字符串，Number() 转换为数字，Boolean() 转换为布尔值。

例如：

1String(1234)
2// returns "1234"
3Number("47")
4// returns 47
5Boolean("meow")
6// returns true

Boolean() 是我们完成这个挑战所需要的函数。如果提供给 Boolean() 的参数是真值，那么Boolean() 将返回 true 。如果提供给 Boolean() 的参数是虚值，那么 Boolean() 将返回false。

这对我们非常有用，因为我们从指令中知道只有 false，null，0，""，undefined 和NaN 在 JavaScript 中是虚值。其他每一个值都是真值。知道如果我们将输入数组中的每个值都转换为布尔值，就可以删除所有值为 false 的元素，这就满足了此挑战的要求。

算法：

1. 确定 arr 中的哪些值是虚值。
2. 删除所有虚值。
3. 返回仅包含真值（truthy）的新数组。

代码：

 1function bouncer(arr) {
 2 // Use filter to remove falsy elements from arr.
 3 let onlyTruthyValues = arr.filter(element => Boolean(element) === true)
 4 // 7 Boolean(7) is true
 5 // "ate" Boolean("ate") is true
 6 // "" Boolean("") is false
 7 // false Boolean(false) is false
 8 // 9 Boolean(9) is true
 9
10 // Return the new array.
11 return onlyTruthyValues
12 // [7, "ate", 9]
13}
14
15bouncer([7, "ate", "", false, 9]);

去掉注释并删除局部变量：

1function bouncer(arr) {
2 return arr.filter(element => Boolean(element) === true)
3}
4
5bouncer([7, "ate", "", false, 9]);

如果你有其他解决方案或建议，请在评论中分享！

十五年编程经验，今年1月整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。只要关注我的头条号，后台私信我【前端】两个字，即可免费获取。

閱讀更多 前端技術教學分享 的文章

關鍵字: 算法 虚值 语句