Как найти значения следующих элементов массива?

Question

Мы знаем, что метод find () возвращает значение первого элемента массива, который проходит тестовую функцию.

Но в следующем случае, что если мне понадобятся все элементы?

<p id="myPEle">
</p>

const listIds = ["Vanilla","Vanilla"];
const itemId = 'Vanilla';
for(let i=0; i< listIds.length; i++){
    const result = listIds.findIndex(id => id === itemId)
    document.getElementById("myPEle").innerHTML += result;
}

Ну, мне нужно, чтобы результат был '01' вместо '00'

Answer 1

Вот подход, использующий методы-прототипы reduce и join.Я добавил пару дополнительных строк в listIds, чтобы показать, что это работает:

function generateIdxString(array, target) {
  return listIds.reduce((a, el, idx) => {
    if (el === itemId) {
      a.push(idx);
    }
    return a;
  }, []).join('');
}

const listIds = ["Vanilla", "Vanilla", "Chocolate", "Strawberry", "Vanilla"];
const itemId = "Vanilla";

document.querySelector('#myPEle').innerHTML = generateIdxString(listIds, itemId);

<p id="myPEle"></p>

Answer 2

В обеих итерациях цикла вы получаете один и тот же индекс (0), потому что

Метод findIndex () возвращает индекс первого элементав массиве, который удовлетворяет предоставленной функции тестирования.В противном случае возвращается -1.

Вы можете использовать forEach() для проверки элемента в каждой итерации.Если текущий элемент равен itemId, вы можете сохранить индекс.

Обратите внимание: Чтобы добавить текст в элемент, лучше использовать textContent вместо innerHTML.

const listIds = ["Vanilla","Vanilla"];
const itemId = 'Vanilla';
listIds.forEach(function(el,i){
    if(itemId == el)
    document.getElementById("myPEle").textContent += i;
});

<p id="myPEle">
</p>

Answer 3

Ну, мне нужно, чтобы результат был '01' вместо '00'

Если вам действительно нужны индексы, а не значения - используйте функцию map.

const listIds = ["Vanilla","Vanilla"];
const itemId = 'Vanilla';
const result = listIds.map((id, index) => id === itemId && index)
                      .filter(x => x !== false); // Thanks @vlaz
console.log(result); // [0,1]

В противном случае - используйте filter метод

const listIds = ["Vanilla","Vanilla"];
const itemId = 'Vanilla';
const result = listIds.filter(id => id === itemId);
console.log(result); // ["Vanilla","Vanilla"]

Answer 4

const listIds = ["Vanilla", "Vanilla"];
const itemId = 'Vanilla';

const result = listIds.filter(id => id === itemId) //use filter method
                      .map((item,index)=>index) //get array of index of filtered items
                      .join("");  //join array item

document.getElementById("myPEle").innerHTML = result ;

<p id="myPEle"></p>

Если массив listIds большой по размеру, тогда я бы предложил использовать «array.reduce» вместо фильтра, чтобы избежать многократных итераций в массиве, которые будутвыполнить фильтрацию и сопоставление за одну итерацию, чтобы узнать больше о уменьшите