JavaScriptデータ型5編
7778 ワード
코어 자바스크립트
の本の第1章のデータ型の内容を整理した文章です.不変オブジェクト
不変オブジェクト(immutable object)は非常に重要な基礎概念であり、最近のREACT、VUE、Angularなどのライブラリやフレームワークだけでなく、関数式プログラミング、設計モードなどの面で非常に重要な基礎である.
参照型データの가변
は、データそのものではなく内部プロパティを変更した場合にのみ作成されます.データ自体を変更したい場合(新しいデータを割り当てる場合)は、基本データと同様に既存のデータは変更されません.
では、どのような場合にオブジェクトを変更する必要がありますか?値として渡されるオブジェクトを変更しても、元のオブジェクトが変更されないことがよくあります.そんなときこそ、変わらないオブジェクトが必要です.
オブジェクトの可変性による問題
var user = {
name: 'yejin',
gender: 'female'
};
var changeName = (user, newName) {
var newUser = user;
newUser.name = newName;
return newUser;
};
var user2 = changeName(user, 'John');
if (user !== user2) {
console.log('유저 정보가 변경되었습니다');
}
console.log(user.name, user2.name); // John John
console.log(user === user2); // true
上記の例では、オブジェクトの可変性に起因する問題を示します.文中の条件が成立すると,ユーザ情報が変化した内容が出力されるが,実際には出力されずに通過する.
if文のように、情報が変化したときに通知を出すことや、情報が変化する前と変化した後の情報の違いを可視化するなどの機能を実現するには、オブジェクトを一定に保つコードを書く必要があります.
浅い放射と深い放射
얕은 복사
は、次のステップの値のみをコピーする方法であり、깊은 복사
は、内部のすべての値を1つずつ検索してすべてコピーする方法である.얕은 복사
のみが実行される場合、重複するオブジェクトから参照型データが格納されているPropertyがコピーされる場合、そのプライマリ・セカンダリ値のみがコピーされることを意味する.このように、このPropertyについては、ソースとコピーが同じ参照型データのアドレスを指す.つまり、レプリカを交換してもオリジナルが変わり、レプリカを交換しても変わります.
オブジェクトをコピーするときにオブジェクト内のすべての値をコピーして完全に新しいデータを作成する場合は、オブジェクトのプロパティで値をコピーできます(値がデフォルトの場合)、内部のプロパティを再コピーする必要があります.このプロセスは,参照型データがあるたびに再帰的に実行されてこそ,深さレプリケーションとなる.
深度レプリケーションの処理の簡単な方法
オブジェクトをJSON構文で表す文字列に変換し、JSONオブジェクトに変換します.問題は、メソッドや非表示のプログラム__proto__
やgetter/setterなど、JSONに変更できないすべてのプログラムが無視されることです.これは、httprequestで受信したデータで格納されたオブジェクトをコピーするなど、純粋な情報を処理する際に使用される良い方法です.var copyObject = (target) => {
return JSON.parse(JSON.stringify(target));
};
var obj = {
a: 1,
b: {
c: null,
d: [1,2],
func1: function () {}
}
};
var obj2 = copyObject(obj);
obj2.a = 3;
obj2.b.c = 4;
obj.b.d[1] = 3;
console.log(obj); // { a: 1, b: { c: null, d: [1,3], func1: f() }}
console.log(obj2); // { a: 3, b: { c: 4, d: [1,2] }}
この記事では、不変オブジェクトと浅いコピー、深いコピーについて説明します.次はundefinedとnullについて説明します.
Reference
この問題について(JavaScriptデータ型5編), 我々は、より多くの情報をここで見つけました
https://velog.io/@johnyejin/JavaScript-데이터-타입-5편
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
var user = {
name: 'yejin',
gender: 'female'
};
var changeName = (user, newName) {
var newUser = user;
newUser.name = newName;
return newUser;
};
var user2 = changeName(user, 'John');
if (user !== user2) {
console.log('유저 정보가 변경되었습니다');
}
console.log(user.name, user2.name); // John John
console.log(user === user2); // true
var copyObject = (target) => {
return JSON.parse(JSON.stringify(target));
};
var obj = {
a: 1,
b: {
c: null,
d: [1,2],
func1: function () {}
}
};
var obj2 = copyObject(obj);
obj2.a = 3;
obj2.b.c = 4;
obj.b.d[1] = 3;
console.log(obj); // { a: 1, b: { c: null, d: [1,3], func1: f() }}
console.log(obj2); // { a: 3, b: { c: 4, d: [1,2] }}
Reference
この問題について(JavaScriptデータ型5編), 我々は、より多くの情報をここで見つけました https://velog.io/@johnyejin/JavaScript-데이터-타입-5편テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol