JS代码优化（上篇）

JS代码优化（上篇）

目录
JS代码优化（上篇）
1、按强范例风格写代码
2、淘汰作用域的查找
3、制止 == 的使用
4、归并表达式
5、淘汰魔数
6、使用ES6简化代码
7、代码净化
1、按强范例风格写代码

（1）界说变量时指明数据范例

• 界说变量时给默认值，方便JS剖析器，也方便阅读人
  

1. var num = 0,    str = '',    obj = null;

复制代码

（2）不要随意地改变变量的范例，需要更改就创建新变量赋值

1. //bad  整型变成字符串范例，js最终会表明成为汇编语言，就会做额外处理处罚var num = 5;num = "-" + num;//bestvar num = 5;var sign = "-" + num;

复制代码

（3）函数的返回范例应该是要确定的

1. //bad   返回范例要确定，不能一下是字符串，一下是数字。 字符串与数值运算：NaN function getPrice(count){    if(count < 0) return "";    else return count * 100;}//best  返回-1表现不正当，范例确定的话，JS表明器就不会做额外工作，可加快运行速度function getPrice(count){    if(count < 0) return -1;    else return count * 100;}

复制代码

 
2、淘汰作用域的查找

（1）不要让代码袒露在全局作用域下,弄成一个局部的作用域

1. //bad  script 标签里面,代码的上下文都是全局作用域的//best  function 制造一个局部作用域，也可以用 ES6 的块级作用域// 局部作用域的查找是很快的。同时直接在全局作用域界说变量，会污染 window 对象。

复制代码

（2）不要滥用闭包

• 闭包的作用在于可以让子级作用域使用它父级作用域的变量，同时这些变量在不同的闭包是不可见的。
  

1. //bad  在查找某个变量的时候，如果当前作用域找不到，就得往它的父级作用域查找，//一级一级地往上直到找到了，大概到了全局作用域还没找到。闭包嵌套越深，查找时间越长function getResult(count){    count++;    function process(){        var factor = 2;        return count * factor - 5;    }    return process();}//best  闭包的count变量直接通报已往 process(count)function getResult(count){    count++;    function process(count){        var factor = 2;        return count * factor - 5;    }    return process(count);}

复制代码

（3）全局变量频繁使用时，可用局部变量缓存一下

1. //bad   window.location 全局变量，查找就会迟钝var url = "";if(window.location.protocal === "https:"){    url = "wss://xxx.com" + window.location.pathname + window.location.search;}//best  //频繁地使用了 window.location 对象，先缓存一个局部变量，查找快于全局查找，代码也少点var url = "";var location = window.location;if(location.protocal === "https:"){    url = "wss://xxx.com" + location.pathname + location.search;}

复制代码

 

3、制止 == 的使用

（1）如果你确定了变量的范例，就使用 === 来替换 ==

1. // 一个是字符串，一个是整数 ，直接用===if(typeof num != "undefined"){ }var num = parseInt(value);if(num == 10){ }

复制代码

（2）如果范例不确定，手动范例转换，别让别人或自己猜这里有范例转换

1. var totalPage = "5";if(parseInt(totalPage) === 1){ }

复制代码

（3）使用==在 JSLint 检查的时候是不通过的

1. if(a == b){ }//JSLint下会输出Expected ‘===’ and instead saw ‘==’.if(a == b){}

复制代码

（4）使用==大概会出现一些希奇的现象，这些希奇的现象大概会给代码埋入隐患

1. null == undefined          //true&#39;&#39; == &#39;0&#39;                  //false0  == &#39;&#39;                   //true0  == &#39;0&#39;                  //true&#39;&#39; == 0                    //truenew String("abc") == "abc" //truenew Boolean(true) == true  //truetrue == 1                  //true/*上面的比力在用===的时候都是 false，这样才是比力公道的。null == undefined  //true  特别地希奇null 和 undefined  //是两个毫无关系的值null 应该是作为初始化空值使用undefined 是用于查验某个变量是否未界说*/

复制代码

 
4、归并表达式

• 如果用 1 句代码就可以实现 5 句代码的功能，那往往 1 句代码的执行效率会比力高，而且可读性大概会更好。
  

（1）用三目运算符取代简朴的 if-else

1. //badfunction getPrice(count){    if(count < 0) return -1;    else return count * 100;}//best   如果写了if-else ,压缩工具也会帮你改成三目运算符形式function getPrice(count){    return count < 0 ? return -1 : count * 100;}//压缩形式：function getPrice(e){return 0>e?-1:100*e}

复制代码

（2）使用连等

1. //连等是利用赋值运算表达式会返回所赋的值，而且执行顺序是从右到左的overtime = favhouse = listingDetail = {...}//用了赋值表达式会返回一个值，再进行判断，+号把字符串转成了整数var age = 0;if((age = +form.age.value) >= 18){    console.log("你是成年人");} else {    consoe.log("小朋侪，你还有" + (18 - age) + "就成年了");}

