无论值如何，jQuery.inArray都返回-1

Question

我正在尝试使用jQuery的.inArray比较两个数组。这似乎很简单但是每个被比较的值都返回-1（不在数组中）。以下是我的代码

finalClick();
function finalClick(){
    roles=["President", "Dog", "Treasurer"]
    neededRoles=["President", "Secretary", "Treasurer"];
    $(neededRoles).each(function(){
        if(jQuery.inArray(this, roles)=='-1'){
            console.log("not in array "+this);
        }
    });
}

如果你想玩它，you can check out my fiddle here.

提前致谢

Answer 1

在宽松模式下，this 始终是对象类型，而不是基本类型。因此，回调中的this是String，而不是原始字符串。 inArray使用===（严格相等）进行检查，原始字符串不严格等于String对象。

有几种选择：

使用严格模式

在严格模式下，this可以是原语，因此您的代码可以正常工作（如果我添加变量声明;请参阅答案末尾的“旁注”）：

"use strict";
var consoleLine = "<p class=\"console-line\"></p>";
console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};
finalClick();
function finalClick(){
    var roles=["President", "Dog", "Treasurer"]
    var neededRoles=["President", "Secretary", "Treasurer"];
    // console.log("test: "+roles[0]);
    var rolecount=0;
    console.log("value changed");
    $(neededRoles).each(function(){
        //console.log("this is this "+this+" "+rolecount+" "+roles[rolecount]);
        if(jQuery.inArray(this, roles)=='-1'){
            console.log("Not in array "+this);
        } else {
            console.log("Found in array "+this);
        }
        //rolecount++;
    });
}

<div id="console-log"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

使用$.each代替$().each

而不是$(neededRoles).each(...)，请使用$.each(neededRoles, function(index, role)并使用role，这将是一个字符串原语：

var consoleLine = "<p class=\"console-line\"></p>";
var console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};
finalClick();
function finalClick(){
    var roles=["President", "Dog", "Treasurer"]
    var neededRoles=["President", "Secretary", "Treasurer"];
    // console.log("test: "+roles[0]);
    var rolecount=0;
    console.log("value changed");
    $.each(neededRoles, function(index, role){
        //console.log("this is this "+this+" "+rolecount+" "+roles[rolecount]);
        if(jQuery.inArray(role, roles) == -1){
            console.log("Not in array " + role);
        } else {
            console.log("Found in array " + role);
        }
        //rolecount++;
    });
}

<div id="console-log"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

使用Array#forEach和Array#indexOf

或者更好的是，使用Array#forEach和Array#indexOf，将它们填充到没有它们的旧浏览器上：

var consoleLine = "<p class=\"console-line\"></p>";
var console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};
finalClick();
function finalClick(){
    var roles=["President", "Dog", "Treasurer"]
    var neededRoles=["President", "Secretary", "Treasurer"];
    // console.log("test: "+roles[0]);
    var rolecount=0;
    console.log("value changed");
    neededRoles.forEach(function(role) {
        if (roles.indexOf(role) == -1) {
            console.log("Not in array " + role);
        } else {
            console.log("Found in array " + role);
        }
        //rolecount++;
    });
}

<div id="console-log"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

使用Array#filter

如果 您的目标是找到所需的缺失角色，可以使用Array#filter：

var consoleLine = "<p class=\"console-line\"></p>";
var console = {
  log: function(text) {
    $("#console-log").append($(consoleLine).html(text));
  }
};
finalClick();

function finalClick() {
  var roles = ["President", "Dog", "Treasurer"]
  var neededRoles = ["President", "Secretary", "Treasurer"];
  var missingRoles = neededRoles.filter(function(role) {
    return roles.indexOf(role) == -1;
  });
  console.log("Missing roles: " + missingRoles.join(", "));
}

<div id="console-log"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

旁注：您的原始代码是The Horror of Implicit Globals的牺牲品，因为您没有声明很多变量。我已在上述所有例子中解决了这个问题。

Answer 2

jQuery each方法有2个参数：index和element。如果您使用这些参数代替this，则代码可以正常工作

var consoleLine = "<p class=\"console-line\"></p>";
console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};
finalClick();

function finalClick() {
    roles = ["President", "Dog", "Treasurer"]
    neededRoles = ["President", "Secretary", "Treasurer"];
    // console.log("test: "+roles[0]);
    rolecount = 0;
    console.log("value changed");
    $(neededRoles).each(function (i, e) {        // using index and element
        if (jQuery.inArray(e, roles) == '-1') {
            console.log("not in array " + e);
        }
    });
}

each方法

的jQuery doc