Javascript: вставить элемент в массив сразу после элемента, на который указывает ссылка

Question

Допустим, у меня есть массив и массив объектов, каждый из которых содержит ссылку на элемент в первом массиве и значение, которое нужно вставить в исходный массив.

Что будет код для вставки желаемого значения объекта во второй массив сразу после указанного элемента в первом массиве?

Например, вот что я пытаюсь сделать:

const fruits = ["apple","melon", "banana", "kiwi"]
const colors = [{ref: "apple", color: "red"}, {ref: "banana", color:"yellow"}]

const result = ["apple", "red", "melon", "banana", "yellow", "kiwi"];

Заранее большое спасибо!

Answer 1

Вы можете построить карту (colorMap), которая имеет ключ ref из вашего colors массива. Карта будет иметь следующую структуру:

{
  "apple" => ["apple", "red"]
  "banana" => ["banana", "yellow"]
}

Как вы можете видеть, каждый ключ на карте - это фрукт с соответствующим массивом в качестве значения. Когда у вас есть colorMap, вы можете использовать метод .flatMap() в своем массиве fruits, который позволит вам преобразовать каждый элемент. Если фрукт существует в colorMap, вы можете сопоставить фрукт с элементами, хранящимися в ключе плодов, если он не существует, вы можете взять значение по умолчанию для самого фрукта, используя || fruit.

См. Пример ниже:

const fruits = ["apple","melon", "banana", "kiwi"]
const colors = [{ref: "apple", color: "red"}, {ref: "banana", color:"yellow"}];

const colorMap = new Map(colors.map(({ref, color}) => [ref, [ref, color]]));
const res = fruits.flatMap(fruit => colorMap.get(fruit) || fruit);
console.log(res);

Если вы не можете поддерживать .flatMap(), вы можете рассмотреть возможность использования обычного .map(), а затем сглаживание массива с использованием .concat() с синтаксисом распространения :

const fruits = ["apple","melon", "banana", "kiwi"]
const colors = [{ref: "apple", color: "red"}, {ref: "banana", color:"yellow"}];

const colorMap = new Map(colors.map(({ref, color}) => [ref, [ref, color]]));
const res = [].concat(...fruits.map(fruit => colorMap.get(fruit) || fruit));
console.log(res);

Answer 2

Если положение ref и color не меняется

const insert = (fruits, colors) => {
    const newFruits = result = JSON.parse(JSON.stringify(fruits));
    const newColors = JSON.parse(JSON.stringify(colors));
    newColors.forEach(element => {
        let elem = Object.values(element);
        newFruits.map((element, index) => {
            if (element === elem[0]) {
                result.splice(index+1, 0, elem[1])
            }
        })
    });
    return result;
}

Answer 3

Самое простое решение - использовать forEach l oop.

const fruits = ["apple","melon", "banana", "kiwi"]
const colors = [{ref: "apple", color: "red"}, {ref: "banana", color:"yellow"}]

var result= [];
fruits.forEach(fruit => {

result.push(fruit);
colors.forEach(color => {

    if(fruit === color.ref){result.push(color.color)}
});

});

console.log(result);