如何删除 JavaScript 数组中的虚值

_Zhao 发布于2019-08-23 17:01 / 666人阅读

摘要：知道如果我们将输入数组中的每个值都转换为布尔值，就可以删除所有值为的元素，这就满足了此挑战的要求。

翻译：疯狂的技术宅
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个方案及实现

超融合服务器专线服务 javascript中的二维数组 js删除数组中的数据阿里云服务器中的进程如何删除 javascript中的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103693.html

JS 中为啥 ['1', '7', '11

摘要：如果我们把非布尔值作为条件呢打开控制台并运行上述代码，会打印说明条件为真值。在中，真值指的是在布尔值上下文中转换后的值为真的值。两个能够建立元素间一一对应的集合称为互相对等集合。 showImg(https://segmentfault.com/img/bVbtSvt?w=720&h=360); 为了保证可读性，本文采用音译而非直译。 Javascript 一直是神奇的语言。不相信我...

yuanzhanghu 2019-08-23 18:09 评论0 收藏0
Licia 支持小程序的 JS 工具库

摘要：注模块名右边有小程序图标即表明可以在小程序中使用。转义字符串为合法的字符串字面量。转义特殊字符用于构造函数。使构造函数继承另一个构造函数原型链上的方法。导语 Licia 是一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 300 个模块，同时支持浏览器、node 及小程序运行环境，提供了包括日期格式化、md5、颜色转换等实用模块，可以极大地提高开发效率。...

DangoSky 2019-08-23 17:18 评论0 收藏0
C++多态底层刨析(虚函数指针，虚函数表)

摘要：当子类继承了父类并且子类重写了父类的虚函数之后，我们可以看到此时子类中虚函数指针对应的虚函数表中存的是子类经过重写的函数了。前言：相信小伙伴们在学习到C++面...

callmewhy 2021-09-10 10:51 评论0 收藏0
避免取值时出现Cannot read property 'xx' of unde

摘要：由于是以空函数为代理对象，我们可以将执行它，触发。中会遍历数组依次取值，如果发现无法继续取值则，跳出循环。本文来自我的博客，欢迎大家去GitHub上star我的博客我们在取值特别是链式取值的时候，常常会遇到Cannot read property xx of undefined的错误，如何避免这种情况的发生呢？这里有几种方法以供参考使用成熟的库方法这是最简单的一种手段：只用引入...

fantix 2019-08-23 15:23 评论0 收藏0