如何比较两个数组并打印常用数据以及选中复选框和未选中复选框的不常见数据?

Question

我有两个数组 var arr1=["苹果"， "香蕉"， "葡萄"， "橙子"， "猕猴桃"， "番石榴"]; var arr2=["苹果"， "橙子"， "猕猴桃"]; 现在我想比较两个数组并打印"苹果"、"橙色"、"猕猴桃"，即两个数组之间的常用词以及选中复选框，其余未选中复选框的单词。 我能够检索和显示常见元素，但不能显示不常见元素，未选中复选框。请帮忙。

function displayList()
{
	var arr1=["apple", "banana", "grapes", "orange", "kiwi", "guava"];
	var arr2=["apple", "orange", "kiwi"];
	var arrData;
	var output="";
	
for (var i = 0; i < arr1.length; i++) {
for (var j = 0; j < arr2.length; j++) {
		if ( arr1[i]== arr2[i])
		{
		arrData=arr2[j];
output+= '<input type="checkbox" value='+arrData+' name="box2" checked >'  + '   ' + arrData+'   '+'<br><br>'; 
		document.getElementById("demo2").innerHTML=output;
		}
}
}
}

<button onClick="displayList()">click me</button>
<div id="demo"></div>
<div id="demo2"></div>

Answer 1

您可以以这种方式执行此操作，但这取决于您的要求。

基本上你使用一个循环而不是两个循环，如果 arr1 的元素存在于 arr2 中，则检查，否则取消检查。

document.getElementById("clickMe").onclick = displayList;
function displayList() {
var arr1 = ["apple", "banana", "grapes", "orange", "kiwi", "guava"];
var arr2 = ["apple", "orange", "kiwi"];
var arrData;
var output = "";
for (var i = 0; i < arr1.length; i++) {
if (arr2.contains(arr1[i])) {
arrData = arr1[i];
output += '<input type="checkbox" value=' + arrData + ' name="box2" checked >' + '   ' + arrData + '   ' + '<br><br>';
document.getElementById("demo2").innerHTML = output;
}
else{
arrData = arr1[i];
output += '<input type="checkbox" value=' + arrData + ' name="box2" >' + '   ' + arrData + '   ' + '<br><br>';
document.getElementById("demo2").innerHTML = output;
}
}
}
Array.prototype.contains = function(element){
return this.indexOf(element) > -1;
};

<button id="clickMe">click me</button>
<div id="demo"></div>
<div id="demo2"></div>

这是一个更丑陋的版本，你可以使用拼接来删除它，然后你将保留不存在的东西。

document.getElementById("clickMe").onclick = displayList;
function displayList() {
var arr1 = ["apple", "banana", "grapes", "orange", "kiwi", "guava"];
var arr2 = ["apple", "orange", "kiwi"];
var arrData;
var output = "";
for (var i = 0; i < arr1.length; i++) {
for (var j = 0; j < arr2.length; j++) {

if (arr1[i] === arr2[j]) {
arrData = arr1[i];
output += '<input type="checkbox" value=' + arrData + ' name="box2" checked >' + '   ' + arrData + '   ' + '<br><br>';
document.getElementById("demo2").innerHTML = output;
arr1.splice(i,1);
}

}
}
for (var x = 0;x <=arr1.length-1;x++){
	arrData = arr1[x];
	output += '<input type="checkbox" value=' + arrData + ' name="box2" >' + '   ' + arrData + '   ' + '<br><br>';
document.getElementById("demo2").innerHTML = output;
}

}

<button id="clickMe">click me</button>
<div id="demo"></div>
<div id="demo2"></div>

在此版本中，您可以保留嵌套循环，并组织选中和未选中。通过这种方式，选中的复选框可以单独放置到未选中。再次，这取决于要求。

Answer 2

创建一个函数来检查当前值是否存在于另一个数组中，如果确实检查了，则不要检查。

function inArray(item, array) {
for (var i in array) {
if (array[i] === item)
return true;
}
return false;
}
function displayList() {
var arr1 = ["apple", "banana", "grapes", "orange", "kiwi", "guava"];
var arr2 = ["apple", "orange", "kiwi"];
var arrData;
var output = "";
for (var i = 0; i < arr1.length; i++) {
if (inArray(arr1[i], arr2)) {
arrData = arr1[i];
output += '<input type="checkbox" value=' + arrData + ' name="box2" checked >' + '   ' + arrData + '   ' + '<br><br>';
document.getElementById("demo2").innerHTML = output;
} else {
arrData = arr1[i];
output += '<input type="checkbox" value=' + arrData + ' name="box2" >' + '   ' + arrData + '   ' + '<br><br>';
document.getElementById("demo2").innerHTML = output;
}
}
}

<button onClick="displayList()">click me</button>
<div id="demo"></div>
<div id="demo2"></div>

Answer 3

而不是直接使用 2 个循环，您可以使用 indexOf 来检查数组元素是否与第二个数组中的数组元素匹配

for (var i = 0; i < arr1.length; i++) {
if(arr2.indexOf(arr[i]) > -1) {
arrData=arr2[j];
output+= '<input type="checkbox" value='+arrData+' name="box2" checked >' + ' ' + arrData+' '+'<br><br>';
} else {
arrData=arr2[j];
output+= '<input type="checkbox" value='+arrData+' name="box2" >' + ' ' + arrData+' '+'<br><br>';
}
document.getElementById("demo2").innerHTML=output;
}

Answer 4

您可以像这样merge它们，然后通过检查common数组来显示项目

function displayList()
{
	var arr1=["apple", "banana", "grapes", "orange", "kiwi", "guava"];
	var arr2=["apple", "orange", "kiwi"];
	var arrData,common={},output="";

//ref : http://stackoverflow.com/a/1584377/7549867
function arrayUnique(array) {
var a = array.concat();
for(var i=0; i<a.length; ++i) {
for(var j=i+1; j<a.length; ++j) {
if(a[i] === a[j]){
common[a[i]]='true'
a.splice(j--, 1);
}
}
}
return a;
}
// Merges both arrays and gets unique items
arrData = arrayUnique(arr1.concat(arr2));
var length = arrData.length;
for(var i= 0 ; i<length ;i++){
var checked = (common[arrData[i]])?'checked':''
output+= '<input type="checkbox" value='+arrData+' name="box2" '+checked+ '>'  + '   ' + arrData[i]+'   '+'<br><br>'; 
		document.getElementById("demo2").innerHTML=output;
	
}
}

<button onClick="displayList()">click me</button>
<div id="demo"></div>
<div id="demo2"></div>