上海大型网站建设公司,郑州品牌营销策划公司,成都网站建设桔子,上海室内设计公司排行榜本文主要是分享一下平时前端工程师#xff0c;在写前端代码过程中的一些代码优化#xff0c;以及使用的一些小技巧#xff0c;来使我们的代码更加简洁#xff0c;可读性更强#xff0c;更易维护。
1. 字符串的自动匹配#xff08;includes的优化#xff09;
includes是…本文主要是分享一下平时前端工程师在写前端代码过程中的一些代码优化以及使用的一些小技巧来使我们的代码更加简洁可读性更强更易维护。
1. 字符串的自动匹配includes的优化
includes是ES7新增的 API与indexOf不同的是includes直接返回的是Boolean值indexOf则返回的索引值, 数组和字符串都有includes方法。
我们经常需要检查某个字符串是否是符合我们的规定的字符串之一。最常见的方法就是使用||和去进行判断匹配。但大量的使用这种判断方式会使得我们的代码变得十分臃肿写起来也很累。其实我们可以使用Array.includes来帮我们自动去匹配。
代码示例
// 未优化前的代码
if(code202 || code 203 || code 204) {return 1
}else{return 2
}// 优化后的写法
if([202,203,204].includes(code)){retrun 1
}else{return 2
}2. 三目运算符
代码示例
// 未优化前的代码
let demo
if(code201) {demo 1
}else if (code202){demo 2
}else{demo 99
}// 优化后的写法
let demo code201 ? 1 : code202 ? 2 : 99虽然三目简洁一些但是复杂的逻辑不建议使用。 因为复杂逻辑会导致代码可读性变差所以在实际使用中需要我们根据情况去取舍。 3. 解构
代码示例
// 未优化前的代码
const demo1 {name: 回忆哆啦没有A梦,age: 27,skill:[js,vue,python,react]
}
const demo2 {name: demo2.name,age: demo2.age,
}
console.log(demo2) // {name: 回忆哆啦没有A梦,age: 27}// 优化后的写法
const demo1 {name: 回忆哆啦没有A梦,age: 27,skill:[js,vue,python,react]
}
const {name,age} demo1
const demo2 {name, age}
console.log(demo2) // {name: 回忆哆啦没有A梦,age: 27}
console.log(name) // 回忆哆啦没有A梦
console.log(age) // 27使用解构语法开发人员可以快速将数组中的值或对象中的属性解包到指定的变量中。
4. 使用可选的链接运算符?.
?.作用与 . 操作符类似。
不同的是 ?. 如果对象链上的引用是 null 或者 undefined 时 . 操作符会像前言中的例子抛出一个错误而 ?. 操作符则会按照短路计算的方式进行处理返回 undefined。
可选链操作符也可用于函数调用如果操作符前的函数不存在也将会返回 undefined。
代码示例
// 未优化前的代码
let code;
if (data?.code) {code data.code;
} else {code 201;
}// 优化后的写法
const code data?.code || 201;?.提供了一种方法来简化被连接对象的值访问保证访问数据的安全性。它可以用于对象、数组、函数中。这个语法很有用在项目中使用可以达到事半功倍的效果。 5. 将参数作为对象传递
代码示例
// 未优化前的代码
const creatData (name,skill,age){// ...
}
creatData(回忆哆啦没有A梦,[js,vue,python,react],27)// 优化后的写法
const creatData ({name,age,skill}){// ...
}
creatData({name: 回忆哆啦没有A梦,age: 27,skill:[js,vue,python,react]
})这样传递参数的方式的好处
参数的顺序不再重要开发人员可以专注于交付高质量的代码而不必反复检查功能定义。由于IDE将专注于您提供的特定参数因此自动完成变得更加容易。当函数调用指定每个属性的值时此方法以明确的方式传达意图后续维护的时候也不必害怕因为传错参数顺序导致执行错误。大型代码库将从附加的详细信息中受益匪浅。
6. 用对象代替switch/caseif/else选择结构
我们经常遇到复杂逻辑判断的情况通常会用if/else或者switch/case来实现多个条件判断但这样会有个问题随着逻辑复杂度的增加代码中的if/else/switch/case会变得越来越臃肿越来越看不懂所以我们可以这样优化下代码。
代码示例
// 未优化前的代码
let activeText;
switch (code) {case 500:activeText 通用错误消息;break;case 501:activeText 无法识别请求;break;case 502:activeText 网关或者代理错误;break;case 503:activeText 服务器维护或者过载;break;case 504:activeText 未收到响应;break;case 505:activeText 服务器不支持;break;
}借助 Object 的 { key: value } 结构我们可以在 Object 中枚举所有的情况然后将 key 作为索引直接通过 Object.key 或者 Object[key] 来获取内容。
// 优化后的写法
const texts {500: 通用错误消息,501: 无法识别请求,502: 网关或者代理错误,503: 服务器维护或者过载,504: 未收到响应,505: 服务器不支持,
};
const activeText texts [code];7. 判断一个变量是否为null、undefined、0、false、NaN、
如果你想要判断一个变量是否为null、undefined、0、false、NaN、”你就可以使用逻辑非!取反来帮助我们来判断,而不用每一个值都用来判断。
代码示例
// 未优化前的代码
const isFalsey (value) {if (value null ||value undefined ||value 0 ||value false ||value NaN ||value ) {return true;}return false;
};// 优化后的写法
const isFalsey (value) !value;8. 等到多个Promise完成 我们在开发中经常会遇到一个需求有a,b, 2个http请求我们需要等到a,b, 2个接口都请求成功返回数据后才能去做动作c。 这时候 每当您需要执行多个任务并等待它们完成时此技巧就很重要。由于每个任务都是异步运行的因此可以并行处理它们并且一旦所有承诺都得到解决就可以使用返回的数据。
const promiseA new Promise((resolve, reject) {resolve(成功了)
});
const promiseB new Promise((resolve, reject) {resolve(success)
});
let promiseC Promse.reject(失败)Promise.all([promiseA , promiseB ]).then((result) {console.log(result) // [成功了, success]
}).catch((error) {console.log(error)
})Promise.all([promiseA ,promiseB ,promiseC ]).then((result) {console.log(result)
}).catch((error) {console.log(error) // 失败了打出 失败
})Promse.all在处理多个异步处理时非常有用比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示在此之前只显示loading图标。 除了Promse.all还有个Promse.race race就是“赛跑”。 Promse.race 意思就是说Promise.race([promiseA , promiseB ,promiseC])里面哪个结果获得的快就返回那个结果不管结果本身是成功状态还是失败状态。 9. for-of 使用
for-of可以帮助我们自动遍历Array和object中的每一个元素,不需要我们手动跟更改索引来遍历元素。
代码示例
// 未优化前的代码
const arr [a, b, c];
for (let i 0; i arr.length; i) {const demo arr[i];console.log(demo);
}// 优化后的写法
for (const demo of arr) {console.log(demo);
}
// a
// b
// c不推荐使用 for-in因为 for-in 的 性能很差 他会迭代所有的私有和共有属性原型链一级级查很耗性能。 未完待续持续更新…
