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来处理项目中的数组。

想知道对此是否有任何破破烂烂的解决方案。

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; }

Answer 2

您还可以通过Array.from进行此操作，因为它的2nd参数是实际的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)

Answer 3

您可以使用array.map来创建一个新数组，并且由于可以在一行中使用箭头功能，因此可以避免返回，而使用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)

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);

Lodash：如何使用新的对象结构创建数组

4 个答案: