转置JavaScript数组和对象

Question

JavaScript数组和对象如何转置？具体而言，我要将以下x和y数组/对象转换为新的期望x_new和y_new数组/对象。

给定

var x=['x1','x2','x3'];
var y=[
    {name:'y1',data:['x1y1','x2y1','x3y1']},
    {name:'y2',data:['x1y2','x2y2','x3y2']}
];
console.log(x,y);

Desired

var new_x=[
    {name:'x1',data:['x1y1','x1y2']},
    {name:'x2',data:['x2y1','x2y2']},
    {name:'x3',data:['x3y1','x3y2']}
];
var new_y=['y1','y2'];
console.log(new_x,new_y);

以下是我尝试的内容。

var _x=[],_y=[];
for (var i = 0; i < y.length; i++) {
    _y.push(y[i].name);
    var data=[];
    for (var j = 0; j < y[i].data.length; j++) {
        data.push(y[i].data[j]);
    }
    _x.push({name:y[i].name,data:data});
}
console.log(_x,_y)

https://jsfiddle.net/fzf03c5t/

- user1032531

Answer 1

使用一些地图很容易：

var x = ['x1','x2','x3'];
var y = [
  {name:'y1', data:['x1y1','x2y1','x3y1']},
  {name:'y2', data:['x1y2','x2y2','x3y2']}
];
var new_x = x.map((str, i) => ({
  name: str,
  data: y.map(obj => obj.data[i])
}));
var new_y = y.map(obj => obj.name);
console.log(new_x, new_y);

如果您不想使用箭头函数，那么代码会变得更加冗长。

var x = ['x1','x2','x3'];
var y = [
  {name:'y1', data:['x1y1','x2y1','x3y1']},
  {name:'y2', data:['x1y2','x2y2','x3y2']}
];
var new_x = x.map(function(str, i) {
  return {
    name: str,
    data: y.map(function(obj) {
      return obj.data[i];
    })
  };
});
var new_y = y.map(function(obj) {
  return obj.name;
});
console.log(new_x, new_y);

或者，如果你更喜欢使用循环方法，

var x = ['x1','x2','x3'];
var y = [
  {name:'y1', data:['x1y1','x2y1','x3y1']},
  {name:'y2', data:['x1y2','x2y2','x3y2']}
];
var new_x = new Array(x.length),
    new_y = new Array(y.length);
for (var i = 0; i < x.length; i++) {
  var data = new Array(y.length);
  for (var j = 0; j < y.length; j++)
    data[j] = y[j].data[i];
  new_x[i] = {name: x[i], data: data};
}
for (var j = 0; j < y.length; j++)
  new_y[j] = y[j].name;
console.log(new_x, new_y)

- Oriol

---

谢谢Oriol，我一直在想/希望某种映射函数可以工作，尽管它们让我有点困惑。然而，看着你的解决方案，似乎并不那么令人迷惑。 - user1032531

你介意解释一下“箭头函数”是做什么的吗？ - user1032531

@user1032531 箭头函数只是使用“fat arrow”语法声明的匿名函数。https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Functions#Arrow_functions - Kiran Yallabandi

它们是一行的箭头函数，就像是 y.map(obj => { return obj.data[i])}，这与 y.map(function(obj) => { return obj.data[i])}相同。 - Ruan Mendes

谢谢大家。我想现在我会继续使用非箭头函数，直到我变得更好一些。 - user1032531