Javascript 与Fat Arrow（>；）函数混淆

嗨，我在学习NextJs，发现了这个问题

此模块工作正常

const GlobalStyles = () => (
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
);
export default GlobalStyles;

constglobalStyles=（）=>(
);
导出默认全局样式；

这不是

const GlobalStyles = () => {
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
};
export default GlobalStyles;

constglobalStyles=（）=>{
};
导出默认全局样式；

---

有人能解释吗？

第一个函数隐式返回

jsx

元素（没有指定

return

）

第二个缺少

return

语句

---

说明：在JavaScript中，当您使用arrow函数时，如果您只想从函数返回一个值，则可以省去大括号（

{}

），但是，如果确实使用大括号，则需要实际编写

return

来返回想要返回的任何内容。

第一个函数隐式返回

jsx

元素（无需指定

return

）

第二个缺少

return

语句

---

说明：在JavaScript中，当您使用arrow函数时，如果您只想从函数中返回一个值，则可以不使用大括号（

{}

），但是如果确实使用大括号，则需要实际编写

return

来返回您想要返回的任何内容。

使用大括号

{}

，您正在声明一个需要返回语句的箭头函数

通过使用括号定义arrow函数，您只允许有一条语句（您的定义），默认情况下返回该语句

如果您添加了一个

返回值

，则第二个示例将有效：

const GlobalStyles = () => {
  return (<>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>);
};
export default GlobalStyles;

constglobalStyles=（）=>{
返回(
);
};
导出默认全局样式；

使用括号

{}

时，您正在声明一个箭头函数，该函数需要一个

返回

语句

通过使用括号定义arrow函数，您只允许有一条语句（您的定义），默认情况下返回该语句

如果您添加了一个

返回值

，则第二个示例将有效：

const GlobalStyles = () => {
  return (<>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>);
};
export default GlobalStyles;

constglobalStyles=（）=>{
返回(
);
};
导出默认全局样式；

答案很简单

const GlobalStyles = () => (
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
);

constglobalStyles=（）=>(
);

这相当于

const GlobalStyles = () => {
  return (
    <>
      <Global
        styles={css`
          body {
            color: #000000;
          }
        `}
      />
    </>
  );
}

constglobalStyles=（）=>{
返回(
);
}

---

您的第二个代码块不返回任何内容，因此不呈现任何内容是正确的行为。

答案非常简单

const GlobalStyles = () => (
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
);

constglobalStyles=（）=>(
);

这相当于

const GlobalStyles = () => {
  return (
    <>
      <Global
        styles={css`
          body {
            color: #000000;
          }
        `}
      />
    </>
  );
}

constglobalStyles=（）=>{
返回(
);
}

---

您的第二个代码块不返回任何内容，因此不呈现任何内容是正确的行为。

这是一个非常好的问题！每个人都不关心它为什么会被使用

顾名思义，IIFEs是在定义之后立即执行的函数，无需显式调用它们

通常，这是定义和执行（稍后）函数的方式：

function myFunction() {

// ...

}

myFunction();

但是，如果要在定义函数后立即执行该函数，则必须将整个声明封装在括号中（将其转换为表达式），并通过再添加两个括号（传递函数可能采用的任何参数）来执行该函数

无论哪种方式：

( function myFunction(/* arguments */) {
    // ...
}(/* arguments */) );

在TypeScript中，使用大括号包装IIFE，将所有需要的逻辑（if/else、switch、三元运算符等）放入其中，然后返回要渲染的任何内容。例如，以下是呈现保存/编辑按钮的逻辑在IIFE中的外观：

( (/* arguments */) => {
    // ...
} ) (/* arguments */);

---

我希望我的回答能帮助你理解操作员。

这真是个好问题！每个人都不关心它为什么会被使用

顾名思义，IIFEs是在定义之后立即执行的函数，无需显式调用它们

通常，这是定义和执行（稍后）函数的方式：

function myFunction() {

// ...

}

myFunction();

但是，如果要在定义函数后立即执行该函数，则必须将整个声明封装在括号中（将其转换为表达式），并通过再添加两个括号（传递函数可能采用的任何参数）来执行该函数

无论哪种方式：

( function myFunction(/* arguments */) {
    // ...
}(/* arguments */) );

在TypeScript中，使用大括号包装IIFE，将所有需要的逻辑（if/else、switch、三元运算符等）放入其中，然后返回要渲染的任何内容。例如，以下是呈现保存/编辑按钮的逻辑在IIFE中的外观：

( (/* arguments */) => {
    // ...
} ) (/* arguments */);

---

我希望我的回答能帮助你理解

=>

运算符。

一个是表达式体，另一个是函数体，不返回任何东西。如果我想从const x=（）=>{}返回值，那么我必须做什么？

const x=（）=>{return…}

一个是表达式体，另一个是函数体，不返回任何东西。如果我想从const x=（）=>{}返回值，那么我必须做什么？

const x=（）=>{return…}

这个问题与IIFEs或typescript无关。这是关于箭头函数没有主体时的隐式返回。问题与IIFEs或typescript无关。它是关于箭头函数没有主体时的隐式返回。