Question

我有一个对象数组，每个对象都有标题，内容和contentHTML。我想映射这个数组并创建一个新对象。新对象将采用title属性的值，并将其用作每个content和contentHTML属性的父级属性。下面的代码似乎只在获取数组中的最后一个对象。

结果是：

{
  "sidebar": {
      "text": "Some sidbar text here",
      "content": "<p>Some sidebar text here</p>"
    }
}

预期结果是：

{
    header: {
        text: "Some header text here",
        content: "<p>Some header text here</p>"
    },
    footer: {
        text: "Some footer text here",
        content: "<p>Some footer text here</p>"
    },
    sidebar: {
        text: "Some sidbar text here",
        content: "<p>Some sidebar text here</p>"
    }
}

var originalObj = [{
    title: "header",
    content: "Some header text here",
    contentHTML: "<p>Some header text here</p>"
  },
  {
    title: "footer",
    content: "Some footer text here",
    contentHTML: "<p>Some footer text here</p>"
  },
  {
    title: "sidebar",
    content: "Some sidbar text here",
    contentHTML: "<p>Some sidebar text here</p>"
  }
];
let newObject = {};
for (let item of originalObj) {
  var tempObj = {
    [item.title]: {
      text: item.content,
      content: item.contentHTML
    }
  };
  newObject = tempObj;
}
console.log(newObject);

Answer 1

您每次执行操作时都会用新值覆盖对象

var tempObj = {//object keys}

使用扩展运算符复制以前的值。 Spread运算符循环遍历对象的可迭代值并扩展它们。

var originalObj = [
	{
		title: "header",
		content: "Some header text here",
		contentHTML: "<p>Some header text here</p>"
	},
	{
		title: "footer",
		content: "Some footer text here",
		contentHTML: "<p>Some footer text here</p>"
	},
	{
		title: "sidebar",
		content: "Some sidbar text here",
		contentHTML: "<p>Some sidebar text here</p>"
	}
];
let newObject = {};
for (let item of originalObj) {
	var tempObj = {
    ...tempObj,
		[item.title]: {
			text: item.content,
			content: item.contentHTML
		}
	};
	newObject = tempObj;
}
console.log(newObject);

Answer 2

此替代方法使用函数reduce构建所需的输出。

var originalObj = [	{		title: "header",		content: "Some header text here",		contentHTML: "<p>Some header text here</p>"	},	{		title: "footer",		content: "Some footer text here",		contentHTML: "<p>Some footer text here</p>"	},	{		title: "sidebar",		content: "Some sidbar text here",		contentHTML: "<p>Some sidebar text here</p>"	}],
    newObject = originalObj.reduce((a, {title, content: text, contentHTML: content} = obj) => {
      return Object.assign(a, {[title]: {text, content}});
    }, Object.create(null));

console.log(newObject);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

您正在用newObject的内容覆盖tempObj，如果您像这样直接写到newObject会容易得多。

var originalObj = [{
    title: "header",
    content: "Some header text here",
    contentHTML: "<p>Some header text here</p>"
  },
  {
    title: "footer",
    content: "Some footer text here",
    contentHTML: "<p>Some footer text here</p>"
  },
  {
    title: "sidebar",
    content: "Some sidbar text here",
    contentHTML: "<p>Some sidebar text here</p>"
  }
];
let newObject = {};
for (let item of originalObj) {
  newObject[item.title] = {
    text: item.content,
    content: item.contentHTML
  }
}
console.log(newObject);

我希望这是有道理的

Answer 4

您也可以使用Array#reduce来做类似的事情：

var originalObj = [
	{
		title: "header",
		content: "Some header text here",
		contentHTML: "<p>Some header text here</p>"
	},
	{
		title: "footer",
		content: "Some footer text here",
		contentHTML: "<p>Some footer text here</p>"
	},
	{
		title: "sidebar",
		content: "Some sidbar text here",
		contentHTML: "<p>Some sidebar text here</p>"
	}
];

var output = originalObj.reduce((accumulator, ele) => {
  accumulator[ele['title']] = {'text': ele['content'], 'content': ele['contentHTML']}
  return accumulator;
}, {})

console.log(output);

Answer 5

已回答，但如果仍然有帮助：

var newObject = {};
for (let item of originalObj) {
      newObject[item.title] = {
      text: item.content,
      content: item.contentHTML
    }
  };

遍历对象数组并创建一个新对象

5 个答案: