34 个 JavaScript 优化技巧

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

我们创建一个新变量，有时候需要检查是否为 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];

20. 文本模板

=========

如果你对使用 + 符号来连接多个变量感到厌烦，这个缩写法可以帮到你。

//longhand

const welcome = 'Hi ’ + test1 + ’ ’ + test2 + ‘.’

//shorthand

const welcome = Hi ${test1} ${test2};

21. 跟多行文本有关的缩写法

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

当我们在代码中处理多行文本时，可以使用这样的技巧

//longhand

const data = ‘abc abc abc abc abc abc\n\t’

+ ‘test test,test test test test\n\t’

//shorthand

const data = `abc abc abc abc abc abc

test test,test test test test`

22. 对象属性的赋值

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

let test1 = ‘a’;

let test2 = ‘b’;

//Longhand

let obj = {test1: test1, test2: test2};

//Shorthand

let obj = {test1, test2};

23. 字符串转换为数字

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

//Longhand

let test1 = parseInt(‘123’);

let test2 = parseFloat(‘12.3’);

//Shorthand

let test1 = +‘123’;

let test2 = +‘12.3’;

24. 解构赋值缩写法

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

//longhand

const test1 = this.data.test1;

const test2 = this.data.test2;

const test2 = this.data.test3;

//shorthand

const { test1, test2, test3 } = this.data;

25. Array.find 缩写法

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

当我们需要在一个对象数组中按属性值查找特定对象时，find 方法很有用。

const data = [{

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

=

let test1 = ‘a’;

let test2 = ‘b’;

//Longhand

let obj = {test1: test1, test2: test2};

//Shorthand

let obj = {test1, test2};

23. 字符串转换为数字

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

//Longhand

let test1 = parseInt(‘123’);

let test2 = parseFloat(‘12.3’);

//Shorthand

let test1 = +‘123’;

let test2 = +‘12.3’;

24. 解构赋值缩写法

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

//longhand

const test1 = this.data.test1;

const test2 = this.data.test2;

const test2 = this.data.test3;

//shorthand

const { test1, test2, test3 } = this.data;

25. Array.find 缩写法

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

当我们需要在一个对象数组中按属性值查找特定对象时，find 方法很有用。

const data = [{

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

[外链图片转存中…(img-5Hl313vW-1718163526187)]