根據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 List以顯示角形材料芯片

我們如何以一種非常優化的方式做到這一點。

編輯：我的問題是關於檢查對象中的空屬性，重復的問題引用是數組。 甚至答案也有不同的方法。 我的問題的方法是使用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