被同事代码震惊，使用Boolean 构造函数代码居然可以如此优雅！ 点击关注公众号，“技术干货”及时达！ 显式转换与隐式转换为了加深对本文涉及的Boolean的语法理解，我们先回忆一下JavaScript中的「显示与隐式转换」。 显式转换「显式转换」是指通过明确的代码，主动将一种数据类型转换为另一种类型。这种方式通常是直观的、可控的。 「常见方法」 使用构造函数：String()、Number()、Boolean() 等。使用特定方法：如 toString()、parseInt() 等。//转换为字符串 constnum=42; conststr=String(num);//"42" conststr2=num.toString();//"42" //转换为数字 conststrNum="123"; constnum2=Number(strNum);//123 //转换为布尔值 constval=0; constbool=Boolean(val);//false 隐式转换在 JavaScript 中，所有的值都可以被「隐式转换」为布尔值。在这种转换中，值会被分类为“真值” 或“假值”。 「假值 (falsy)」 ：在转换为布尔值时被视为 false 的值，包括： false0 （数字零）-0 （负零）"" （空字符串）nullundefinedNaN （非数字）「真值 (truthy)」 ：除了上述假值外，所有其他值在转换为布尔值时都被视为 true。 在条件判断if和逻辑运算中，所有的值都会被进行隐式抓换。如： //if中的0被视为false if(0){ } //if中的1被视为true（1是真值） if(1){ } Boolean的妙用Boolean 构造函数是 JavaScript 中的内建函数之一，用于将一个值转换为布尔值 (true 或 false)。在前端开发中，Boolean的用途似乎并不多，在进行一些布尔判断时，我们几乎都使用了隐式转换。 constdata=res?.data||[] if(data?.length){ //.... } 上述代码中，data?.length就会被隐式转换为「布尔值，」 从而达到我们的预期功能。 很少有人会显示转换 constdata=res?.data||[] if(Boolean(data?.length)){ //.... } 这么一看，Boolean的使用场景似乎都可以被隐式转换替代。 然而，前几天，我们代码评审的时候，我看到同事一段非常“「奇特」”的代码 constrawlist=res?.data||[] consttrueList=values.filter(Boolean); 虽然，我没理解这样为啥生效，但我很明白这个段代码的含义是通过filter方法过滤掉了原始数组中的所有假值，如null、undefined、""、0等。 我很好奇，fillter不是接受一个箭头函数么 [].filter(()={}) 为什么values.filter(Boolean);也能生效？ filter(Boolean)的奥秘其实，filter(Boolean)生效的原因非常简单，因为Boolean本身就是js中的一个构造函数，我们可以将它理解为下面的伪代码 functionBoolean(value){ //布尔转换规则：Falsy 值返回 false，其它值返回 true if(value===false||value===0||value===""||value===null||value===undefined||value===NaN){ returnfalse; }else{ returntrue; } } //或 functionBoolean(value){ returnvalue?true:false;//使用三元运算符模拟 } 显然，values.filter(Boolean)的语法就等价于下面的语法： consttrueList=values.filter(item=Boolean(item)); 可见，filter(Boolean)的写法可以方便的过滤到数组中的所有假值！这确实是一个非常优雅的写法！ Boolean的其他使用场景Boolean 作为 JavaScript 的一个内置构造函数，可以作为一个简单的类型转换工具，在ts中，借助Boolean可以将某个值转换为布尔类型，从而避免一些类型报错。 如，如果用户输入了某个值，我们显示某个组件 divclass="count-info" spanv-if="inputValue"{{"输入的值为："+ inputValue }}/span inputv-model="inputValue" /div scriptsetuplang="ts" constinputValue=refstring("") /script 在ts中，编译器会给我们提示警告：「v-if后面需要跟一个布尔值，但inputValue是string类型。」 此时，我们用Boolean转换inputValue就可以完美解决这个问题 divclass="count-info" spanv-if="Boolean(inputValue)"{{"输入的值为："+ inputValue }}/span inputv-model="inputValue" /div scriptsetuplang="ts" constinputValue=refstring("") /script 当然，有些人喜欢花里花哨，使用!!强制转换 divclass="count-info" spanv-if="!!inputValue"{{"输入的值为："+ inputValue }}/span inputv-model="inputValue" /div scriptsetuplang="ts" constinputValue=refstring("") /script 这种写法，显然不如Boolean(inputValue)直观。当然，你纯粹为了炫技，那无所谓。 ?如果你不熟悉!!，参考：新手小白如何使用!!运算符写出更简洁直观的代码？ ?点击关注公众号，“技术干货”及时达！ 阅读原文