Допустим, у меня есть объект:
{
item1: { key: 'sdfd', value:'sdfd' },
item2: { key: 'sdfd', value:'sdfd' },
item3: { key: 'sdfd', value:'sdfd' }
}
Я хочу создать еще один объект, отфильтровав объект выше, чтобы у меня было что-то вроде.
{
item1: { key: 'sdfd', value:'sdfd' },
item3: { key: 'sdfd', value:'sdfd' }
}
Я ищу чистый способ сделать это с помощью Es6, поэтому мне доступны операторы спреда.
filter
ecmascript-6
29er
источник
источник
Ответы:
Если у вас есть список допустимых значений, вы можете легко сохранить их в объекте, используя:
Это использует:
Object.keys
перечислить все свойства вraw
(исходные данные), затемArray.prototype.filter
выбрать ключи, которые присутствуют в списке разрешенных, используяArray.prototype.includes
чтобы убедиться, что они присутствуютArray.prototype.reduce
построить новый объект только с разрешенными свойствами.Это сделает поверхностную копию с разрешенными свойствами (но не скопирует сами свойства).
Вы также можете использовать оператор распространения объекта, чтобы создать серию объектов, не изменяя их (спасибо rjerue за упоминание этого ):
В целях упрощения, если вы хотите удалить ненужные поля из исходных данных (что я бы не рекомендовал делать, так как это связано с некоторыми уродливыми мутациями), вы можете инвертировать
includes
проверку следующим образом:Я включил этот пример, чтобы показать решение на основе мутаций, но я не предлагаю его использовать.
источник
Array.prototype.includes
не является частью ES6. Он представлен в ECMAScript 2016 (ES7).Если вы в порядке с использованием синтаксиса ES6, я считаю, что самый чистый способ сделать это, как отмечено здесь и здесь :
Теперь
newData
содержит:Или, если ключ хранится в виде строки:
В последнем случае
[key]
преобразуется в,item2
но, поскольку вы используетеconst
назначение, вам необходимо указать имя для назначения._
представляет собой выброшенное значение.В более общем смысле:
Это не только сокращает вашу работу до одной строки, но также не требует, чтобы вы знали, каковы другие ключи (те, которые вы хотите сохранить).
источник
_
представляет собой выбрасываемую стоимость", откуда это приходит? Первый раз вижу_
- это просто допустимое имя переменной, которое можно использовать в JS, но, поскольку оно в значительной степени безымянно, его не следует использовать таким образом, если вы хотите передать намерение. Итак, он был принят как способ обозначить переменную, которая вас не волнует. Вот дальнейшее обсуждение этого вопроса: stackoverflow.com/questions/11406823/…filter
иreduce
._
не имеет значения, это просто имя переменной, вы можете переименовать ее как угодноomit
функцию lodash : lodash.com/docs/4.17.10#omit или одно из приведенных здесь решений.Самый чистый способ найти это с помощью Lodash # pick
источник
Ничего из того, что не было сказано ранее, кроме как объединить некоторые ответы на общий ответ ES6:
источник
Просто еще одно решение в одной линии Modern JS без внешних библиотек .
Я играл с функцией « Разрушение »:
источник
var myNewRaw = (({ item1, item3}) => ({ item1, item3 }))(raw);
Синтаксическая проблемаТеперь вы можете сделать его короче и проще, используя метод Object.fromEntries (проверьте поддержку браузера):
Узнайте больше о: Object.fromEntries
источник
Вы можете добавить универсальный
ofilter
(реализованный с универсальнымoreduce
), чтобы вы могли легко фильтровать объекты так же, как вы можете массивов -Мы можем видеть это работает здесь -
Проверьте результаты в вашем собственном браузере ниже -
Показать фрагмент кода
Эти две функции могут быть реализованы многими способами. Я решил прикрепить
Array.prototype.reduce
внутри,oreduce
но вы могли бы так же легко написать все это с нуляисточник
oreduce
первыйacc
будет перекрыт.reduce(acc, k)
, и в затенена - вызывается с переменной называется так же - что есть что?ofilter
o
oreduce
o
ofilter
переменнойo
затенена , но оно всегда указывает на тот же входной вар; вот почему он скрыт здесь, потому что он тот же - аккумулятор (acc
) также скрыт, потому что он более четко показывает, как данные проходят через лямбду;acc
не всегдаВот как я это сделал недавно:
источник
Object.assign == ...
Вы могли бы написатьconst dummyObj = { ...obj }
иconst target = { ...dummyObj }
. Кроме того, последнее совсем не нужно, так как впоследствии вы можете напрямую работать с dummyObj.хорошо, как насчет этой строки
источник
Ответы здесь определенно подходят, но они немного медленные, потому что они требуют циклического прохождения белого списка для каждого свойства объекта. Приведенное ниже решение гораздо быстрее для больших наборов данных, поскольку оно проходит через белый список только один раз:
источник
Спекуляция на ответе ssube .
Вот многоразовая версия.
Чтобы назвать это использовать
Прекрасная особенность функций стрелок ES6 заключается в том, что вам не нужно передавать в
allowed
качестве параметра.источник
Вы можете сделать что-то вроде этого:
Это работает, но не очень понятно, плюс
with
утверждение не рекомендуется ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with ).источник
Более простое решение без использования
filter
может быть достигнуто с помощьюObject.entries()
вместоObject.keys()
источник
Есть много способов сделать это. Общепринятый ответ использует ключи-Filter-Reduce подход, который не является самым производительным.
Вместо этого использование
for...in
цикла для циклического перебора ключей объекта или циклического перебора разрешенных ключей, а затем составление нового объекта повышает производительность на ~ 50% a .а. Посмотрите jsPerf для тестов простого варианта использования. Результаты будут отличаться в зависимости от браузера.
источник
Вы можете удалить специальный ключ на вашем объекте
источник
источник
Простой способ! Сделать это.
источник
Еще одно решение с использованием «нового»
Array.reduce
метода:Демонстрация в этой скрипке ...
Но мне нравится решение в этом ответе, которое использует и :
Object.fromEntries
Array.filter
Array.includes
Демонстрация в этой скрипке ...
источник
Хорошо, как насчет этого:
и назовите это так:
источник
Эта функция будет фильтровать объект по списку ключей, это более эффективно, чем предыдущий ответ, так как ей не нужно использовать Array.filter перед вызовом Reduce. поэтому его O (n) в отличие от O (n + фильтруется)
источник
Во время цикла ничего не возвращайте при обнаружении определенных свойств / ключей и продолжайте с остальными:
источник
Я удивлен, как никто еще не предложил это. Это очень чисто и очень четко о том, какие ключи вы хотите сохранить.
Или если вы хотите грязный лайнер:
источник
Другой подход будет использовать
Array.prototype.forEach()
какОн включает в себя значения только тех ключей, которые доступны в необработанных данных и, таким образом, предотвращают добавление ненужных данных.
источник
Это было бы мое решение:
источник