哈?Boolean能作为回调函数?

近期借助github copilot进行代码优化,Copilot给出了Array.prototype.filter(Boolean)用法,当时把我给迷惑住了,在此记录一下

背景

项目接近尾声,闲来无事开始codereview,借助github copilot进行代码优化,其中一个代码片段是这样的:

(别骂俺,这是前人留的代码)

javascript 复制代码
  let url = 'province';
  const arr = [
    areaInfo.provinceName,
    areaInfo.cityName,
    areaInfo.districtName,
  ];
  const urlList = ['province', 'city', 'district'];
  if (props.analyticalRange === '全球') {
    arr.unshift(areaInfo.countryName)
    urlList.unshift('country')
  }
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] && arr[i] != '%') {
      url = urlList[i];
      break;
    }
  }

Copilot给出的优化代码:

javascript 复制代码
  const urlList = ['country', 'province', 'city', 'district'];
  const arr = [
    props.analyticalRange === '全球' ? areaInfo.countryName : null,
    areaInfo.provinceName,
    areaInfo.cityName,
    areaInfo.districtName,
  ].filter(Boolean); // Filter out null values

  const url = arr.length > 0 ? urlList[arr.length - 1] : 'province'; /

AI给出代码还真简洁很多,但是[].filter(Boolean)是嘛?能这么用吗?

Boolean作为回调函数

于是,我继续向Copilot提出了疑问:

js中Boolean可以作为回调函数吗?
在 JavaScript 中,Boolean 可以直接作为回调函数使用。它会将传入的值转换为布尔值,并返回 truefalse。常见的使用场景是过滤数组中的假值(如 falsenullundefined0NaN"")。

示例代码

javascript 复制代码
const array = [0, 1, false, 2, '', 3, null, undefined, NaN, 4];

// 使用 Boolean 作为回调函数过滤数组中的假值
const filteredArray = array.filter(Boolean);

console.log(filteredArray); // 输出: [1, 2, 3, 4]

解释

  1. Boolean 的作用
    • Boolean(value) 会将 value 转换为布尔值。
    • 如果 value 是真值(如非零数字、非空字符串、对象等),返回 true
    • 如果 value 是假值(如 falsenullundefined0NaN""),返回 false
  2. filter 方法
    • filter 方法会根据回调函数的返回值决定是否保留数组中的元素。
    • 如果回调函数返回 true,保留该元素;如果返回 false,过滤掉该元素。

使用场景

  • 清除数组中的假值。
  • 简化代码逻辑,避免手动编写复杂的回调函数。

注意事项

  • Boolean 只适用于需要过滤假值的场景。如果需要更复杂的逻辑,应该使用自定义回调函数。

原来如此,Boolean()本身就可以作为普通函数使用,当 Boolean() 作为普通函数调用时(不使用 new),它将参数强制转换为布尔原始值,是我傻了。。。

扩展

在其他数组方法中使用 Boolean 作为回调函数

许多数组方法(如 filtersomeeverymap 等)接受一个回调函数来对数组中的每个元素进行判断。Boolean 函数可以作为简单的回调函数,直接将值转换为布尔值。

示例 1:some 方法

如果你想检查数组中是否至少有一个"真值",可以使用 some 方法。

javascript 复制代码
const arr = [0, '', false, null, undefined];

const hasTruthyValue = arr.some(Boolean);
console.log(hasTruthyValue); // 输出:false

在这个例子中,Boolean 作为回调函数,将每个元素转换为布尔值。some 方法会检查是否至少有一个元素为 true

示例 2:every 方法

如果你想检查数组中的所有值是否都是"真值",可以使用 every 方法。

javascript 复制代码
const arr = [1, 'hello', true, [], [1, 2], {}];

const allTruthyValues = arr.every(Boolean);
console.log(allTruthyValues); // 输出:true

在这个例子中,Boolean 作为回调函数,将每个元素转换为布尔值。every 方法会检查所有元素是否都是 true

示例 3 Array.prototype.map 中使用 Boolean

虽然 map 方法通常用于转换数组中的值,但你也可以使用 Boolean 将每个值转换为布尔值。

示例:
javascript 复制代码
const arr = [0, 1, '', 'hello', false, true, null, undefined, [], [1, 2], {}];

const booleanValues = arr.map(Boolean);
console.log(booleanValues); // 输出:[false, true, false, true, false, true, false, false, true, true, true]

在这个例子中,Boolean 作为回调函数,将每个元素转换为布尔值,并生成一个新的布尔数组。

在其他场景中使用 Boolean 作为回调函数

Boolean 作为回调函数的用途不仅限于数组方法,还可以用于其他需要布尔判断的场景。

示例:自定义函数

假设你有一个函数,需要对每个值进行布尔判断,并根据结果执行某些操作。

javascript 复制代码
function processValues(values) {
  values.forEach((value) => {
    if (Boolean(value)) {
      console.log(`${value} is truthy`);
    } else {
      console.log(`${value} is falsy`);
    }
  });
}

const arr = [0, 1, '', 'hello', false, true, null, undefined, [], [1, 2], {}];
processValues(arr);

输出:

csharp 复制代码
0 is falsy
1 is truthy
 is falsy
hello is truthy
false is falsy
true is truthy
null is falsy
undefined is falsy
[] is truthy
[1, 2] is truthy
{} is truthy

在这个例子中,Boolean 作为回调函数,将每个值转换为布尔值,并根据结果执行不同的操作。

总结

Boolean 作为回调函数的主要用途是将值转换为布尔值,从而简化代码逻辑。它在数组方法(如 filtersomeeverymap 等)中特别有用,可以快速过滤或判断数组中的值。此外,Boolean 也可以用于其他需要布尔判断的场景,帮助你编写更简洁、更高效的代码。

到最后,我想还是需要再回顾一下javascript数据类型基础

相关推荐
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef065 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder8 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句8 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom8 小时前
JavaScript reduce()函数详解
javascript
小飞悟8 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子8 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手8 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅9 小时前
JavaScript 中你不知道的按位运算
前端·javascript