如何在javascript中使用for循环生成图像数组？答案

【问题标题】：How to generate an array of Images using for loop in javascript?如何在javascript中使用for循环生成图像数组？
【发布时间】：2020-04-14 18:42:33
【问题描述】：

我正在尝试编写一个图像数组，但我有很多图像，所以我尝试使用“for循环”来生成它。

我当前的代码是：

var images = [
    "/images/image0000.png",
    "/images/image0005.png",
    "/images/image0010.png",
    "/images/image0015.png",
    "/images/image0020.png",
    "/images/image0025.png",
    "/images/image0030.png",
    "/images/image0040.png",
    "/images/image0045.png",
    "/images/image0050.png"
];

我还有更多图片要添加。所以我想知道如何使用 for 循环来生成这个。

最后一张图片是/images/image3360.png

谢谢！

【问题讨论】：

“生成”是什么意思？到目前为止你尝试过什么？
这些是否每次都将它们的“索引”增加 5？

标签： javascript

【解决方案1】：

你可以这样做：

let images = [];
for (let i = 0; i <= 3360; i += 5) {
    let imageString = "";
    let numberOfZeros = 4 - i.toString().length;

    for (let j = 0; j < numberOfZeros; j++) {
        imageString += "0";
    }
    images.push("/images/image" + imageString + i.toString() + ".png");
}

这实质上是运行一个每次递增 5 的 for 循环，计算所需的前导零的数量，然后运行另一个 for 循环来添加这些前导零，并在字符串中插入这个和实际数字的串联推到数组中。

【讨论】：

【解决方案2】：

const step = 5; // Steps
const imgNumber = 3360/step; // Image number
const images = []; // Array to hold images


for(i = 0; i<=imgNumber; i++) {
   const currNum = i*step; // Calculate suffix
   let str = "/images/image0000";
   str = str.substring(0, str.length - currNum.toString().length); // Compile number
   images.push(`${str}${currNum}.png`); // Store the image in the array
}
console.log(images);

【讨论】：

【解决方案3】：

我认为您不想生成实际图像，而是用文件名填充数组。最简单的方法是：

const MAX = 3360;
const PREFIX = "/images/image";
const EXT = ".png";
const arr = [];
for (let i = 0; i <= MAX; i += 5) {
  arr.push(
    PREFIX + ("0000" + i).slice(-4) + EXT
  );
}

切片的东西来自this answer。

【讨论】：

为什么会这样？
对不起，我的错。没看到你在切绳子。确实是合理的解决方案，假设“跳转”到 3360 的标准实际上是数字。
确实如此，但鉴于这个问题的简洁性，我们必须做出一些假设。
我知道，但我个人认为没有足够的信息来正确回答这个问题。在任何情况下，您都应该得到 +1，因为您的答案简洁明了，切片的巧妙使用在我看来绝对是最适合该场景的解决方案。