JavaScript开发技巧(上篇)

JavaScript开发技巧(上篇)

  • 1、前言
  • 2、从数组中删除假值
  • 3、数组搜索
  • 4、空值合并运算符
  • 5、逻辑或赋值运算符
  • 6、多值匹配
  • 7、三元表达式
  • 8、短路评估
  • 9、科学计数法
  • 10、位运算符
  • 11、指数求幂

1、前言

JavaScript中有很多速记技巧,可以缩短代码长度,减少冗余,提高代码的可读性和可维护性。本文将介绍提高效率的JS缩写技巧,帮助你告别写垃圾的生活,轻松写出优雅的代码!

2、从数组中删除假值

您可以使用 filter() 组合布尔值来简化从数组中删除假值的过程。false 值是指将 false 视为条件的值,例如 null、未定义、空字符串(“”或 ‘’)、0、NaNfalse

传统写法:

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]

BooleanJavaScript 的内置构造函数,通过将值传递给它来将值转换为布尔值。在本例中,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 为假值(例如 undefinednullfalse0NaN 或空字符串)时,逻辑 OR 赋值运算符将赋值 0count 否则,它保留 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

false

0

空字符串(“”或“”)

null

undefined

NaN

因此,如果值本身可能是其中之一,则不适合使用短路评估。

短路评估还可以避免函数调用中不必要的函数执行。

传统写法:

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

简化写法:

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

shouldFetchDatatrue 时,短路评估继续执行函数的 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  //true

11、指数求幂

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

传统写法:

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,javascript,开发语言,ecmascript)