JS 代码的简单重构与优化
1.返回值
//bad
if(age < 20){
return true;
}else {
return false;
}
//good
return age < 20;
复制代码
2.将数组长度进行存储,循环时就不用每次都读取一次数组长度,提升性能。(适用于一次加载20以上的dataList)
//bad
for(var i = 0; i < array.length; i++){
const element = array[i];
}
//good
for(var i = 0; len = array.length; i < len; i++){
const element = array[i];
}
复制代码
3.js 中,所有非空字符作布尔运算时,都会返回true
,反之返回false
。
//bad
if(value != ""){
//do something
}
//good
if(value){
//do something
}
复制代码
4.多层嵌套,进行转化与拆分
//bad
if(user.id == 10){
if(user.name != ""){
if(user.email === "email"){
//do something
}
}
}
//good
if(user.id == 10 && user.name != "" && user.email === "email"){
//do something
}
//good
if(user.id == 10) return;
if(user.name != "") return;
if(user.email === "email") return;
复制代码
5.多个变量定义,写一个var
即可,遵循的原则,被赋值的写在前面,只是进行声明的写在后面。
//bad
var a = "aa";
var b = "bb";
var c = "cc";
var d;
//good
var a = "aa",
b = "bb",
c = "cc",
d
复制代码
6.尽可能的减少DOM操作,将DOM操作放在循环体之外,数据处理好后,只执行一次DOM操作即可。
//bad
for (var i = 0; i < 100; i++){
str += str;
document.getElementById("box").innerHtml = str;
}
//good
for (var i = 0; i < 100; i++) {
str += str;
}
document.getElementById("box").innerHtml = str;
复制代码
7.避免使用 连等号 声明赋值变量。js基础好点的同学都知道,这里存在着一个坑: b 会被声明为全局变量,意思就是在 test() 方法之外b也是可以被访问到的。 全局变量是不推荐使用的,容易污染环境。
//bad
function test() {
var a = b = 1;
console.log(a);
}
//good
function test() {
var a = 1,
b = 1;
console.log(a);
}
复制代码
8.typeof 运算是用来检查数据类型的(常用来检查js中的基础类型),它返回的是一个字符串(并且始终为小写),所以第一个始终为false。 检查js中的引用类型要用 instanceof 运算, 如:
`var arr = []; if(arr instanceof Array){}`,
复制代码
但 Function 类型比较特别,也可以用 typeof 来进行判断。
//bad
if (typeof str === "String") {
}
//good
if (typeof str === "string") {
}
复制代码
9.两个方法实现同样的功能,但第二个优雅得多,性能上也比第一个要好。当对字符串进行循环操作,如:查找、替换。 首先考虑的应该是使用 正则,不应该是循环遍历。
//(bad) 格式化字符串 fontSize => font-size
function stringFormat(str) {
var strArr = str.split(''),
len = strArr.length,
i = 0;
for (; i < len; i++) {
if(/^[A-Z]$/.test(strArr[i])) {
strArr[i] = "-" + strArr[i].toLowerCase();
}
}
return strArr.join('');
}
//(good) 格式化字符串 fontSize => font-size
function stringFormat(str) {
return (str.replace(/([a-z])(A-Z)/g, "$1-$2")).toLowerCase();
}
复制代码
10.当一个方法接收的参数过多的时候,可以考虑将其封装成一个json对象, 这样简单得多。
//bad
function regist(userName, userPwd, userEmail, userPhone) {
//do something...
}
//good
function regist(user) {
//do something
}
复制代码
11.使用三元运算表达式进行if…else的判断
//bad
if (age > 20) {
value = "aa";
} else {
value = "bb";
}
//good
value = age > 20 ? "aa" : "bb";
复制代码