18个你需要知道的JavaScript优化技巧

本篇文章我们一起来看一下JavaScript的18个优化技巧，适合所有正在使用 JavaScript 编程的开发人员阅读，本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作，希望对大家有帮助。

1. 多个条件的判断

当我们需要进行多个值的判断时，我们可以使用数组的includes方法。

//Badif(x==='iphoneX'||x==='iphone11'||x==='iphone12'){//code…}//Goodif(['iphoneX','iphone11','iphone12'].includes(x)){//code…}

2. If true … else

当if-else条件的内部不包含更大的逻辑时，三目运算符会更好。

//Badlettest=boolean;if(x>100){test=true;}else{test=false;}//Goodlettest=(x>10)?true:false;//orwecansimplyuselettest=x>10;

嵌套条件后，我们保留如下所示的内容（复杂点的三目）：

letx=300,lettest2=(x>100)?'greater100':(x<50)?'less50':'between50and100';console.log(test2);//"greaterthan100"

3. Null、Undefined、’’ 空值检查

有时要检查我们为值引用的变量是否不为null或Undefined 或 '' ,我们可以使用短路写法

//Badif(first!==null||first!==undefined||first!==''){letsecond=first;}//Good短路写法letsecond=first||'';

4. 空值检查和分配默认值

当我们赋值，发现变量为空需要分配默认值 可以使用以下短路写法

letfirst=null,letsecond=first||'default'console.log(second)

5. 双位操作符

位操作符是 JavaScript 初级教程的基本知识点，但是我们却不常使用位操作符。因为在不处理二进制的情况下，没有人愿意使用 1 和 0。

但是双位操作符却有一个很实用的案例。你可以使用双位操作符来替代 Math.floor( )。双否定位操作符的优势在于它执行相同的操作运行速度更快

//BadMath.floor(4.9)===4//true//Good~~4.9===4//true

6. ES6常见小优化 – 对象属性constx,y=5//Badconstobj={x:x,y:y}//Goodconstobj={x,y}7. ES6常见小优化-箭头函数//BadfunctionsayHello(name){console.log('Hello',name);}setTimeout(function(){console.log('Loaded')},2000)list.forEach(function(item){console.log(item)})//GoodconstsayHello=name=>console.log('Hello',name)setTimeout(()=>console.log('Loaded'),2000)list.forEach(item=>console.log(item))

8. ES6常见小优化-隐式返回值

返回值是我们通常用来返回函数最终结果的关键字。只有一个语句的箭头函数，可以隐式返回结果（函数必须省略括号（{ }），以便省略返回关键字）。

要返回多行语句（例如对象文本），需要使用（）而不是{ }来包裹函数体。这样可以确保代码以单个语句的形式进行求值。

//BadfunctioncalcCircumference(diameter){returnMath.PI*diameter}//GoodconstcalcCircumference=diameter=>(Math.PI*diameter)

9. ES6常见小优化-解构赋值constform={a:1,b:2,c:3}//Badconsta=form.aconstb=form.bconstc=form.c//Goodconst{a,b,c}=form

10. ES6常见小优化-展开运算符

返回值是我们通常用来返回函数最终结果的关键字。只有一个语句的箭头函数，可以隐式返回结果（函数必须省略括号（{ }），以便省略返回关键字）。

要返回多行语句（例如对象文本），需要使用（）而不是{ }来包裹函数体。这样可以确保代码以单个语句的形式进行求值。

constodd=[1,3,5]constarr=[1,2,3,4]//Badconstnums=[2,4,6].concat(odd)constarr2=arr.slice()//Goodconstnums=[2,4,6,…odd]constarr2=[…arr]

11. 数组常见处理

掌握数组常见方法，记在脑子里，不要写的时候再去看API了，这样可以有效提升编码效率，毕竟这些方法每天都在用

every some filter map forEach find findIndex reduce includes

