常见的JavaScript代码优化方法有哪些

本篇内容主要讲解"常见的JavaScript代码优化方法有哪些"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"常见的JavaScript代码优化方法有哪些"吧!

1、NUll、Undefined、''检查

我们在创建新变量赋予一个存在的变量值的时候，并不希望赋予 null 或 undefined，我们可以采用一下简洁的赋值方式。

if(test !== null || test !== undefined || test !== ''){  let a1 = test;}// 优化后let a1 = test || ''

2、null 值检查并赋予默认值

let test = null;let a1 = test || '';

3、undefined 值检查并赋予默认值

let test = undefined;let a1 = test || '';

4、空值合并运算符（??）

空值合并操作符（??）是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

const test= null ?? 'default string';console.log(test);console.log(test); // expected output: "default string"const test = 0 ?? 42;console.log(test); // expected output: 0

5、声明变量

当我们想要声明多个共同类型或者相同值的变量时，我们可以采用一下简写的方式。

let test1;let test2 = 0;//  优化后let test1, test2 = 0;

6、if 多条件判断

当我们进行多个条件判断时，我们可以采用数组 includes 的方式来实现简写。

if(test === '1' || test === '2' || test === '3' || test === '4'){  // 逻辑}// 优化后if(['1','2','3','4'].includes(test)){  // 逻辑处理}

7、if...else 的简写

当存在一层或两层 if...else嵌套时，我们可以使用三元运算符来简写。

let test = null;if(a > 10) {  test = true;} else {  test = false;}// 优化后let test = a > 10 ? true : false;// 或者let test = a > 10;

8、多变量赋值

当我们想给多个变量赋不同的值的时候，我们可以采用一下简洁的速记方案。

let a = 1;let b = 2;let c = 3;// 优化let [a, b, c] = [1, 2, 3];

9、算术运算简写优化

当我们在开发中经常用到算数运算符时，我们可以使用一下方式进行优化和简写。

let a = 1;a = a + 1;a = a - 1;a = a * 2;// 优化a++;a--;a *= 2;

10、有效值判断

我们经常会在开发中用到的，在这也简单整理一下。

if (test1 === true)if (test1 !== "")  if (test1 !== null)// 优化if (test1)

11、多条件(&&)判断

我们通常在项目中遇到条件判断后跟函数执行，我们可以使用一下简写方式。

if (test) { foo(); } //优化test && foo();

12、多个比较 return

在 return 的语句中使用比较，可以将其进行缩写的形式如下。

let test;function checkReturn() {    if (!(test === undefined)) {        return test;    } else {        return foo('test');    }}// 优化function checkReturn() {    return test || foo('test');}

13、Switch 的缩写

遇到如下形式的 switch 语句，我们可以将其条件和表达式以键值对的形式存储。

switch (type) {  case 1:    test1();  break;  case 2:    test2();  break;  case 3:    test();  break;  // ......}// 优化var obj = {  1: test1,  2: test2,  3: test};obj[type] && obj[type]();

14、for 循环缩写

for (let i = 0; i < arr.length; i++)// 优化for (let i in arr) or  for (let i of arr)

15、箭头函数

function add() {  return a + b;}// 优化const add = (a, b) => a + b;

16、短函数调用

const data1 = [1, 2, 3];const data2 = [4 ,5 , 6].concat(data1);// 优化const data2 = [4 ,5 , 6, ...data1];

17、数组合并与克隆

const data1 = [1, 2, 3];const data2 = [4 ,5 , 6].concat(data1);// 优化const data2 = [4 ,5 , 6, ...data1];

数组克隆：

const data1 = [1, 2, 3];const data2 = test1.slice()// 优化const data1 = [1, 2, 3];const data2 = [...data1];

18、字符串模版

const test = 'hello ' + text1 + '.'// 优化const test = `hello ${text}.`

19、数据解构

const a1 = this.data.a1;const a2 = this.data.a2;const a3 = this.data.a3;// 优化const { a1, a2, a3 } = this.data;

20、数组查找特定值

数组按照索引来查找特定值，我们可以通过逻辑位运算符 ～ 来代替判断。

"~"运算符（位非）用于对一个二进制操作数逐位进行取反操作

if(arr.indexOf(item) > -1) // 优化if(~arr.indexOf(item))// 或if(arr.includes(item))

21、Object.entries()

const data = { a1: 'abc', a2: 'cde', a3: 'efg' };Object.entries(data);/** 输出:[ [ 'a1', 'abc' ],  [ 'a2', 'cde' ],  [ 'a3', 'efg' ]]**/

22、Object.values()

我们可以通过 Object.values() 将对象的内容转化为数组。如下：

const data = { a1: 'abc', a2: 'cde' };Object.values(data);/** 输出:[ 'abc', 'cde']**/

23、求平方

Math.pow(2,3); // 优化2**3；

24、指数简写

for (var i = 0; i < 10000; i++)// 优化for (var i = 0; i < 1e4; i++) {

25、对象属性简写

let key1 = '1'; let key2 = 'b';let obj = {key1: key1, key2: key2}; // 简写let obj = {  key1,   key2};

26、字符串转数字

let a1 = parseInt('100'); let a2 = parseFloat('10.1'); // 简写 let a1 = +'100'; let a2 = +'10.1';

到此，相信大家对"常见的JavaScript代码优化方法有哪些"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！