使用 javascript 中另一个数组的值搜索数组

Question

我正在尝试使用另一个数组的搜索值来搜索 HTML 个元素的数组。在函数 getElement() 中有一个数组 order 保存字符串值。这个数组决定了搜索的顺序。还有另一个数组 elements，其中包含要搜索的所有 html 元素。功能块看起来像

getElement(){
    const order = ['email-error', 'name-error', 'age-error'];
    const elements = document.querySelectorAll('[data-status]')
    
}

当出现验证错误时，html 个元素将附加 data-status 属性。如果出现验证错误，将调用 getElement() 函数。 data-status 的值对于电子邮件输入将是 email-error，对于名称输入等将是 name-error。

我想要实现的是；例如：从 order 数组中取一个值，比如 email-error。搜索 elements 数组，如果它有一个带有 data-status="email-error" 的元素。如果存在，则 return 该元素并停止搜索；否则搜索 order 数组中的所有值。

Answer 1

也许你可以像这样自己做一个函数：

或者使用内置的Array.prototype.includes:

Answer 2

您可以实现嵌套循环。

for(let i = 0; i < order.length; i++) {
  for(let j = 0; j < elements.length; j++) {
    if( order[i] == elements[j] ) {
      return orders[i] 
    }
  }
}

这将完全循环遍历两个数组，将一个数组中的每个值与另一个数组中的每个值进行匹配，除非存在匹配，在这种情况下它将 return 匹配元素并中断循环。

您也可以使用内置的 JS .forEach() 方法，它会自动循环遍历数组。

order.forEach(orderEl => {
    elements.forEach(elementEl => {
        if (orderEl === elementEl) {
             return orderEl
        }
    })
})

Answer 3

我已经写了一些 HTML 来测试代码。

如果您想遍历所有数组值并检查，这就是执行此操作的方法：

function getElement() {
        const order = ['email-error', 'name-error', 'age-error'];
        const elements = document.querySelectorAll('[data-status]')
        let foundElement = null

        elements.forEach((elem) => {
            if (order.includes(elem.getAttribute('data-status')) && !foundElement) {
                foundElement = elem
            }
        })
        return foundElement
    }
    console.log(getElement())

<div data-status="email-error"></div>
<div data-status="name-error"></div>
<div data-status="test-class"></div>

使用 javascript 中另一个数组的值搜索数组

search an array with value from another array in javascript

html

javascript

arrays

search