Как разобрать объект?

Question

[dim5on]

let checkboxGroup = {
        administrator : {
          checked : false ,
          value : 'Изменение администратором'
        },
        account : {
          checked : true ,
          value : 'Пополнеине счёта'
        },
        comission : {
          checked : false ,
          value : 'Списание комиссии'}
      }
let newArray = [];
// Цикл
newArray = ['Пополнеине счёта'];

Есть объект checkboxGroup, внутри которого другие объекты - administrator, comission, acccount. Нужно написать цикл, который добавляет в новый массив все значения value у каждого объекта, если checked равно true.

Answer 1

[Виталий Архипов]

const newArray = Object.keys(checkboxGroup) // Превращаем объект в массив ключей checkboxGroup
     .filter(name => checkboxGroup[name].checked === true) // Создаем новый массив из ключей, в котором будут только те, для которых у объекта - checked есть истина
     .map(name => checkboxGroup[name].value); // Создаем новый массив из свойств value

Comments

[dim5on]

Спасибо Большое ! И спасибо за коментарии !

[Ярослав Иванов]

Зачем тут const ?

[Виталий Архипов]

Ярослав Иванов, https://medium.com/javascript-scene/javascript-es6...

[Ярослав Иванов]

Виталий Архипов, зачем мне статья ? я вас спросил зачем вы тут использовали const ?

[Виталий Архипов]

Ярослав Иванов, я вам ответил, там все подробно написано, не хотите читать ответ - не читайте... Тоже мне фон барон...

[Антон Спирин]

Ярослав Иванов, хорошее и емкое объяснение:

If a variable is never reassigned, using the const declaration is better. const declaration tells readers, “this variable is never reassigned,” reducing cognitive load and improving maintainability.

отсюда

[Ярослав Иванов]

Виталий Архипов, Если вы не можете сформулировать мысль из двух слов то не вижу смысла продолжать диалог.

[Ярослав Иванов]

Антон Спирин, еще один.

[Ярослав Иванов]

Антон Спирин, Виталий Архипов, На вопрос ответьте а не статью копипасте. Если вы сами не знаете зачем он нужен зачем используете ?

[Антон Спирин]

Ярослав Иванов, у вас проблемы с английским языком?
Ключевое слово const используют для объявления переменных, которые не переопределяются в коде. Это повышает читаемость и снижает когнитивную нагрузку изучающего или поддерживающего код программиста. Стандарт во фронтенд разработке. С почином.

[Сергей Горностаев]

Антон Спирин, он знает зачем const, его интересует зачем его здесь использовал автор ответа.

[Антон Спирин]

Сергей Горностаев, видимо не до конца понимает. Автор ответа использует const именно по тем причинам, которые я описал. Значение в решении, как видите, не переопределяется.

[Ярослав Иванов]

Антон Спирин, а зачем его переопределять ? Почему не var или тот же let ? Читаемость тут не повышается.

[Антон Спирин]

Ярослав Иванов, я надеюсь под тут вы имели ввиду конкретный пример.
Потому что вы, как хороший разработчик, должны не задумываясь использовать const в модульном ES6 везде, где значения не переопределяются. Даже в таких коротких примерах. Вот пример из той же документации React.
В больших проектах сейчас повсеместно используют lint-staged и ESLint с павилами prefer-const и no-vars поэтому ни let, ни var в подобном кейсе, вы даже не закоммитите.
Комьюнити диктует свои стандарты, так как они повышают качество кода и эффективность программистов. Вы, конечно, если не хотите, можете с ними не считаться. Никто не запрещает.
На всякий гайдлайн airbnb

[Виталий Архипов]

Антон Спирин, на самом деле, я действительно пишу const на автомате, потому что во всех остальных языках компиляторы отлично оптимизируют const. И в JS виртуальные машины рано или поздно подтянутся. А это на большом количестве кода - отличное ускорение и уменьшение расходов памяти. Хотя и когнитивную нагрузку со счетов сбрасывать не стоит, но я уже лет десять использую статические анализаторы, в которых повсеместно первым было правило "Выносите все var a,b,c в начало функции". Поэтому перешел на const именно из-за привычки в других языках. И с великим удовольствием.

Answer 2

[Interface]

Object.keys(checkboxGroup)
    .map(key => checkboxGroup[key])
    .filter(item => item.checked)
    .map(item => item.value)

Comments

[dim5on]

Спасибо Большое !

Answer 3

[TerNik]

for (let prop in checkboxGroup ) {
  if (checkboxGroup.hasOwnProperty(prop) && checkboxGroup[prop]['checked']) {
    newArray.push(checkboxGroup[prop]['value']);
  }
}

Comments

[dim5on]

Спасибо Большое !

Answer 4

[Дмитрий Беляев]

2 рабочих решения уже предложены c O(3n) и O(2n), но для сторонников оптимизации решение с O(n):

const checkedValues = Object.getOwnPropertyNames(checkboxGroup).reduce((result, key) => {
  const {checked, value} = checkboxGroup[key];
  if(checked) {
    result.push(value);
  }
  return result;
}, []);

Comments

[Антон Спирин]

Откуда такие цифры то?
Небольшой тест. Он, конечно, не претендует на абсолютную объективность.
Но все же, на разных движках и их разных версиях тест выполняется по-разному и таких цифр нигде даже близко нет.
На V8, например, алгоритм с reduce, в подавляющем большинстве запусков, самый медленный.
А на SpiderMonkey решение от Interface выполняется быстрей остальных.

[Дмитрий Беляев]

Антон Спирин, решение от Interface - в самом худшем варианте массив проходится 3 раза, при увеличении, на Вашем тесте у меня он самый медленный (гонял только в Chrome 66)
вариант Виталий Архипов пробегает массив 2 раза, у меня Ваш тест дал примерно одинаковые результаты между моим и его вариантом
Голый for по массиву предсказуемо работает быстрее всего

Откуда такие цифры то?

Интуитивно, по максимальному количеству итераций на длину массива n
Ваш тест показывает, что моя интуиция меня подвела... Очевидно дело во внутренней реализации reduce

[Антон Спирин]

Дмитрий Беляев, на самом деле многие методы написаные на нативном коде, очень хорошо оптимизированы.
На Mac OS Sierra такая картина: