如何使用Javascript中的數組值過濾對象？

Question

我有一個這樣的對象（例如，這就是我們在 chrome 開發工具中看到該對象的方式）：

obj: {
  1: {...},
  2: {...},
  3: {...},
  4: {...},
  5: {...},
}

我有一個像這樣的簡單數組：

arr: [1,3,5,7]

基本上我希望我的對象只保留數組中的鍵，如下所示：

obj: {
  1: {...},
  3: {...},
  5: {...},
}

目前我的代碼是這樣的：

var select = (arr, obj) => arr.reduce((r, e) => 
  Object.assign(r, obj[e] ? { [e]: obj[e] } : null)
, {});

var output = select(arr, obj);

我不知道為什么，但這有時有效，有時則無效。 我不能使用 Jquery。 誰能幫我？

Answer 1

您可以使用Object.fromEntries() 、 Object.entries() 、 Array.prototype.filter()和Array.prototype.includes()來過濾掉不在arr內的鍵：

 const obj ={ 1: {}, 2: {}, 3: {}, 4: {}, 5: {}, }; const arr = [1, 3, 5, 7]; const filtered = Object.fromEntries( // Note `key` is an `string` here, thus the `+`: Object.entries(obj).filter(([key]) => arr.includes(+key)) ); console.log(filtered);

或者一個簡單的for循環， for...of在這種情況下，再次使用Array.prototype.includes()選擇你想要的（而不是過濾那些你不需要的）和Object.prototype.hasOwnProperty()來避免添加obj不存在的鍵：

 const obj ={ 1: {}, 2: {}, 3: {}, 4: {}, 5: {}, }; const arr = [1, 3, 5, 7]; const filtered = {}; for (const key of arr) { // Note the `hasOwnProperty` check here to avoid adding the key `7` with a value of `undefined`: if (obj.hasOwnProperty(key)) filtered[key] = obj[key]; } console.log(filtered);

或者你可以使用Array.prototype.reduce()做同樣的事情：

 const obj ={ 1: {}, 2: {}, 3: {}, 4: {}, 5: {}, }; const arr = [1, 3, 5, 7]; const filtered = arr.reduce((newObj, key) => { // Note we add the values to `newObj` rather than `filtered` now: if (obj.hasOwnProperty(key)) newObj[key] = obj[key]; // And you always need to return `newObj`: return newObj; }, { }) console.log(filtered);

最后，如果你已經在使用Lodash ，你可以使用_.pick ：

 const obj ={ 1: {}, 2: {}, 3: {}, 4: {}, 5: {}, }; const arr = [1, 3, 5, 7]; const filtered = _.pick(obj, arr); console.log(filtered);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.core.min.js"></script>

Answer 2

在現代環境中（或使用適當的 polyfills），您將使用Object.entries 、 Array.prototype.filter和Object.fromEntries ，如下所示：

const result = Object.fromEntries(
    Object.entries(obj)
        .filter(([key, value]) => arr.includes(+key))
);

現場示例：

 const obj = { 1: {name: "one"}, 2: {name: "two"}, 3: {name: "three"}, 4: {name: "four"}, 5: {name: "five"}, }; const arr = [1,3,5,7]; const result = Object.fromEntries( Object.entries(obj) .filter(([key, value]) => arr.includes(+key)) ); console.log(result);

...但您也可以采用簡單的循環方法：

const result = {};
for (const [key, value] of Object.entries(obj)) {
    if (arr.includes(+key)) {
        result[key] = value;
    }
}

現場示例：

 const obj = { 1: {name: "one"}, 2: {name: "two"}, 3: {name: "three"}, 4: {name: "four"}, 5: {name: "five"}, }; const arr = [1,3,5,7]; const result = {}; for (const [key, value] of Object.entries(obj)) { if (arr.includes(+key)) { result[key] = value; } } console.log(result);

---

在以上兩個中，請注意+ before key在filter調用中。 該數組包含numbers ，但對象的屬性鍵始終是字符串或符號（在您的情況下是字符串）。 所以我們必須轉換為includes才能找到它們。