如何使用 ES6 中的值過濾對象

Question

在 ES6 中以這種方式過濾對象的最佳方法是什么？

起始數據：

const acceptedValues = ["value1","value3"]
const myObject = {
    prop1:"value1",
    prop2:"value2",
    prop3:"value3"
}

預期輸出：

filteredObject = {
    prop1:"value1",
    prop3:"value3"
}

Answer 1

您可以使用reduce()創建新對象並使用includes()檢查對象的值是否存在於數組中。

 const acceptedValues = ["value1", "value3"] const myObject = { prop1: "value1", prop2: "value2", prop3: "value3" } var filteredObject = Object.keys(myObject).reduce(function(r, e) { if (acceptedValues.includes(myObject[e])) r[e] = myObject[e] return r; }, {}) console.log(filteredObject)

Answer 2

對於 ES6，如果您需要靜態代碼（您確切地知道需要過濾哪些屬性）並且它不依賴於應用程序狀態，那么您可以使用以下解構技術：

const myObject = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
}
const { prop2, ...filteredObject } = myObject

console.info({ filteredObject, prop2 })

你將擁有：

filteredObject: {prop1: "value1", prop3: "value3"}
prop2: "value2"

Answer 3

只是為了建立在@Nenad Vracar 好的答案之上，您可以使用對象而不是includes的 Array 以加快查找速度：

 const acceptedValues = ["value1", "value3"]; const myObject = { prop1: "value1", prop2: "value2", prop3: "value3" }; const lookup = acceptedValues.reduce( (memo, prop) => { memo[prop] = true; return memo; }); const filteredObject = Object.keys(myObject).reduce((filtered, key) => { if(lookup[myObject[key]]){ filtered[key] = myObject[key]; } return filtered; }, {}); console.log(filteredObject);

也不是includes不能完成這項工作，但我想提供另一種觀點。

Answer 4

為什么不是一個簡單的 for 循環？

 const acceptedValues = ["value1","value3"] const myObject = { prop1:"value1", prop2:"value2", prop3:"value3" }; var filteredObject = {}; for(e in myObject) { if (myObject.hasOwnProperty(e)) { if (acceptedValues.indexOf(myObject[e]) != -1) { filteredObject[e] = myObject[e]; } } } console.log(filteredObject);

Answer 5

IMO，“最佳方式”是 Lodash 方式

const filtered = _.pick(myObject, acceptedValues)

https://lodash.com/docs/4.17.10#pick

Answer 6

使用簡單的 for 循環並按鍵獲取對象。

 const acceptedValues = ["value1","value3"] const myObject = { prop1:"value1", prop2:"value2", prop3:"value3" } Object.prototype.getKeyByValue = function( value ) { for( var prop in this ) { if( this.hasOwnProperty( prop ) ) { if( this[ prop ] === value ) return prop; } } } for (var i in acceptedValues) { if (myObject.getKeyByValue(acceptedValues[i])){ console.log(acceptedValues[i]); } }

Answer 7

因為我還沒有看到使用Object.entries的答案，所以這里有一個。 請注意，由於Object.entries()實現比Object.keys()慢得多，這也將比接受的答案慢，但有些人可能更喜歡這樣的可讀性或可擴展性（更容易通過不同的過濾功能）。

const acceptedValues = ["value1", "value3"];
const myObject = {
    prop1:"value1",
    prop2:"value2",
    prop3:"value3"
};
const filteredEntries = Object.entries(myObject).filter(([, v]) => acceptedValues.includes(v));
const filteredObject = Object.fromEntries(filteredEntries);

或者作為一個較長的單行：

const filteredObject = Object.fromEntries(Object.entries(myObject).filter(([, v]) => accepted.includes(v)));

Answer 8

function filter(myObject){
  var obj=Object.assign({},myObject);
  Object.keys(obj).forEach(function(key) {
      if(acceptedValues.indexOf(obj[key])<0) delete obj[key];
  });
  return obj;
}
const filteredObject=filter(myObject);