在循环中动态构建的 Javascript 数组答案

【问题标题】：Javascript array built dynamically in a loop在循环中动态构建的 Javascript 数组
【发布时间】：2017-01-26 11:25:36
【问题描述】：

我有一个数组，比如说

var arr = ["id", "currency", "region", "status"]

如何将上面的内容映射到对象文字，如下所示？

var columns = [
      { key:"id",        headerRenderer:"id" },
      { key:"currency",  headerRenderer:"currency" },
      { key:"status",    headerRenderer:"region" },
      { key:"region",    headerRenderer:"status" }
    ];

提前致谢！

【问题讨论】：

var 1 是语法错误。
不，我不小心把它们翻了。并感谢 var 的提示，

标签： javascript arrays function loops

【解决方案1】：

一种解决方案是使用Array#map 方法。

map() 方法创建一个新数组，其结果是对该数组中的每个元素调用提供的函数。提供的函数是 callback。

所以，正如我上面所说的，map 方法按顺序为数组中的每个元素提供了一次回调函数，并根据结果构造一个新数组。 result 数组中的元素是 objects，如下所示：{"key":item, "headerRenderer":item}。

var array = ["id", "currency", "region", "status"]
var columns=array.map(function(item){
    return {
      "key":item,
      "headerRenderer":item
    }
});
console.log(columns);

【讨论】：

【解决方案2】：

map method on the Array prototype 允许您将函数应用于数组中的每个元素，从而有效地抽象简单情况下的迭代。您的情况很简单，因为result中的任何条目的内容完全由其在arr中的对应条目指定，这意味着您可以“映射”

"id" --> { key: "id", headerRenderer: "id" }

使用 map 你可以在一行中解决你的问题（前提是你的环境支持 ES6）：

var arr = ["id", "currency", "region", "status"]

var result = arr.map(key => ({ key, headerRenderer: key }));

console.log(result);

【讨论】：

【解决方案3】：

var columns = [];
var array = ["id", "currency", "region", "status"];

for (var i = 0, len = array.length; i < len; i++) {
  columns.push({
    key: array[i],
    headerRenderer: array[i]
  });
}

【讨论】：

【解决方案4】：

通常.map() 是这种方式，但另一种功能方法是使用尾调用递归映射，如下所示；

var arr = ["id", "currency", "region", "status"],
   mapo = (a, r=[]) => a.length ? mapo(a.slice(1),r.concat({key:a[0],headerRenderer:a[0]})) : r;
console.log(mapo(arr));

【讨论】：

不错的解决方案。 +1。