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

This article introduces the relevant knowledge of "how to make your JS write more beautiful". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

1. Write code in strongly typed style

JS is a weak type, but when writing code, you can't be too casual. Writing too casually also reflects the bad coding style. The following points explain:

(1) When defining a variable, specify the type, tell the JS interpreter what data type this variable is, and don't let the interpreter guess, such as bad writing:

var num, str, obj;

Three variables are declared, but it doesn't really matter because the interpreter doesn't know what type they are. A good way to write it is like this:

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

When defining variables, you give them default values, which is convenient not only for the interpreter, but also for the person reading the code, who knows what they might be used for.

Here, Xiaobian built a front-end learning exchange button group: 132667127, the latest front-end information and advanced development tutorials I collated myself, if you want to need it, you can add groups to learn and communicate together.

(2) Do not arbitrarily change the type of variables, such as the following code:

var num = 5;num = "-" + num;

Line 1 it's an integer, line 2 it becomes a string. Because JS will eventually be interpreted as assembly language, the type of assembly language variables must be determined. If you change an integer to a string, the interpreter will have to do some extra processing. And this coding style is not recommended, there is a variable line 1 is an integer, line 10 into a string, line 20 into an object, so that people reading the code more confused, obviously an integer above, how suddenly into a string. A good way to write this is to define a string variable:

var num = 5;var sign = "-" + num;

(3) The return type of the function should be determined, for example, the following uncertain writing:

function getPrice(count){ if(count

< 0) return ""; else return count * 100;} getPrice这个函数有可能返回一个整数，也有可能返回一个空的字符串。这样写也不太好，虽然它是符合JS语法的，但这种编码风格是不好的。使用你这个函数的人会有点无所适从，不敢直接进行加减乘除，因为如果返回字符串进行运算的话值就是NaN了。函数的返回类型应该是要确定的，如下面是返回整型： function getPrice(count){ if(count < 0) return -1; else return count * 100;} 然后告诉使用者，如果返回-1就表示不合法。如果类型确定，解释器也不用去做一些额外的工作，可以加快运行速度。 2. 减少作用域查找 （1）不要让代码暴露在全局作用域下 例如以下运行在全局作用域的代码： var map = document.querySelector("#my-map"); map.style.height = "600px"; 有时候你需要在页面直接写一个script，要注意在一个script标签里面，代码的上下文都是全局作用域的，由于全局作用域比较复杂，查找比较慢。例如上面的map变量，第二行在使用的时候，需要在全局作用域查找一下这个变量，假设map是在一个循环里面使用，那可能就会有效率问题了。所以应该要把它搞成一个局部的作用域： !function(){ var map = document.querySelector("#my-map"); map.style.height = "600px";}() 上面用了一个function制造一个局部作用域，也可以用ES6的块级作用域。由于map这个变量直接在当前的局部作用域命中了，所以就不用再往上一级的作用域（这里是全局作用域）查找了，而局部作用域的查找是很快的。同时直接在全局作用域定义变量，会污染window对象。 （2）不要滥用闭包 闭包的作用在于可以让子级作用域使用它父级作用域的变量，同时这些变量在不同的闭包是不可见的。这样就导致了在查找某个变量的时候，如果当前作用域找不到，就得往它的父级作用域查找，一级一级地往上直到找到了，或者到了全局作用域还没找到。因此如果闭包嵌套得越深，那么变量查找的时间就越长。如下： function getResult(count){ count++; function process(){ var factor = 2; return count * factor - 5; } return process();} 上面的代码定义了一个process函数，在这个函数里面count变量的查找时间要高于局部的factor变量。其实这里不太适合用闭包，可以直接把count传给process： function getResult(count){ count++; function process(count){ var factor = 2; return count * factor - 5; } return process(count);} 这样count的查找时间就和factor一样，都是在当前作用域直接命中。这个就启示我们如果某个全局变量需要频繁地被使用的时候，可以用一个局部变量缓存一下，如下： var url = "";if_(window.location.protocal === "https:"){ url = "wss://xxx.com" + _window.location.pathname + _window.location.search;} 频繁地使用了_window.location对象，所以可以先把它缓存一下： var url = "";var location = _window.location;if(location.protocal === "https:"){ url = "wss://xxx.com" + location.pathname + location.search;} 搞成了一个局变变量，这样查找就会明显快于全局的查找，代码也可以写少一点。

3. Avoid using ==

Here you may have doubts, some people like to use ==, some people like to use ==, everyone's style is different, why do you force others to use ==? People who are used to using == cannot simply tap the keyboard less than ===. Why not use ==?

(1) If you determine the type of variable, then there is no need to use ==, as follows:

if(typeof num != "undefined"){} var num = parseInt(value);if(num == 10){}

The two examples above are both deterministic, one string and one integer. There is no need to use ==, just use === directly.

(2) If the type is uncertain, then you should do the type conversion manually, instead of letting others or later you guess that there is a type conversion, as follows:

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

(3) Use == when JSLint check is not passed:

if(a == b){}

The following output from JSLint:

