Question

我有两个数组 var arr1 = [＆＃34; apple＆＃34;，＆＃34; banana＆＃34;，＆＃34; grape＆＃34;，＆＃34; orange＆＃34;，＆＃34; kiwi＆＃34;，＆＃34;番石榴＆＃34;]; var arr2 = [＆＃34; apple＆＃34;，＆＃34; orange＆＃34;，＆＃34; kiwi＆＃34;]; 现在我想比较两个数组并打印＆＃34; apple＆＃34;，＆＃34; orange＆＃34;，＆＃34; kiwi＆＃34;，即两个数组之间的常用单词以及复选框选中，和未选中复选框的其余单词。我可以检索并显示常用元素，但不能检查非常见元素，并且未选中复选框。请帮忙。

＆＃13;

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;
		}
    }
}
}

＆＃13;

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

＆＃13;

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

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

＆＃13;

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;
            }
        }
    }

＆＃13;

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

＆＃13;

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数组

来显示项目

＆＃13;

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;
	
    }
}

＆＃13;

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

＆＃13;

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

4 个答案: