1. 字符串的自动匹配(Array.includes)
在写代码时我们经常会遇到这样的需求,我们需要检查某个字符串是否是符合我们的规定的字符串之一。最常见的方法就是使用||
和===
去进行判断匹配。但是如果大量的使用这种判断方式,定然会使得我们的代码变得十分臃肿,写起来也是十分累。其实我们可以使用Array.includes
来帮我们自动去匹配。
// 未优化前的写法
const isConform = (letter) => {
if (letter === "a" ||letter === "b" ||letter === "c" ||
letter === "d" || letter === "e") {
return true;
}
return false; };
```javascript
// 优化后的写法
const isConform = (letter) => ["a", "b", "c", "d", "e"].includes(letter);
2.for-of和for-in自动遍历
for-of
和for-in
,可以帮助我们自动遍历Array
和object
中的每一个元素,不需要我们手动跟更改索引来遍历元素。
注:我们更加推荐对象(object
)使用for-in
遍历,而数组(Array
)使用for-of
遍历
for-of
const arr = ['a',' b', 'c'];
// 未优化前的写法
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
console.log(element);
}
// 优化后的写法
for (const element of arr) {
console.log(element);
}
// expected output: "a" // expected output: "b" // expected output: "c"
for-in
const obj = { a: 1, b: 2, c: 3, };
// 未优化前的写法
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
const value = obj[key];
// ... }
js
复制代码
// 优化后的写法 for (const key in obj) { const value = obj[key]; // ... }
3.false判断
如果你想要判断一个变量是否为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;
4.三元运算符代替(if/else)
在我们编写代码的时候肯定遇见过if/else
选择结构,而三元运算符可以算是if/else
的一种语法糖,能够更加简洁的表示if/else
。
// 未优化前的写法 let info;
if (value < minValue) {
info = "Value is最小值";
} else if (value > maxValue) {
info = "Value is最大值";
} else {
info = "Value 在最大与最小之间";
}
//优化后的写法
const info = value < minValue ? "Value is最小值" : value > maxValue ? "Value is最大值" : "在最大与最小之间";
5.函数调用的选择
三元运算符还可以帮我们判断当前情况下该应该调用哪一个函数,
function f1() {
// ...
}
function f2() {
// ...
}
// 未优化前的写法
if (condition) {
f1(); }
else
{
f2();
}
// 优化后的写法
(condition ? f1 : f2)();
6.用对象代替switch/case选择结构
switch case
通常是有一个case
值对应一个返回值,这样的结构就类似于我们的对象,也是一个键对应一个值。我们就可以用我们的对象代替我们的switch/case
选择结构,使代码更加简洁文章来源:https://www.toymoban.com/news/detail-460276.html
const dayNumber = new Date().getDay();
// 未优化前的写法
let day; switch (dayNumber) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break; case 3:
day = "Wednesday";
break; case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday"; }
// 优化后的写法
const days = {
0: "Sunday",
1: "Monday",
2: "Tuesday",
3: "Wednesday",
4: "Thursday",
5: "Friday",
6: "Saturday",
};
const day = days[dayNumber];`
7. 逻辑或(||)的运用
如果我们要获取一个不确定是否存在的值时,我们经常会运用if判断先去判断值是否存在,再进行获取。如果不存在我们就会返回另一个值。我们可以运用逻辑或(||
)的特性,去优化我们的代码文章来源地址https://www.toymoban.com/news/detail-460276.html
// 未优化前的写法
let name;
if (user?.name)
{
name = user.name;
} else {
name = "Anonymous";
}
// 优化后的写法
const name = user?.name || "Anonymous";
到了这里,关于每个前端应该掌握的7个代码优化的小技巧的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!