优雅代码

If 语句

bad

if (value === "duck" || value === "dog" || value === "cat") {
  // ...
}

good

const options = ["duck", "dog", "cat"];
if (options.includes(value)) {
  // ...
}

提前退出机制

function handleEvent(event) {
  if (event) {
    const target = event.target;
    if (target) {
      // ...
    }
  }
}

使用提前退出，减少嵌套

function handleEvent(event) {
  if (!event || !event.target) {
    return;
  }
  // ...
}

返回数组

如果一个函数只有少量几个返回值，但调用方在使用此函数时大概率会将返回的值改名，那就返回数组

bad

const useState = () => {
  return {
    state,
    setState,
  };
};

good

// 函数
const useState = () => {
  return [state, setState];
};

// 调用
const [data, setData] = useState();

使用 Map 来代替静态的 switch case

如果明确知道映射关系，如 TS 类型定义好了。并且没有什么计算逻辑，就可以使 Map 提示代码整洁度。

bad

const getTranslate = (en) => {
  switch (en) {
    case "apple":
      return "苹果";
    case "banana":
      return "香蕉";
    case "orange":
      return "橘子";
  }
};

good

const translateMap = {
  apple: "苹果",
  banana: "香蕉",
  orange: "橘子",
};
const getTranslate = (en) => {
  return translateMap[en];
};