东莞专业网站设计建站公司,最近10个新闻,wordpress数据库改主机,项目网创业JavaScript开发技巧#xff08;上篇#xff09; 1、前言2、从数组中删除假值3、数组搜索4、空值合并运算符5、逻辑或赋值运算符6、多值匹配7、三元表达式8、短路评估9、科学计数法10、位运算符11、指数求幂 1、前言
JavaScript中有很多速记技巧#xff0c;可以缩短代码长度… JavaScript开发技巧上篇 1、前言2、从数组中删除假值3、数组搜索4、空值合并运算符5、逻辑或赋值运算符6、多值匹配7、三元表达式8、短路评估9、科学计数法10、位运算符11、指数求幂 1、前言
JavaScript中有很多速记技巧可以缩短代码长度减少冗余提高代码的可读性和可维护性。本文将介绍提高效率的JS缩写技巧帮助你告别写垃圾的生活轻松写出优雅的代码
2、从数组中删除假值
您可以使用 filter() 组合布尔值来简化从数组中删除假值的过程。false 值是指将 false 视为条件的值例如 null、未定义、空字符串“”或 ‘’、0、NaN 和 false。
传统写法
let arr [12, null, 0, xyz, null, -25, NaN, , undefined, 0.5, false];let filterArray arr.filter(value {if(value) {return value};
});
console.log(filterArray) // [12, xyz, -25, 0.5]简化写法
let arr [12, null, 0, xyz, null, -25, NaN, , undefined, 0.5, false];let filterArr 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]Boolean 是 JavaScript 的内置构造函数通过将值传递给它来将值转换为布尔值。在本例中Boolean 构造函数作为回调函数传递给 filter() 方法从而将每个数组元素转换为布尔值。只有转换结果为 true 的元素才会保留在新数组中。
注意该方法也会过滤掉0。如果不需要过滤掉0则需要额外判断。
3、数组搜索
当搜索数组时indexOf()用于获取搜索项的位置。如果未找到该项目则返回值为-1。在 JavaScript 中0 被视为 false大于或小于 0 的数字被视为 true。因此需要这样写
传统写法
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)) {}4、空值合并运算符
null 合并运算符 (??) 用于为 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;另外还有一个空合并赋值运算符??用于当变量为空null或undefined时执行赋值操作。
传统写法
let variable1 null;
let variable2 Xiuer Old;if (variable1 null || variable1 undefined) {variable1 variable2;
}简化写法
let variable1 null;
let variable2 Xiuer Old;variable1 ?? variable2;??写法更简洁更容易阅读。它首先检查变量 1 是否为 null 或未定义如果是则将值赋给变量 2。如果variable1已经有一个非空值则不会发生赋值。
5、逻辑或赋值运算符
逻辑或赋值运算符 (||) 用于为变量指定默认值。
传统写法
let count;
if (!count) {count 0;
}简化写法
let count;
count || 0;当 count 为假值例如 undefined、null、false、0、NaN 或空字符串时逻辑 OR 赋值运算符将赋值 0。count 否则它保留 count 的原始值。
6、多值匹配
对于多个值的匹配可以将所有值放入一个数组中然后使用indexOf()方法进行检查。indexOf() 方法是 JavaScript 数组的内置方法用于返回指定元素在数组中第一次出现的位置索引。如果数组中不存在该元素则返回-1。
传统写法
if (value 1 || value one || value 2 || value two) {// ...
}简化写法
if ([1, one, 2, two].indexOf(value) 0) {// ...
}7、三元表达式
这可以使用三元表达式 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;8、短路评估
将一个变量的值分配给另一个变量时您可能需要确保源变量不为 null、未定义或为空。您可以编写包含多个条件的长 if 语句或使用短路求值来简化。
if (variable1 ! null || variable1 ! undefined || variable1 ! ) {let variable2 variable1;
}使用短路评估简化的代码如下
const variable2 variable1 || new;对于逻辑 OR (||) 运算符以下值被视为 false
false0空字符串“”或“”nullundefinedNaN因此如果值本身可能是其中之一则不适合使用短路评估。
短路评估还可以避免函数调用中不必要的函数执行。
传统写法
function fetchData() {if (shouldFetchData) {return fetchDataFromAPI();} else {return null;}
}简化写法
function fetchData() {return shouldFetchData fetchDataFromAPI();
}当 shouldFetchData 为 true 时短路评估继续执行函数的 fetchDataFromAPI() 并返回其结果。如果shouldFetchData为假值短路求值将直接返回假值null避免不必要的函数调用。
9、科学计数法
可以使用科学和技术方法来表示数字以省略尾随零。例如1e7it 实际上意味着 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;10、位运算符
双位 NOT 运算符有一个非常实际的用途您可以用它来替换 Math.floor() 函数在执行相同操作时速度更快。
传统写法
Math.floor(4.9) 4 //true简化写法
~~4.9 4 //true11、指数求幂
指数求幂运算可以使用 * 来简化。
传统写法
Math.pow(2,3); // 8
Math.pow(2,2); // 4
Math.pow(4,3); // 64简化写法
2**3 // 8
2**4 // 4
4**3 // 64从ES7ECMAScript 2016开始JavaScript引入了指数幂运算符**使指数幂运算更加简洁。