复制代码

（3）利用自增

1. //利用自增也可以简化代码。如下，每发出一条消息，localMsgId 就自增 1chatService.sendMessage(localMsgId++, msgContent);

复制代码

 

5、淘汰魔数

1. /上面的四个常量分别代表什么呢？不去查就不知道有什么用，这些意义不明的常量就叫“魔数”dialogHandler.showQuestionNaire（"seller", "sell", 5, true);//best  给常量取个名字，这样就很清楚了var naireType = "seller",    dialogType = "sell",    questionsCount = 5,    reloadWindow = true;naireHandler.showNaire(naireType, dialogType, questionsCount, reloadWindow);

复制代码

 
6、使用ES6简化代码

• ES6 已经发展许多年了，兼容性也已经很好了。恰本地使用，可以让代码更加地轻便优雅。
  

（1）使用箭头函数取代小函数（数组从大到小排序）

1. // JS的sort 方法var nums = [4, 8, 1, 9, 0];nums.sort(function(a, b){    return b - a;});//输出[9, 8, 4, 1, 0]// ES6 箭头函数排序一行搞定var nums = [4, 8, 1, 9, 0];``nums.sort(a, b => b - a);nums.sort((a, b) => b - a); //输出[9, 8, 4, 1, 0]//延时器setTimeout(() => console.log("hi"), 3000)

复制代码

（2）使用 ES6 的 class

1. function Person(name, age){    this.name = name;    this.age = age;}Person.prototype.addAge = function(){    this.age++;};Person.prototype.setName = function(name){    this.name = name;};// class 还可以很方便地实现继续、静态的成员函数，就不需要自己再去通过一些本事去实现了。class Person{    constructor(name, age){        this.name = name;        this.age = age;    }    addAge(){        this.age++;    }    setName(name){        this.name = name;    }}

复制代码

• 虽然 ES6 的 class 和使用 function 的 prototype 本质上是一样的，都是用的原型。但是用 class 可以淘汰代码量，同时让代码看起来更加地高大上。
  

（3）字符串拼接

1. //以前要用+号拼接var tpl =&#39;&#39; +&#39;    1&#39; +&#39;
2. &#39;;//现在只要用两个反引号“`”就可以了var tpl =`           1   
3. `;//反引号还支持占位替换//原本写法var page = 5,    type = encodeURIComponet("#js");var url = "/list?page=" + page + "&type=" + type;//反引号写法  就不消使用+号把字符串拆散了var url = `/list?page=${page}&type=${type}`;

复制代码

 

7、代码净化



（1）注重定名

1. //badfunction mergeNumberListIntoUniqueList(listOne, listTwo) {  return [...new Set([...listOne, ...listTwo])]}//bestfunction mergeLists(listOne, listTwo) {  return [...listOne, ...listTwo]}function createUniqueList(list) {  return [...new Set(list)]}

复制代码

（2）IF语句优化

1. //badif(value === &#39;duck&#39; || value === &#39;dog&#39; || value === &#39;cat&#39;) {  // ...}//best 将七零八落的条件判断放到一个变量中存储，比看臃肿的表达式要好许多const options = [&#39;duck&#39;, &#39;dog&#39;, &#39;cat&#39;];if (options.includes(value)) {  // ...}

复制代码

（3）赶早返回

1. //badfunction handleEvent(event) {  if (event) {    const target = event.target;    if (target) {      // Your awesome piece of code that uses target    }  }}//bestfunction handleEvent(event) {  if (!event || !event.target) {    return;  }  // Your awesome piece of code that uses target}

复制代码

（4）解构赋值

1. // object 解构赋值const numbers = {one: 1, two: 2};const {one, two} = numbers;console.log(one); // 1console.log(two); // 2// array 解构赋值const numbers = [1, 2, 3, 4, 5];const [one, two] = numbers;console.log(one); // 1console.log(two); // 2

复制代码

（5）童子军规则

• 童子军有一条规则：永远保持脱离时的露营比你发现它时更整洁。如果你在地面上发现了脏东西，那么无论是否是你留下的，你都要将它清理干净。你要有意地为下一组露营者改善情况。
  
• 我们编写代码也是这样子，如果你在代码中发现了脏代码，那么你可以实验去修改它，纵然是一个没有被引用到的变量名。
  

（6）代码风格

• 在你的团队中使用一种代码风格，好比限定代码缩进的规范是两空格呢还是四空格；使用单引号呢还是双引号呢;使用同类的一种框架呢，还是盛行两种管理方案的框架呢...这样团队中人员接办项目的本钱就会低落，开发人员的心里淘汰倾轧感~
  

 
 
 

来源：https://blog.csdn.net/qq_40976321/article/details/111962079
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！