20个提升效率的JS简写技巧,告别屎山!

  • 20个提升效率的JS简写技巧,告别屎山!已关闭评论
  • 108 次浏览
  • A+
所属分类:Web前端
摘要

JavaScript 中有很多简写技巧,可以缩短代码长度、减少冗余,并且提高代码的可读性和可维护性。本文将介绍 20 个提升效率的 JS 简写技巧,助你告别屎山,轻松编写优雅的代码!

JavaScript 中有很多简写技巧,可以缩短代码长度、减少冗余,并且提高代码的可读性和可维护性。本文将介绍 20 个提升效率的 JS 简写技巧,助你告别屎山,轻松编写优雅的代码!

移除数组假值

可以使用 filter() 结合 Boolean 来简化移除数组假值操作。假值指的是在条件判断中被视为 false 的值,例如 nullundefined、空字符串(""'')、0、NaNfalse

传统写法:

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]  

Boolean 是 JavaScript 的内置构造函数,通过传递一个值给它,可以将该值转换为布尔值。在这种情况下,Boolean 构造函数作为回调函数传递给 filter() 方法,因此会将每个数组元素转换为布尔值。只有转换结果为真值的元素才会保留在新数组中。

注意:这种方式会将 0 也过滤掉,如果不需要过滤 0,需要进行额外的判断。

数组查找

当对数组进行查找时,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)) {    }  

位非(~)运算符对除了-1之外的任何值都返回一个"真"值。对其进行取反就是简单地使用!~即可。另外,也可以使用includes()函数:

if(arr.includes(item)) {    }  

空值合并运算符

空值合并运算符(??)用于为 nullundefined 的变量提供默认值。

传统写法:

const fetchUserData = () => {  	return '前端充电宝';  };    const data = fetchUserData();  const username = data !== null && data !== undefined ? data : 'Guest';    

简化写法:

const fetchUserData = () => {  	return '前端充电宝';  };    const data = fetchUserData();  const username = data ?? 'CUGGZ';  

除此之外,还有一个空位合并赋值运算符(??=),用于在变量为空(nullundefined)时进行赋值操作。

传统写法:

let variable1 = null;  let variable2 = "前端充电宝";    if (variable1 === null || variable1 === undefined) {    variable1 = variable2;  }  

简化写法:

let variable1 = null;  let variable2 = "前端充电宝";    variable1 ??= variable2;  

??= 的写法更加简洁和易读。它首先检查变量 variable1 是否为 nullundefined,如果是,则将它赋值为 variable2 的值。如果 variable1 已经有一个非空的值,那么赋值操作就不会发生。

逻辑或赋值运算符

逻辑或赋值运算符(||=)用于为变量分配默认值。

传统写法:

let count;  if (!count) {    count = 0;  }  

简化写法:

let count;  count ||= 0;  

count 为假值(例如 undefined、null、false、0、NaN 或空字符串)时,逻辑或赋值运算符将 count 赋值为 0。否则,它会保留 count 的原始值。

多值匹配

对于多个值的匹配,可以将所有的值放入一个数组中,然后使用 indexOf() 方法进行检查。indexOf() 方法是 JavaScript 数组的一个内置方法,它用于返回指定元素在数组中第一次出现的位置索引。如果数组中不存在该元素,则返回 -1。

传统写法:

if (value === 1 || value === 'one' || value === 2 || value === 'two') {    // ...  }  

简化写法:

if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {     // ...  }  

更简化写法:

if ([1, 'one', 2, 'two'].includes(value)) {       // ...  }  

三元表达式

使用三元表达式表示可以简化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';  

短路求值

当将一个变量的值赋给另一个变量时,可能希望确保源变量不为 null、undefined 或空。可以编写一个包含多个条件的长 if 语句,或者使用短路求值来简化。

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {      let variable2 = variable1;  }  

使用短路求值简化后的代码如下:

const variable2 = variable1 || 'new';  

对于逻辑或(||)操作符,以下值被视为假:

  • false

  • 0

  • 空字符串("" 或 '')

  • null

  • undefined

  • NaN

所以,如果本身的值可能就是这些中的一个,就不适合使用短路求值。

短路求值还能在函数调用中避免不必要的函数执行。

传统写法:

function fetchData() {    if (shouldFetchData) {      return fetchDataFromAPI();    } else {      return null;    }  }  

简化写法:

function fetchData() {    return shouldFetchData && fetchDataFromAPI();  }  

shouldFetchData 为真值时,短路求值会继续执行 fetchDataFromAPI() 函数并返回其结果。如果 shouldFetchData 为假值,短路求值会直接返回假值(null),避免了不必要的函数调用。

科学计数法

可以使用科学技术法来表示数字,以省略尾部的零。例如,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;  

位运算符

双位非运算符有一个非常实用的用途,可以用它来替代Math.floor()函数,它在执行相同的操作时速度更快。

传统写法:

Math.floor(4.9) === 4  //true  

简化写法:

~~4.9 === 4  //true  

指数幂运算

指数幂运算可以使用 ** 来简化。

传统写法:

Math.pow(2,3); // 8  Math.pow(2,2); // 4  Math.pow(4,3); // 64  

简化写法:

2**3 // 8  2**4 // 4  4**3 // 64  

从 ES7(ECMAScript 2016)开始,JavaScript 引入了指数幂运算符 **,使指数幂运算更加简洁。

双非未运算符

在 JavaScript 中,双非位运算符 ~~ 可以用于将数字向下取整,类似于 Math.floor() 方法的功能。

传统写法:

const floor = Math.floor(6.8); // 6  

简化写法:

const floor = ~~6.8; // 6  

注意:双非位运算符只适用于 32 位整数,即范围为 -(2^31) 到 (2^31)-1,即 -2147483648 到 2147483647。对于大于 2147483647 或小于 0 的数字,双非位运算符(~~)会给出错误的结果,因此建议在这种情况下使用 Math.floor() 方法。

对象属性

ES6 提供了一种更简洁的方式来给对象赋值属性。如果变量名与对象的键名相同,可以利用简写符号来进行赋值。

传统写法:

const name = '微信