为什么这个 if 语句在 for 循环中创建一个未定义的值？

Question

我创建了这个 for 循环来收集 <ul> 中的所有图像。我想一方面收集肖像图像，另一方面收集风景图像，显然它有效...

for ( var i = 0; i < imgArray.length; i += 1 ) {
    var images = [ imgArray ]; // Creates an array with all the images.

//Figure out which images are in landscape and in portrait.

    if ( imgArray[i].height < imgArray[i].width ) {
        var landscapeImg = [ imgArray[i] ]; // Stores landscape images.
    } else if ( imgArray[i].height > imgArray[i].width ) {
        var portraitImg = [ imgArray[i] ]; // Stores portrait images.
    };

...但是当我登录控制台时 var landscapeImg 和 portraitImg 会发生这种情况。

[Log] [ (app.js, line 24)
<img src="img/1.jpg" alt="Imagen 1">
]
[Log] undefined (app.js, line 25)
[Log] [ (app.js, line 24)
<img src="img/1.jpg" alt="Imagen 1">
]
[Log] [ (app.js, line 25)
<img src="img/2.jpg" alt="Imagen 2">
]
[Log] [ (app.js, line 24)
<img src="img/3.jpg" alt="Imagen 3">
]
[Log] [ (app.js, line 25)
<img src="img/2.jpg" alt="Imagen 2">
]
[Log] [ (app.js, line 24)
<img src="img/4.jpg" alt="Imagen 4">
]
[Log] [ (app.js, line 25)
<img src="img/2.jpg" alt="Imagen 2">
]
[Log] [ (app.js, line 24)
<img src="img/5.jpg" alt="Imagen 5">
]
[Log] [ (app.js, line 25)
<img src="img/2.jpg" alt="Imagen 2">
]

为什么我得到一个未定义的值？为什么循环再次遍历图像 1？

提前致谢:)

Answer 1

因为第一个运行只有 if 或 else-if 中的代码会运行，两个部分不能运行一个迭代。这留下了一个尚未定义的变量。例如：

if ( true ) {
    var landscapeImg = [ imgArray[i] ]; // Stores landscape images.
} else if ( false ) {
    var portraitImg = [ imgArray[i] ]; // Stores portrait images.
};

console.log(portraitImg) // logs undefined
console.log(landscapeImg) // logs some defined value

Answer 2

首先，一个命名技巧。它有助于使用一致且有意义的名称。我喜欢分别为数组和单个项目使用复数和单数名称：images 是图像数组的好名称，image 是单个图像的好名称。 landscapeImg 不是一组风景图像的好名字，因为它听起来像是单个图像的名称。 imgArray 是一组图像的好名字，但如果你有很多数组，一遍又一遍地重复 Array 部分会变得乏味。我的建议是使用复数名称，如 images 以简洁明了。

所以我将在下面的示例中稍微调整名称并假设输入数组称为 images。如果它已经是一个数组，我们就不需要用同样的东西创建另一个数组。此外，我们需要处理方形图像，除非您想将它们归为肖像或风景。

另一个提示：与其在代码中重复多次 imgArray[i]（或者在下面的代码中重复 images[i]），不如将其分配给一个简单的变量，从而使代码更短更清晰。

最后，您要做的是在循环之前创建每个数组，然后将项目推入循环内的适当数组。所以它可能看起来像这样：

var squares = [], landscapes = [], portraits = [];

for( var i = 0;  i < images.length;  i++ ) {
    var image = images[i];
    if( image.height < image.width ) {
        landscapes.push( image );
    } else if( image.height > image.width ) {
        portraits.push( image );
    } else {
        squares.push( image );
    }
}

为什么这个 if 语句在 for 循环中创建一个未定义的值？

Why this if statement creates an undefined value inside a for loop?

javascript

jquery

for-loop

if-statement

undefined