如何找到下一个数组元素的值？

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

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”而不是过滤器，以避免对数组进行多次迭代 它将在一次迭代中执行过滤和映射 查看 reduce的更多信息

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

这是一种使用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 4

我需要结果是“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"]