20 个提高效率的 JavaScript 缩写技巧-每日运维

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

01、从数组中删除假值

您可以使用 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
    };
}); 
// [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() 方法，从而将每个数组元素转换为布尔值。只有转换结果为 true 的元素才会保留在新数组中。

注意：该方法也会过滤掉0。如果不需要过滤掉0，则需要额外判断。

02、数组搜索

当搜索数组时，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)) {
}

03、空值合并运算符

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已经有一个非空值，则不会发生赋值。

04、逻辑或赋值运算符

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

传统写法：

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

简化写法：

let count;
count ||= 0;

当 count 为假值（例如 undefined、null、false、0、NaN 或空字符串）时，逻辑 OR 赋值运算符将赋值 0。count 否则，它保留 count 的原始值。

05、多值匹配

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

传统写法：

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 语句，或使用短路求值来简化。

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、科学计数法

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

09、位运算符

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

传统写法：

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

简化写法：

~~4.9 === 4  //true

10、指数求幂

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

传统写法：

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引入了指数幂运算符**，使指数幂运算更加简洁。

11、双非运算符

在 JavaScript 中，双非按位运算符 ~~ 可用于对数字进行向下舍入，类似于 Math.floor() 方法的功能。

传统写法：

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

简化写法：

const floor = ~~6.8; // 6

注：双非位运算符仅适用于 32 位整数，即范围为 -(231) 到 (231)-1，即 -2147483648 到 2147483647。双非位运算符 ( ~~ ) 对于大于 2147483647 或小于 0 的数字给出不正确的结果，因此建议在这种情况下使用 Math.floor() 方法。

12、对象属性

ES6 提供了一种更简单的方法来为对象分配属性。如果变量名与对象的键名相同，则可以使用缩写表示法进行赋值。

传统写法：

const name = '微信公众号：web前端开发';
const age = 18;


const person = {
  name: name,
  age: age
};

简化写法：

const name = 'Yangxiaoai';
const age = 30;


const person = {
  name,
  age
};

13、箭头函数

箭头函数可以简化经典函数的编写。

传统写法：

function sayHello(name) {
  console.log('Hello', name);
}


setTimeout(function() {
  console.log('Loaded')
}, 2000);
list.forEach(function(item) {
  console.log(item);
});

简化写法：

sayHello = name => console.log('Hello', name);


setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

如果箭头函数只有一条语句，它将隐式返回其计算结果，并且 returnthe 关键字可以省略：

传统写法：

function calcCircumference(diameter) {
  return Math.PI * diameter
}

简化写法：

calcCircumference = diameter => (
  Math.PI * diameter;
)

14、参数解构

如果使用一些流行的 Web 框架，例如 React 和 Vue，可以使用数组或对象文字形式的数据在组件之间传递信息。要在组件中使用数据对象，需要对它们进行解构。

传统写法：

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');


const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

简化写法：

import { observable, action, runInAction } from 'mobx';


const { store, form, loading, errors, entity } = this.props;

还可以为变量指定新的变量名称：

const { store, form, loading, errors, entity:contact } = this.props;

15、扩展运算符

ES6中引入的扩展运算符可以简化一些对数组和对象的操作。

传统写法：

// Merge arrays
const odd = [1, 3, 5];
const nums = [2, 4, 6].concat(odd);
// Clone an array
const arr = [1, 2, 3, 4];
const arr2 = arr.slice();

简化写法：

// Merge arrays
const odd = [1, 3, 5];
const nums = [2, 4, 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// Clone an array
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

与 concat() 函数不同，可以使用展开运算符将一个数组插入到另一个数组中的任意位置。

const odd = [1, 3, 5];
const nums = [2, ...odd, 4, 6];

你还可以将扩展运算符与 ES6 的解构语法结合使用：

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

扩展运算符还可以用于合并对象：

传统写法：

let fname = { firstName : 'medium' };
let lname = { lastName : 'xiuer'}
let full_names = Object.assign(fname, lname);

简化写法：

let full_names = {...fname, ...lname};

16、强制参数

在传统的JavaScript编写中，为了确保函数参数传入一个有效的值，我们需要使用条件语句来抛出错误。通过使用强制参数缩写可以实现相同的逻辑。

传统写法：

function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}

简化写法：

mandatory = () => {
  throw new Error('Missing parameter!');
}


foo = (bar = mandatory()) => {
  return bar;
}

