Js создать объект: Объекты: основы

Объекты | JavaScript Camp

Объекты — это как шкаф📦 для вещей, предназначеный для хранения 📦 и транспортировки других типов данных. JavaScript спроектирован на основе простой парадигмы. В основе концепции лежат простые объекты. Объект — это набор свойств, и каждое свойство состоит из имени(ключ) и значения, ассоциированного с этим именем. Значением свойства может быть функция⚙️, которую можно назвать методом объекта или любой другой тип.

В этой статье рассмотрим самые базовые свойства объектов JavaScript, создание🏗️ и изменение, перечисление свойств.

Объект в JavaScript представляет собой обычный ассоциативный массив или, иначе говоря, «хэш». Он хранит любые соответствия "ключ : значение" и имеет несколько стандартных методов.

Объекты в JavaScript как и объекты в реальной жизни (человек👨, автобус, здание и т.д.) имеют несколько именованных (ключевых🗝️) параметров (возраст, имя, цвет волос, статус) с конкретными значениями (15, John, black, ‘true’) ✅ :

 let obj = {
age: 15,
name: 'John',
color: 'black',
student: true
}

Метод объекта в JavaScript — это просто функция️, которая добавлена в ассоциативный массив.

function learnJavaScript() { let obj = { // свойства : значения age: 15, name: ‘John’, // метод : функция say: () => ‘Hello!’ } return obj.say() }

function learnJavaScript() {
let obj = {
// свойства : значения
age: 15,
name: 'John',
// метод : функция
say: () => 'Hello!'
}
return obj.say()
}

Loading…

Видео​

Создание объекта​

В компьютере🖥️ мы можем представить объект в виде шкафа📦 с подписанными на нём именами-свойствами (ключи доступа). Внутри шкафа📦 ящики🧰 — данные (конкретная информация) и даже могут быть более мелкие объекты, по аналогии вещи. По ключу нужный ящик🧰 легко найти, удалить или добавить (записать) в него новое значение.

Это два 2️⃣ варианта создания🏗️ пустого объекта:

// эквивалентные записи
let obj = {}
let person = new Object()

Второй вариант очень редко используется в практике.

Расширенное создание​

Свойства можно указывать непосредственно при создании🏗️ объекта, через список в фигурных скобках вида {…,

ключ : значение, …} и создавать🏗️ сложные объекты:

function learnJavaScript() { const obj = { age: 15, name: ‘John’, color: ‘black’, passport: { serial: 5721, number: 258963, date: ‘27.10.2015’ }, student: true } return obj.passport.date }

function learnJavaScript() {
const obj = {
age: 15,
name: 'John',
color: 'black',
passport: {
serial: 5721,
number: 258963,
date: '27.10.2015'
},
student: true
}
return obj.passport.date
 
}

Loading…

Созданый🏗️ объект содержит пять свойств с конкретными значениями, одно из которых паспортные данные, являющийся встроенным объектом. Обратите внимание, как идет обращение к дальним свойствам или методам объекта. Попробуйте вернуть номер паспорта.

Добавление свойств​

Есть два 2️⃣ синтаксиса добавления свойств в объект. 1️⃣ Первый — точка, второй — квадратные скобки:

// эквивалентные записи
obj.age = 15
obj['age'] = 15

function learnJavaScript() { let obj = { name: ‘John’ } obj.age = 15 return obj.age }

function learnJavaScript() {
let obj = {
name: 'John'
}
obj.age = 15
return obj.age
}

Loading…

Квадратные скобки используются в основном, когда название свойства (properties) находится в переменной 🔔 :

let nameProp = 'age'
obj[nameProp] = 15

Здесь через переменную 🔔 nameProp задаем имя свойства "age", являющийся ключом в ассоциативном массиве, по которому лежит значение 15.

function learnJavaScript() { let obj = { name: ‘John’ } let nameProp = ‘age’ obj[nameProp] = 15 return obj.

age }

function learnJavaScript() {
let obj = {
name: 'John'
}
let nameProp = 'age'
obj[nameProp] = 15
return obj.age
}

Loading…

Доступ к свойствам​

Доступ к свойству осуществляется при обращении к нему 👇 :

function learnJavaScript() { let obj = {} // объект пустой obj.age = 17 // эквивалент obj[‘age’]=17 или сразу obj={age:17} let result1 = obj.age // Вариант 1 let result2 = obj[‘age’] // Вариант 2 return result1 + ‘ или ‘ + result2 }

 
function learnJavaScript() {
let obj = {} // объект пустой
obj.age = 17 // эквивалент obj['age']=17 или сразу obj={age:17}
let result1 = obj.age // Вариант 1
let result2 = obj['age'] // Вариант 2
return result1 + ' или ' + result2
}

Loading…

Если у объекта нет такого свойства, то результат будет 'undefined'. Проверьте это в консоле браузера.

let obj = {}
obj.nokey

Никакой ошибки🙅‍♂️ при обращении по несуществующему свойству не будет, просто вернется специальное значение undefined. При отсутствии внутри функции⚙️ ключевого 🗝️ слова

return, так же вернется значение undefined — отсутствие чего-либо.

Удаление свойств​

Удаляет ➖ свойство оператор delete. Попробуйте удалить из прошлого примера номер паспорта:

Создайте в консоле объект из прошлого примера.

const obj = {
age: 15,
name: 'John',
color: 'black',
passport: {
serial: 5721,
number: 258963,
date: '27.10.2015'
},
student: true
}

А теперь удалите вложеный объект passport

delete obj.passport

Теперь если обратиться к нему, то в результате получим undefined

obj.passport

Методы объектов​

Как и в других языках👅, у объектов JavaScript есть методы.

Например, создадим🏗️ объект sport сразу с методом run:

function learnJavaScript() { let sport = { run: n => ‘John’ + ‘ пробежал ‘ + n + ‘ метров!’ } return sport.run(300) }

function learnJavaScript() {
let sport = {
run: n => 'John' + ' пробежал ' + n + ' метров!'
 
}
return sport.run(300)
}

Loading…

Добавление метода​

Добавление метода в существующий объект — просто, присвоим функцию⚙️ function(n) { ... } свойству sport.run.

function learnJavaScript() { let sport = {} sport.run = n => ‘Спортсмен пробежал ‘ + n + ‘ метров и это был ‘ + ‘Nikita’ return sport.run(350) }

function learnJavaScript() {
let sport = {}
sport.run = n => 'Спортсмен пробежал ' + n + ' метров и это был ' + 'Nikita'
return sport.
  run(350)
}

Loading…

Здесь не идет речь о классах, создании🏗️ экземпляров и тому подобном. Просто — в любой объект в любое время можно добавить новый метод или удалить существующий.

Перебор свойств объекта​

Для перебора всех свойств объекта используется специальный вид конструкции for .. in:

for(let key in obj) {
// key - название свойства
// obj[key] - значение свойства
...
}

Например 👇 :

function learnJavaScript() { let result = » const obj = { age: 15, b: ‘true’, color: ‘red’ } for (let key in obj) { result += key + ‘: ‘ + obj[key] + ‘ ‘ } return result }

function learnJavaScript() {
let result = ''
const obj = {
age: 15,
b: 'true',
color: 'red'
}
for (let key in obj) {
result += key + ': ' + obj[key] + ' '
}
return result
}

Loading. ..

И по секрету, если честно, практически любая переменная 🔔 является мини-объектом в среде JavaScript. Так, что не бойтесь их применять.

React Native​

Например нам нужно отобразить имя из объекта obj, то мы это сделаем так:

Попробуйте вывести другие данные, например серию паспорта.

Проблемы?​

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы​

Пустой объект создается командой:

1. let obj = {}
2. function obj()
3. let x = 10

Объект хранит соответствия:

1. имя : фамилия
2. переменная = значение
3. ключ : значение

Синтаксиc присвоения значения конкретному ключу (свойству):

1. color() = "green"
2. obj.color = "red"
3. function color () => "yellow"

Метод объекта в JavaScript — это

1. Просто функция, добавленная в ассоциативный массив
2. Внешняя функция
3. Переменная описанная вне объекта

Перебор свойств объекта

1. for (let i = 0; i <= 100; i++) { sum += i }
2. for(let key in obj) { }
3. while (условие) { }

В JavaScript объект — это набор свойств (именованных значений).

1. true
2. false

Когда свойство объекта является функцией, оно носит специальное имя: mothered.

1. true
2. false У него особое название: класс
3. false У него особое название: метод

Для того чтобы понять, на сколько вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в нашем телеграм боте.

Ссылки:​

1. MDN web doc. Developer.mozilla.org — Статья «Типы данных JavaScript и структуры данных»
2. MDN web doc. Developer.mozilla.org — Статья «Инициализация объектов»
3. Статья «Object Types»
4. Статья «Объекты», сайт Learn.javascript.ru
5. Код для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript — Jeremy Moritz

Contributors ✨​

Thanks goes to these wonderful people (emoji key):

Dmitriy K. 📖

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨

Введение | Vue.js

Примечание

Уже изучили Vue 2 и хотите узнать, что нового во Vue 3? Посмотрите руководство по миграции!

Что такое Vue.js?

Vue (произносится /vjuː/, примерно как view) — прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создавался пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), упрощая интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для разработки сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его в комбинации с современными инструментами и дополнительными библиотеками (opens new window).

Если хотите узнать о Vue больше, прежде чем начать — посмотрите видео с рассказом об основных принципах работы на небольшом примере проекта.

Посмотрите бесплатный видео-курс на Vue Mastery

Начало работы

Установка

Совет

В руководстве предполагаются знания HTML, CSS и JavaScript на среднем уровне. Для новичков во фронтенд-разработке сразу начинать изучение с фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.

Самый простой способ попробовать Vue.js — пример Hello World (opens new window). Открывайте его в соседней вкладке и практикуйтесь, изменяя по ходу изучения руководства.

На странице установки перечислено несколько вариантов как устанавливать Vue. Примечание: начинающим программистам не рекомендуем стартовать с vue-cli, особенно если ещё не знакомы с инструментами сборки на основе Node.js.

Декларативная отрисовка

В ядре Vue.

js находится система, позволяющая декларативно отрисовывать данные в DOM с помощью простого синтаксиса шаблонов:

<div>
  Счётчик: {{ counter }}
</div>

1
2
3

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}
Vue.createApp(Counter).mount('#counter')

1
2
3
4
5
6
7
8
9

Вот и первое Vue-приложение! Хоть и выглядит как простая отрисовка строкового шаблона, но «под капотом» Vue выполнил немало работы. Данные и DOM теперь реактивно связаны. Как в этом убедиться? Посмотрите на пример ниже, где свойство

counter увеличивается каждую секунду и увидите, как изменяется DOM:

const Counter = {
  data() {
    return {
      counter: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

Counter: 0

Кроме интерполяции текста также можно связывать данные с атрибутами элементов:

<div>
  <span v-bind:title="message">
    Наведи на меня курсор на пару секунд, чтобы
    увидеть динамически связанное значение title!
  </span>
</div>

1
2
3
4
5
6

const AttributeBinding = {
  data() {
    return {
      message: 'Страница загружена ' + new Date(). toLocaleString()
    }
  }
}
Vue.createApp(AttributeBinding).mount('#bind-attribute')

1
2
3
4
5
6
7
8
9

See the Pen Attribute dynamic binding by Vue (@Vue) on CodePen.

Здесь повстречались с чем-то новым. Атрибут v-bind называется директивой. Директивы именуются с префикса v-, который обозначает, что это специальные атрибуты Vue, и, как уже можно догадаться, они добавляют особое реактивное поведение отрисованному DOM. В примере выше директива говорит «сохраняй значение title этого элемента актуальным при изменении свойства message в текущем активном экземпляре».

Работа с пользовательским вводом

Чтобы позволить пользователям взаимодействовать с приложением, можно использовать директиву v-on для обработчиков событий, которые будут вызывать методы экземпляра:

<div>
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Перевернуть сообщение</button>
</div>

1
2
3
4

const EventHandling = {
  data() {
    return {
      message: 'Привет, Vue. js!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}
Vue.createApp(EventHandling).mount('#event-handling')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

See the Pen Event handling by Vue (@Vue) on CodePen.

Обратите внимание, в методе не трогаем DOM и обновляем только состояние приложения — всеми манипуляциями с DOM занимается Vue, а в коде фокусируемся на логике работы.

Vue также предоставляет директиву v-model, которая реализует двустороннюю привязку между элементом формы и состоянием приложения:

<div>
  <p>{{ message }}</p>
  <input v-model="message" />
</div>

1
2
3
4

const TwoWayBinding = {
  data() {
    return {
      message: 'Привет, Vue!'
    }
  }
}
Vue. createApp(TwoWayBinding).mount('#two-way-binding')

1
2
3
4
5
6
7
8
9

See the Pen Two-way binding by Vue (@Vue) on CodePen.

Условия и циклы

Управлять присутствием элемента в DOM тоже просто:

<div>
  <span v-if="seen">Сейчас меня видно</span>
</div>

1
2
3

const ConditionalRendering = {
  data() {
    return {
      seen: true
    }
  }
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')

1
2
3
4
5
6
7
8
9

Пример выше демонстрирует возможность связывания данных не только с текстом и атрибутами, но и со структурой DOM. Кроме того, Vue имеет мощную систему анимаций, которая может автоматически применять эффекты переходов при добавлении, обновлении или удалении элементов.

В примере ниже можно изменять значение seen с true на false чтобы увидеть эффект:

See the Pen Conditional rendering by Vue (@Vue) on CodePen.

Есть и некоторое количество других директив, каждая из которых обладает своей особой функциональностью. Например, директиву v-for можно использовать для отображения списка элементов, используя данные из массива:

<div>
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

1
2
3
4
5
6
7

const ListRendering = {
  data() {
    return {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  }
}
Vue. createApp(ListRendering).mount('#list-rendering')

1
2
3
4
5
6
7
8
9
10
11
12
13

See the Pen List rendering by Vue (@Vue) on CodePen.

Композиция приложения из компонентов

Компонентная система является ещё одной важной концепцией во Vue, потому что это абстракция, которая позволяет создавать большие приложения, состоящие из небольших, автономных и часто переиспользуемых компонентов. Если задуматься, то почти любой тип интерфейса приложения можно абстрактно представить в виде дерева компонентов:

Компонент во Vue — по сути экземпляр с предустановленными опциями. Его регистрация также проста: нужно создать объект компонента, как это уже делали с объектом app, и указать его в родительской опции components:

const TodoItem = {
  template: `<li>Это одна из задач</li>`
}
// Создаём Vue-приложение
const app = Vue. createApp({
  components: {
    TodoItem // Регистрируем новый компонент
  },
  ... // Остальные свойства для компонента
})
// Монтируем приложение Vue
app.mount(...)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

После этого можно использовать его в шаблоне другого компонента:

<ol>
  <!-- Создание экземпляра компонента todo-item -->
  <todo-item></todo-item>
</ol>

1
2
3
4

Пока что во всех элементах списка будет один и тот же текст, что не очень-то интересно. Должна быть возможность передавать данные в дочерние компоненты из родительской области видимости. Доработаем компонент, чтобы он принимал входной параметр:

const TodoItem = {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
}

1
2
3
4

Теперь можно передавать свой текст для каждого из компонентов с помощью v-bind:

<div>
  <ol>
    <!--
      Теперь можно передавать каждому компоненту todo-item объект с информацией
      о задаче, который может динамически изменяться.  Также каждому компоненту
      определяем "key", назначение которого разберём далее в руководстве.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const TodoItem = {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
}
const TodoList = {
  data() {
    return {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
  },
  components: {
    TodoItem
  }
}
const app = Vue.createApp(TodoList)
app.mount('#todo-list-app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

See the Pen Intro-Components-1 by Vue (@Vue) on CodePen.

Конечно, это несколько надуманный пример, но приложение удалось разделить на два блока поменьше. Дочерний компонент достаточно хорошо изолирован от родительского интерфейсом входных параметров. Теперь можно дорабатывать компонент <todo-item>, изменяя его шаблон и логику и не затрагивать работу родительского приложения.

В больших приложениях разделение на компоненты становится жизненной необходимостью для сохранения управляемости разработки. Гораздо подробнее с компонентами продолжим разбираться далее в руководстве, но и сейчас можно взглянуть на (вымышленный) пример того, как может выглядеть шаблон приложения, использующего компоненты:

<div>
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

1
2
3
4
5
6
7

Отношение к пользовательским элементам

Можно заметить, что компоненты Vue похожи на пользовательские элементы, являющиеся частью спецификации веб-компонентов (opens new window). Некоторые элементы дизайна компонентов Vue (например, API слотов) действительно разрабатывались под влиянием этой спецификации ещё до того, как она была реализована в браузерах.

Но главное отличие в том, что компонентная модель Vue разработана как часть целостного фреймворка, предоставляющего множество дополнительных возможностей, необходимых при создании нетривиальных приложений, например, реактивный шаблонизатор и управление состоянием — оба этих аспекта не покрываются спецификацией.

Vue также предоставляет отличную поддержку как для использования, так и для создания пользовательских элементов. Более подробную информацию можно найти в разделе Vue и веб-компоненты.

Готовы к большему?

В данный момент, мы пока что лишь вкратце затронули основные функции ядра Vue.js. В следующих разделах руководства мы будем разбирать более подробно эти, и другие интересные возможности. Поэтому, не забудьте прочитать его целиком!

4 способа создания объектов в JavaScript | Кристиан Салческу | Frontend Essentials

4 способа создания объектов в JavaScript | Кристиан Салческу | Основы внешнего интерфейса | Medium

Литералы объектов, прототипы, классы, фабричные функции и многое другое

Cristian Salcescu

·

Follow

Опубликовано в

·

6 мин чтения

900 04 ·

28 апреля 2021 г.

Фото Jazmin Quaynor на Unsplash

В этой статье будут описаны несколько способов создания объектов в JavaScript. Это:

• Литералы объектов
• Object.create()
• Классы
• Фабричные функции

Автор Cristian Salcescu

4,5 тыс. подписчиков

· Редактор

Автор функционального программирования на JavaScript. С энтузиазмом делится идеями. https://www.amazon.com/gp/product/B08X3TPCQ8

Еще от Cristian Salcescu и Frontend Essentials

Cristian Salcescu

в

Как создать цифровые часы с помощью хуков React

Быстрый старт с хуками useState и useEffect

·4 минуты чтения·28 июля 2021 г.

Cristian Salcescu

90 004 в

Как условно отключить Кнопка «Отправить» в функциональном компоненте

Связанное состояние, производное состояние и т.

д.

·3 мин чтения·16 мая 2022 г.

Кристиан Салческу

в

900 02 Как расположить элемент Div над и относительно Еще

Быстрый старт с абсолютным и относительным позиционированием

·Чтение за 4 минуты·9 июля 2021 г.

Cristian Salcescu

в

объектов

метод массива карт , функция отображения, функции высшего порядка и многое другое

·Чтение через 3 мин·20 июля 2021 г.

Просмотреть все от Cristian Salcescu

Рекомендовано на Medium

React Dojo

Шпаргалка по техническому интервью для фронтенд-инженера (общие вопросы по программированию)

Есть много модных технических слов, но вы можете чувствовать себя слишком неловко😛, чтобы спросить… так что вот список слов, которые ОБЯЗАТЕЛЬНО ЗНАЙТЕ, чтобы оставаться в игре.

·6 минут чтения·16 марта

Andreas Sujono

10 самых каверзных вопросов по Javascript, которые часто задают интервьюеры

10 самых каверзных вопросов по Javascript, которые часто задают интервьюеры.

Убедитесь, что вы знаете их все!

·8 мин чтения·17 декабря 2022 г.

Списки

Истории, которые помогут вам расти как разработчику программного обеспечения

19 историй·18 сохранений

Лидерство

30 историй· 5 сохранений

Как бежать более осмысленно Встречи 1:1

11 историй·6 сохранений

Истории, которые помогут вам повысить уровень на работе

19 историй·12 сохранений

Reed Barger

in

7 React Projects для начинающих в 2023 году (+Код)

Вы готовы начать создавать простые проекты с помощью React, но не знаете, что делать. С чего начать?

·6 минут чтения·11 января

FullStackTips

20 вопросов для собеседования по Javascript с ответами по коду.

Я собираюсь начать серию вопросов для интервью по JavaScript, которые могут помочь разработчикам младшего и среднего уровня.

·6 минут чтения·31 января

Samuele

in

Как преобразовать строку в Camel Case в JavaScript

Или всегда есть более разумное решение, если вы знаете, как использовать регулярное выражение!

·5 мин чтения·9 декабря 2022 г.

Philosophical Technique

9 проектов, которые помогут вам стать мастером интерфейса в 2023 г. ты новичок или ветеран отрасли, постоянно обновляющий новые концепции, языки и…

·5 мин чтения·3 февраля

См. дополнительные рекомендации

Статус

Карьера

Преобразование текста в речь

Разница между Object.assign() и Object.create() в JavaScript — Серия интервью JS | by Shaik Wasef

Опубликовано в

·

Чтение: 4 мин.

·

5 июня 2021 г.

Разница между Object. создать() и объект. assign() — один из самых часто задаваемых вопросов на собеседованиях по JavaScript. Следовательно, необходимо знать различия между двумя методами, а также знать тонкости их реализации.

В этой статье мы рассмотрим различия между Object. назначить() и объект. create() в деталях. Так что держитесь и начнем.

Объект. assign(): Объект. assign() используется для копирования перечисляемых свойств (свойства, которые могут повторяться или для которых свойство перечисления установлено в true , проверьте это!! ) из исходного объекта в целевой объект. А также Объект. Метод assign() возвращает вновь сформированный целевой объект.

Проверьте следующий пример:

Запустите в Fiddle: https://jsfiddle.net/ShaikWasef/e93cm5xu/5/

В приведенном выше примере показано, как Object. assign() возвращает целевой объект после копирования значений свойств цели и источника. ReturnTarget и target являются одними и теми же объектами и содержат ссылку на одни и те же пары ключ-значение. Однако assign не копирует свойства по ссылке, поэтому изменение целевых свойств не изменяет свойства источника, как показано ниже.

Беги в скрипке: https://jsfiddle.net/ShaikWasef/4xsden5w/

В дополнение к этому свойства источника перезаписываются в случае совпадения ключей источника и цели во время выполнения Object. assign(), как показано в приведенных выше примерах.

Примечание. Для создания новой копии исходного объекта используйте следующий синтаксис: Object.assign({},source)

Object.create() : Object.create() создать новый объект, используя существующий объект в качестве прототипа. Это означает, что возвращаемый объект наследует свойства всех прототипов, связанных с исходным объектом, в дополнение к свойствам самого исходного объекта. Таким образом, целевой объект — это не просто копия исходного объекта. Проверьте приведенный ниже пример 9.0005 Запустите в Fiddle: https://jsfiddle.net/ShaikWasef/kcg08ypn/27/

Рассмотрим следующий фрагмент кода, в котором используется Object. assign() для создания копии объекта и угадывания вывода.

Запуск в Fiddle: https://jsfiddle.net/ShaikWasef/yz084oje/8/

Если вы запускали скрипт, вы должны были заметить, что значение obj также изменяется при изменении targetObj.c.d.

Причина в том, что Object. assign() создает только поверхностную копию исходного объекта. Если исходное значение содержит ссылку на объект, ссылка на этот объект копируется. Следовательно, обж. c.d также меняется на «изменить». Для создания глубокой копии вам придется написать отдельный код, ссылку на который можно найти здесь MDN DOCS.

Теперь рассмотрим следующий фрагмент кода, в котором используется Object. create() для создания нового объекта с прототипным наследованием.

Запустите в Fiddle: https://jsfiddle.net/ShaikWasef/6j17cmgp/1/

Что ж, приведенный выше фрагмент кода выдает тот же результат, что и предыдущий.

Причина Объект. create() делает это из-за того, как работает цепочка прототипов. В цепочке прототипов JS есть два правила (формально нигде не определены, но были изложены для лучшего понимания).

Правило 1: Чтение свойства из дочернего объекта:
Когда вы пытаетесь получить доступ к свойству из дочернего объекта, Javascript будет искать по цепочке прототипов до тех пор, пока не найдет свойство, иначе вернет undefined, если не будет найдено.

Правило 2: Запись свойства в дочерний объект:
Сначала он попытается найти объект, которому принадлежит ваше целевое свойство, а затем напрямую установить это свойство для этого объекта.

Следовательно, если вы измените свойство «a» targetObj, то JS напрямую установит свойство targetObj. Однако, если вы измените свойство «d», оно устанавливает значение «d» как для targetObj, так и для Obj, поскольку «d» является свойством значения объекта ключа «c», и, следовательно, значение «d» устанавливается для как targetObj, так и Obj, поскольку свойство ‘c’ принадлежит им обоим, и оно является целевым объектом свойства ‘d’.

Не стесняйтесь оставлять комментарии и делиться своими знаниями, помогая сообществу JS расти.