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”而不是filter，以避免在array上进行多次迭代它将在一次迭代中执行过滤和映射检查更多有关 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>

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

3 个答案: