あなたが見逃したJavaScript-3.オブジェクト基本(1)

「あなたが見逃したjavascript」シリーズ学習モダンJavascriptチュートリアルは、筆者がjavascriptについて理解していないか、混同しているところをまとめた.すべてのソースは上記のサイトにあります.
本稿では,対象の基本概念の中で漏れやすい部分について論じる.

オブジェクト

空のオブジェクトを作成するには、

という2つの方法があります.2つの方法でオブジェクトを宣言する場合、通常は[オブジェクトテキスト](Object Text)メソッドが使用されます.

let user = new Object(); // '객체 생성자' 문법
let user = {}; // '객체 리터럴' 문법

オブジェクトを作成するときに、オブジェクトテキストのPropertyキーがかっこで囲まれている場合は、計算されたProperty(計算プロパティ)と呼ばれます.通常、キー値として文字列しか使用できないPropertyとは異なり、計算されるPropertyには複雑な式とキー値としての変数がある可能性があります.

let fruit = 'apple';

let bag = {
  [fruit]: 5, // bag.apple = 5
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

オブジェクトに存在しないPropertyにアクセスしようとすると、JavaScriptは未定義のエラーを返します.したがって、in演算子を使用してpropertyが存在するかどうかを決定できます.
一致演算子(==undefined)を使用してpropertyが存在するかどうかを決定します.in演算子との違いは、propertyが実際に存在し、値がundefinedの場合、一致演算子は認識できませんが、in演算子はそれを区別します.したがって、in演算子を使用することをお勧めします.

let obj = {
  test1: undefined,
};

alert( obj.test ); 
// test 프로퍼티가 obj에 존재하지 않지만, 얼럿 창엔 undefined가 출력됩니다. 
// 따라서, test 프로퍼티가 존재하지 않는 것인지, 아니면 undefined 값을 가지는지를 식별할 수 없습니다.

alert( "test" in obj ); // `in`을 사용하면 프로퍼티 유무를 제대로 확인할 수 있습니다(false가 출력됨).

オブジェクトの輪郭は、特別な方法で並べ替えられます.整数プロパティ(「49」、「1」など)は、整数に変換可能な文字列です.この値に基づいて自動的に昇順にソートされ、他のプロパティはオブジェクトに追加された順序でソートされます.また、整数プロパティの優先度は他のプロパティよりも高い.

let codes = {
  name: "John",
  "49": "독일",
  "41": "스위스",
  "44": "영국",
  surname: "Smith",
  "1": "미국"
};

for (let code in codes) {
  alert(code); // 1 41 44 49 name surname
}

参照によるオブジェクトのコピー

JavaScriptでは、オブジェクトコピーは2つに分けられます.浅い放射線と深い放射線がそれです.浅いレプリケーションコピー元のオブジェクトがプロパティ値としてオブジェクト(タイルもオブジェクト)を持っている場合、そのオブジェクトの参照値がレプリケートされます.したがって、コピーされたオブジェクトのプロファイルも元のオブジェクトと同じオブジェクトを指します.
JavaScriptでオブジェクトの浅いレプリケーションを実現するには、for...コンストラクションでは、ソースオブジェクトの各Properties間でシステム、またはObjectに返信できます.assignが使用できます.ES 6構文でSpread Operatorを使うのもObjectです.assignと同じ操作を実行できます.

let user = {
  name: "John",
  age: 30
};

let clone1 = {};

// 얕은 복사 방법 1. 빈 객체에 user 프로퍼티 전부를 복사해 넣습니다.
for (let key in user) {
  clone1[key] = user[key];
}

// 얕은 복사 방법 2. Object.assign을 사용해 간단하게 객체를 복사할 수 있습니다.
let clone2 = Object.assign({}, user);

// 얕은 복사 방법 3. Spread Operator(...)를 사용해도 객체 복사가 가능합니다. 
let clone3 = {...user};

浅い複製の欠点は、オブジェクトの内部に別のオブジェクトが存在するネストされたオブジェクトを完全に複製できないことです.たとえば、配列が元のオブジェクトのプロパティ値として存在する場合、オブジェクトをコピーした後にコピーされたオブジェクトの配列に値を追加または削除すると、元のオブジェクトの配列にも同じ変更が適用されます.通常、この方法は私たちが望んでいるものではありません.コピーしたオブジェクトが元のオブジェクトと完全に独立していることを望んでいます.このためには、深度コピーを使用します.
コピーするオブジェクトの形状が単純であるか、構造が限られている場合、深度コピーを実現する最善の方法は、直接コピーするオブジェクトの関数を作成することです.配列がある場合は、slice関数で直接コピーできます.この方法は性能面でも有効である.
ただし、オブジェクトの構造が複数であるが、深度レプリケーションを処理するために1つの関数しか使用しない場合は、Lodashというライブラリdeepclone関数を使用できます.

const clonedeep = require('lodash.clonedeep');

const orig = {
  name: "John",
  age: 30,
  hobby: ["movie", "jogging", "read"],
  print: function() {
    alert(`${this.name} is ${this.age} years old`);
  }
};

// deepclone 함수를 이용한 깊은 복사
const clone = clonedeep(orig);

JSONオブジェクトメソッドを用いて深度コピーを実現する方法もある.JSON.stringify関数でオブジェクトをJSON文字列に変換し、JSONします.JSON文字列をparse関数でJavaScriptオブジェクトに変換する方法
この方法はJSON文字列に基づいて最初から新しいオブジェクトを作成するため、コピーされたオブジェクトは元のオブジェクトとはまったく異なる場合があります.ただし、パフォーマンスが遅く、関数を正常に処理できないという欠点があるため、関数が定義されていないことに注意してください.

const orig = {
  name: "John",
  print: function() {
    alert(`${this.name} is ${this.age} years old`);
  }
}

// JSON 객체 메서드를 활용한 깊은 복사
const clone = JSON.parse(JSON.stringify(orig));

alert(clone.name); // John
alert(clone.print); // undefined

ごみ収集

JavaScriptは、メモリ管理を実行するためにアクセス性(readability)という概念を使用します.到達可能な値は、簡単に言えばアクセスまたは使用可能な値です.到達可能な値はメモリから削除されません.
JavaScriptエンジンでは、ゴミ収集器(ゴミ収集器)が絶えず動作し、すべてのオブジェクトを監視し、到達できないオブジェクトを削除します.

外部参照は到達可能な状態に影響しません.外部からの参照のみが到達状態に影響します.つまり、相手は私が私の達成状態に影響を与えることを指し、私は相手が私に影響を与えないことを指します.

これらのオブジェクトは接続され、島のような構造が作成され、島に到達できない場合は、すべてのオブジェクトがメモリから削除されます.つまり、ルートディレクトリから複雑なオブジェクト(以下に示すように)に到達できないと、すべてのオブジェクトに到達できません.

ごみ収集には「mark-and-sweep」という基本アルゴリズムが使用され、アルゴリズムの各ステップは通常次のようになります.

ゴミ収集器はルート(上位オブジェクト)情報を収集し、タグ付け(記憶)する.

本のディレクトリで参照されているすべてのオブジェクトにアクセスし、タグ付けします.

とマークされたすべてのオブジェクトにアクセスし、これらのオブジェクトが参照するオブジェクトをマークします.アクセスしたすべてのオブジェクトがマークされているため、同じオブジェクトには二度とアクセスしません.

本のディレクトリ内のすべての到達可能オブジェクトまで、上記の手順を繰り返します.

とマークされていないすべてのオブジェクトをメモリから削除します.

new演算子と構造関数

new演算子とコンストラクション関数を使用すると、複数の類似オブジェクトを簡単に作成できます.コンストラクション関数(constructor function)は、従来の関数と技術的に異なりませんが、コンストラクション関数は次の2つの慣例に従います.

関数名の最初の文字は大文字で始まります.

を実行するには、「new」演算子を追加する必要があります.

次のnew演算子を使用して関数を実行すると、次のアルゴリズムが機能します.

空のオブジェクトを作成し、このオブジェクトに割り当てます.

関数を実行します.この問題を修正するために、新しいPropertyを追加します.

は、

this(ヒント)を返します.

let user = new User("Jack");

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어지고 this에 할당됨)
  
  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;
  
  this.sayHi = function() {
    if(!this.isAdmin) {
      alert( "My name is: " + this.name );
    }
  };

  // return this;  (this가 암시적으로 반환됨)
}

すべての関数はコンストラクション関数です.newを貼り付けて実行すると、上記の任意の関数のアルゴリズムが実行されます.最初のアルファベットが大文字でなければならない条件は「慣例」であり、必要ではないため、大文字でなくてもnewを追加して実行することができます.したがって、以下の名前のない匿名コンストラクション関数を使用してオブジェクトを作成することもできます.

let user = new function() {
  this.name = "John";
  this.isAdmin = false;
};

コンストラクション関数には通常、文が返されません.これは暗黙的に返されるので、戻り文を明示的に書き込む必要はありません.ただし、戻り文がある場合は、次のルールが適用されます.

オブジェクトが返されると、そのオブジェクトが返されます.

オリジナルを返すと、戻りゲートは無視されます.

function BigUser() {
  this.name = "John";
  
  return { name: "Godzilla" };  // <-- this가 아닌 새로운 객체를 반환함
}

function SmallUser() {
  this.name = "John";   
  return; // <-- this를 반환함 (return 문이 무시됨)
}

投稿が長すぎるので次の投稿を紹介しましょう