Java 脚本中数组的匹配值

Question

我有一个事件侦听器，它会在我每次单击图像时向数组添加一个新项目。如何检查新添加到数组中的项是否与另一个数组中的项匹配？

let a = ['a', 'b', 'c', 'd']

let b = []

grid.addEventListner('click', (e) =>{

let clicked = e.target

b.push(clicked)

// Here is where I want to check if the variable "clicked"
// which is pushed in to the b array matches 
// the value on the same position in the a array. So for
// every click if its right I add a // green class and if
// its not I add a red class and finish the possibility
// to play.

})

希望我能够解释问题:)

Answer 1

如果我没理解错的话，你想检查 b 中的新项目是否等于 a 中相同位置的项目。你可以这样：

if (a[b.length - 1] === clicked) {
        //set green
} else {
        //set red
}

如果在检查时点击超出范围，您可以将 clicked 替换为 b[b.length - 1]。

如果您想查看 a 中的任何项目是否与 b 中的 clicked 新项目匹配，您可以使用 array.find 方法。

if(a.find( el => el === clicked)) {
   // set green
} else {
   // set red
}

根据代码中注释的位置，您似乎希望此逻辑运行在该函数内。这就是为什么我在这里添加了一个简单的 if 块

Answer 2

您可以使用 Array.find 检查某些 Array 中是否存在元素。一个例子：

const someArray = ['a', 'b', 'c', 'd'];
const newElem = 'a';
const newElem2 = 'hello';
console.log(someArray.find(elem => elem === newElem) 
  ? `${newElem} exists!` : `${newElem} is new!`);
if (!someArray.find(elem => elem === newElem2)) {
  someArray.push(newElem2);
}
console.log(JSON.stringify(someArray));

Answer 3

您不需要另一个数组来记录点击的有效性；只是一个计数器。

const buttonWrapper = document.getElementById('button_wrapper');
const a = ['a', 'b', 'c', 'd'].map(l => document.getElementById(`button_${l}`));
let counter = 0;

buttonWrapper.addEventListener('click', e => {
  if (e.target.tagName === "BUTTON") {
    if (e.target === a[counter]) {
      buttonWrapper.classList.remove('red')
      buttonWrapper.classList.add('green');
      counter = (counter + 1) % a.length;
    } else {
      buttonWrapper.classList.remove('green')
      buttonWrapper.classList.add('red');
      counter = 0;
    }
  }
});

#button_wrapper { display: table; padding: 10px; border: 4px solid #000; }
#button_wrapper.red { border-color: red; }
#button_wrapper.green { border-color: green; }

<div id="button_wrapper">
  <button id="button_a">Button A</button>
  <button id="button_b">Button B</button>
  <button id="button_c">Button C</button>
  <button id="button_d">Button D</button>
</div>

Java 脚本中数组的匹配值

Matching values of arrays in Java script

javascript

arrays

matching