近期借助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
可以直接作为回调函数使用。它会将传入的值转换为布尔值,并返回true
或false
。常见的使用场景是过滤数组中的假值(如false
、null
、undefined
、0
、NaN
、""
)。示例代码
javascriptconst array = [0, 1, false, 2, '', 3, null, undefined, NaN, 4]; // 使用 Boolean 作为回调函数过滤数组中的假值 const filteredArray = array.filter(Boolean); console.log(filteredArray); // 输出: [1, 2, 3, 4]
解释
Boolean
的作用 :
Boolean(value)
会将value
转换为布尔值。- 如果
value
是真值(如非零数字、非空字符串、对象等),返回true
。- 如果
value
是假值(如false
、null
、undefined
、0
、NaN
、""
),返回false
。filter
方法 :
filter
方法会根据回调函数的返回值决定是否保留数组中的元素。- 如果回调函数返回
true
,保留该元素;如果返回false
,过滤掉该元素。使用场景
- 清除数组中的假值。
- 简化代码逻辑,避免手动编写复杂的回调函数。
注意事项
Boolean
只适用于需要过滤假值的场景。如果需要更复杂的逻辑,应该使用自定义回调函数。
原来如此,Boolean()
本身就可以作为普通函数使用,当 Boolean()
作为普通函数调用时(不使用 new
),它将参数强制转换为布尔原始值,是我傻了。。。

扩展
在其他数组方法中使用 Boolean
作为回调函数
许多数组方法(如 filter
、some
、every
、map
等)接受一个回调函数来对数组中的每个元素进行判断。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
作为回调函数的主要用途是将值转换为布尔值,从而简化代码逻辑。它在数组方法(如 filter
、some
、every
、map
等)中特别有用,可以快速过滤或判断数组中的值。此外,Boolean
也可以用于其他需要布尔判断的场景,帮助你编写更简洁、更高效的代码。
到最后,我想还是需要再回顾一下javascript数据类型基础