如何比较两个数组并一起打印常用数据以及复选框已选中且不常见的数据（未勾选复选框）？

Question

我有两个阵列 var arr1 = [“apple”，“banana”，“grapes”，“orange”，“kiwi”，“guava”]; var arr2 = [“apple”，“orange”，“kiwi”]; 现在我想比较这两个数组并打印“apple”，“orange”，“kiwi”，即两个数组之间的常见单词以及复选框选中，其余单词复选框未选中。 我能够检索并显示通用元素，但不是不常见的元素，取消选中复选框。请帮忙。

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

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

Answer 1

创建一个函数来检查，如果其他阵列中存在的电流值，如果它不检查其他不检查。

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 2

你可能会做这种方式，但要看你的需求。

基本上你使用一个循环而不是两个，如果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++){ 
 
    \t arrData = arr1[x]; 
 
    \t 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 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() 
 
{ 
 
\t var arr1=["apple", "banana", "grapes", "orange", "kiwi", "guava"]; 
 
\t var arr2=["apple", "orange", "kiwi"]; 
 
\t 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>'; 
 
\t \t document.getElementById("demo2").innerHTML=output; 
 
\t 
 
    } 
 
}

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