Деструктуризация массива объектов в js

Question

Входные данные.

const users = [
    {name:'John',age:26,skills:{js:'good',html:'cool'}},
    {name:'Ivan',age:29,skills:{js:'cool',html:'low'}}
    ]

Есть массив объектов - список юзеров с именем, годом рождения и набором скиллов.

Посредством деструктуризации, хочу получить в новый users2 тот-же список юзеров, но чтобы у Ивана навык html был - super

Как это сделать?

пытаюсь так:

let user2 = [...users,users[0].skills:{html:'super'}]

не работает.

И я понимаю что эта конструкция не должна так работать. Может кто наставить на путь истинный? Я так понимаю, массив можно перебрать через map и изменить то что мне нужно точечно, а потом записать в user2, но хотелось-бы увидеть лаконичное решение через деструктуризацию.

Answer 1

Допустим, у нас есть объект user, который содержит .profile:

const user = {
  profile: { ... }
}

И нам нужно создать переменную, которая будет равна user.profile и называться будет соответственно.

Можно просто вытянуть свойство:

const user = {
  id: '2ab',
  profile: {
    name: '1',
    surname: '2'
  }
}

const profile = user.profile;

console.log(profile);

А можем воспользоваться деструктуризацией:

const user = {
  id: '2ab',
  profile: {
    name: '1',
    surname: '2'
  }
}

const { profile } = user;

console.log(profile);

В вашей ситуации просто не нужна, вот как будет выглядеть запись:

let user2 = [...users, users[0].skills.html = 'super']

Answer 2

Простые объекты "в лоб" можно копировать через JSON.parse(JSON.stringify(obj)) — Хорошо бы завернуть это дело в функцию и везде вызывать её, чтобы при необходимости усложнить обработку - пришлось менять только код функции.

const a = [
  {name: 'John', age: 26, skills: {js: 'good', html: 'cool'}},
  {name: 'Ivan', age: 29, skills: {js: 'cool', html: 'low'}},
];

const b = deep_copy(a);
b[1].skills.html = "super";

console.log(b[1]); // html: "super"
console.log(a[1]); // Не изменилось


function deep_copy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

code { white-space: nowrap !important }

БЛОГ НА HUSL

Деструктуризация массива объектов в js

Ответы (2 шт):