将JS Array中的键值对减少为object

I have one object that I had to take apart into two arrays to handle properly. It looked like this:

我有一个对象，我必须分成两个数组才能正确处理。它看起来像这样：

{
  city:"stuttgart",
  street:"randomstreet",
  ...
}

Since it needs to fit a certain directive I had to convert it to:

由于它需要符合某个指令，我必须将其转换为：

[
  {key:"city", value:"stuttgart"}
  {key:"street", value:"randomstreet"},
  ...
]

for this I first used

为此，我首先使用

var mapFromObjectWithIndex = function (array) {
  return $.map(array, function(value, index) {
    return [value];
  });
};

var mapFromObjectWithValue = function (array) {
  return $.map(array, function(value, index) {
    return [index];
  });
});

to create two arrays, one containing the old key, the other one is holding the old value. Then I created another, two dimensional array map them into a single array doing this

创建两个数组，一个包含旧键，另一个包含旧值。然后我创建了另一个二维数组，将它们映射到一个单独的数组中

var mapToArray = function (arrayValue, arrayIndex) {
  var tableData = [];
  for (var i = 0; i<arrayIndex.length; i++){
    tableData[i] = {key:arrayIndex[i] , value:arrayValue[i]};
  }
  return tableData;
};

(maybe I have already messed up by here, can this be done any easier?)

（也许我已经搞砸了，这可以更容易吗？）

Now, I use the array (tableData) to display the data in a form. The value fields can be edited. In the end, I want to convert the array (tableData) to its original. (see first object)

现在，我使用数组（tableData）来显示表单中的数据。可以编辑值字段。最后，我想将数组（tableData）转换为原始数组。（见第一个对象）

Please note, that the original object doesn't only contain strings as values, but can also contain objects as well.

请注意，原始对象不仅包含字符串作为值，还可以包含对象。

4 个解决方案

#1

I think conversion can be definitely easier:

我认为转换肯定更容易：

var obj = {
  city:"stuttgart",
  street:"randomstreet",
};

var tableData = Object.keys(obj).map(k => {return {key: k, value: obj[k]}});

console.log(tableData);

var dataBack = {};
tableData.forEach(o => dataBack[o.key] = o.value);

console.log(dataBack);

What do you want to do with objects? Do you want to expand them as well? If yes you can do something like this (and it works with nested objects as well):

你想用对象做什么？你想扩展它们吗？如果是，你可以做这样的事情（它也适用于嵌套对象）：

var obj = {
  city:"stuttgart",
  street:"randomstreet",
  obj: {a: 'a', b: 'b'},
  subObject: {aha: {z: 'z', y: 'y'}}
};

function trasformToTableData(obj) {
  if (typeof obj !== 'object') return obj;
  return Object.keys(obj).map(k => {return {key: k, value: trasformToTableData(obj[k])}});
}

var tableData = trasformToTableData(obj);
console.log(tableData);

function transformBack(obj) {
  if (Array.isArray(obj)) {
    var support ={};
    for (let i = 0; i < obj.length; i++) {
      support[obj[i].key] = transformBack(obj[i].value)
    }
    return support;
  }
  return obj;
}

var dataBack = {};
tableData.forEach(o => dataBack[o.key] = transformBack(o.value));

console.log(dataBack);

#2

This function will map your object to an array when you call objVar.mapToArray(), by using Object.keys() and .map()

通过使用Object.keys（）和.map（）调用objVar.mapToArray（）时，此函数将对象映射到数组

Object.prototype.mapToArray = function() {
  return Object.keys(this).map(function(v) {
    return { key: v, value: this[v] };
  }.bind(this));
}

#3

Let's have some fun and turn our object into iterable to do the job as follows;

让我们有一些乐趣，把我们的对象变成可迭代的，按照以下方式完成工作;

var input = {city:"stuttgart", street:"randomstreet", number: "42"};
   output = [];
input[Symbol.iterator] = function*(){
                           var ok = Object.keys(this),
                                i = 0;
                           while (i < ok.length) yield {key : ok[i], value: this[ok[i++]]};
                         };
output = [...input];
console.log(output);

#4

I would do something like this:

我会做这样的事情：

var dataObj = {
  city:"stuttgart",
  street:"randomstreet",
};

function toKeyValue(obj) {
  var arr = [];
  for (var key in obj) {
    if(obj.hasOwnProperty(key)) {
      arr.push({'key': key, 'value': obj[key]});
    }
  }
  return arr;
}

var arrayKeyValue = toKeyValue(dataObj);
console.log(arrayKeyValue);

#1