Javascript 通过具有未定义字段的数组进行映射

我正在实现一个哈希表，其中一些字段显然没有定义，因为它们还没有被填充

我还想显示哈希表的每个字段。但是，当我在数组中映射时，函数只返回未定义字段的div，无法理解如何强制映射函数为未定义字段显示空

现在看来是这样的：

constdisplaytable=（）=>{
返回storage.map（项=>{
如果（项==null）{
返回未定义
}
返回(
{item[0][0]}

);
});

存储为

[未定义，未定义，未定义，数组[1]，未定义，数组[1]，未定义，未定义，未定义，未定义，数组[1]]

---

因此，我只得到了三个渲染div。

如果数组中实际填充了

未定义的
，则可以执行以下操作：

const displayTable = () => {
  return storage.map(item => {
    if(!item) {
      return <div> undefined </div>
    }
    return (
      <div>
        <p>{item[0][0]}</p>
      </div>
    );
  });

constdisplaytable=（）=>{
返回storage.map（项=>{
如果（！项）{
返回未定义
}
返回(
{item[0][0]}

);
});


注：示例使用三元，但功能与上述相同

但根据OP提供的一个示例，情况并非如此，他们希望
未定义的元素实际上是空的，即没有任何东西可以调用
.map（）
谓词。
如果数组实际填充了
未定义的
，则可以执行以下操作：

const displayTable = () => {
  return storage.map(item => {
    if(!item) {
      return <div> undefined </div>
    }
    return (
      <div>
        <p>{item[0][0]}</p>
      </div>
    );
  });

constdisplaytable=（）=>{
返回storage.map（项=>{
如果（！项）{
返回未定义
}
返回(
{item[0][0]}

);
});


注：示例使用三元，但功能与上述相同

但根据OP提供的一个示例，情况并非如此，他们希望
未定义的元素实际上是空的，即没有任何东西可以调用
.map（）
谓词on.
在Javascript中，
未定义的
和未定义的不一样，尽管尝试访问对象的未定义属性将返回值
未定义的
。考虑到JS也有
null
，我认为这是JS最混乱的事情之一

在开始填充阵列之前，您可以通过填充阵列来解决问题：

storage.fill(null)

（请注意，
storage.fill（未定义）
也可以使用！Javascript不是很棒吗？：p）

当然，这仅在数组具有静态已知长度时才有效。如果长度是动态的，则必须执行以下操作：

const displayTable = () => {
  const rendered = [];
  for (let i = 0; i < storage.length; i++) {
    if (storage[i] == null) {
      rendered.push(<div>undefined</div>);
    } else {
      rendered.push(
        <div>
          <p>{storage[i][0][0]}</p>
        </div>
      );
    }
  }
  return rendered;
}

constdisplaytable=（）=>{
呈现常量=[]；
for（设i=0；i
);
}
}
归还；
}
在Javascript中，
未定义
和未定义不一样，尽管尝试访问对象的未定义属性将返回值
未定义
。考虑到JS也有
null
，我认为这是JS最混乱的事情之一

在开始填充阵列之前，您可以通过填充阵列来解决问题：

storage.fill(null)

（请注意，
storage.fill（未定义）
也可以使用！Javascript不是很棒吗？：p）

当然，这仅在数组具有静态已知长度时才有效。如果长度是动态的，则必须执行以下操作：

const displayTable = () => {
  const rendered = [];
  for (let i = 0; i < storage.length; i++) {
    if (storage[i] == null) {
      rendered.push(<div>undefined</div>);
    } else {
      rendered.push(
        <div>
          <p>{storage[i][0][0]}</p>
        </div>
      );
    }
  }
  return rendered;
}

constdisplaytable=（）=>{
呈现常量=[]；
for（设i=0；i
);
}
}
归还；
}
对于您的实际解决方案，我将执行以下操作：

const displayTable = () => {
  return storage.map(item => {
    return (
      <div>
        {typeof item !== 'undefined' ? `<p>${item[0][0]}</p>` : 'Undefined'}
        Or just item to check, if it is defined
        {item ? `<p>${item[0][0]}</p>` : 'Undefined'} 
      </div>
    );
  });

constdisplaytable=（）=>{
返回storage.map（项=>{
返回(
{typeof item！=='undefined'？`${item[0][0]}
`:'undefined'}
或者仅检查要检查的项目（如果已定义）
{item？`${item[0][0]}
`:'未定义'}
);
});


稍有不同，但这可能对其他人有所帮助：）

const filteredStorage=storage.filter（item=>item！==未定义）；
常量blankStorage=storage.filter（item=>item==未定义）；
constdisplaytable=（）=>{
返回(
仅未定义
{
blankStorage.map（项=>{
返回未定义
})
}
仅定义
{
filteredStorage.map（项=>{
返回{item[0][0]}

})
}
)
}
对于您的实际解决方案，我将执行以下操作：

const displayTable = () => {
  return storage.map(item => {
    return (
      <div>
        {typeof item !== 'undefined' ? `<p>${item[0][0]}</p>` : 'Undefined'}
        Or just item to check, if it is defined
        {item ? `<p>${item[0][0]}</p>` : 'Undefined'} 
      </div>
    );
  });

constdisplaytable=（）=>{
返回storage.map（项=>{
返回(
{typeof item！=='undefined'？`${item[0][0]}
`:'undefined'}
或者仅检查要检查的项目（如果已定义）
{item？`${item[0][0]}
`:'未定义'}
);
});


稍有不同，但这可能对其他人有所帮助：）

const filteredStorage=storage.filter（item=>item！==未定义）；
常量blankStorage=storage.filter（item=>item==未定义）；
constdisplaytable=（）=>{
返回(
仅未定义
{
blankStorage.map（项=>{
返回未定义
})
}
仅定义
{
filteredStorage.map（项=>{
返回{item[0][0]}

})
}
)
}
如果有稀疏数组，则可以使用Array.from或spread运算符：


[1,2].concat（新数组（1））.forEach（x=>console.log（“仅适用于1和2:，x））；
[1,2].concat（[…新数组（1）]）.forEach（x=>console.log（“1,2和未定义：”，x））；//带扩展运算符
[1,2].concat（Array.from（new Array（1））.forEach（x=>console.log（“1,2和未定义：”，x））；//与数组一起使用。from
如果有稀疏数组，可以使用Array.from或spread运算符：