JavaScript indexOf() 为数组中已识别的对象返回 -1答案

【问题标题】：JavaScript indexOf() returns -1 for recognized objects in arrayJavaScript indexOf() 为数组中已识别的对象返回 -1
【发布时间】：2016-06-30 03:01:31
【问题描述】：

在为 HTML 5 游戏创建骨架时（使用画布），我注意到关于 JavaScript 语言的一个有趣的怪癖，我似乎不太了解！

具体来说，我创建了一个对象（节点）数组，通过函数（作为“节点”）传递它没有问题，但即使在确认控制台日志中识别出所述对象后，.indexOf() 方法也没有' t 似乎将所述对象识别为数组中的一个项目（给我通用的“-1”输出）。

function StartGame(){
	//Initiating draw variables
	cx = document.getElementById("GameMap")
	seeds = cx.getContext("2d")
	//Resetting nodes
	nodes = []
	GenNodes() //randomly generates and scatters new connector nodes on the game-map
}

function GenNodes() {
		for (i=0; i<10; i++) {
		nodes[i]= new SeedNode()
		}
}

function SeedNode() {
		this.shape = "circle"
		this.radius = "10"
		this.x = 730*Math.random() + 10
		this.y = 730*Math.random() + 10
		DrawNode(this,this.x,this.y)
} 

function DrawNode(node,x_cen,y_cen) {
	console.log(node)
	console.log(nodes.indexOf(node))
	seeds.beginPath();
	seeds.arc(x_cen,y_cen,10,0,2*Math.PI);
	seeds.stroke();
	seeds.fillText(nodes.indexOf(node),x_cen,y_cen)
}

<!DOCTYPE html>
<html>
<head>
<title>ScatterDots! the StackOverFlow Edition</title>
<script src="ScatterDots.js"></script>
</head>

<body onload='StartGame()'>
	
<canvas id="GameMap" width="750" height="750" style="border:1px solid #000000"></canvas>

</body>

</html>

我的（相当简单的）猜测是对象在某种程度上不是这种基于数组的方法的有效输入。如果是这种情况，是否有符合 W3C 标准的方法来解决这个问题？

【问题讨论】：

恐怕您实际上接受了错误的答案。如果一个变量没有在本地声明，它将被 JS 解释器作为一个全局变量。真正的问题是您尝试在将对象添加到nodes 之前打印它。请在下面查看我的解决方案。

标签： javascript object indexof

【解决方案1】：

您尝试在将节点添加到nodes 之前打印索引。你总是会得到-1。简而言之，请将DrawNode 移出SeedNode。

function GenNodes() {
    for (var i=0; i<10; i++) {
        var node = new SeedNode()
        nodes.push(node)
        DrawNode(node,node.x,node.y)
    }
}

function SeedNode() {
    var node = {}
    node.shape = "circle"
    node.radius = "10"
    node.x = 730*Math.random() + 10
    node.y = 730*Math.random() + 10 
    return node 
}

【讨论】：

我同意这是实际的解决方案，但不仅仅是因为他尝试在将索引添加到nodes 之前打印它。他还在这里调用 indexOf()：seeds.fillText(nodes.indexOf(node),x_cen,y_cen).
是的。我最初注意到我的节点都被标记为“-1”，所以我在函数中插入了另一个 indexOf() 方法调用，以确认它纯粹是一个 javascript 问题，而不是画布中的超级奇怪的东西。因此出现双重错误！

【解决方案2】：

未测试，但问题似乎在于这三个功能

function GenNodes() {
        // Rest of code
    nodes[i]= new SeedNode()
}

function SeedNode() {
        //Rest of code
        DrawNode(this,this.x,this.y)
} 

function DrawNode(node,x_cen,y_cen) {

    // Rest of code
    console.log(nodes.indexOf(node))
    seeds.fillText(nodes.indexOf(node),x_cen,y_cen)
}

在函数GenNodes 中，您尝试填充nodes 数组但这将取决于SeedNode 函数的返回。同样，这个 SeenNode 依赖于来自 DrawNode 函数的返回。这意味着一旦DrawNode 和SeedNode 执行完毕，它就会将元素放入nodes 数组中。但在放置元素之前，您要检查indexOf 中nodes 数组中的元素DrawNode。

所以它返回-1，根据indexOf上的文档，我认为这是正确的

【讨论】：

不错的收获！我什至没有想到我可能会过早地调用该方法，但事实上，当我在创建节点后创建专用标签函数时一切正常。谢谢:-)

【解决方案3】：

您有一个范围界定问题。 nodes 从未在 DrawNode() 可以找到的任何地方声明。要修复它，请在任何函数之外声明 nodes：

var testMe = [];
function doSomething() {
  doTheThing();
}

function doTheThing() {
  testMe[0] = "hi";
  testMe[1] = "there";
  doTheOtherThing();
}

function doTheOtherThing() {
  console.log("This works");
  console.log(testMe.indexOf("there"));
}

doSomething();

【讨论】：

@stanleyxu2005 是正确的，他的解决方案是正确的。
感谢您的诚实。事后看来，我的错误很明显，所以我并没有真正检查你的具体代码！