Javascript数组并将它们赋值给变量,但第一个值为未定义.为什么

Javascript Array and assign them to variable, but first value as undefined. why?

本文关键字:第一个 为什么 未定义 变量 数组 赋值 Javascript      更新时间:2023-09-26

在JS中使用Array创建无序列表时,第一个值是未定义的。

var list; //box for accumulating list tags
var arr = ['menu1', 'menu2', 'menu3', 'menu4'];
for(var i = 0; i < arr.length; i++) {
    list += '<li>' + arr[i] + '</li>';
}
document.getElementById('menu').innerHTML = list;
结果:

<ul id="menu">
undefined
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>

但是一开始赋空值就可以了

var list = "";

所以我想知道它们的区别是什么

如果这个问题是多余的,我很快就会删除它。

感谢您的来访。

不,错误在这里

list += 

假设list之前有某个值,但在第一次运行时没有,并且未定义,这就是为什么第一行未定义。您应该在那里添加一个检查来赋值,而不是在第一次迭代时进行连接。

不像其他地方建议的那样用空字符串初始化列表(用空字符串连接没有任何意义),您应该真正使用

for(var i = 0; i < arr.length; i++) {
    if(i==0)
       list = '<li>' + arr[i] + '</li>';
    else
      list += '<li>' + arr[i] + '</li>';
}

在JavaScript中,值在初始化之前是未定义的。

让我们通过例子来分析这些情况,以便更清楚地说明。

引用未声明的变量

在JavaScript中,你必须在引用一个变量之前声明它。例如,

var x;
console.log(x);

如果你只输入下面的代码,就会出现引用错误。

console.log(x);

引用未初始化变量

使用var关键字声明变量后,它可以用于任何表达式,但初始值为undefined。例如

var x;
x === undefined; // true

通过给一个值来给一个变量类型

一旦你给一个变量一个值,或者给它一个新的值,你本质上让解释器知道了变量的值和类型。例如,

var x;
typeof x; // undefined
x = 1;
typeof x; // number
x = 'a';
typeof x // string

混合类型表达式

在JavaScript中,如果表达式是混合类型,解释器将强制其中一个值为另一个值的类型。

例如,

var x = 1;
var y = 'a';
z = x + y; // '1a'
typeof z // string

类型强制转换在所有表达式上执行,而不仅仅是+,并且并不总是直接的。例如,

[] == false // true

问题部分

这是因为当你定义一个变量&不要初始化,它将未定义。

var list; //list is undefined here
所以当你第一次说 的时候
list += arr[i]

基本上就是

list = undefined + arr[0];

所以最后的输出将是

'undefined<li>...'
<标题> 工作部分

你在说

var list = '';

第一次是

list = '' + arr[0];

所以最后的输出将是

'<li>...'

声明list变量时指定空字符串

当你使用list+=时,意味着你已经在列表变量中有了值,但是你没有

var list=""; //box for accumulating list tags
var arr = ['menu1', 'menu2', 'menu3', 'menu4'];
for(var i = 0; i < arr.length; i++) {
  // here is `list` is undefined when loop execute first time 
    list += '<li>' + arr[i] + '</li>';
}
document.getElementById('menu').innerHTML = list;

JS是一种动态语言,所以如果你只是定义一个var,没有办法知道它将是哪种类型。如果您使用var list = "";,则是另一种情况。您显式地告诉类型将是字符串,并且连接将以所需的方式运行!

这是因为当您像这样定义变量时:

var list;

undefined。要解决这个问题,只需使其为空字符串,正如您所说的。

var list = "";

正如几个答案已经提到的。当您将undefined变量与字符串连接时,undefined将变成字符串'undefined' + ...