JavaScript：匹配数组中的任何元素并返回匹配项[重复]

Question

我需要匹配 2 个数组中的任何项目，然后返回该匹配项的值。例如：

let arr1 = [ 'grid-view' ,'list-view' ];
let arr2 = [ 'test', 'list-view' ];

从上面我会得到list-view 返回。

这是我目前所拥有的，但它返回 true，而我需要实际匹配。尽量避免做可怕的大循环和过多的代码。

let switches = document.querySelectorAll('[data-switch]');
let switchesClasses = [].slice.call(switches).map(x => x.dataset.switchClass);

const found = Array.from(document.querySelector('.test').classList).some(r => switchesClasses.includes(r));

console.log(found);

<div class="showroom-layout-toggle" data-switch-group="showroom_layout" data-switch-target=".test" data-switch-cookie>
  <button class="grid-toggle" data-switch data-switch-class="grid-view">Grid</button>
  <button class="grid-toggle" data-switch data-switch-class="list-view">List</button>
</div>

<div class="test list-view">Hello</div>

Answer 1

如果将“some”替换为“filter”，您将获得匹配类的数组。

因此，使用您的测试数组，它看起来像这样：

let found = arr2.filter(r => arr1.includes(r));
console.log(found); // ["list-view"]

Answer 2

Array.prototype.some()

some() 方法测试数组中的至少一个元素是否通过了提供的函数实现的测试。 它返回一个布尔值。

用Array.prototype.filter()代替some()：

filter() 方法创建一个新数组，其中包含所有通过所提供函数实现的测试的元素。

let arr1 = [ 'grid-view' ,'list-view' ];
let arr2 = [ 'test', 'list-view' ];

let switches = document.querySelectorAll('[data-switch]');
let switchesClasses = [].slice.call(switches).map(x => x.dataset.switchClass);

const found = Array.from(document.querySelector('.test').classList).filter(r => switchesClasses.includes(r));
console.log(found);

<div class="showroom-layout-toggle" data-switch-group="showroom_layout" data-switch-target=".test" data-switch-cookie>
  <button class="grid-toggle" data-switch data-switch-class="grid-view">Grid</button>
  <button class="grid-toggle" data-switch data-switch-class="list-view">List</button>
</div>

<div class="test list-view">Hello</div>

Answer 3

使用.find 代替.some：

let switches = document.querySelectorAll('[data-switch]');
let switchesClasses = [].slice.call(switches).map(x => x.dataset.switchClass);

const found = Array.from(document.querySelector('.test').classList)
  .find(r => switchesClasses.includes(r));

console.log(found);

<div class="showroom-layout-toggle" data-switch-group="showroom_layout" data-switch-target=".test" data-switch-cookie>
  <button class="grid-toggle" data-switch data-switch-class="grid-view">Grid</button>
  <button class="grid-toggle" data-switch data-switch-class="list-view">List</button>
</div>

<div class="test list-view">Hello</div>

对于这么小的输入并不重要，但对于这种一般情况，我更愿意制作一个 Set 来提高计算复杂度 O(n) 而不是 O(n^2)：

const switchesClasses = new Set(
  Array.from(
    document.querySelectorAll('[data-switch]'),
    x => x.dataset.switchClass
  )
);


const found = Array.from(document.querySelector('.test').classList)
  .find(r => switchesClasses.has(r));

console.log(found);

<div class="showroom-layout-toggle" data-switch-group="showroom_layout" data-switch-target=".test" data-switch-cookie>
  <button class="grid-toggle" data-switch data-switch-class="grid-view">Grid</button>
  <button class="grid-toggle" data-switch data-switch-class="list-view">List</button>
</div>

<div class="test list-view">Hello</div>