Lodash：如何创建一个具有新对象结构的数组

Question

假设我有一个数组：

var users = [
  { user: 'barney', age: 36, active: true },
  { user: 'fred',  age: 40, active: false },
  { user: 'travis', age: 37, active: true}
];

我想创建一个新数组：

var users = [
  {person: {item : { user: 'barney', age: 36, active: true }}},
  {person: {item : { user: 'fred',  age: 40, active: false }}},
  {person: {item : { user: 'travis', age: 37, active: true}}}
];

显然，可以使用for循环来创建新数组，但我在项目中使用lodash来操作数组。

只是想知道是否有任何lodash解决方案。

- Phong Vu

Answer 1

你可以使用 Array#map 来创建一个新的结构。

var users = [{ user: 'barney', age: 36, active: true }, { user: 'fred',  age: 40, active: false }, { user: 'travis', age: 37, active: true}],
    result = users.map(item => ({ person: { item } }));

console.log(result);

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

- Nina Scholz

---

我认为之前的多行格式更易读 :-) - Lyubomir

Answer 2

您也可以通过 Array.from 来实现，因为它的第二个参数是一个真正的 Array.map 函数：

var users = [ { user: 'barney', age: 36, active: true }, { user: 'fred', age: 40, active: false }, { user: 'travis', age: 37, active: true} ];

const result = Array.from(users, i => ({ person: {item: i} }))

console.log(result)

- Akrion

Answer 3

你可以使用 array.map，它将创建一个新的数组，并且由于你可以在单行中使用箭头函数，因此可以避免使用 return 和使用 es6 解构，你可以以以下方式实现。

我希望它能解决你的问题。

var users = [
  { user: 'barney', age: 36, active: true },
  { user: 'fred',  age: 40, active: false },
  { user: 'travis', age: 37, active: true}
];

var newUsers = users.map(o => ({person: {item: o}}))

console.log("new array with inside person and inside item property", newUsers)

- Learner

Answer 4

如果您正在使用 Lodash，则可以使用 _.map。

var users = [
  { user: 'barney', age: 36, active: true },
  { user: 'fred',  age: 40, active: false },
  { user: 'travis', age: 37, active: true}
];

var convertedUsers = _.map(users, user => ({person: {item : {user}}}));

console.log(convertedUsers);

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

请注意，这意味着它将重复使用原始对象，因此对这些对象的更改将传递到映射输出中：

var users = [
  { user: 'barney', age: 36, active: true },
  { user: 'fred',  age: 40, active: false },
  { user: 'travis', age: 37, active: true}
];

var convertedUsers = _.map(users, user => ({person: {item : user}}));

users[0].user = 'betty'; //change barney -> betty

//change is reflected in the already mapped output
console.log(convertedUsers[0].person.item.user);

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

如果这样不理想的话，你可以创建具有相同内容的新对象：

var users = [
  { user: 'barney', age: 36, active: true },
  { user: 'fred',  age: 40, active: false },
  { user: 'travis', age: 37, active: true}
];

var convertedUsers = _.map(users, user => ({person: {item : {...user}}})); //note the {...users}

users[0].user = 'betty'; //change the original barney -> betty

//no change in the mapped result
console.log(convertedUsers[0].person.item.user);

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

您也可以使用普通的JavaScript和 Array#map 来完成完全相同的操作：

var users = [
  { user: 'barney', age: 36, active: true },
  { user: 'fred',  age: 40, active: false },
  { user: 'travis', age: 37, active: true}
];

var convertedUsersReusingObjects = users.map(user => ({person: {item : user}}));

var convertedUsersWithNewObjects = users.map(user => ({person: {item : {...user}}})) ;

console.log("convertedUsersReusingObjects:",  convertedUsersReusingObjects);

console.log("----------------");


console.log("convertedUsersWithNewObjects:",  convertedUsersWithNewObjects);

console.log("----------------");

users[0].user = 'betty'; //change the original barney -> betty

console.log("reusing objects: ", convertedUsersReusingObjects[0].person.item.user);
console.log("new objects: ",  convertedUsersWithNewObjects[0].person.item.user);

- VLAZ