Как назначить две переменные одному и тому же объекту

Допустим, у нас есть объект, и мы хотим назначить ему две разные переменные, мы могли бы сделать следующее:

const vala = 100
const valb = { life: 42 }

let a, b
a = b = { propa: vala, propb: valb }

Острый глаз заметит один роковой недостаток с этим кодом: изменение A.Propa Также изменится B.Propa . Это связано с A и b Оба ссылаются на один и тот же объект, может быть легче заметить, если бы мы написали это так:

const vala = 100
const valb = { life: 42 }
const objectToClone = { propa: vala, propb: valb }

let a, b
a = b = objectToClone

Последняя строка говорит, что мы хотим A до равных b и b равному объекттоклон , Итак, оба A и b Ссылка на тот же объект. Это может быть хорошо для ваших целей, но это, вероятно, нежелательное поведение. Давайте рассмотрим несколько решений этой проблемы:

const vala = 100
const valb = { life: 42 }

let a = { propa: vala, propb: valb }
let b = { propa: vala, propb: valb }

Это решение работает, как вы могли бы ожидать. Вы можете изменить A.Propa и B.Propa будет нетронутым; Действительно A и b Ссылка на разные объекты, одинаковых значений.

Однако, если вы ответите «да» на следующий вопрос: Do Propa или Propb ссылаться на объект? , затем вы столкнетесь с другой потенциальной проблемой: объекты в JavaScript передаются ссылкой, а не по значению.

Что это значит? Я укажу на эту статью, чтобы объяснить, но как только вы узнаете, в чем разница, продолжитесь ниже

Итак, теперь вы знаете, что проходит через ссылку, вы заметите в нашем примере, Valb это объект. Наша проблема в том, что если какие -либо изменения произойдут с вал , они будут отражены в A.Propb и B.Propb .

Так как же нам обойти эту проблему?

const vala = 100
const valb = { life: 42 }

let a = JSON.parse(JSON.stringify({ propa: vala, propb: valb }))
let b = JSON.parse(JSON.stringify({ propa: vala, propb: valb }))

Сейчас мы сделали это так, чтобы какие -либо изменения в A.Propb и B.Propb Не влияйте друг на друга, так как теперь они ссылаются на разные объекты, с копиями одинаковых значений. Это благодаря силе Json.parse и Json.stringify , Я укажу на этот пост для обдумывания

Теперь это похоже на очень много кода, просто чтобы назначить две переменные различной копии одного и того же объекта. Так что давайте сделаем лучше!

Сначала у нас есть преимущества объявлений о недвижимости Shorthand Object в ES6:

const vala = 100
const valb = { life: 42 }

let a = JSON.parse(JSON.stringify({ vala, valb }))
let b = JSON.parse(JSON.stringify({ vala, valb }))

Это связано с компромиссом необходимости получить ценности A.Propa , A.Propb , B.Propa и B.Propb с А.Вала , A.Valb В Б. Вала и Б. Валб вместо.

Если бы вы тоже хотели, вы могли бы изменить вала и вал Объявления пропасть и Propb , но это не семантическое, так что, пожалуйста, не делайте этого!

Далее мы можем сделать следующее:

const vala = 100
const valb = { life: 42 }

let a, b
a = JSON.parse(JSON.stringify({ vala, valb })), b = JSON.parse(JSON.stringify(a))

Который мы могли бы рухнуть так:

const vala = 100
const valb = { life: 42 }

let a, b; a = JSON.parse(JSON.stringify({ vala, valb })), b = JSON.parse(JSON.stringify(a))

Если вы хотите сделать еще один шаг вперед, вы можете создать Vscode фрагмент вот так:

{
    "Two reference object copy": {
        "prefix": "troc",
        "body": ["let ${1:a}, ${2:b}; ${1:a} = JSON.parse(JSON.stringify(${3:obj})), ${2:b} = JSON.parse(JSON.stringify(${1:a}))", "${0}"],
        "description": "Declares two references to a copy of an object"
    }
}

Это позволит вам печатать troc и введите имя первого ссылочного объявления, нажмите вкладку, введите вторую вкладку, наконец -то введите объект для клона для каждой ссылки Я надеюсь, что это поможет любому, кто столкнулся с этой проблемой, и хотел решение

Примечание : Я знаю о потенциальном воздействии на производительность использования Json методы Если бы вы хотели, вы могли бы использовать _.clonedeep по Лодаш сделать это еще более лаконичным.

Однако с большинством более высоких занятий программированием меньше кода обычно предполагает более высокое влияние на производительность.

Оригинал: “https://dev.to/aarongeorge/how-to-assign-two-variables-to-the-same-object-19l4”