Question

我从javascript开始，我觉得我没有太多的词汇来解释我的问题。我试图用d3构建一个图表，这是我需要的数据：

                      data=[
                        {x: 'A', y: 10},
                        {x: 'B', y: 5},
                        {x: 'C', y: 15}
                      ]/>

但是现在这里是[['A',10],['B',5],['C',15]]

那么......我如何合并我的数据以及如何添加＆＃34; x＆＃34;和＆＃34; y＆＃34;类别名称。

Answer 1

以下是一些将其中一个转换为另一个的ES6代码：

＆＃13;

var data = [['A',10],['B',5],['C',15]];

var result = data.map( ([x, y]) => ({ x, y }) );

console.log(result);

＆＃13;

解释

data.map()：map方法将遍历data的每个元素（有3个元素），并调用您提供的函数作为参数。因此，该函数将被调用三次，并且每次将它作为参数传递给当前元素。

(...) => ....这是ES6箭头语法。它代表一个功能，但有一些不同的规则。这些差异在这个答案中没有关系，所以我不会进入那个。

[x, y]：这是map给出的参数：它是数组元素之一。通常你在这里只有一个变量（或几个用逗号分隔），但是在这里我们使用＆＃34;解构赋值＆＃34;：我们希望参数是一个数组，并希望将它的元素分配给变量{{ 1}}和x。因此，第一次y的值为x，而"A"将为y，等等。

10：箭头功能的箭头。以下是函数返回的表达式。

=>：括号只是为了避免与语句块混淆，语句块也以括号开头。 ({ x, y })是要返回的对象。这里我们再次使用ES6语法，实际上将其解释为{ x, y };它是一种快捷符号。

因此{ "x": x, "y": y }方法将调用该函数三次，并且每次返回一个对象。 map会将这些放入一个新数组中，然后返回该数组。

以下是ES5语法中的类似代码：

＆＃13;

map

＆＃13;

Answer 2

Pure ES3 +解决方案？没有经过测试，但我相信它有效。

＆＃13;

var arr  = [['A',10],['B',5],['C',15]],
    data = [];
    
    for (a = 0; a < arr.length; a++) {
      var obj = {};
      obj.x = arr[a][0];
      obj.y = arr[a][1];
      data[a] = obj;
    }

    console.log(data);

＆＃13;

Answer 3

如果您使用名为Lodash的库 - https://lodash.com/docs/4.15.0#map

_.map([['A',10]['B',5]['C',15]], function(o) { return {x:o[0], y:o[1]}; });

修改

如果您不在项目中使用Lodash，那可能有点矫枉过正

我如何从这个[＆＃34; url＆＃34;，＆＃34; 395868＆＃34;]转到[name：＆＃34; url＆＃34;，value：＆＃34; 395868＆＃34;]

3 个答案:

解释