摘要：知道如果我們將輸入數(shù)組中的每個(gè)值都轉(zhuǎn)換為布爾值，就可以刪除所有值為的元素，這就滿足了此挑戰(zhàn)的要求。

翻譯：瘋狂的技術(shù)宅
https://medium.freecodecamp.o...

本文首發(fā)微信公眾號(hào)：前端先鋒
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

引用自 MDN:

falsy(虛值)是在 Boolean 上下文中已認(rèn)定可轉(zhuǎn)換為‘假‘的值.
JavaScript 在需要用到布爾類型值的上下文中使用強(qiáng)制類型轉(zhuǎn)換(Type Conversion )將值轉(zhuǎn)換為布爾值，比如：在條件語句或者循環(huán)語句中。
falsy 有時(shí)寫作 falsey

在 JavaScript 中有很多方法可以從數(shù)組中刪除元素，但是從數(shù)組中刪除所有虛值的最簡單方法是什么？為了回答這個(gè)問題，我們將仔細(xì)研究 truthy 與 falsy 值和類型強(qiáng)制轉(zhuǎn)換。

從數(shù)組中刪除所有虛值。
JavaScript 中的虛值是  false、 null、 0、 ""、 undefined 和  NaN。
提示：嘗試將每個(gè)值轉(zhuǎn)換為布爾值。

function bouncer(arr) {
  return arr;
}

bouncer([7, "ate", "", false, 9]);

bouncer([7, "ate", "", false, 9]) 應(yīng)該返回 [7, "ate", 9]。

bouncer(["a", "b", "c"]) 應(yīng)該返回 ["a", "b", "c"]。

bouncer([false, null, 0, NaN, undefined, ""]) 應(yīng)該返回 []。

bouncer([1, null, NaN, 2, undefined]) 應(yīng)該返回 [1, 2]。

理解問題：我們有一個(gè)作為輸入的數(shù)組。目標(biāo)是從數(shù)組中刪除所有的虛值然后將其返回。

freeCodeCamp 上的好心人告訴我們，JavaScript 中的虛值是 false、 null、 0、 ""、 undefined 和 NaN。

他們也給了我們一個(gè)重要的提示！他們建議將數(shù)組的每個(gè)值轉(zhuǎn)換為布爾值以完成此挑戰(zhàn)。我認(rèn)為這個(gè)提示很不錯(cuò)！

示例/測(cè)試用例：前面提供的測(cè)試用例告訴我們，如果輸入數(shù)組只包含虛值，那么應(yīng)該只返回一個(gè)空數(shù)組。這非常簡單。

數(shù)據(jù)結(jié)構(gòu)：在這里我們將堅(jiān)持使用數(shù)組。

我們來談?wù)?b>.filter()：

.filter()創(chuàng)建一個(gè)新數(shù)組，其中包含通過所提供函數(shù)測(cè)試的所有元素。

換句話說，.filter() 遍歷數(shù)組中的每個(gè)元素并保留通過其中某個(gè)測(cè)試的所有元素。數(shù)組中未通過該測(cè)試的所有元素都被過濾掉了 —— 被刪除了。

如果我們有一個(gè)數(shù)組并且只想保留大于 100 的數(shù)字，可以用 .filter() 來實(shí)現(xiàn)：

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

我們?cè)賮碚務(wù)勀莻€(gè)將每個(gè)元素轉(zhuǎn)換為布爾值的提示。這是一個(gè)很好的提示，因?yàn)槲覀兛梢杂?.filter() 返回只有真值（truthy）的數(shù)組。

我們將通過JavaScript類型轉(zhuǎn)換來實(shí)現(xiàn)這一目標(biāo)。

JavaScript 為我們提供了將一種數(shù)據(jù)類型轉(zhuǎn)換為另一種的有用函數(shù)， String()轉(zhuǎn)換為字符串，Number() 轉(zhuǎn)換為數(shù)字，Boolean() 轉(zhuǎn)換為布爾值。

例如：

String(1234)
// returns "1234"
Number("47")
// returns 47
Boolean("meow")
// returns true

Boolean() 是我們完成這個(gè)挑戰(zhàn)所需要的函數(shù)。如果提供給 Boolean() 的參數(shù)是真值，那么 Boolean() 將返回 true 。如果提供給 Boolean() 的參數(shù)是虛值，那么 Boolean() 將返回 false。

這對(duì)我們非常有用，因?yàn)槲覀儚闹噶钪兄乐挥?false，null，0，""，undefined 和 NaN 在 JavaScript 中是虛值。其他每一個(gè)值都是真值。知道如果我們將輸入數(shù)組中的每個(gè)值都轉(zhuǎn)換為布爾值，就可以刪除所有值為 false 的元素，這就滿足了此挑戰(zhàn)的要求。

算法：

確定 arr 中的哪些值是虛值。

刪除所有虛值。

返回僅包含真值（truthy）的新數(shù)組。

代碼：

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]);

如果你有其他解決方案或建議，請(qǐng)?jiān)谠u(píng)論中分享！

本文是該系列 freeCodeCamp Algorithm Scripting 的一部分。

本文引用了 freeCodeCamp Basic Algorithm Scripting：Falsy Bouncer。

12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

必須要會(huì)的 50 個(gè)React 面試題

世界頂級(jí)公司的前端面試都問些什么

11 個(gè)最好的 JavaScript 動(dòng)態(tài)效果庫

CSS Flexbox 可視化手冊(cè)

從設(shè)計(jì)者的角度看 React

過節(jié)很無聊？還是用 JavaScript 寫一個(gè)腦力小游戲吧！

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實(shí)現(xiàn)動(dòng)畫效果

程序員30歲前月薪達(dá)不到30K，該何去何從

14個(gè)最好的 JavaScript 數(shù)據(jù)可視化庫

8 個(gè)給前端的頂級(jí) VS Code 擴(kuò)展插件

Node.js 多線程完全指南

把HTML轉(zhuǎn)成PDF的4個(gè)方案及實(shí)現(xiàn)