Как отфильтровать значения объекта?

Question

[riddlr]

Объекты тяжелей заходят, нежели массивы.

post: {
  comments: {
    1: {
      id: 1,
      parent: null
    },
    2: {
      id: 2,
      parent: 3
    },
    3: {
      id: 3,
      parent: 1
    },
    4: {
      id: 4,
      parent: null
    }
  }
}

Как получить объект, с ключами, у которых parent: null?

post: {
  comments: {
    1: {
      id: 1,
      parent: null
    },
    4: {
      id: 4,
      parent: null
    }
  }
}

АПД сделал так, есть другие способы?

let n = {}
for (i in post.comments) {
  if (post.comments[i].parent === null) {
    Object.assign(n, {[i]: post.comments[i]})
  }
}

Answer 1

[0xD34F]

Если делать ровно то, что спрошено:

const rootComments = Object
  .entries(comments)
  .reduce((acc, [ k, v ]) => v.parent === null ? { ...acc, [k]: v } : acc, {});

// или

const rootComments = {};
for (const k of Object.keys(comments)) {
  if (comments[k].parent === null) {
    rootComments[k] = comments[k];
  }
}

Но вообще, можно решить более общую задачу - собрать дерево. Которое и будет тем результатом, который вам требуется - объектом, содержащим корневые узлы (конечно, не без дополнения в виде объектов вложенных узлов):

function createTree({
  data,
  key = 'id',
  parentKey = 'parentId',
  childrenKey = 'children',
}) {
  const tree = data.reduce((acc, n) => (
    acc[n[key]] = { ...n, [childrenKey]: {} },
    acc
  ), {});

  return Object.values(tree).reduce((acc, n) => {
    const p = tree[n[parentKey]];
    (p ? p[childrenKey] : acc)[n[key]] = n;
    return acc;
  }, {});
}

const commentsTree = createTree({
  data: Object.values(comments),
  parentKey: 'parent',
});

Comments

[riddlr]

Как обычно, магия от 0xD34F

Вопрос про производительность. Как думаете, это будет намного медленнее обычного for...in?

[Никита Егоров]

riddlr, тут сложность O(2n), так как сначала идет трансформация в массив, а после этот массив перебирается.

[0xD34F]

riddlr, я никак не думаю. Можно же просто посмотреть. У меня, на тех данных что у вас в тексте вопроса, вариант с for..in медленнее на 15-20%. Это в Хроме. В Фаерфоксе он же медленнее уже на все 40%. UPD. Подобный результат обусловлен не столько самим for..in, сколько использованием Object.assign - зачем он там у вас, не очень понятно, вы назначаете всего одно свойство. Если просто выполнять присваивание, код становится быстрее примерно в три раза (это в Хроме, дальше лень смотреть).

Можете сами проверить, как оно будет при больших объёмах... Но мне почему-то кажется, что всё это ерунда, не о том беспокоитесь. Лично я, пока нет реальных проблем с производительностью, предпочитаю писать так, как удобнее. Не фанат преждевременной оптимизации.

Как обычно, магия

А вот это опасный ход мысли. Никакой магии тут нет. Если что-то непонятно - лучше спросить.

[riddlr]

v.parent === null ? { ...acc, [k]: v } : acc

Вот эта часть заставила включить мозги чтобы осознать что тут происходит)
Т.е. если условие совпадает, мы добавляем в аккумулятор значения объекта, в противном случае оставляем его без изменения?
Надо потренироваться с редюсами, выглядят очень мощно. Я их только на простых случаях использую пока.

[0xD34F]

riddlr,

если условие совпадает, мы добавляем в аккумулятор значения объекта...

Не совсем так. Не добавляем, а создаём новый "аккумулятор" (раз вы озабочены производительностью, на это стоит обратить внимание), куда скидываем все свойства из старого плюс объект, который подошёл по условию.

[Crimsons]

0xD34F, А зачем передавать в callback reduce вторым аргументом массив и почему в нем элемент и его индекс меняются местами, как если бы мы написали
A.reduce((acc, v, k)...)
?

[0xD34F]

Crimsons, почитайте, что такое Object.entries, что он возвращает - вопросы отпадут (надеюсь).

[Crimsons]

0xD34F, спасибо.