Question

我在false中有十个变量值为getInitialState。有没有更好的方法来创建下面的结构，而不是连续10次列出它们？

getInitialState: function(){
    return {
     number: 1,
     visible1: false,
     visible2: false,
     visible3: false,
     visible4: false,
     visible5: false,
     visible6: false,
     visible7: false,
     visible8: false,
     visible9: false,
     visible10: false,
     image1: "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png",
     image2: "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png",
     image3: "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png",
     image4: "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png",
     image5: "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png",
     image6: "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png",
     image7: "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png",
     image8: "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png",
     image9: "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png",
     image10: "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png"
    }
  },

请注意我无法更改结构，我只是询问是否有更简单的方法来创建它（例如，重复次数减少，行数减少）。

所有图片都以相同的路径开始（默认情况下，用户会更新）。

Answer 1

您可以使用循环生成visibleX和imageX属性：

getInitialState: function(){
    var rv = {
        number: 1
    };
    var i;
    for (i = 1; i <= 10; ++i) {
        rv["visible" + i] = false;
        rv["image" + i] = "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png";
    }
    return rv;
},

产生完全相同的结构。

在JavaScript中，您可以使用点表示法和属性名称 literal （obj.foo）访问属性，也可以使用括号表示法和属性名称 string 访问属性（或Symbol，但这里不相关）。因此，在上文中，我们使用括号表示法在对象上创建10个visibleX和imageX属性。

你说你不能改变结构，这很不幸，因为一系列对象几乎肯定会是一个更好的解决方案：

getInitialState: function(){
    var rv = {
        number: 1,
        images: []
    };
    var i;
    for (i = 0; i < 10; ++i) {
        rv.images.push({
            visible: false,
            url: "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png"
        });
    }
    return rv;
},

以下表示的适当DS是什么？

1 个答案: