Javascript 有没有比在ES6中为空检查向每个字段添加| |[]更好的解决方案

我正在使用一个子

组件

，其中

数组

项作为道具传递。但是，该项还包含另一个

数组

，其中应该有

null

和

undefined

在呈现之前进行检查。向每个字段添加

| |[]

似乎不是最好的方法。有没有更好的方法让我错过

const ChildComponent= ({ newsItem, textColor, newsItemHeadingColor }) => {
  const imageFormats = newsItem?.itemImage?.formats;
  const imageSrc = useProgressiveImage({ formats: imageFormats });
  const history = useHistory();

  const { state } = useContextState();
  const { schemeMode, colorSchemes } = state;

  const { itemTagColor, itemTagTextColor } = getThemeColors({
    schemeMode,
    colorSchemes,
    colors: {
      itemTagColor: newsItem?.itemTagColor?.name,
      itemTagTextColor: newsItem?.itemTagTextColor?.name,
    },
  });

  return (
    <NewsItem
      onClick={() => {
        const url =
          newsItem?.itemTag === 'Lab'
            ? getPageLink({
                page: newsItem?.itemLink || [], <<<<<< this check
              })
            : newsItem?.itemLink || []; <<<<<< this check
        url && history.push(url);
      }}
    >
      <ImageContainer>
        <Image src={imageSrc} alt={`${newsItem?.itemImage || []}`} /> <<<<<< this check
      </ImageContainer>
      <NewsItemTag color={itemTagColor} itemTagTextColor={itemTagTextColor}>
        <Body4>{`${newsItem?.itemTag || []}`}</Body4>               <<<<<< this check
      </NewsItemTag>
      <NewsItemName newsItemHeadingColor={newsItemHeadingColor}>{`${
        newsItem?.itemTitle || []                                     <<<<<< this check
      }`}</NewsItemName>
      <Description textColor={textColor}>{`${
        (newsItem.description &&
          newsItem?.itemDescription) || []                          <<<<<< this check
      }`}</Description>
    </NewsItem>
  );
};

const ChildComponent=（{newsItem，textColor，newsItemHeadingColor}）=>{
const imageFormats=新闻项？.itemImage？.formats；
const imageSrc=useProgressiveImage（{formats:imageFormats}）；
const history=useHistory（）；
const{state}=useContextState（）；
const{schemeMode，colorSchemes}=状态；
常量{itemTagColor，itemTagTextColor}=getThemeColors({
schemeMode，
配色方案，
颜色：{
itemTagColor:newsItem？.itemTagColor？.name，
itemTagTextColor:newsItem？.itemTagTextColor？.name，
},
});
返回(
{
常量url=
newsItem？.itemTag==“实验室”
？getPageLink({
page:newsItem？.itemLink | |【】，事实上，您有很多方法可以改进代码和代码的可读性

在
onClick
功能中：


我没有什么要说的第一个，它似乎是正确的，因为你想要的项目链接或一个空数组
对于第二个，您已经在使用
可选链接操作符“？”。该操作符检查是否有值，如果没有，它将返回
null
。这意味着这应该足够了，因为您需要在定义了
url
变量之后进行检查。所以只需编写：
：newsItem？.itemLink


对于第三个，即
组件上的一个，首先根本不需要将所有内容都放在后引号中。只需
alt={newsItem？.itemImage | |[]}
就可以了。然后，
alt属性
接受一个字符串，因此可以使用
alt={newsItem？.itemImage | |【】对其进行更改

对于最后三个，它们基本上是相同的，你有要显示的内容，如果有空的，你不想显示任何内容。事实上，你正在呈现一些元素，即使没有内容，这不是一种优化的方式。我认为，为了使模板更具可读性，最干净的方式是定义va在
返回函数之前输入变量
，并基于此变量，您将显示相应的部分：

返回函数之前：

const hasTag = !!newsItem?.itemTag;
const hasTitle = !!newsItem?.itemTitle;
const hasDescription = !!newsItem.description && !!newsItem?.itemDescription;

在模板中：

const hasTag = !!newsItem?.itemTag;
const hasTitle = !!newsItem?.itemTitle;
const hasDescription = !!newsItem.description && !!newsItem?.itemDescription;


{hasTag&&
{newsItem.itemTag}
}
{hasttle&&
{newsItem.itemTitle}
{hassdescription&&
{newsItem.itemDescription}
事实上是的，您有很多方法可以改进代码和代码的可读性

在
onClick
功能中：


我没有什么要说的第一个，它似乎是正确的，因为你想要的项目链接或一个空数组
对于第二个，您已经在使用
可选链接操作符“？”。该操作符检查是否有值，如果没有，它将返回
null
。这意味着这应该足够了，因为您需要在定义了
url
变量之后进行检查。所以只需编写：
：newsItem？.itemLink


对于第三个，即
组件上的一个，首先根本不需要将所有内容都放在后引号中。只需
alt={newsItem？.itemImage | |[]}
就可以了。然后，
alt属性
接受一个字符串，因此可以使用
alt={newsItem？.itemImage | |【】对其进行更改

对于最后三个，它们基本上是相同的，你有要显示的内容，如果有空的，你不想显示任何内容。事实上，你正在呈现一些元素，即使没有内容，这不是一种优化的方式。我认为，为了使模板更具可读性，最干净的方式是定义va在
返回函数之前输入变量
，并基于此变量，您将显示相应的部分：

返回函数之前：

const hasTag = !!newsItem?.itemTag;
const hasTitle = !!newsItem?.itemTitle;
const hasDescription = !!newsItem.description && !!newsItem?.itemDescription;

在模板中：

const hasTag = !!newsItem?.itemTag;
const hasTitle = !!newsItem?.itemTitle;
const hasDescription = !!newsItem.description && !!newsItem?.itemDescription;


{hasTag&&
{newsItem.itemTag}
}
{hasttle&&
{newsItem.itemTitle}
{hassdescription&&
{newsItem.itemDescription}
在javascript中有多种方法可以处理这个问题，假设我们有一个组件，它接收一个名为
newsItem
的道具，它是一个对象

你可以用以下方法来做

使用逻辑运算符or（es6）

如果您知道NewItem是一个
对象，而不是
未定义的对象，则此处不需要可选的链接操作符
（？）

这是最短的语法，只要
链接
是
未定义的
或
数组
但是，如果以后的
链接
变为
布尔变量
则会产生问题，这将产生不正确的结果
这种方法是不安全的，而且随着属性嵌套的深入，处理这种方法变得很麻烦


使用lodash或其他库或自定义解决方案（es6）

因为在es6中，唯一实用的方法是使用逻辑运算符中的任意一个，这是一个常见的问题，因此提供了自定义解决方案。基本上，任何解决方案都应该比逻辑运算符或运算符有两个优点

它们应该可以很好地处理布尔值


它们应该更容易处理嵌套较深的值



和（第4阶段完成的建议书）

因为这是所有javascript开发人员的常见问题，所以该语言必须提供一个本机解决方案

const someNestedProperty = newsItem?.property1?.property2?.property3 ?? 'someDefaultValue'

// notice that both the Optional chaining operator and Nullish coalescing Operator, work with both undefined and null


特定于反应：使用默认道具

有多种方法可以帮助你