这里定义了一个名为强制的函数，抛出错误，表明函数参数没有传入。然后，在 foo 函数的参数列表中，使用分配默认值的方法将参数设置为强制（）调用结果。如果 bar 没有传入参数或者传入了 false 值，会触发 Mustadal() 函数的执行。

17、转换为布尔值

使用双逻辑 NOT 运算符可以将任何值转换为布尔值。

!!23 // TRUE
!!"" // FALSE
!!0 // FALSE
!!{} // TRUE

单个逻辑 NOT 运算符已经可以将值转换为布尔类型并对它取反，因此，第二个逻辑 NOT 运算符再次对其取反，将其返回到其原始含义并将其保留为布尔类型。

18、变量交换

使用数组解构可以轻松实现变量交换。

传统写法（使用临时变量完成两个变量的交换）：

let a = 5;
let b = 10;


const temp = a;
a = b;
b = temp;

简化写法（使用数组解构赋值完成两个变量的交换）：

let a = 5;
let b = 10;


[a, b] = [b, a];

这里我们创建一个包含两个元素[b, a]的数组，然后，使用数组解构赋值将值分别赋给变量a和b。由于左边的数组和右边的数组结构相同，所以交换两个值。

19、变量声明

当需要同时声明多个变量时，可以使用变量声明的简写方法，以节省时间和空间。

传统写法：

let x;
let y;
let z = 3;

简化写法：

let x, y, z = 3;

不过，这种优化存在一些争议。很多人认为这样写会影响代码的可读性，因为一行写了很多变量，不如一行一个变量那么清晰，所以可以有选择地采用。

如果有多个变量需要赋予相同的值，可以使用连续相等来实现。

传统写法：

let a = 100;
let b = 100;
let c = 100;

简化写法：

let a = b = c = 100;

20、For循环

JavaScript 中传统的 for 循环语法使用数组的长度作为迭代器来遍历数组。还有许多 for 循环快捷方式提供了迭代数组中对象的不同方式，例如：

for...of：用于遍历内置字符串、数组、类数组对象、NodeList。

for...in：一个字符串，用于访问数组的索引并遍历对象字面量，并记录属性名称和值。

Array.forEach：使用回调函数对数组元素及其索引执行操作。

传统写法：

for (let i = 0; i < arr.length; i++) {
  console.log("item: ", arr[i]);}
}

简化写法：

for (let str of arr) {
  console.log("item: ", str);
}


arr.forEach((str) => {
  console.log("item: ", str);
});
for (let index in arr) {
  console.log(index, arr[index]);
}

对于对象字面量，还可以使用 for...in 来遍历：

const obj = { a: 1, b: 3, c: 5 };


for (let key in obj) {
  console.log(key, obj[key]);
}

总结

以上就是我今天想与你分享的20个关于JavaScript的缩写技巧，希望这些技巧能够对你有所帮助，如果你觉得有用的话，请记得点赞我，关注我，这样，你将会阅读到更多优质文章内容，以帮助你学习能够有用有趣的知识。

20 个提高效率的 JavaScript 缩写技巧

01、从数组中删除假值

02、数组搜索

03、空值合并运算符

04、逻辑或赋值运算符

05、多值匹配

06、三元表达式

07、短路评估

08、科学计数法

09、位运算符

10、指数求幂

11、双非运算符

12、对象属性

13、箭头函数

14、参数解构

15、扩展运算符

16、强制参数

17、转换为布尔值

18、变量交换

19、变量声明

20、For循环

总结

相关文章

发布评论取消回复

醒在深海的猫

Awesome Project: 探索 MatrixOrigin 云原生分布式数据库

百度搜索：蓝易云 – 熟悉ubuntu apt-get命令详解

oracle 自动撤销

20 个提高效率的 JavaScript 缩写技巧

01、从数组中删除假值

02、数组搜索

03、空值合并运算符

04、逻辑或赋值运算符

05、多值匹配

06、三元表达式

07、短路评估

08、科学计数法

09、位运算符

10、指数求幂

11、双非运算符

12、对象属性

13、箭头函数

14、参数解构

15、扩展运算符

16、强制参数

17、转换为布尔值

18、变量交换

19、变量声明

20、For循环

总结

相关文章

发布评论 取消回复

醒在深海的猫

Awesome Project: 探索 MatrixOrigin 云原生分布式数据库

百度搜索：蓝易云 – 熟悉ubuntu apt-get命令详解

oracle 自动撤销

发布评论取消回复