Как добавить элемент в массив по условию JS?

Question

[Александр Ширяев]

Есть массив вида

[
    {src: 'some-path-1', video: 'some-path-1'},
    {src: 'some-path-2', video: 'some-path-2'},
    {src: 'some-path', video: null},
]

Мне необходимо, в зависимости от наличия значения в поле video у элемента массива, вставлять в массив перед таким элементом новый элемент, вида
{src_video: 'video value'}
Т е из массива выше должен получиться такой массив

[
    {src_video: 'some-path-1'},
    {src: 'some-path-1', video: 'some-path-1'},
    {src_video: 'some-path-2'},
    {src: 'some-path-2', video: 'some-path-2'},
    {src: 'some-path', video: null},
]

Подскажите как бы такое реализовать наиболее элегантным способом?
Спасибо

Answer 1

[Rsa97]

const result = arr.reduce(
  (acc, cur) => {
    if (cur.video !== undefined) {
      acc.push({ src_video: cur.video });
    }
    acc.push(cur);
    return acc;
  },
  [],
)
// Array(5) [ {…}, {…}, {…}, {…}, {…} ]
​// 0: Object { src_video: "some-path-1" }
// ​1: Object { src: "some-path-1", video: "some-path-1" }
​// 2: Object { src_video: "some-path-2" }
// 3: Object { src: "some-path-2", video: "some-path-2" }
​// 4: Object { src: "some-path", video: null }

Comments

[Александр Ширяев]

Огромное спасибо!

[WbICHA]

if (cur.video !== undefined) {

{src: 'some-path', video: null},

:)

[WbICHA]

И чисто для разнообразия:

const result = arr.flatMap(value => {
    if(value.video) {
      return [
        { src_video: value.video },
        value,
      ]
    } else {
      return [value]
    }
})

[Rsa97]

WbICHA, Ну да, сначала я написал

(acc, cur) => (cur.video ? acc.push({ src_video: cur.video }) : null, acc.push(cur), acc),

Но потом решил облагородить код, а вывод менять не стал. К тому же, null - вполне себе значение :)

[WbICHA]

Rsa97,

К тому же, null - вполне себе значение :)

Как и андефайнд.)

[historydev]

Rsa97,
А так можно было что-ли?

(cur.video ? acc.push({ src_video: cur.video }) : null, acc.push(cur), acc)

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

[Rsa97]

historydev, Да. Запятая - это оператор, выполняющий выражения в порядке перечисления и возвращающий значение последнего выражения.

[historydev]

Rsa97, Спасибо, а ещё такой вопрос, как читать это перечисление?

[param1[, param2[, ..., paramN]]]

async function [name]([param1[, param2[, ..., paramN]]]) {
   statements
}

[Rsa97]

historydev, Стандартно квадратные скобки указывают необязательные элементы. Получаем "может присутствовать param1, если он есть, то после него может присутствовать param2, и т.д. до paramN". Или, выражаясь простым языком, отсутствие или произвольное количество параметров.
Ещё можно представить эквивалентным множеством записей:

async function () { statements }
async function (param1) { statements }
async function (param1, param2) { statements }
...
async function (param1, param2, ..., paramN) { statements }
async function name() { statements }
async function name(param1) { statements }
async function name(param1, param2) { statements }
...
async function name(param1, param2, ..., paramN) { statements }

[historydev]

Rsa97, спасибо!

Answer 2

[Виктор Кожухарь]

Элегантный способ - это не всегда хорошо. Если массив не занимает мегабайты данных, то самым простым способом будет создание нового выходного массива нулевой длины, а потом, просто перебирая элементы оригинального массива, вставляете их в новый массив, а в нужные моменты просто вставляйте сперва эту вставку , а потом сразу элемент оригинального массива.
И не нужны вам эти "шикарные" reduce в данной ситуации. Обычный цикл for. Потому что reduce совершенно бесполезен конкретно в данном случае, а читаемость ухудшит.

const arr = [
    {src: 'some-path-1', video: 'some-path-1'},
    {src: 'some-path-2', video: 'some-path-2'},
    {src: 'some-path', video: null},
];

const result = [];
for (let i = 0; i < arr.length; i++) {
  if (arr[i]?.video) {
    result.push({ src_video: arr[i].video });
  }
  result.push(arr[i]);
}

console.log(result);

Comments

[WbICHA]

И не нужны вам эти "шикарные" reduce в данной ситуации. Обычный цикл for. Потому что reduce совершенно бесполезен конкретно в данном случае, а читаемость ухудшит.

Авторитетное мнение.

[Александр Ширяев]

Виктор Кожухарь Спасибо!

[historydev]

WbICHA, я даже не знаю что ответить на это)

[WbICHA]

historydev, а тут нечего отвечать. Человек пытается выдать свои личные предпочтения за истину.

[Виктор Кожухарь]

WbICHA, Я вам больше скажу. В данном конкретном случае reduce не только сильно ухудшает читаемость кода по отношению к обычному for, но и работать будет медленнее, потому что вызов функции на каждой итерации - не бесплатная операция.
Усложнять код ради мнимой элегантности - это вредительство

[WbICHA]

Виктор Кожухарь,

В данном конкретном случае reduce не только сильно ухудшает читаемость кода по отношению к обычному for

Это заявление уже о многом говорит. Во-первых, на вкус все фломастеры разные. Во-вторых, подобные завяления я встречал только от новичков.

работать будет медленнее

Всё так. Код выполнится не за 0.0000001 мс, а за 0.0000002 мс. Колоссальная разница.

Усложнять код ради мнимой элегантности - это вредительство

Это именно то, что ты и предлагаешь сделать.)

[Виктор Кожухарь]

WbICHA, Как раз первым признаком новичка является желание везде совать недавно изученные reduce вместо давно изученного for. Это ведь не модно, и плевать, что reduce хуже читается, зато можно перед одноклассниками попонтоваться.
А вот понимание того, что надо всегда по мере возможности упрощать свой код, чтобы все в команде мгновенно могли его прочесть, чтобы баг был виден сразу, вот это есть признак наличия опыта.
Я в жизни не поверю, что простой цикл for сложнее читается, чем reduce. Это-ж надо выдумать такое )))

[WbICHA]

Виктор Кожухарь, зачем спорить, если ты далёк от разработки на жсе? В жсе как раз использование фора — это дурной тон, если в нём нет строгой необходимости. В линтере даже правило для запрета фора есть.
И да, простой фор читается хуже, потому что arrayName[index] выглядит хуже простого value.

[Виктор Кожухарь]

WbICHA, Предложи еще реакт засунуть сюда )))