ES7

Question

我正在尝试编写一个for循环来创建一个columns对象，如下所示：

columns: [
    {data: "productCode", title: "Product Code", width: "7%"},
    {data: "brand", title: "Brand", width: "10%"},
]

到目前为止，我已经尝试过了：

定义每个列属性：

var ltColumns = {

    "col1": {data: "productCode", title: "Product Code", width: "7%" },

    "col2": {data: "brand", title: "Brand", width: "10%"}
};

使用for循环填充列属性。

columns: [
        for (var key in ltColumns) {
            {
             data: ltColumns[key].data, 
             title: ltColumns[key].title, 
             width: ltColumns[key].width}
            }
         ];

但是，我一直收到错误Unexpected token for。有人可以帮我解释语法吗？

谢谢！

Answer 1

ES7

这种语法，也称为 array comprehensions ，是一个名为ES7的JavaScript版本中的一个非常新的功能。如果你想使用这个功能（目前只有firefox支持这个功能），你可以这样做：

columns: [
    for (i of ltColumns)
    {
        data : i.data,
        title: i.title,
        width: i.width
    }
]

ES6

新版本的JavaScript实际上现在在名为ES6的流行浏览器中得到了很好的支持，其功能在执行以下操作时可以提供帮助：

columns: Object.keys(ltColumns).map(item => ltColumns[item])

ES5

ES5是当前版本的JavaScript：

方法1

你可以这样做：

columns: Object.keys(ltColumns).map(function (item) { return
    ltColumns[item] })

方法2

for in循环也是一种选择：

for (var i in ltColumns)
    columns[i] = ltColumns[i];

Answer 2

你需要在数组之外进行for循环：

var columns = [];

for(var key in ltColumns) {
  columns.push({
    data: ltColumns[key].data, 
    title: ltColumns[key].title, 
    width: ltColumns[key].width
  });
}

我建议查看MDN's docs on Array.prototype。

我上面使用的方法是Array.prototype.push，它将项目推送到数组的末尾。

注意：这是一个常见的ES5实现。

Answer 3

var columns = Object.keys(ltColumns).map(function (key) { return ltColumns[key]; });

要小心，因为它比使用for in的常规解决方案慢。

为常见操作创建辅助函数总是更好：

function values(obj) {
    return Object.keys(obj).map(function (e) { return obj[e]; });
}

someObject.columns = values(ltColumns);

但最好使用最快的辅助函数解决方案。

function values(obj) {
    var result = [];

    for (var name in obj)
        if (obj.hasOwnProperty(name))
            result.push(obj[name]);

    return result;
}

如何使用for循环创建javascript对象

3 个答案:

ES7

ES6

ES5

方法1

方法2