JavaScript 변수 할당 및 원어/객체 가변성의 작동 방식에 익숙하지 않은 경우 완전히 설명할 수 없는 오류가 발생할 수 있습니다.저는 이것이 이해해야 할 더욱 중요한 기초인 자바스크립트 주제 중 하나라고 생각합니다. 오늘 여러분과 함께 나누게 되어 기쁩니다!

JavaScript 데이터 유형

JavaScript에는 7가지 기본 데이터 유형이 있습니다[1].

부어true,false

비어 있음null

정의되지 않음undefined

번호(예: 42

BigInt(예: 10000000000000000n

문자열(예: "Hello world"

기호(예: Symbol(11)

또한 JavaScript에는 객체 데이터 유형도 있습니다.자바스크립트는 몇 가지 내장된 대상 데이터 유형이 있는데 가장 유명하고 광범위하게 사용되는 것은 Array,Object와Function이다.

분배, 재분배와 변이

할당, 재할당 및 변이는 JavaScript에서 이해하고 구분해야 할 중요한 개념입니다.하나하나를 정의하고 예를 찾아보자.

과업

숙제를 이해하기 위해서 우리는 간단한 예를 하나 분석합시다.

let name = 'Julie';

여기서 무슨 일이 일어났는지 이해하려면 오른쪽에서 왼쪽으로 가야 한다.

문자열 만들기 "Julie"

변수 만들기name

변수name에 우리가 만든 문자열

에 대한 인용을 분배합니다
따라서 값을 부여하는 것은 변수 이름을 만들고 이 변수가 데이터 (원어든 대상 데이터 형식이든) 를 인용하는 과정으로 여겨질 수 있다.

전임하다

마지막 예를 확장합시다.우선, 우리는 변수 name 에 문자열 "Julie" 에 대한 인용을 분배한 다음, 이 변수를 문자열 "Jack" 에 대한 인용을 다시 분배할 것이다.

let name = 'Julie';
name = 'Jack';

마찬가지로 한 번 또 한 번:

문자열 만들기 "Julie"

변수 만들기name

변수name에 우리가 만든 문자열

에 대한 인용을 분배합니다

문자열 만들기 "Jack"

문자열name에 대한 인용을 다시 분배합니다

만약 이 모든 것이 보기에 매우 기본적이라면, 그것은 괜찮다.우리는 좀 더 복잡한 행동을 이해하기 위해 기초를 다지고 있다. 나는 네가 우리가 이 평론을 해서 매우 기쁠 것이라고 생각한다.

돌변하다

돌연변이는 데이터를 바꾸는 행위다.주의해야 할 것은 지금까지 우리의 예시에서 우리는 어떠한 데이터도 바꾸지 않았다는 것이다.

원시 돌연변이(스포: 너는 안 돼)

사실 앞의 예에서 우리가 원어가 변이하지 않기를 원하더라도 (그것들은 변할 수 없다) 우리는 어떠한 데이터도 변경할 수 없다.문자열을 변경하고 실패에 빠지도록 하겠습니다.

let name = 'Jack';
name[2] = 'e';
console.log(name);
// "Jack"

분명히 우리의 돌연변이 시도는 실패했다.이것은 예상했던 것이다. 우리는 원시 데이터 형식을 간단하게 바꿀 수 없다.

목표가 돌변하다.

우리는 절대로 물체를 변이할 수 있다!예를 하나 봅시다.

let person = {
  name: 'Beck',
};
person.name = 'Bailey';
console.log(person);
// { name: "Bailey" }

그래서 그래, 성공했어.중요한 것은 우리가 "Jack" 변수를 재분배한 적이 없다는 것을 기억하는 것이다. 그러나 우리는 그것이 가리키는 대상을 확실히 바꾸었다.

왜 이 모든 게 중요해

보답을 위해 준비를 하다.나는 너희 두 사람에게 혼합부치와 변이개념의 예를 줄 것이다.

예 1: 원어

let name = 'Mindy';
let name2 = name;
name2 = 'Mork';
console.log(name, name2);
// "Mindy" "Mork"

이것은 결코 이상하지 않다.보다 포괄적인 결과를 위해 마지막 섹션을 자세히 살펴보겠습니다.

문자열 만들기 person

변수 "Mindy"를 만들고 문자열 name에 대한 인용을 할당합니다

변수 "Mindy"를 만들고 문자열 name2에 인용을 할당합니다

우리는 문자열"Mindy"을 만들고 다시 분배"Mork"를 해서 이 문자열을 인용

우리name2console.log와 name를 보았을 때name2는 여전히 인용name하고 "Mindy"는 문자열name2을 인용하고 있는 것을 발견했다"Mork"

예2: 객체

let person = { name: 'Jack' };
let person2 = person;
person2.name = 'Jill';
console.log(person, person2);
// { name: "Jill" }
// { name: "Jill" }

만약 이것이 당신을 놀라게 한다면 컨트롤러나 당신이 가장 좋아하는 JS가 실행될 때 환경에서 시도해 보세요!
왜 이러지?한 번 한 번 합시다.

개체 만들기{ name: "Jack" }

우리는 person 변수를 만들고 만들어진 대상

에 대한 인용을 분배합니다

우리는 person2 변수를 만들고 그것을 person로 설정했다. 이것은 이전에 만든 대상을 가리킨다.(주의: person2 현재 인용 대상은 person 인용 대상과 같다!)

문자열"Jill"을 만들고 name 속성을 인용"Jill"으로 다시 지정해서 대상을 변경합니다

우리console.logperson와 person2일 때 우리는 두 변수가 인용한 메모리 중의 한 대상에 변이가 생겼다는 것을 알아차렸다.

멋있죠?내가 말한 쿨함은 이런 행동을 모르면 두려워할 수도 있다는 뜻이다.

진정한 차이는 변하기 쉽다는 데 있다

앞에서 말한 바와 같이 기본 데이터 형식은 변할 수 없다.이것은 두 변수가 메모리에 있는 같은 기원을 가리키는지 정말 걱정할 필요가 없다는 것을 의미한다. 이 기원은 변하지 않을 것이다.기껏해야 우리는 다른 데이터를 가리키기 위해 변수를 다시 분배할 수 있지만, 이것은 다른 변수에 영향을 주지 않는다.
다른 한편, 대상은 가변적이다.따라서 여러 변수가 메모리의 같은 대상을 가리킬 수 있다는 것을 기억해야 한다.'변이'중의 한 변수는 단어를 잘못 사용하는 변수이다. 당신이 그것을 인용하는 대상을 변이시키면 같은 대상을 인용하는 다른 변수에 반영된다.

이것은 나쁜 일입니까?

이 문제는 너무 미묘해서 간단한 옳고 그름의 답을 줄 수 없다.JavaScript 객체 참조와 가변성을 이해하는 데 많은 시간을 들였기 때문에, 나는 실제로 그것을 이용하여 나의 장점을 발휘했다고 생각한다. 이것은 나에게 있어서 좋은 일이다.그러나 초보자나 진정으로 이런 행위를 이해할 시간이 없는 사람들에게는 상당히 은밀한 버그가 발생할 수 있다.

어떻게 이런 상황의 발생을 방지합니까?

많은 경우, 두 변수가 같은 대상을 인용하기를 원하지 않습니다.이런 상황을 방지하는 가장 좋은 방법은 값을 부여할 때 대상의 복사본을 만드는 것이다.
객체의 복사본을 만들 수 있는 방법은 다음과 같습니다. 객체를 사용합니다.메서드와 확장 연산자를 각각 지정합니다.

let person = { name: 'Jack' };
// Object.assign
let person2 = Object.assign({}, person);
// Spread operator
let person3 = { ...person };
person2.name = 'Pete';
person3.name = 'Betty';
console.log(person, person2, person3);
// { name: "Jack" }
// { name: "Pete" }
// { name: "Betty" }

성공!그러나 주의해야 할 것은 이것은 묘약이 아니다. 왜냐하면 우리는 단지 개인 대상의 얕은 복사본을 만들 뿐이기 때문이다.

천박한 던전?

만약 우리의 대상에 대상이 중첩되어 있다면, 대상과 같은 얕은 복사 메커니즘을 사용할 것이다.assign과spread 조작부호는 루트 대상의 복사본만 만들지만, 더 깊은 차원의 대상은 공유됩니다.다음 예는 다음과 같습니다.

let person = {
  name: 'Jack',
  animal: {
    type: 'Dog',
    name: 'Daffodil',
  },
};
person2 = { ...person };
person2.name = 'Betty';
person2.animal.type = 'Cat';
person2.animal.name = 'Whiskers';
console.log(person);
/*
{
  name: "Jack",
  animal: {
    type: "Cat",
    name: "Whiskers"
  }
}
*/

아크!그래서 우리는 최상위 속성을 복제했지만 대상 트리에서 더 깊은 차원의 대상에 대한 인용을 공유하고 있다.만약 이러한 더욱 깊은 차원의 대상에 변이가 발생한다면, 우리가 방문person하거나 person2 변수를 방문할 때 반영될 것이다.

깊이 복사

어서 구원하러 가자!JavaScript 객체[2]를 깊이 있게 복사하는 방법에는 여러 가지가 있습니다.JSON을 사용하는 두 가지 측면을 소개하겠습니다.stringify/JSON.심층 클론 라이브러리 분석 및 사용

JSON。stringify/JSON。해석

객체가 간단할 경우 JSON.stringify를 사용하여 문자열로 변환한 다음 JSON.parse를 사용하여 JavaScript 객체로 다시 변환할 수 있습니다.

let person = {
  name: 'Jack',
  animal: {
    type: 'Dog',
    name: 'Daffodil',
  },
};
person2 = JSON.parse(JSON.stringify(person));

이게 쓸모가 있을 거야...하지만 유한한 상황에서만만약 대상에 JSON 문자열로 표시할 수 없는 데이터(예를 들어 함수)가 있다면 이 데이터를 잃어버리게 됩니다!만약 목표의 단순성에 대해 자신감이 없다면, 이것은 모험적인 전략이다.

심층 클론 라이브러리

좋은 심층 복제 라이브러리가 많아요.lodash와 그 _.cloneDeep 방법이 바로 이런 예이다.이 라이브러리들은 보통 대상을 옮겨다니며 모든 내용이 복사될 때까지 얕은 층의 복사를 한다.사용자의 입장에서 볼 때 lodash를 가져오고 사용하기 cloneDeep:

let person = {
  name: 'Jack',
  animal: {
    type: 'Dog',
    name: 'Daffodil',
  },
};
person2 = _.cloneDeep(person);

결론

JavaScript의 변수 할당 및 데이터 가변성에 대한 논의는 사실상 빙산의 일각에 불과합니다.나는 너희들에게 이 주제를 계속 연구하고 대상을 인용하고 복제할 때 평등 비교 등 주제의 실험을 진행하도록 초청한다.
참조 자료:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript