Извлечение данных в ES6

У меня есть этот массив const idArray = ["12", "231", "73", "4"] и объект

const blueprints = {
  12: {color: red, views: [{name: "front}, {name: "back}, {name: "top}, {name: "bottom}]},
  231: {color: white, views: [{name: "front}, {name: "back}]},
  73: {color: black, views: [{name: "front}, {name: "back}, {name: "top}, {name: "bottom}]},
  4: {color: silver, views: [{name: "front}, {name: "back}, {name: "top}, {name: "bottom}]},
}

Как я могу вернуть массив следующих объектов, которые имеют все фронт, назад, верхняя и Нижний, используя ES6 map/filter/some и т. д. ?:

result =[
    {colorId: "12", views: [{name: "front}, {name: "back}, {name: "top}, {name: "bottom}]}
    {colorId: "73", views: [{name: "front}, {name: "back}, {name: "top}, {name: "bottom}]}
    {colorId: "4", views: [{name: "front}, {name: "back}, {name: "top}, {name: "bottom}]}
]

Я сделал это здесь, но мне кажется, что это слишком грязно и трудно читать. Кто-нибудь может порекомендовать, как его сократить и упростить чтение с помощью функций ES6 (карта, фильтр ...)?

 const result = idArray.map(id => {
      const bluePrint = bluePrints[id];
      const exists = blurPrint.views.some(view => view.name === 'top' || view.name === 'bottom');

      if (exists) {
        return {
          colorId: id,
          views: bluePrint.views
        }
      }
    }).filter(bluePrint => !bluePrint);

Вопросы о том, как оптимизировать рабочий код, лучше задавать на codereview.stackexchange.com. Вы можете использовать один reduce() вместо цепочки map() и filter().

— 15.11.2018 19:05

У вас много пропущенных кавычек в исходном массиве и желаемый результат.

— 15.11.2018 19:14

Еще одна опечатка: blurPrint должен быть bluePrint

— 15.11.2018 19:19

bluePrint => !bluePrint должен быть bluePrint => bluePrint, иначе вы получите просто массив undefined.

— 15.11.2018 19:20

javascript ecmascript-6

15.11.2018 18:57

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 3

Вы можете filter ids, чтобы цвет every в вашем целевом наборе цветов находился в blueprint.views этого идентификатора, а затем map этих идентификаторов для вашего желаемого объекта результата:

const idArray = ["12", "231", "73", "4"];
const blueprints = {
  12: {color: 'red', views: [{name: "front"}, {name: "back"}, {name: "top"}, {name: "bottom"}]},
  231: {color: 'white', views: [{name: "front"}, {name: "back"}]},
  73: {color: 'black', views: [{name: "front"}, {name: "back"}, {name: "top"}, {name: "bottom"}]},
  4: {color: 'silver', views: [{name: "front"}, {name: "back"}, {name: "top"}, {name: "bottom"}]},
};

const result = idArray
                .filter(id => {
                  const colors = blueprints[id].views.map(e => e.name);
                  return ['front', 'back', 'top', 'bottom'].every(s => colors.includes(s));
                })
                .map(id => ({colorId: id, views: blueprints[id].views}))

console.info(result);

15.11.2018 19:21

Вы можете map() поверх вашего idArray, чтобы создать массив в желаемом формате, затем использовать filter(), чтобы проверить, находится ли требуемая строка every() в массиве просмотра, и отфильтровать неполные элементы:

const blueprints = {
    12: {color: "red", views: [{name: "front"}, {name: "back"}, {name: "top"}, {name: "bottom"}]},
    231: {color: "white", views: [{name: "front"}, {name: "back"}]},
    73: {color: "black", views: [{name: "front"}, {name: "back"}, {name: "top"}, {name: "bottom"}]},
    4: {color: "silver", views: [{name: "front"}, {name: "back"}, {name: "top"}, {name: "bottom"}]},
  }

const idArray = ["12", "231", "73", "4"] 
const required = ['front', 'back', 'top', 'bottom']

let newArry = idArray
        .map(colorID => ({colorID, views: blueprints[colorID].views }) )
        .filter(item => required.every(direction => item.views.some(v => v.name == direction) ))

console.info(newArry)

15.11.2018 19:24

Object.keys(blueprints)
  .map(k => ({colorId:k, views:blueprints[k].views}))
  .filter(el =>
    ['front', 'back', 'top', 'bottom'].every(it => 
      el.views.some(s => s.name === it)
  )
)

15.11.2018 19:39

Другие вопросы по теме

Как сделать импорт lodash в JSBin?

Разница между "import {pick} from 'lodash';" и «импортировать выбор из lodash / pick»;

Ошибка в реализации обещания в angular 4

Доступ к аргументам функций обратного вызова

Использование модулей npm с ES6 и Future of npm / bundlers

Невозможно получить данные, и React не выдает сообщений об ошибках

Как рекурсивно создать объект списка меню в JavaScript?

Почему не идеально импортировать реакцию-бутстрап с помощью деструктурирования

Изменить объект JS в чистом виде

Тайм-аут вызова с обратным вызовом

Извлечение данных в ES6

Ответы 3

Другие вопросы по теме

Похожие вопросы