此开关运算符语法的名称

Question

我经常在代码库中找到这种 switch 语句，但无法在任何地方找到有关它的文档。有人知道这个语法的名称吗？

import React from 'react'

enum Options {
    FirstOption = 'first',
    SecondOption = 'second'
}

export default function DisplayIcon({selectedOption: string}) {

  const clickFirst = () => {
      // do something
  }

  const clickSecond = () => {
      // do something
  }

  return (
    <Wrapper>
    {
      {
        [Options.FirstOption]: (
          <ClickableIcon onClick={ clickFirst }>
            <Icon type={ IconType.Frist } />
          </ClickableIcon>
        ),
        [Options.SecondOption]: (
          <ClickableIcon onClick={ clickSecond }>
            <Icon type={ IconType.Second } />
          </ClickableIcon>
        ),
      }[selectedOption]
    }
  </Wrapper>
  )
}

Answer 1

它根本不是 switch 语句，尽管你是对的，它被用来 select 一个值。这是一个 object literal 和计算的属性名称。所以它正在构建一个对象，然后从该对象中挑选出匹配 selectedOption 的属性，所有这些都在同一个表达式中。

下面是对象文字部分的一个更简单的示例，其中包含计算出的属性个名称：

const name1 = "a";
const name2 = "b";
const obj = {
    [name1]: "value for a",
    [name2]: "value for b",
};
console.log(obj);

下面是该代码构建对象然后立即获取其属性之一的示例：

const name1 = "a";
const name2 = "b";
const pickOne = Math.random() < 0.5 ? name1 : name2;
const pickedValue = {
    [name1]: "value for a",
    [name2]: "value for b",
}[pickOne];
console.log(`Picked "${pickOne}": "${pickedValue}"`);

FWIW，我不会那样做。我要么定义一次对象并重用它，要么在 return.[=18= 之前的代码中使用 switch 或 if/else if 或类似的代码]

Answer 2

这不是 JSX 特有的，也不是真正的特定语法，而是多种语法的组合。让我们稍微简化一下：

let result = {
    [Options.FirstOption]: 'hello',
    [Options.SecondOption]: 'goodbye',
}[selectedOption];

这将 select 'hello' 或 'goodbye'。它通过首先创建一个对象，然后在其上查找属性来实现。我们可以像这样添加一个中间变量：

let options = {
    [Options.FirstOption]: 'hello',
    [Options.SecondOption]: 'goodbye',
};
let result=options[selectedOption];

[...]: 语法只是允许键本身根据一些其他变量而不是文字字符串来定义。我们可以像这样一次添加一个属性：

let options = {};
options[Options.FirstOption] = 'hello';
options[Options.SecondOption] = 'goodbye';
let result=options[selectedOption];

结果，正如您已经算出的，等同于：

let result;
if ( selectedOption === Options.FirstOption ) {
    result = 'hello';
}
elseif ( selectedOption === Options.SecondOption ) {
    result = 'goodbye';
}

此开关运算符语法的名称

Name of this switch operator syntax

javascript

jsx

typescript

reactjs