Question

我正在实现一个哈希表，显然有些字段未定义，因为它们尚未填充。

我还想显示哈希表的每个字段。但是，当我通过数组映射时，函数只返回未定义的字段的div，无法弄清楚如何强制map函数为未定义的字段显示Empty。

现在看起来像这样：

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

存储空间为[undefined, undefined, undefined, Array[1], undefined, Array[1], undefined, undefined, undefined, Array[1]]

因此，我最终只得到三个渲染的div。

Answer 1

在Javascript中，undefined和未定义是不一样的，尽管尝试访问对象的未定义的属性将返回值undefined。考虑到JS也有null，这在我看来是关于JS最混乱的事情之一。

您可以在开始填充数组之前填写数组来解决问题：

storage.fill(null)

（请注意，storage.fill(undefined)也可以使用！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;
}

Answer 2

如果数组实际上填充了undefined，您可以执行以下操作：

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

A fiddle with a working demonstration

NB。该示例使用三元，但功能与上面相同

但是基于OP提供的示例，情况并非如此，他们期望undefined的元素实际上是空的，即没有任何内容可以调用.map()谓词。< / p>

Answer 3

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

＆＃13;

[1,2].concat(new Array(1)).forEach(x=>console.log("Only for 1 and 2:",x));
[1,2].concat([...new Array(1)]).forEach(x=>console.log("1, 2 and undefined:",x));//with spread operator
[1,2].concat(Array.from(new Array(1))).forEach(x=>console.log("1, 2 and undefined:",x));//with Array.from

＆＃13;

Answer 4

对于您的实际解决方案，我会像下面这样做：

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>
    );
  });

有点不同，虽然这可能对其他人有帮助:)）

const filteredStorage = storage.filter(item => item !== undefined);
const blankStorage = storage.filter(item => item === undefined);
const displayTable = () => {
  return (
   <div>
    <div>Undefined only</div>
    {
      blankStorage.map(item => {
        return <div>undefined</div>
      })
    }
    <div>Defined only</div>
    {
      filteredStorage.map(item => {
        return <div><p>{item[0][0]}</p></div>
      })
    }
  </div>
 )
}

使用未定义的字段映射数组

4 个答案: