javascript - 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

如果您的目标是找到所需的缺失 Angular 色，您可以使用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 的牺牲品因为你没有声明很多变量。我已在上述所有示例中修复了该问题。