时间戳

首页 > 解决方案 > JavaScript 中的模式匹配？

javascript - JavaScript 中的模式匹配？

问题描述

我需要在 JavaScript 中创建一个变量并根据条件为其赋值。这可行，但感觉有点冗长：

  const color = (() => {
    switch (type) {
      case "primary":
        return CONSTANTS.colors.primary;
      case "secondary":
        return CONSTANTS.colors.secondary;
      case "tertiary":
        return CONSTANTS.colors.tertiary;
      case "positive":
        return CONSTANTS.colors.positive;
      case "negative":
        return CONSTANTS.colors.negative;
      case "disabled":
        return CONSTANTS.colors.disabled;
      default:
        throw new Error("A backgroundColor condition was missed");
    }
  })();

我正在尝试做的事情称为“模式匹配”吗？我读过 JavaScript 没有这个功能，但我不完全确定它是什么。

有没有更简洁的方法来编写上面的代码？我可以有很多if陈述，但这感觉更混乱，并且要求变量let不是const。

let color:
if (type === "primary") {
    color = CONSTANTS.colors.primary;
} else if(type === "secondary") {
    color = CONSTANTS.colors.secondary;
} else if(type === "tertiary") {
    color = CONSTANTS.colors.tertiary;
} else if(type === "secondary") {
    color = CONSTANTS.colors.secondary;
} else if(type === "positive") {
    color = CONSTANTS.colors.positive;
} else if(type === "negative") {
    color = CONSTANTS.colors.negative;
} else if(type === "disabled") {
    color = CONSTANTS.colors.disabled;
}

标签： javascriptpattern-matching

解决方案

解决您的问题的最简单方法是检查是否type在 object 中定义了CONSTANTS.colors。如果要通过变量访问属性，则需要使用括号注解。括号内的所有内容都被评估为表达式（type变量也是如此，'type'字符串值）。因此，object.type返回与 相同的值object['type']。

let color = null;
if (typeof CONSTANTS.colors[type] !== 'undefined') {
   color = CONSTANTS.colors[type];
} else {
   throw new Error('A backgroundColor condition was missed');
}
console.log(color);

Object.keys()您还可以首先使用and检查对象中是否定义了键includes()：

let color = null;
if (Object.keys(CONSTANTS.colors).includes(type)) {
    color = CONSTANTS.colors[type];
} else {
   throw new Error('A backgroundColor condition was missed');
}
console.log(color);

如果要支持 IE11，则不能使用.includes(). 使用.indexOf(type) !== -1而不是.includes(type).

推荐阅读