# Vue 项目优化实践-优化逻辑判断

# 嵌套层级优化

重点：提前 return 掉无效条件，减少嵌套层级，更容易理解和维护。

function supply(fruit, quantity) {
  const redFruits = ["apple", "strawberry", "cherry", "cranberries"];
  if (!fruit) throw new Error("没有水果啦"); // 条件 1: 当 fruit 无效时，提前处理错误
  if (!redFruits.includes(fruit)) return; // 条件 2: 当不是红色水果时，提前 return

  console.log("红色水果");

  // 条件 3: 水果数量大于 10 个
  if (quantity > 10) {
    console.log("数量大于 10 个");
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

# 多条件分支的优化处理

当编写有多个判断条件的代码时，第一反应就是使用if else 或者switch case ，但是这两者都非常的冗长，可以借助Object 的{ key: value } 或者Map 的数据结构进行优化。

如果页面上展示的数据存在先后顺序，那么就需要使用Map 来存储，因为Map 存储的数据是有序的，而Object 存储的是无序的。

// Object
const fruitColor = {
  red: ["apple", "strawberry"],
  yellow: ["banana", "pineapple"],
  purple: ["grape", "plum"],
};
function pick(color) {
  return fruitColor[color] || [];
}
// Map
const fruitColor = new Map()
  .set("red", ["apple", "strawberry"])
  .set("yellow", ["banana", "pineapple"])
  .set("purple", ["grape", "plum"]);

function pick(color) {
  return fruitColor.get(color) || [];
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

也可以通过更加语义化的方式定义对象。

// 使用Array.filter()
const fruits = [
  { name: "apple", color: "red" },
  { name: "strawberry", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "pineapple", color: "yellow" },
  { name: "grape", color: "purple" },
  { name: "plum", color: "purple" },
];

function pick(color) {
  return fruits.filter((f) => f.color === color);
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 使用数组新特性优化

# 多条件判断

// bad
function judge(fruit) {
  if (
    fruit === "apple" ||
    fruit === "strawberry" ||
    fruit === "cherry" ||
    fruit === "cranberries"
  ) {
    console.log("red");
  }
}
// good
// 使用Array.includes()
const redFruits = ["apple", "strawberry", "cherry", "cranberries"];
function judge(type) {
  if (redFruits.includes(fruit)) {
    console.log("red");
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 数组所有项是否都满足

// Array.every()
const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "grape", color: "purple" },
];
const isAllRed = fruits.every((f) => f.color === "red");

1
2
3
4
5
6
7

# 数组某一项是否满足

// Array.some()
const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "grape", color: "purple" },
];
const isAllRed = fruits.some((f) => f.color === "red");

1
2
3
4
5
6
7

# 使用解构和默认参数

适用于参数为对象的情况

// bad
const buyFruit = (fruit, amount) => {
  fruit = fruit || {};
  if (!fruit.name || !fruit.price) {
    return;
  }
};
// good
const buyFruit = ({ name, price } = {}, amount) => {
  if (!name || !prices) {
    return;
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13

Vue 项目优化实践-webpack 篇 Vue 项目优化实践-规范篇