Shulou(Shulou.com)06/01 Report--

本篇内容主要讲解"常见的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: 05、声明变量

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

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

a + b;16, short function call const data1 = [1, 2, 3];const data2 = [4, 5, 6].concat(data1);//optimize const data2 = [4, 5, 6,... const data1 = [1, 2, 3];const data2 = [4, 5, 6].concat(data1);//optimization const data2 = [4, 5, 6,...] data1];

Array clone:

const data1 = [1, 2, 3];const data2 = test1.slice()//optimization const data1 = [1, 2, 3];const data2 = [... data1];18, string template const test = 'hello ' + text1 + '. '//optimize const test = `hello ${text}.` 19. Data deconstruction const a1 = this.data.a1;const a2 = this.data.a2;const a3 = this.data;//Optimization const { a1, a2, a3 } = this.data;20. Array search for specific values

Arrays look up specific values by index, we can use the logical bit operator ~ instead of judging.

"~" operator (bit not) is used to negate a binary operand bitwise if(arr.indexOf(item) > -1) //optimization if(~arr.indexOf(item))//or if(arr.includes(item))21. Object.entries()const data = { a1: 'abc', a2: ' cde', a3: 'efg'};Object.entries(data);/** Output:[ [ 'a1',' abc'], [ 'a2',' cde'], [ 'a3',' efg']]**/22, Object.values()

We can convert the contents of an object into an array via Object.values(). As follows:

const data = { a1: 'abc', a2: 'cde' };Object.values(data);/** Output:[ 'abc',' cde']**/2,3, squared Math.pow(2,3); //optimization2 **3;24, exponent shorthand for (var i = 0; i < 10000; i++)/optimization for (var i = 0; i <1e4; i++) {25, object attribute shorthand let key1 = '1'; let key2 = ' b'; let obj = {key1: key1, key2: key2}; //shorthand let obj = { key1, key2} key2}; 26, string to number let a1 = parseInt ('100 '); let a2 = parseFloat ('10.1'); //abbreviation let a1 = +' 100'; let a2 = +'10.1'; At this point, I believe that you have a deeper understanding of "what are the common JavaScript code optimization methods", you may wish to actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.