根据Javascript / TypeScript对象的非null属性创建数组

Question

我有一个打字稿POJO如下

  export interface Items {
        firstName?: String;
        lastname?: String;
        Address?: String;
        phoneNumber?: number;
        city?: String;
        state?: String;
        zipcode?: number;
        accountId?: number;
        status?: String;
        approvalStatus?: String;
        txId?: number;
        rxId?: number;
        txBankname?: String;
        rxBankName?: String;
        txCcy?: String;
        rxCcy?: String;
        txCcyAmt?:number;
        rxCcyAmt?:number;
         txDate?:date;
         rxDate?:date;
     }

在我的html文件中，我有一个表格，其中包含POJO上方的所有字段。当用户选择一个字段时，pojo将使用输入的文本填充。

但是，用户可以选择将许多字段保留为空，并且它们在对象中的属性将为null。

因此，在单击提交按钮时，当我检查POJO时，如下所示。

我想只用填充的值（而不是空值属性）填充另一个数组。

  this.anotherArray = [ {name:firstName, value:"Andy"},{name:lastName, value:"Smith"}]

我需要将其用于ngFor列表以显示角材芯片

我们如何以非常优化的方式进行操作。

edit：我的问题是关于检查对象中的空属性，而重复的问题引用是对数组的引用。甚至答案也有不同的方法。我的问题的解决方法是使用Object.entries，而重复引用则使用map和Object.keys

Answer 1

您可以使用Object.entries()获取名称/值对，然后将它们映射到对象：

Object.entries(obj)
    .filter(([name, value]) => value !== null)
    .map(([name, value]) => ({name, value}));

Answer 2

您可以简单地使用Object.entries()和Array.reduce()

var fields = {
  "name":"andy",
  "age" : null,
  "email" : null,
  "status" : true
};

var result = Object.entries(fields).reduce((a,[key,val])=>{
  if(val)
    a.push({name : key, value : val});
  return a;
},[]);

console.log(result);

  

输出：

[
  {
    "name": "name",
    "value": "andy"
  },
  {
    "name": "status",
    "value": true
  }
]

Answer 3

一种可能的方法：

const obj = { a: 1, b: null, c: 2, d: null }

const output = Object.entries (obj)
                     .reduce ((a, [k, v]) => v !== null ? [...a, [k, v]] : a, [])
      
console.log(output)

具有局部突变的相同方法

以下是使用Array#reduce累加器局部突变的相同方法，这是最佳方法。

由于Array#reduce收到一个已经分配的带有 N 个空槽的数组（其中 N 是输入对象中键的总数），所以该数组从不需要内部操作以增加其长度。减少对象的条目后，我们将过滤出未定义的项目（那些是null）：

const obj = {
  a: 1,
  b: null,
  c: 2,
  d: null
}

const keyCount = Object.keys(obj).length

const output = Object.entries(obj)
  .reduce((a, kvp, i) => {
    if (kvp[1] !== null) a[i] = kvp
    return a
  }, Array(keyCount))
  .filter(kvp => kvp)

console.log(output)

JSPerf性能测试filter+map vs reduce+filter