Как получить подмножество свойств объекта JavaScript?
У меня есть объект:
elmo = {
color: 'red',
annoying: true,
height: 'unknown',
meta: { one: '1', two: '2'}
};
Мне нужно создать новый объект, содержащий подмножество свойств исходного объекта. Например, я хочу получить объект с такими свойствами, как color
и height
:
// псевдокод
subset = elmo.slice('color', 'height')
// => { color: 'red', height: 'unknown' }
Как я могу этого добиться?
5 ответ(ов)
Если вы используете ES6, есть очень лаконичный способ сделать это с помощью деструктуризации. Деструктуризация позволяет вам легко добавлять свойства к объектам с помощью оператора расширения, но также она позволяет создавать подмножества объектов таким же образом.
const object = {
a: 'a',
b: 'b',
c: 'c',
d: 'd',
}
// Удаляем поля "c" и "d" из исходного объекта:
const {c, d, ...partialObject} = object;
const subset = {c, d};
console.log(partialObject); // => { a: 'a', b: 'b'}
console.log(subset); // => { c: 'c', d: 'd'};
Таким образом, мы используем деструктуризацию, чтобы извлечь нужные свойства из объекта и сохраняем оставшиеся свойства в новом объекте.
В стандартной библиотеке JavaScript нет встроенного метода для этой задачи, но вы можете воспользоваться деструктуризацией объектов для её решения:
const {color, height} = sourceObject;
const newObject = {color, height};
Вы также можете написать утилитарную функцию для этой цели:
const cloneAndPluck = function(sourceObject, keys) {
const newObject = {};
keys.forEach(key => { newObject[key] = sourceObject[key]; });
return newObject;
};
const subset = cloneAndPluck(elmo, ["color", "height"]);
Кроме того, такие библиотеки, как Lodash, предоставляют метод _.pick()
, который может помочь вам в этой задаче.
Еще одно решение:
var subset = {
color: elmo.color,
height: elmo.height
}
На мой взгляд, это выглядит гораздо более читаемо, чем почти все ответы до сих пор, но может, это только мое мнение!
Динамическое решение
С помощью метода reduce
можно легко создать новый объект, содержащий только определенные ключи исходного объекта. Вот как это можно сделать:
let subset = (obj, keys) => keys.reduce((a, b) => (a[b] = obj[b], a), {});
// ТЕСТ
let elmo = {
color: 'red',
annoying: true,
height: 'unknown',
meta: { one: '1', two: '2' }
};
console.log(subset(elmo, ['color', 'height']));
В этом коде функция subset
принимает объект obj
и массив ключей keys
. Она использует reduce
, чтобы пройтись по массиву ключей и создать новый объект, в который добавляются только те свойства, которые указаны в массиве. В результате при вызове subset(elmo, ['color', 'height'])
мы получим новый объект, содержащий только color
и height
из объекта elmo
:
{ color: 'red', height: 'unknown' }
Таким образом, вы получаете гибкое решение для извлечения подмножества свойств из объекта.
Самый простой способ, который я нашел и который не создает лишних переменных, - это функция, которую вы можете вызвать и которая работает идентично Lodash. Вот она:
pick(obj, keys) {
return Object.assign({}, ...keys.map(key => ({ [key]: obj[key] })))
}
Например, вы можете использовать её так:
const obj = { a: 1, b: 2, c: 3, d: 4 }
const keys = ['a', 'c', 'f']
const picked = pick(obj, keys)
console.log(picked)
А вот полная реализация:
const pick = (obj, keys) => {
return Object.assign({}, ...keys.map(key => ({
[key]: obj[key]
})))
}
const obj = {
a: 1,
b: 2,
c: 3,
d: 4
}
const keys = ['a', 'c', 'f']
const picked = pick(obj, keys)
console.log(picked)
Эта функция создает новый объект, содержащий только указанные ключи из исходного объекта. Если ключ не существует в исходном объекте, в новом объекте будет просто undefined
для этого ключа.
Как удалить свойство из объекта JavaScript?
Преобразование объекта JS в строку JSON
Как получить доступ к вложенным объектам, массивам или JSON и обработать их?
Как удалить все дубликаты из массива объектов?
Почему null является объектом и в чем разница между null и undefined?