Haré todo lo posible para explicar mi problema. En mi aplicación tengo una sección que lista a todos los usuarios con un nombre e imagen. Al agregar un nuevo usuario, la imagen de perfil se toma de una serie de imágenes predeterminadas y debe ser diferente de la imagen de los otros usuarios. Abajo está mi solución y parece funcionar, pero estoy buscando una forma más limpia de hacerlo.
¡Gracias!
const profileImages = [img1, img2, img3, img4]; let users = [ { name: "Username1", image: img1 }, { name: "Username2", image: img2 } ]; /* This array will fill up with the images not already taken by other users, and I'll randomly pick from these to assign it to the new user */ let availableImages = []; users.forEach(user =>{ if (availableImages.length === 0) { availableImages = profileImages.filter(image => image !== user.image); } else { availableImages = availableImages.filter(image => image !== user.image); } });Utilice el método Array.every() para comprobar si algún usuario no utiliza una imagen.
let availableImages = profileImages.filter(image => users.every(u => u.image != image));El siguiente código le proporciona los elementos restantes sin un segundo ciclo. Sin embargo, se debe advertir a los programadores que splice() es una operación costosa y también altera la matriz original :
profileImages = ['img1', 'img2', 'img3', 'img4']; users = [ { name: "Username1", image: 'img1' }, { name: "Username2", image: 'img2' } ]; users.map(item => { let i = profileImages.indexOf(item.image); // get the index profileImages.splice(i,1); // delete it }); profileImages; // ['img3', 'img4']algo como esto también puede funcionar, pero este es un enfoque muy simple. es posible que tenga algunos casos extremos dependiendo de cómo se asignen estas imágenes si provienen del lado del servidor o algo así.
// assuming you want to keep a reference to the full list of images const allImages = [...]; let availableImages = [...allImages]; function getImage() { const [newImage, ...rest] = availableImages; availableImages = rest; return newImage; } // use getImage(); when you want to assign a new image