让别人夸赞你的代码写得漂亮
阅读本文大概需要 10 分钟。
来自：网络
1. 按强类型风格写代码
（1）定义变量的时候要指明类型，告诉 JS 解释器这个变量是什么数据类型的，而不要让解释器去猜，例如不好的写法：
var num,
str,
obj;
var num = 0,
str = '',
obj = null;
var num = 5;
num = "-" + num;
var num = 5;
var sign = "-" + num;
function getPrice(count){
if(count < 0) return "";
else return count * 100;
}
function getPrice(count){
if(count < 0) return -1;
else return count * 100;
}
2. 减少作用域查找
例如以下运行在全局作用域的代码：
<script>
var map = document.querySelector("#my-map");
map.style.height = "600px";
script>
<script>
!function(){
var map = document.querySelector("#my-map");
map.style.height = "600px";
}()
script>
闭包的作用在于可以让子级作用域使用它父级作用域的变量，同时这些变量在不同的闭包是不可见的。这样就导致了在查找某个变量的时候，如果当前作用域找不到，就得往它的父级作用域查找，一级一级地往上直到找到了，或者到了全局作用域还没找到。因此如果闭包嵌套得越深，那么变量查找的时间就越长。如下：
function getResult(count){
count++;
function process(){
var factor = 2;
return count * factor - 5;
}
return process();
}
function getResult(count){
count++;
function process(count){
var factor = 2;
return count * factor - 5;
}
return process(count);
}
var url = "";
if(window.location.protocal === "https:"){
url = "wss://xxx.com" + window.location.pathname + window.location.search;
}
var url = "";
var location = window.location;
if(location.protocal === "https:"){
url = "wss://xxx.com" + location.pathname + location.search;
}
3. 避免==的使用
if(typeof num != "undefined"){
}
var num = parseInt(value);
if(num == 10){
}
var totalPage = "5";
if(parseInt(totalPage) === 1){
}
if(a == b){
}
Expected ‘===’ and instead saw ‘==’.
if(a == b){
null == undefined //true
'' == '0' //false
0 == '' //true
0 == '0' //true
'
' == 0 //true
new String("abc") == "abc" //true
new Boolean(true) == true //true
true == 1 //true
4. 合并表达式
如上面的 getPrice 函数：
function getPrice(count){
if(count < 0) return -1;
else return count * 100;
}
function getPrice(count){
return count < 0 ? return -1 : count * 100;
}
function getPrice(e){return 0>e?-1:100*e}
连等是利用赋值运算表达式会返回所赋的值，并且执行顺序是从右到左的，如下：
overtime = favhouse = listingDetail = {...}
var age = 0;
if((age = +form.age.value) >= 18){
console.log("你是成年人");
} else {
consoe.log("小朋友，你还有" + (18 - age) + "就成年了");
}
利用自增也可以简化代码。如下，每发出一条消息，localMsgId 就自增 1：
chatService.sendMessage(localMsgId++, msgContent);
5. 减少魔数
dialogHandler.showQuestionNaire（"seller", "sell", 5, true);
var naireType = "seller",
dialogType = "sell",
questionsCount = 5,
reloadWindow = true;
naireHandler.showNaire(naireType, dialogType, questionsCount, reloadWindow);
6. 使用 ES6 简化代码
有很多使用小函数的场景，如果写个 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(() => console.log("hi"), 3000)
虽然 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 Person{
constructor(name, age){
this.name = name;
this.age = age;
}
addAge(){
this.age++;
}
setName(name){
this.name = name;
}
}
以前要用+号拼接：
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}`;
块级作用域变量也是 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]();
}
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]();
}
var tasks = [];
for(let i = 0; i <= 4; i++){
tasks.push(function(){
console.log("i is " + i);
});
}
for(var j = 0; j < tasks.length; j++){
tasks[j]();
}
推荐阅读：
微信扫描二维码，关注我的公众号
朕已阅 