JavaScript参照タイプのコピー

3101 ワード

呑呑呑呑呑呑呑呑呑


📷単純なキャプチャ画像の収集






let numbers1 = [1,2,3]; //numbers1에 이 배열의 주소값이 할당됨.
let numbers2 = numbers1; //numbers1이 가지고 있는 주소값이 복사가 돼서 numbers2만 변경했지만

numbers2.push(4); //코드를 실행했을 때 numbers1도 변경된 모습 확인.

console.log(numbers1);
console.log(numbers2);
//[1, 2, 3, 4]
[1, 2, 3, 4]
場合によっては、この参照型の値をコピーしたい場合があります.
名前の通り、この数字2を変更したいだけかもしれません.この場合,配列はslice法を用いる.sliceメソッドを呼び出すと、パラメータに値が渡されない場合は、元の値が返すプロパティを使用して、レプリケーションアレイと同じ効果を得ることができます.
let numbers1 = [1,2,3];
let numbers2 = numbers1.slice();

numbers2.push(4);

console.log(numbers1);
console.log(numbers2);
//
[1, 2, 3]
[1, 2, 3, 4]-->numbers2만 변경됨.

😲でも相手はどうなるの?

let course1 = {		//첫번째 코스 데이터를 담은 객체
	title: '파이썬 프로그래밍 기초',
    language: 'Pyton'
};

let course2 = course1; 
				
course2.title = '알고리즘의 정석'; //첫번째 코스 담은 객체를 복사해서 title만 바꿔줬지만 실행해보면 course1도 title이 변경됨.

console.log(course1);
console.log(course2);

//{ title: '알고리즘의 정석', language: 'Python' }
{ title: '알고리즘의 정석', language: 'Python' }
オブジェクトにはsliceのような方法はありません.❌実際には、オブジェクトは付与メソッドを使用してコピーすることもできます.
let course1 = {
	title: '파이썬 프로그래밍 기초',
    language: 'Python'
};

let course2 = {}; //(1)course2에 빈 객체를 만들어준다.

for(let key in course1) { 
	course2[key] = course1[key]; //똑같은 프로퍼티를 가지고 이지만 서로 독립적인 객체로 복사 가능.
};

course2.title = '자료 구조';

console.log(course1);
console.log(course2);
//{ title: '파이썬 프로그래밍 기초', language: 'Python' }
//{ title: '자료 구조', language: 'Python' }-->course2의 title만 바뀐것 확인.
⭐⭐
しかしfor Moonはcourse 1とcourse 2に限られる.だからcourse 3やcourse 4があればforを書く必要があります.だからfor文を用いて、関数にします.関数を使用するため、一番上に置くと、より効率的なコードとして使用できます.
function cloneObject(object) { //(1)파라미터로 복사할 객체를 전달받음.
	let temp = {}; //(2)임시로 빈 객체를 만듦.
   
    for (let key in object) {
    	temp[key] = object[key]; //(3)for..in문 통해 객체를 복사
    }
 return temp; //(4)임시 객체를 리턴.
};

let course1 = {
	title: '파이썬 프로그래밍 기초',
    language: 'Python'
};

let course2 = cloneObject(course1); //(5)함수를 호출하는 값을 변수에 할당해주면 복사된 객체가 변수에 담김. 그래서 course3이 생길때도 함수를 이렇게 활용 가능.

let course3 = cloneObject(course1);

course2.title = '자료 구조';
course3.title = '객체 지향 프로그래밍';

console.log(course1);
console.log(course2);
console.log(course3);
// { title: '파이썬 프로그래밍 기초', language: 'Python' }
// { title: '자료 구조', language: 'Python' }
// { title: '객체 지향 프로그래밍', language: 'Python' }