Expected '===' and instead saw '=='. if(a == b){

(4) And using == may cause some strange phenomena that may bury hidden dangers in the code:

null == undefined //true'' == '0' //false0 == '' //true0 == '0' //true' ' == 0 //truenew String("abc") == "abc" //truenew Boolean(true) == true //truetrue == 1 //true

The above comparison is false when using ===, which is more reasonable. For example, the first point null should equal undefined, which is particularly strange because null and undefined are two unrelated values, null should be used as an initialization null value, and undefined is used to check whether a variable is undefined.

This is consistent with the idea of strong types introduced in point 1.

4. combining expressions

If you can achieve the function of 5 sentences of code with 1 sentence of code, then the execution efficiency of 1 sentence of code will be higher and the readability may be better.

(1) Replace the simple if-else with the ternary operator

As in the getPrice function above:

function getPrice(count){ if(count

< 0) return -1; else return count * 100;} 可以改成： function getPrice(count){ return count < 0 ? return -1 : count * 100;} 这个比写一个if-else看起来清爽多了。当然，如果你写了if-else，压缩工具也会帮你把它改三目运算符的形式： function getPrice(e){return 0>

e?-1:100*e}

（2）连等

连等是利用赋值运算表达式会返回所赋的值，并且执行顺序是从右到左的，如下：

overtime = favhouse = listingDetail = {...}

有时候你会看到有人这样写：

var age = 0;if((age = +form.age.value) >= 18){ console.log("你是成年人");} else { consoe.log("小朋友，你还有" + (18 - age) + "就成年了");}

也是利用了赋值表达式会返回一个值，在if里面赋值的同时用它的返回值做判断，然后else里面就已经有值了。上面的+号把字符串转成了整数。

（3）自增

利用自增也可以简化代码。如下，每发出一条消息，localMsgId就自增1：

chatService.sendMessage(localMsgId++, msgContent);

5. 减少魔数

例如，在某个文件的第800行，冒出来了一句：

dialogHandler.showQuestionNaire（"seller", "sell", 5, true);

就会让人很困惑了，上面的四个常量分别代表什么呢，如果我不去查一个那个函数的变量说明就不能够很快地意会到这些常量分别有什么用。这些意义不明的常量就叫"魔数"。

所以最好还是给这些常量取一个名字，特别是在一些比较关键的地方。例如上面的代码可改成：

var naireType = "seller", dialogType = "sell", questionsCount = 5, reloadWindow = true;naireHandler.showNaire(naireType, dialogType, questionsCount, reloadWindow);

这样意义就很明显了。

6. 使用ES6简化代码

ES6已经发展很多年了，兼容性也已经很好了。恰当地使用，可以让代码更加地简洁优雅。

（1）使用箭头函数取代小函数

有很多使用小函数的场景，如果写个function，代码起码得写3行，但是用箭头函数一行就搞定了，例如实现数组从大到小排序：

var nums = [4, 8, 1, 9, 0];nums.sort(function(a, b){ return b - a;});//输出[9, 8, 4, 1, 0]

如果用箭头函数，排序只要一行就搞定了：

var nums = [4, 8, 1, 9, 0];nums.sort(a, b => b - a);

代码看起来简洁多了，还有setTimeout里面经常会遇到只要执行一行代码就好了，写个function总感觉有点麻烦，用字符串的方式又不太好，所以这种情况用箭头函数也很方便：

setTimeout(() => console.log("hi"), 3000)

箭头函数在C++/Java等其它语言里面叫做Lambda表达式，Ruby比较早就有这种语法形式了，后来C++/Java也实现了这种语法。

当然箭头函数或者Lambda表达式不仅适用于这种一行的，多行代码也可以，不过在一行的时候它的优点才比较明显。

（2）使用ES6的class

虽然ES6的class和使用function的prototype本质上是一样的，都是用的原型。但是用class可以减少代码量，同时让代码看起来更加地高大上，使用function要写这么多：

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; }}

并且class还可以很方便地实现继承、静态的成员函数，就不需要自己再去通过一些技巧去实现了。

（3）字符串拼接

以前要用+号拼接：

var tpl = '' + ' 1' + '';

现在只要用两个反引号"`"就可以了：

var tpl = ` 1 `;

另外反引号还支持占位替换，原本你需要：

var page = 5, type = encodeURIComponet("#js");var url = "/list?page=" + page + "&type=" + type;

现在只需要：

var url = `/list?page=${page}&type=${type}`;

就不用使用+号把字符串拆散了。

（4）块级作用域变量

块级作用域变量也是ES6的一个特色，下面的代码是一个任务队列的模型抽象：

var tasks = [];for(var i = 0; i < 4; i++){ tasks.push(function(){ console.log("i is " + i); });}for(var j = 0; j < tasks.length; j++){ tasks[j]();}

但是上面代码的执行输出是4，4，4，4，并且不是想要输出：0，1，2，3，所以每个task就不能取到它的index了，这是因为闭包都是用的同一个i变量，i已经变成4了，所以执行闭包的时候就都是4了。那怎么办呢？可以这样解决：

var tasks = [];for(var i = 0; i < 4; i++){ !function(k){ tasks.push(function(){ console.log("i is " + k); }); }(i);}for(var j = 0; j < tasks.length; j++){ tasks[j]();}

把i赋值给了k，由于k它是一个function的一个参数，每次执行函数的时候，肯定会实例化新的k，所以每次的k都是不同的变量，这样就输出就正常了。

但是代码看起来有点别扭，如果用ES6，只要把var改成let就可以了：

var tasks = [];for(let i = 0; i

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.