Javascripts中if的优化

目录

Javascripts 中的 if … else 用起来倒是很方便,但是看起来就不舒服了

 1if (true) {
 2}
 3
 4if (true) {
 5}
 6
 7if (true) {
 8  if (true) {
 9    if (true) {
10    }
11  } else {
12  }
13} else {
14}

上面看起来很闹心吧,下面讲讲优化:

一、三元优化

if (ture) else可以用三元操作符来优化它:

 1// Bad 😥
 2if (true) {
 3  console.log("Congratutions!")
 4} else {
 5  console.warn("Oops, something went wrong!")
 6}
 7
 8// Great 🥰
 9true 
10  ? console.log("Congratutions")
11  : console.warn("Oops, something went wrong!")

二、与优化

true的情况下才执行可以用与来进行优化:

1if (true) {
2  alert(1)
3}
4
5// is equals to:
6
7true && alert(1)

三、提前返回

如果有多个判断,按照复杂程度,从上到下,提前返回。

1function handleRequest(req) {
2  if (req.code >= 500) {
3    return "Server error";
4  }
5  if (req.code >= 404) {
6    return "Cilent error";
7  }
8  return "Suceess";
9}

四、类表格优化

下面是类似表格似的选择,通常会用 switch 来进行优化

 1// Bad 😥
 2const weekday = (num) => {
 3  if (num === 1) {
 4    return "Monday"
 5  } else if (num === 2) {
 6    return "Tuesday"
 7  } else if (num === 3) {
 8    return "Wednesday"
 9  } else if (num === 4) {
10    return "Thursday"
11  } else if (num === 5) {
12    return "Friday"
13  } else if (num === 6) {
14    return "Saturday"
15  } else if (num === 7) {
16    return "Sunday"
17  } else {
18    return "Unknown"
19  }
20}
21
22console.log(weekday(1)) // Monday

switch 也不是最优解,用对象的键值对来解:

 1const weekday = (option) => {
 2    let obj = {
 3        1: "Monday",
 4        2: "Tuesday",
 5        3: "Wednesday",
 6        4: "Thursday",
 7        5: "Friday",
 8        6: "Saturday",
 9        0: "Sunday"
10    }
11    return obj[option] ?? "Unknown"
12}
13
14console.log(weekday(1)) // Monday

也可以用 ES6 的 map 来实现:

 1// Great 🥰
 2const weekday = (num) => {
 3  const map = new Map()
 4    .set(1, "Monday")
 5    .set(2, "Tuesday")
 6    .set(3, "Wednesday")
 7    .set(4, "Thursday")
 8    .set(5, "Friday")
 9    .set(6, "Saturday")
10    .set(7, "Sunday");
11  return map.has(num) ? map.get(num) : "Unknown";
12};
13
14console.log(weekday(1));

五、选项多对一的数组优化

看如下代码,多个选项对应一个返回:

 1const getContinent = (option) => {
 2  if (option === "China" || option === "Japan") {
 3    return "Asia";
 4  }
 5  if (option === "Germany" || option === "France") {
 6    return "Europe";
 7  }
 8};
 9
10console.log(getContinent("China"));

使用数组来容纳多个选项,然后用 includes 来判断并返回

1const getContinent = (option) => {
2  const Asia = ["China", "Japan"];
3  const Europe = ["Germany", "Franch"];
4  if (Asia.includes(option)) return "Asia";
5  if (Europe.includes(option)) return "Europe";
6  return "Unknown";
7};
8
9console.log(getContinent("China")); // Asia

进一步优化,用 && 与优化

 1const getContinent = (option) => {
 2  let [result, setResult] = ["unknown", (str) => (result = str)];
 3  const Asia = ["China", "Japan"];
 4  const Europe = ["Germany", "Franch"];
 5  Asia.includes(option) && setResult("Asia");
 6  Europe.includes(option) && setResult("Europe");
 7  return result;
 8};
 9
10console.log(getContinent("China"));

Shell进阶技巧
JavaScript 到底是如何执行的呢 -- JS的作原理
comments powered by Disqus