34 个 JavaScript 优化技巧

• 校对者：Ashira97, PassionPenguin

2021 年需要了解的 34 个 JavaScript 优化技巧

================================

使用先进的语法糖优化你的 JavaScript 代码

开发者需要持续学习新技术，跟以前相比，如今跟随技术变化是比较容易做到的，我写这篇文章的目的是介绍诸如缩写之类的 JavaScript 最佳实践和其中的特性，这些都是我们作为一名前端开发人员必须了解的，因为它会给我们的工作生活带来便利。

可能你已经进行了多年的 JavaScript 开发工作，但有时候你还是会对一些最新的技术不那么了解，而这些新技术可能有助于某些问题的解决而不需要你去编写更多的代码。有时候，这些新技术也能帮助你进行代码优化。此外，如果你今年需要为 JavaScript 面试作准备，本文也是一份实用的参考资料。

在这里，我会介绍一些新的语法糖，它可以优化你的 JavaScript 代码，使代码更简洁。下面是一份 JavaScript 语法糖列表，你需要了解一下。

1. 含有多个条件的 if 语句

================

我们可以在数组中存储多个值，并且可以使用数组的 includes 方法。

//longhand

if (x === ‘abc’ || x === ‘def’ || x === ‘ghi’ || x ===‘jkl’) {

//logic

}

//shorthand

if ([‘abc’, ‘def’, ‘ghi’, ‘jkl’].includes(x)) {

//logic

}

2. If … else 的缩写法

==================

当我们的 if-else 条件中的逻辑比较简单时，可以使用这种简洁的方式——三元条件运算符。

// Longhand

let test: boolean;if (x > 100) {

test = true;

} else {

test = false;

}

// Shorthand

let test = (x > 10) ? true : false;

//or we can use directly

let test = x > 10;console.log(test);

如果包含嵌套的条件，我们也可以这样写。

let x = 300,

test2 = (x > 100) ? ‘greater 100’ : (x < 50) ? ‘less 50’ : ‘between 50 and 100’;console.log(test2); // “greater than 100”

3. 定义变量

========

当我们定义两个值相同或类型相同的变量，可以使用这样的缩写法

//Longhand

let test1;

let test2 = 1;

//Shorthand

let test1, test2 = 1;

4. 对 Null、Undefined、Empty 这些值的检查

=================================

我们创建一个新变量，有时候需要检查是否为 Null 或 Undefined。JavaScript 本身就有一种缩写法能实现这种功能。

// Longhand

if (test1 !== null || test1 !== undefined || test1 !== ‘’) {

let test2 = test1;

}

// Shorthand

let test2 = test1 || ‘’;

5. 对 Null 值的检查以及默认赋值

=====================

let test1 = null,

test2 = test1 || ‘’;console.log(“null check”, test2); // output will be “”

6. 对 Undefined 值的检查以及默认赋值

==========================

let test1 = undefined,

test2 = test1 || ‘’;console.log(“undefined check”, test2); // output will be “”

对正常值的检查

let test1 = ‘test’,

test2 = test1 || ‘’;console.log(test2); // output: ‘test’

利好消息：关于第 4、5、6 条还可以使用 ?? 运算符

聚合运算符

=====

**??**是聚合运算符，如果左值为 null 或 undefined，就返回右值。默认返回左值。

const test= null ?? ‘default’;

console.log(test);

// expected output: "default"const test1 = 0 ?? 2;

console.log(test1);

// expected output: 0

7. 同时为多个变量赋值

=============

当我们处理多个变量，并且需要对这些变量赋不同的值，这种缩写法很有用。

//Longhand

let test1, test2, test3;

test1 = 1;

test2 = 2;

test3 = 3;

//Shorthand

let [test1, test2, test3] = [1, 2, 3];

8. 赋值运算符缩写法

============

编程中使用算术运算符是很常见的情况。以下是 JavaScript 中赋值运算符的应用。

// Longhand

test1 = test1 + 1;

test2 = test2 - 1;

test3 = test3 * 20;

