Реализация массива с уникальными элементами

Question

Есть, например, список цветов в виде массива - ['black','yellow', 'blue'] и т.д. Юзер выбирает один из цветов и выше ему выводится список последних выбранных цветов. Условия такие: должно выводиться не больше пяти цветов и если это число превышает, то последний цвет должен удалиться, а новый добавиться вверх списка. Второе условие - если названия цветов совпадают, то совпавший цвет из списка удаляется и этот же цвет вставляется вверх.

Я через функцию addColors создаю новой массив с цветами и уже там прописываю логику. Если число элементов больше пяти, то удаляю последний, затрудняюсь реализовать второе условие задачи. Подскажите, пожалуйста, как можно реализовать задачу.

addColors (itemColor) {
    arrayColors.push(itemColor);
    if(arrayColors.length > 5) {
        arrayColors.splice(5,1);
        arrayFonts.unshift(item)
    }
}

Answer 1

Создаём массив с последними выбранными цветами, далее в зависимости от выбранного цвета обновляем список последних выбранных цветов и подрезаем его до 5 элементов. Получается примерно так:

import React from "react";

const colorsList = ["black", "yellow", "green", "red", "pink", "white", "gray"];

const Colors = () => {
  const [lastColors, setLastColors] = React.useState([]);

  const colorClickHandler = (e) => {
    const clickedColor = e.target.id;
    console.log(`clickedColor`, clickedColor);
    const updatedLastColors = [
      clickedColor,
      ...lastColors.filter((color) => color !== clickedColor),
    ];
    setLastColors(updatedLastColors.slice(0, 5));
  };

  return (
    <div>
      <h2>Select some color:</h2>
      {colorsList.map((color) => (
        <button key={color} id={color} onClick={colorClickHandler}>
          {color}
        </button>
      ))}

      <h2>Last selected colors:</h2>
      {lastColors.map((color) => (
        <div key={color}>{color}</div>
      ))}
    </div>
  );
};

export default Colors;

Answer 2

const arrColor = ['yellow', 'black', 'purple', 'white', 'green']

function addColor(color) {
    arrColor.forEach((item) => {                // пробегаемся по всем элементам массива
        if (item === color){                    // если существующий элемент массива равен передаваемому элементу
            arrColor.splice(arrColor.indexOf(item), 1)          // берем его индекс и удаляем
        }
    })
    arrColor.unshift(color)                // добавляем в начало передаваемый цвет
    if (arrColor.length > 5) arrColor.splice(5,1)       // если больше 5 то удаляем последний элемент
}
// addColor('white') 
// addColor('yellow') 
// addColor('black')  
// addColor('brown')
// addColor('pink')
addColor('blue')

console.log(arrColor)

БЛОГ НА HUSL

Реализация массива с уникальными элементами

Ответы (2 шт):