Question

JS代码

function generate(rectWidth, rectHeight, amount) {

// holds size
let size = {
    width: [],
    height: []
};

// holds colors
let colors = [];

for (var i = 0; i < amount; i++) {
    // generate size
    var width = Math.floor((Math.random() * rectWidth) + 1);
    var height = Math.floor((Math.random() * rectHeight) + 1);

    var r = Math.floor((Math.random() * 255) + 1);
    var g = Math.floor((Math.random() * 255) + 1);
    var b = Math.floor((Math.random() * 255) + 1);

    // add size to object
    size.width.push(width);
    size.height.push(height);
    colors.push(`rgb(${r}, ${g}, ${b})`);
}

return {
    size: size,
    colors: colors
};

};


function draw() {
var properties = generate(50, 50, 3);

if(properties) {

    for (let width = 0; width < properties.size.width.length; width++) {
        for (let height = 0; height < properties.size.height.length; height++) {
            for (let color = 0; color < properties.colors.length; color++) {

                console.log("Width: ", properties.size.width[width]);
                console.log("Height: ", properties.size.height[height]);
                console.log("Color: ", properties.colors[color]);

            }

        }
    }

    return true;

} else {
    return false;
}

};

我的目标

Width:  13
Height:  36
Color:  rgb(141, 126, 60)

Width:  13
Height:  36
Color:  rgb(250, 94, 157)

Width:  13
Height:  36
Color:  rgb(249, 52, 206)

Width:  13
Height:  13
Color:  rgb(141, 126, 60)

Width:  13
Height:  13
Color:  rgb(250, 94, 157)

Width:  13
Height:  13
Color:  rgb(249, 52, 206)

Width:  13
Height:  42
Color:  rgb(141, 126, 60)

Width:  13
Height:  42
Color:  rgb(250, 94, 157)

Width:  13
Height:  42
Color:  rgb(249, 52, 206)

Width:  19
Height:  36
Color:  rgb(141, 126, 60)

Width:  19
Height:  36
Color:  rgb(250, 94, 157)

Width:  19
Height:  36
Color:  rgb(249, 52, 206)

Width:  19
Height:  13
Color:  rgb(141, 126, 60)

Width:  19
Height:  13
Color:  rgb(250, 94, 157)

Width:  19
Height:  13
Color:  rgb(249, 52, 206)

Width:  19
Height:  42
Color:  rgb(141, 126, 60)

Width:  19
Height:  42
Color:  rgb(250, 94, 157)

Width:  19
Height:  42
Color:  rgb(249, 52, 206)

Width:  33
Height:  36
Color:  rgb(141, 126, 60)

Width:  33
Height:  36
Color:  rgb(250, 94, 157)

Width:  33
Height:  36
Color:  rgb(249, 52, 206)

Width:  33
Height:  13
Color:  rgb(141, 126, 60)

Width:  33
Height:  13
Color:  rgb(250, 94, 157)

Width:  33
Height:  13
Color:  rgb(249, 52, 206)

Width:  33
Height:  42
Color:  rgb(141, 126, 60)

Width:  33
Height:  42
Color:  rgb(250, 94, 157)

Width:  33
Height:  42
Color:  rgb(249, 52, 206)

问题

我的问题是我的for loop循环遍历properties.sizes.width，properties.sizes.height，properties.colors，而不是我的计划console.log()值。问题是我的console.log()应该输出宽度，高度和颜色3次（我在generate()中将3作为参数）。但是当我console.log()

时

Answer 1

您只需要一个循环：

for (let i= 0; i < properties.size.width.length; i++) {
    console.log("Width: ", properties.size.width[i]);
    console.log("Height: ", properties.size.height[i]);
    console.log("Color: ", properties.colors[i]);
}

但是我建议使用不同的结构，将所有三个属性放在相同的对象中，并将这些对象添加到一个数组中：

＆＃13;

function generate(rectWidth, rectHeight, amount) {
    // holds everything
    let result = [];
    for (var i = 0; i < amount; i++) {
        // generate size
        var width = Math.floor((Math.random() * rectWidth) + 1);
        var height = Math.floor((Math.random() * rectHeight) + 1);

        var r = Math.floor((Math.random() * 255) + 1);
        var g = Math.floor((Math.random() * 255) + 1);
        var b = Math.floor((Math.random() * 255) + 1);

        // add all to one object, and push it to the result array
        var color = `rgb(${r}, ${g}, ${b})`;
        result.push({width, height, color});
    }
    return result;
};


function draw() {
    var properties = generate(50, 50, 3);
    properties.forEach(function (prop) {
        console.log("Width: ", prop.width);
        console.log("Height: ", prop.height);
        console.log("Color: ", prop.color);
    });
    return true;
};

draw();

＆＃13;

Answer 2

将绘制函数更改为循环，以便它只循环指定的数量（在您的示例中为3）：

function draw() {
    var amount = 3;
    var properties = generate(50, 50, amount);

    if(properties) {

        for (let i= 0; i< amount; i++) {
                    console.log("Width: ", properties.size.width[i]);
                    console.log("Height: ", properties.size.height[i]);
                    console.log("Color: ", properties.colors[i]);


        }

        return true;

    } else {
        return false;
    }

};

对于循环console.logs重复

2 个答案: