提高效率 | 20个JavaScript缩写技巧（上）
2023-10-07 11:45:38
JavaScript 缩写技巧（上）JavaScript 中有许多速记技巧，可以缩短代码长度，减少冗余，提高代码的可读性和可维护性。以下是 20 个提高效率的 JS 缩写技巧中的前 10 个：
01、从数组中删除假值使用 filter() 组合布尔值来简化从数组中删除假值的过程。传统写法：
let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];let filterArray = arr.filter(value => { if(value) { return value };}); // [12, 'xyz', -25, 0.5]简化写法：
let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];let filterArray = arr.filter(value => Boolean(value)); // [12, 'xyz', -25, 0.5]更简化的写法：
let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];let filterArray = arr.filter(Boolean); // [12, 'xyz', -25, 0.5]注意：该方法也会过滤掉 0。如果不需要过滤掉 0，则需要额外判断。
02、数组搜索当搜索数组时，indexOf() 用于获取搜索项的位置。如果未找到该项目，则返回值为 -1。传统写法：
if(arr.indexOf(item) > -1) { }if(arr.indexOf(item) === -1) {}简化写法：
if(~arr.indexOf(item)) {}if(!~arr.indexOf(item)) {}按位 NOT (~) 运算符对于除 -1 之外的任何值都返回“真”值。要否定它，只需使用 !~ 即可。或者，您可以使用 includes() 函数：
if(arr.includes(item)) {}03、空值合并运算符?? 用于为 null 或 undefined 的变量提供默认值。传统写法：
const fetchUserData = () => { return 'Xiuer Old';};const data = fetchUserData();const username = data !== null && data !== undefined ? data : 'Guest';简化写法：
const fetchUserData = () => { return 'Xiuer Old';};const data = fetchUserData();const username = data ?? 'medium';空合并赋值运算符（??=）：
let variable1 = null;let variable2 = "Xiuer Old";variable1 ??= variable2;??= 写法更简洁，更容易阅读。它首先检查 variable1 是否为 null 或未定义，如果是，则将值赋给 variable2。如果 variable1 已经有一个非空值，则不会发生赋值。
04、逻辑或赋值运算符||= 用于为变量指定默认值。传统写法：
let count;if (!count) { count = 0;}简化写法：
let count;count ||= 0;当 count 为假值（例如 undefined、null、false、0、NaN 或空字符串）时，逻辑 OR 赋值运算符将赋值 0。否则，它保留 count 的原始值。
05、多值匹配对于多个值的匹配，可以将所有值放入一个数组中，然后使用 indexOf() 方法进行检查。传统写法：
if (value === 1 || value === 'one' || value === 2 || value === 'two') { // ...}简化写法：
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) { // ...}06、三元表达式可以使用三元表达式 if...else 来简化。传统写法：
let isAdmin;if (user.role === 'admin') { isAdmin = true;} else { isAdmin = false;}简化写法：
const isAdmin = user.role === 'admin' ? true : false;更简化的写法：
const isAdmin = user.role === 'admin';07、短路评估将一个变量的值分配给另一个变量时，您可能需要确保源变量不为 null、未定义或为空。传统写法：
if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1;}使用短路评估简化的代码：
const variable2 = variable1 || 'new';对于逻辑 OR (||) 运算符，以下值被视为 false：
- false
- 0
- 空字符串（"" 或 ''）
- null
- undefined
- NaN
因此，如果值本身可能是其中之一，则不适合使用短路评估。短路评估还可以避免函数调用中不必要的函数执行：传统写法：
function fetchData() { if (shouldFetchData) { return fetchDataFromAPI(); } else { return null; }}简化写法：
function fetchData() { return shouldFetchData && fetchDataFromAPI();}当 shouldFetchData 为 true 时，短路评估继续执行函数的 fetchDataFromAPI() 并返回其结果。如果 shouldFetchData 为假值，短路求值将直接返回假值（null），避免不必要的函数调用。
08、科学计数法可以使用科学和技术方法来表示数字以省略尾随零。例如，1e7 实际上意味着 1 后面跟着 7 个零。它代表 10,000,000 的十进制等值。传统写法：
for (let i = 0; i < 10000; i++) {}简化写法：
for (let i = 0; i < 1e7; i++) {}下面的所有比较都将返回 true：
1e0 === 1;1e1 === 10;1e2 === 100;1e3 === 1000;1e4 === 10000;1e5 === 100000;09、位运算符双位 NOT 运算符有一个非常实际的用途，您可以用它来替换 Math.floor() 函数，在执行相同操作时速度更快。传统写法：
Math.floor(4.9) === 4 //true简化写法：
~~4.9 === 4 //true10、指数求幂指数求幂运算可以使用 来简化。传统写法：
Math.pow(2,3); // 8Math.pow(2,2); // 4Math.pow(4,3); // 64简化写法：
23 // 824 // 443 // 64从 ES7（ECMAScript 2016）开始，JavaScript 引入了指数幂运算符 ，使指数幂运算更加简洁。
以上是 20 个提高效率的 JS 缩写技巧中的前 10 个，后续技巧将在下一篇中介绍。
热门标签
