【干货】一个常见的条件分支OR(图)

修复我:

错误的代码。我有强烈的意愿去解决它。

做:

怎么办。比 FIXME 弱。修复的功能。

注意:注意:

在强调实现的意图以及为什么要这样写时写。

破解:

我想重构。

评论:

需要审核或查看。

警告:

小心点。

什么是假的

False、undefined、null、NaN、0等,分别为真/假值,假。

请参考 MDN。

// false, undefined, null, NaN, 0などのときは以下のエラーログを出力する
if (!hoge) {
  console.error("hoge がありません");
}
console.log(hoge);

突然||这是什么?

一个普通的条件分支 OR。

当左侧为 Falsy 时,使用连续计算右侧表达式的属性。

(“HOGE”下面的代码是Truthy)

即如果 hoge 为 Falsy,则“HOGE”可以输出到屏幕上。

const HogeComponent = ({ hoge }) => {

  return 
{hoge || "HOGE"}
; };

const a1 = false || "hoge"; // f || t returns "hoge"
const a2 = "hoge" || false; // t || f returns "hoge"

什么是突然&&?

一个常见的条件分支 AND。

当左侧为Truthy时,使用连续计算右侧表达式的属性。

也就是说,如果 loading 是 Truthy(页面正在加载),则 Loading 组件打算将其打印到屏幕上。

const HogeComponent = ({ loading, hoge }) => {
  return (
    
      {loading && }
      {hoge}
    
  );
};

?和? 什么是

可选链接?

如果引用为 null(null 或 undefined),则表达式被缩短并返回 undefined 而不是错误。

如果左边为空,则返回右边的值,否则返回左边的值。

const piyoList = userList?.map((user) => ({
  hoge: user?.hoge ?? "hoge",
  fuga: user?.fuga ?? "fuga",
  piyo: user?.piyo ?? "piyo",
}));

我应该如何使用?和 ||正确吗?

||运算符经常被混淆,因为它包含 ?? 的谓词。运算符。

未定义 ||如果只想在null的时候做有限的判断,使用??的好处operator 是其他人在看代码时更容易理解意图。根据具体情况,可能会发生意外行为。你可以想象。

不方便的例子

例如,||将数字 0 作为参数传递时是不合适的。 (因为 Falsey 值包含 0)

假设有一个组件可以指定任意宽度,如下图。

const WidthComponent = ({ width }) => {
  return 
横幅をきめる
};

如果使用宽度为 0 调用此组件,则始终应用 400px。这是因为 0 是 Falsy 并移动到右侧的评估。

我想在函数中使用可选链

这可以通过编写functionName ?.()来实现。

当然,多个可选链也可以一起使用。

const productName = product?.getName?.();

使用它,可以减少下面的冗余描述。

const productName = product?.getName ? product.getName() : undefined;

我想在数组中使用可选链

const product = products?.[0]可以通过描述来实现。

如果要在数组索引后面加上可选链,写在[]后面?

const user = userList?.[3]?.hoge ?? "HOGE"

根据上面的测验

const userList = [
  {hoge:"hoge1",piyo:"piyo1"},
  {hoge:"hoge2",piyo:"piyo2"},
  {hoge:"hoge3",piyo:"piyo3"},
]

图片[1]-【干货】一个常见的条件分支OR(图)-唐朝资源网

const user = userList?.[3]?.hoge ?? "HOGE" console.log(user); // 何が出るかな?

使用模板文字更好地连接字符串的理论

虽然取决于站点,但使用模板文字进行字符串连接基本上更好。

const mergeString = (hoge: string, fuga: string, piyo: string) =>
  `${hoge}_${fuga}_${piyo}`;

上面的箭头函数写的不带return

可以编写箭头函数,这样大括号就可以省略,不需要返回。

我曾经生成一个正确的密钥。

如果上述函数的范围合适,它会是这个样子。

const mergeString = (hoge: string, fuga: string, piyo: string) => {
  return `${hoge}_${fuga}_${piyo}`;
};

合并数组

const hoge = [1, 2, 3];
const fuga = [4, 5, 6];
const piyo = [...hoge, ...fuga]; // => [1,2,3,4,5,6]

差异更新对象

const defaultValue = {
  hoge: "hoge",
  fuga: "fuga",
  piyo: "piyo",
};
const inputValue = {

  hoge: "hogehoge",
  fuga: "fugafuga",
};
const result = { ...defaultValue, ...inputValue };
// => {hoge: "hogehoge", fuga: "fugafuga", piyo: "piyo"}

将参数一起传递给组件

type HogeProps = {
  hoge: string;
  piyo: string;
};
export const Hoge: React.VFC = (props) => {
  return (
    
              );
};

拆分分配可以用另一个名字来完成

在调用 Hook 等时使用,其返回类型在同一层次结构中的组件之间是固定的。

这在使用 apollo 客户端的 FetchQuery 时经常发生。应该。

type Response = {
  loading:boolean;
  data: unknown;
}
const getResponse = ():Response => ({

  loading: true;
  data : {
    hoge: "hoge";
    fuga: "fuga";
  }
})
const {data, loading} = getResponse(); // 通常の分割代入
// 別名の分割代入
const {data: data2, loading: loading2} = getResponse()

拆分赋值也可以处理嵌套

嵌套人员也可以拆分分配!

type APIResponse = {
  code: string;
  data: {
    hoge: string;
    fuga?: string;
    piyo?: string;
  }[];
};
const {
  code,
  data: [{ hoge, fuga, piyo }],
} = res; // res は APIResponse型とする

最后

如果您有任何建议或者这是一个有争议的问题,请随时发表评论。

© 版权声明
THE END
喜欢就支持一下吧
点赞144 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片