迭代字符串数组错误，运行第一项的字母

Question

我有一个简单的数组循环，在jsFiddle中运行完美，显示所有项目，请参阅https://jsfiddle.net/8odoros/b27ocs4d/1/

奇怪的是，将相同的脚本放在这里作为一个片段以字母形式运行，逐字显示第一个字符串。我觉得很蠢，我错过了什么吗？看看：

var name = ['Helen','Jim','Thomas','Luke','Theodore'];
var div = document.getElementById('cards');
for(var i=0;i<5;i++){
	var newHtml = name[i]+'&emsp;'+i+'</br>';
	div.innerHTML = div.innerHTML + newHtml;  	
}

<div id="cards"></div>

Answer 1

Word name是javascript中的reserved word（正如@prasad所回答的），为什么您的代码没有按预期运行。

使用name更改names后，请参阅以下代码。它看起来像是在jsfiddle工作。

var names = ['Helen','Jim','Thomas','Luke','Theodore'];
var div = document.getElementById('cards');
for(var i=0;i<5;i++){
	var newHtml = names[i]+'&emsp;'+i+'</br>';
	div.innerHTML = div.innerHTML + newHtml;  	
}

<div id="cards"></div>

注意：name只能用作函数或iife中的局部变量，不能用作全局变量。

Answer 2

尝试其工作中的任何一个功能。 name是javascript的 reserved 字。但是在函数中应用。它不作为保留字。这是阻止操作的方法之一。

＆＃13;

＆＃13;

(function () {
var name = ["Helen","Jim","Thomas","Luke","Theodore"];
var div = document.getElementById('cards');
for(var i=0;i<5;i++){
  var newHtml = name[i]+'&emsp;'+i+'</br>';
	div.innerHTML = div.innerHTML + newHtml;  	
}
  })()

＆＃13;

<div id="cards"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

name AKA window.name

好name绝对不是javascript中的保留字。

name AKA window.name是窗口的名称。它的值由setter函数设置，窗口名称应为字符串。因此，当您使用name=["foo","bar"]进行设置时，它将转换为字符串。

不幸的是，Javascript必须与每个人和他的狗分享全球名称空间，这说明了尽可能避免全球范围的另一个原因。

Answer 4

显然name是window的属性，它有一个将输入值转换为字符串的setter。您的代码正在尝试将一个数组分配给该属性，该数组神奇地转换为字符串：

＆＃13;

＆＃13;

var name = ["foo", "bar"];
console.log(name); // array converted to "foo,bar"

＆＃13;

＆＃13;

＆＃13;

那为什么它适用于jsFiddle？答案是，默认情况下，jsFiddle将你的代码包装在一个函数中，like this：

<script>
  window.onload = function() {
    var name = ["foo", "bar"];
    console.log(name); // ["foo", "bar"]
  }
</script>

这会创建一个闭包，其中var name创建一个新变量而不是引用window.name。如果您更改了jsFiddle设置（JavaScript选项卡＆gt;加载类型＆gt;没有换行正文），那么您将获得与StackSnippet like this相同的结果：

<script>
  var name = ["foo", "bar"];
  console.log(name); // "foo,bar"
</script>

解决方案不是首先污染全局命名空间。这样您就不必查找不用作JavaScript变量的＆＃34;单词列表＆＃34;。