// Shorthand

test1++;

test2–;

test3 *= 20;

9. 判断变量是否存在的缩写法

================

这是普遍使用

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

的缩写法，但在这里应当提一下。

// Longhand

if (test1 === true) or if (test1 !== “”) or if (test1 !== null)

// Shorthand

//it will check empty string,null and undefined too

if (test1)

注意：当 test1 为任何值时，程序都会执行 if(test1){ } 内的逻辑，这种写法在判断 NULL 或 undefined 值时普遍使用。

10. 用于多个条件的与(&&)运算符

====================

如果需要实现某个变量为 true 时调用一个函数，可以使用 && 运算符。

//Longhand

if (test1) {

callMethod();

} //Shorthand

test1 && callMethod();

11. foreach 循环缩写法

==================

这是循环结构对应的缩写法。

// Longhand

for (var i = 0; i < testData.length; i++)

// Shorthand

for (let i in testData) or  for (let i of testData)

Array for each variable

function testData(element, index, array) {

console.log(‘test[’ + index + '] = ’ + element);

}

[11, 24, 32].forEach(testData);

// logs: test[0] = 11, test[1] = 24, test[2] = 32

12. 比较结果的返回

============

在 return 语句中，我们也可以使用比较的语句。这样，原来需要 5 行代码才能实现的功能，现在只需要 1 行，大大减少了代码量。

// Longhand

let test;function checkReturn() {

if (!(test === undefined)) {

return test;

} else {

return callMe(‘test’);

}

}

var data = checkReturn();

console.log(data); //output testfunction callMe(val) {

console.log(val);

}// Shorthandfunction checkReturn() {

return test || callMe(‘test’);

}

13. 箭头函数

=========

//Longhand

function add(a, b) {

return a + b;

}

//Shorthand

const add = (a, b) => a + b;

再举个例子

function callMe(name) {

console.log(‘Hello’, name);

}callMe = name => console.log(‘Hello’, name);

14. 简短的函数调用语句

==============

我们可以使用三元运算符实现如下功能。

// Longhand

function test1() {

console.log(‘test1’);

};

function test2() {

console.log(‘test2’);

};

var test3 = 1;

if (test3 == 1) {

test1();

} else {

test2();

}

// Shorthand

(test3 === 1? test1:test2)();

15. switch 对应的缩写法

==================

我们可以把条件值保存在名值对中，基于这个条件使用名值对代替 switch。

// Longhand

switch (data) {

case 1:

test1();

break;

case 2:

test2();

break;

case 3:

test();

break;

// And so on…

}

// Shorthand

var data = {

1: test1,

2: test2,

3: test

};

data[something] && datasomething;

16. 隐式返回缩写法

============

使用箭头函数，我们可以直接得到函数执行结果，不需要写 return 语句。

//longhand

function calculate(diameter) {

return Math.PI * diameter

}

//shorthand

calculate = diameter => (

Math.PI * diameter;

)

17. 十进制数的指数形式

==============

// Longhand

for (var i = 0; i < 10000; i++) { … }

// Shorthand

for (var i = 0; i < 1e4; i++) {

18. 默认参数值

==========

//Longhand

function add(test1, test2) {

if (test1 === undefined)

test1 = 1;

if (test2 === undefined)

test2 = 2;

return test1 + test2;

}

//shorthand

add = (test1 = 1, test2 = 2) => (test1 + test2);add() //output: 3

19. 延展操作符的缩写法

==============

//longhand// joining arrays using concat

const data = [1, 2, 3];

const test = [4 ,5 , 6].concat(data);

//shorthand// joining arrays

const data = [1, 2, 3];

const test = [4 ,5 , 6, …data];

console.log(test); // [ 4, 5, 6, 1, 2, 3]

我们也可以使用延展操作符来克隆。

//longhand

// cloning arrays

const test1 = [1, 2, 3];

const test2 = test1.slice()

//shorthand

// cloning arrays

const test1 = [1, 2, 3];

const test2 = […test1];

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件