JavaScript 数组交集
在本教程中,我们将重点关注 JavaScript 数组交集。寻找两个数组之间的交集意味着寻找 arrayA
和 arrayB
中的共同元素。
为了通过编程做到这一点,我们同时使用 _.intersection()
函数、filter()
和 indexOf()
方法、同时使用 filter()
和 includes()
以及 has()
带有 includes()
函数的 set
方法。
我们也可以通过使用 jQuery 来实现这个目标。让我们一步一步来。
_.intersection()
是 JavaScript 的 Underscore
库中的一个函数,它从传递的数组中返回共同值的数组。使用这个函数的好处是传递了两个以上的数组。
你可以在此处深入了解 Underscore
库的详细信息。
确保在 <head>
标记中包含 Ununderscore
库。
示例代码:
let results = _.intersection([2, 3, 4, 5, 6], [3, 4, 6, 2]);
console.log(results);
输出:
[2, 3, 4, 6]
假设如果我们有字符串数组,_.intersection()
仍然像处理数字数组并在数组之间寻找共同元素一样工作。
请参阅下面给出的示例代码。
let results = _.intersection(["mehvish", "ashiq", "martell", "daniel"],
["daniel", "raza", "christopher"],
["ashiq", "daniel", "moultrie"]);
console.log(results);
输出:
["daniel"]
如果我们传递具有 null
、""
(空字符串)、undefined
值的数组,你认为 _.intersection()
会产生错误吗?不,不是的。
它仍然会尝试在所有提供的数组中找到相同的元素。看看下面的代码来练习一下。
let results = _.intersection(["null", "", "undefined", 3],
[3, "null", ""]);
console.log(results);
输出:
["null", "", 3]
filter()
函数创建一个全新的数组,其中包含通过给定函数实现的评估的元素。
indexOf()
方法为我们提供了 a 值第一次出现的位置,如果没有找到则返回 -1
。
另一方面,includes()
方法确定数组在其条目中是否具有特定值。它根据输入返回 true
和 false
。
示例代码:
let arrayA = [2,3,5,4,7,9];
let arrayB = [2,9,4,7];
const filteredArray = arrayA.filter(value => arrayB.includes(value));
console.log(filteredArray);
输出:
[2, 4, 7, 9]
示例代码:
let arrayA = [2,3,5,4,7,9];
let arrayB = [2,9,4,7];
const filteredArray = arrayA.filter(value => arrayB.indexOf(value) !== -1);
console.log(filteredArray);
输出:
[2, 4, 7, 9]
includes()
方法查找数组中的每个元素,这意味着它的时间复杂度是 O(n)
。
在这里,has()
方法出现并在恒定时间内返回输出,也称为 O(1)
。
我们必须将我们的数组转换为 sets
,然后编写一个 for
循环来使用 has()
函数来遵循这种技术。
示例代码:
let arrayA = [2,3,5,4,7,9];
let arrayB = [2,9,4,7];
// converting into Set
let setA = new Set(arrayA);
let setB = new Set(arrayB);
for (let i of setB){
if (setA.has(i)){
console.log(i);
}
}
输出:
2
9
4
7
如果我们想在单独的数组中拥有共同值怎么办?我们可以使用 push()
方法插入 commonValues
数组值。
用下面的代码练习学习;你可以在此处找到有关 push()
方法的更多信息。
let arrayA = [2,3,5,4,7,9];
let arrayB = [2,9,4,7];
// converting into Set
let setA = new Set(arrayA);
let setB = new Set(arrayB);
let commonValues = [];
for (let i of setB) {
if (setA.has(i)) {
commonValues.push(i);
}
}
console.log(commonValues);
输出:
[2, 9, 4, 7]
如果你喜欢使用 jQuery,下面的解决方案很好。grep()
函数查找满足 filter()
函数的数组元素。
请记住,原始数组不受此函数的影响。inArray()
就像 JavaScript indexOf()
方法。
它还搜索数组中的值/元素并返回其位置。如果在数组中未找到值,则 inArray()
返回 -1。
示例代码:
let arrayA = [2,3,5,4,7,9],
arrayB = [2,9,4,7];
$.arrayIntersect = function(arrA, arrB){
return $.grep(arrA, function(i){
return $.inArray(i, arrB) > -1;
});
};
console.log($.arrayIntersect(arrayA, arrayB) );
输出:
[2, 4, 7, 9]
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。