constarr=[1,2,3]//every每一项都成立，才会返回trueconsole.log(arr.every(it=>it>0))//true//some有一项都成了，就会返回trueconsole.log(arr.some(it=>it>2))//true//filter过滤器console.log(arr.filter(it=>it===2))//[2]//map返回一个新数组console.log(arr.map(it=>it==={id:it}))//[{id:1},{id:2},{id:3}]//forEach没有返回值console.log(arr.forEach(it=>it===console.log(it)))//undefined//find查找对应值找到就立马返回符合要求的新数组console.log(arr.find(it=>it===it>2))//3//findIndex查找对应值找到就立马返回符合要求新数组的下标console.log(arr.findIndex(it=>it===it>2))//2//reduce求和或者合并数组console.log(arr.reduce((prev,cur)=>prev+cur))//6//includes求和或者合并数组console.log(arr.includes(1))//true//数组去重constarr1=[1,2,3,3]constremoveRepeat=(arr)=>[…newSet(arr1)]//[1,2,3]//数组求最大值Math.max(…arr)//3Math.min(…arr)//1//对象解构这种情况也可以使用Object.assign代替letdefaultParams={pageSize:1,sort:1}//goods1letreqParams={…defaultParams,sort:2}//goods2Object.assign(defaultParams,{sort:2})

12. 比较返回

在return语句中使用比较可以将代码从5行减少到1行。

//BadlettestconstcheckReturn=()=>{if(test!==undefined){returntest;}else{returncallMe('test');}}//GoodconstcheckReturn=()=>{returntest||callMe('test');}

13. 短函数调用

我们可以使用三元运算符来实现这类函数。

consttest1=()=>{console.log('test1');}consttest2=()=>{console.log('test2');}consttest3=1;if(test3==1){test1()}else{test2()}//Goodtest3===1?test1():test2()

14.switch代码块(ifelse代码块)简写

我们可以将条件保存在key-value对象中，然后可以根据条件使用。

//Badswitch(data){case1:test1();break;case2:test2();break;case3:test();break;//Andsoon…}//Goodconstdata={1:test1,2:test2,3:test}data[anything]&&data[anything]()//Badif(type==='test1'){test1();}elseif(type==='test2'){test2();}elseif(type==='test3'){test3();}elseif(type==='test4'){test4();}else{thrownewError('Invalidvalue'+type);}//Goodconsttypes={test1:test1,test2:test2,test3:test3,test4:test4};constfunc=types[type];(!func)&&thrownewError('Invalidvalue'+type);func();

15. 多行字符串简写

当我们在代码中处理多行字符串时，可以这样做：

//Badconstdata='abcabcabcabcabcabc\n\t'+'testtest,testtesttesttest\n\t'//Goodconstdata=`abcabcabcabcabcabctesttest,testtesttesttest`

16. Object.entries() Object.values() Object.keys()

Object.entries() 该特性可以将一个对象转换成一个对象数组。

Object.values()可以拿到对象value值

Object.keys()可以拿到对象key值

constdata={test1:'abc',test2:'cde'}constarr1=Object.entries(data)constarr2=Object.values(data)constarr3=Object.keys(data)/**arr1Output:[['test1','abc'],['test2','cde'],]**//**arr2Output:['abc','cde']**//**arr3Output:['test1','test2']**/

17. 多次重复一个字符串

为了多次重复相同的字符，我们可以使用for循环并将它们添加到同一个循环中，如何简写呢？

//Badlettest='';for(leti=0;i<5;i++){test+='test,';}console.log(str);//test,test,test,test,test,//goodconsole.log('test,'.repeat(5))

18. 幂的简写

数学指数幂函数的good如下：

//BadMath.pow(2,3)//8//good2**3//8

19. 数字分隔符

你现在只需使用 _ 即可轻松分隔数字。这将使处理大量数据变得更加轻松。

//oldsyntaxletnumber=98234567//newsyntaxletnumber=98_234_567

如果你想使用JavaScript最新版本（ES2021/ES12）的最新功能，请检查以下内容：

1、replaceAll()：返回一个新字符串，其中所有匹配的模式都被新的替换词替换。

2、Promise.any()：需要一个可迭代的Promise对象，当一个Promise完成时，返回一个带有值的Promise。

3、weakref：此对象持有对另一个对象的弱引用，不阻止该对象被垃圾收集。

4、FinalizationRegistry：让你在对象被垃圾回收时请求回调。

5、私有方法：方法和访问器的修饰符：私有方法可以用#声明。

6、逻辑运算符：&&和||运算符。

7、Intl.ListFormat：此对象启用对语言敏感的列表格式。

8、Intl.DateTimeFormat：该对象启用对语言敏感的日期和时间格式。