JS対象の件
5173 ワード
JavaScriptの中でほとんどのものは一つの対象です.六種類の基本タイプのデータ-null、undefined、strigs、numbers、ブックレンとsmborsを除いて.
元の値ではないものは全部Objectです.これは配列、関数、コンストラクション、オブジェクト自体を含んでいます.
オブジェクト
概念的には、オブジェクトはすべてのプログラミング言語で同じです.それらは属性と方法を持つコードを使って真実の世界を表します.
例えば、あなたの対象が学生であれば、名前、年齢、住所、IDなどの属性とアップデートAddres、udateNameなどの方法があります.
JavaScriptでは、オブジェクトを要素項目を含むリストとして扱い、リスト内の各項目(属性または方法)は、メモリ内のキーパッド値として記憶されています.
オブジェクトの例を見ましょう.
firstObjはオブジェクトで、2つの属性があります.valueはfooと28です.
JavaScriptオブジェクトは作成方法によって異なります.classで作成しなければならず、字面量表示法で声明することができます.
オブジェクトの作成
私たちはJavaScriptの中で様々な形でオブジェクトを作成できます.どんなものがあるか見てみましょう.
1.対象の字面量(最も直接的な方式).オブジェクトの文字数は、大かっこで囲まれた、カンマ区切りのキーペアのリストです.オブジェクトの文面量属性値は、配列テキスト、関数、ネストオブジェクトの字面量、または基本データタイプを含む任意のデータタイプとすることができます.
上記の学生対象キーは、ポイント表示法によりアクセスできます.すなわち、student.id、student.nameまたは四角括弧表示法、つまり学生[id]、学生[[名前]]など`.
2.Object.creat()この方法は指定されたプロトタイプと古いオブジェクトの属性を使って新しいオブジェクトを作成します.
デフォルトでは、JavaScript関数ごとにプロトタイプの属性があります.方法または属性は、この属性に追加できます.
次は対象ですプロト.出力:
私たちはObject.creat()の方法を使ってnewStudentオブジェクトに新しい属性とデータを追加できます.
newStudentはstudentオブジェクトのキーと値にアクセスできます.これはnewStudentのプロトタイプチェーンに追加されています.これはjavascriptで継承される方式です.つまり、newStudentは、studentオブジェクトへのリンクを格納する.プロパティを読み込むと、この親オブジェクトも調べられます`.
両親は両親を持つことができます.これによって類推します.このプロセスを繰り返します.父の項目がないオブジェクト、すなわち父の項目が空になるまで.
3.オブジェクトの例.Object constructとnewというキーワードを組み合わせて使うと、新しいオブジェクトを初期化できます.
例を見てみましょう.
ただし、new Object()は、同じタイプの複数のオブジェクトを作成する必要がある場合には適していないので、このようなオブジェクトごとに上記のコードを繰り返し作成する必要があります.
この問題を解決するために、次の方法が使えます.
4.オブジェクトビルダー.オブジェクトの「タイプ」を複数回作成できる方法が必要な場合には、オブジェクトを毎回再定義する必要がない構造関数が非常に有用であり、これはObject Costruct関数を使用して実現できます.
例を見てみましょう.
同じ属性を持つが、異なる値を持つ2つのオブジェクトを作成した.
5.Object.assign()これは他のオブジェクトから新しいオブジェクトを作成する別の方法です.
すべてのエニュメレーションの固有属性の値を、一つ以上のソースオブジェクトからオブジェクトにコピーします.ターゲットオブジェクトに戻ります.一例を通して理解しましょう.
Object.assign()は対象クローン、合併対象など多くの用例があります.
6.Object.from Enties()を選択します.例を見てみましょう.
オブジェクトを作成するための最適な方法は、ソースコードに占めるスペースがより少ないため、字面量表示法によって行われる.これは何が生まれたかを明確に認識することができますので、new Objectを使って、実際にはもっと多くの入力をするだけです.(理論的には、JavaScriptエンジンに最適化されていない場合)と不要な関数の呼び出しを行います.また、字面量表示法でオブジェクトを作成し、同じ行のコードに属性を割り当てますが、他のコードはそうではありません`.
オブジェクトの属性を追加/更新、削除するにはどうすればいいですか?
前に述べたように、オブジェクトの属性は点または括弧表現によって追加できます.例を見せてください.
ここで、nameとcityは対象属性です.
オブジェクトは一つの値を持つキーしか含まれません.つまり、同じキーは一つの値しかありません.
属性名は文字列でもいいし、数字や特殊文字でもいいし、動的属性でもいいですが、属性名が文字列でない場合は、必ず括弧表現を使ってアクセスしてください.したがって、上記の例の属性1にアクセスする必要があれば、a［1］を実行することができますが、a.1は文法エラーを返します.a.nameも「"name"もいいです.
属性を更新するには、上記の2つの表現法を再び使うことができます.作成した属性に値を追加すると、この属性の値が更新されます.
Object関数法(Object.defineProperties()またはObject.defineProperty())によってオブジェクトの属性を作成し更新することもできます.
オブジェクトの属性を削除するには、deleteキーを使って実行できます.
属性の削除に成功すると、値deleteはtrueとなります.そうでなければ、それは間違いです.
オブジェクトの属性をどのように反復しますか?
すべてのオブジェクトのキーのペアにアクセスしたい場合、このような需要があります.
サイクル-for inとfor ofを使用します.
for inの場合は、オブジェクトを繰り返して属性を一つずつ返します.
Keyは、オブジェクトの属性を1つずつ返します.for inサイクルもプロトタイプチェーンを繰り返して親キーに戻るので、もっと多くのキーを見たら驚かないでください.より多くのキーが見られないようにするために、現在のオブジェクトキーのみを取得するためにhasOwnProperty検査を行うことができます.
for ofの場合は、反復オブジェクトを巡回して、現在のオブジェクトのkeyのみを取得します.これもfor inとの違いです.詳細にはMDN for…ofを参照することができます.
Object関数には、プロトタイプチェーンではなく現在のオブジェクトの属性と値にのみアクセスする方法があります.
1.Object.keys()またはObject.getOwn PropertyNames().文字列キー配列を返します.
2.Object.values().値配列を返します.
3.Object.entries().は[key,value]を要素とする二次元配列を返します.
出力結果から見ると、上の属性順序は固定されていません.
オブジェクトの属性が存在するかどうかを確認します.
オブジェクトに属性があるかどうかを確認する方法は3つあります.
1.ハスOwnPropertyを使用する.この方法は、オブジェクト自体が指定された属性を持っているかどうかを示すブール値を返します.
注意:属性の値がnullやundefinedであっても、hasOwnPropertyはtrueに戻ります.
もし私たちがhasOwnPropertyを対象としている属性名はどうなりますか?これは考える価値がある.
2.in演算子を使用します.指定された属性が指定されたオブジェクトまたはその元のチェーンにある場合、in演算子はtrueに戻ります.
注意:hasOwnPropertyは現在のオブジェクト属性のみをチェックし、in演算子は現在＋父親属性をチェックします.
3.カスタム機能を使う
属性が存在するかどうかをカスタマイズする方法があります.その中の一つはObject.keysを通しています.
参照/共有コピーと値でコピーするものは、オブジェクトにどうやって適用されますか?
違いは、値を通じて、コンテンツを作成するたびに新しいメモリ割り当てを行うという意味です.引用の場合は、作成されたメモリ空間を指します.
javascriptのコンテキストでは、すべての元のデータタイプは、値によって割り当てられたメモリであり、オブジェクトについては、値または引用伝達が可能であり、具体的な操作状況に応じて、.
浅いレイヤーと深層コピー/クローンオブジェクトとは?
浅いレイヤーと深層コピーの間のコアの違いは、属性を新しいオブジェクトにコピーする方法です.
浅いコピーでは、新しいオブジェクトは、古いオブジェクトとデータを共有する、すなわち、上記の例の場合には、=オブジェクトの浅いコピーbを作成する.したがって、ほとんどの場合、引用伝達によって浅い層コピーである.
また、浅いコピーはトップクラスの属性をコピーしますが、ネストオブジェクトは元の(ソース)とコピー(ターゲット)の間で共有されます.
浅いコピーのもう一つの方法はObject.assign()を使うことです.この例を見てみましょう.
上で見たように、Object.assignの落とし穴です.Object.assignは浅いコピーしか生成しません.newObj.bとobj.bはオブジェクトの同じ参照を共有していますが、個別のコピーを作成するのではなく、オブジェクトの参照をコピーしました.
Deep copyでは、新しいオブジェクトは共有ではなく、自分のキーペアのセットを持ちます.
深層コピーをする方法を見せてください.
1.JSON.parse(JSON.strigify(oject)
カスタムオブジェクト関数をコピーできません.また、キーに対応する値がundefinedまたはSymbolの場合は、以下の通りです.
また、この方法はループオブジェクトには適用されません.
ループオブジェクトは、自身の属性を参照するオブジェクトです.
上のエラーをスローします.
しかし、netedオブジェクトは依然として浅い層で複製されている.
二つのオブジェクトをどう比較しますか?
オブジェクトの等式==と厳密に等しい==演算子は完全に同じです.つまり、2つのオブジェクトのメモリ参照が同じの場合だけ等しいです.
例えば、2つの変数が同じオブジェクトを参照すると、それらは同じです.
次号に続く
関連記事:
Aray.isArayを使用して配列をより良くチェックします.
JS拡張演算子の5つの使い方
JavaScriptではどのように配列を反転しますか?
どのようにES 6文法を使って配列を重视しますか?
トップ番号にも注目できます.「先端は知っていますか?」
元の値ではないものは全部Objectです.これは配列、関数、コンストラクション、オブジェクト自体を含んでいます.
オブジェクト
概念的には、オブジェクトはすべてのプログラミング言語で同じです.それらは属性と方法を持つコードを使って真実の世界を表します.
例えば、あなたの対象が学生であれば、名前、年齢、住所、IDなどの属性とアップデートAddres、udateNameなどの方法があります.
JavaScriptでは、オブジェクトを要素項目を含むリストとして扱い、リスト内の各項目(属性または方法)は、メモリ内のキーパッド値として記憶されています.
オブジェクトの例を見ましょう.
firstObjはオブジェクトで、2つの属性があります.valueはfooと28です.
JavaScriptオブジェクトは作成方法によって異なります.classで作成しなければならず、字面量表示法で声明することができます.
オブジェクトの作成
私たちはJavaScriptの中で様々な形でオブジェクトを作成できます.どんなものがあるか見てみましょう.
1.対象の字面量(最も直接的な方式).オブジェクトの文字数は、大かっこで囲まれた、カンマ区切りのキーペアのリストです.オブジェクトの文面量属性値は、配列テキスト、関数、ネストオブジェクトの字面量、または基本データタイプを含む任意のデータタイプとすることができます.
上記の学生対象キーは、ポイント表示法によりアクセスできます.すなわち、student.id、student.nameまたは四角括弧表示法、つまり学生[id]、学生[[名前]]など`.
2.Object.creat()この方法は指定されたプロトタイプと古いオブジェクトの属性を使って新しいオブジェクトを作成します.
デフォルトでは、JavaScript関数ごとにプロトタイプの属性があります.方法または属性は、この属性に追加できます.
次は対象ですプロト.出力:
私たちはObject.creat()の方法を使ってnewStudentオブジェクトに新しい属性とデータを追加できます.
newStudentはstudentオブジェクトのキーと値にアクセスできます.これはnewStudentのプロトタイプチェーンに追加されています.これはjavascriptで継承される方式です.つまり、newStudentは、studentオブジェクトへのリンクを格納する.プロパティを読み込むと、この親オブジェクトも調べられます`.
両親は両親を持つことができます.これによって類推します.このプロセスを繰り返します.父の項目がないオブジェクト、すなわち父の項目が空になるまで.
3.オブジェクトの例.Object constructとnewというキーワードを組み合わせて使うと、新しいオブジェクトを初期化できます.
例を見てみましょう.
ただし、new Object()は、同じタイプの複数のオブジェクトを作成する必要がある場合には適していないので、このようなオブジェクトごとに上記のコードを繰り返し作成する必要があります.
この問題を解決するために、次の方法が使えます.
4.オブジェクトビルダー.オブジェクトの「タイプ」を複数回作成できる方法が必要な場合には、オブジェクトを毎回再定義する必要がない構造関数が非常に有用であり、これはObject Costruct関数を使用して実現できます.
例を見てみましょう.
同じ属性を持つが、異なる値を持つ2つのオブジェクトを作成した.
5.Object.assign()これは他のオブジェクトから新しいオブジェクトを作成する別の方法です.
すべてのエニュメレーションの固有属性の値を、一つ以上のソースオブジェクトからオブジェクトにコピーします.ターゲットオブジェクトに戻ります.一例を通して理解しましょう.
Object.assign()は対象クローン、合併対象など多くの用例があります.
6.Object.from Enties()を選択します.例を見てみましょう.
オブジェクトを作成するための最適な方法は、ソースコードに占めるスペースがより少ないため、字面量表示法によって行われる.これは何が生まれたかを明確に認識することができますので、new Objectを使って、実際にはもっと多くの入力をするだけです.(理論的には、JavaScriptエンジンに最適化されていない場合)と不要な関数の呼び出しを行います.また、字面量表示法でオブジェクトを作成し、同じ行のコードに属性を割り当てますが、他のコードはそうではありません`.
オブジェクトの属性を追加/更新、削除するにはどうすればいいですか?
前に述べたように、オブジェクトの属性は点または括弧表現によって追加できます.例を見せてください.
ここで、nameとcityは対象属性です.
オブジェクトは一つの値を持つキーしか含まれません.つまり、同じキーは一つの値しかありません.
属性名は文字列でもいいし、数字や特殊文字でもいいし、動的属性でもいいですが、属性名が文字列でない場合は、必ず括弧表現を使ってアクセスしてください.したがって、上記の例の属性1にアクセスする必要があれば、a［1］を実行することができますが、a.1は文法エラーを返します.a.nameも「"name"もいいです.
属性を更新するには、上記の2つの表現法を再び使うことができます.作成した属性に値を追加すると、この属性の値が更新されます.
Object関数法(Object.defineProperties()またはObject.defineProperty())によってオブジェクトの属性を作成し更新することもできます.
オブジェクトの属性を削除するには、deleteキーを使って実行できます.
属性の削除に成功すると、値deleteはtrueとなります.そうでなければ、それは間違いです.
オブジェクトの属性をどのように反復しますか?
すべてのオブジェクトのキーのペアにアクセスしたい場合、このような需要があります.
サイクル-for inとfor ofを使用します.
for inの場合は、オブジェクトを繰り返して属性を一つずつ返します.
Keyは、オブジェクトの属性を1つずつ返します.for inサイクルもプロトタイプチェーンを繰り返して親キーに戻るので、もっと多くのキーを見たら驚かないでください.より多くのキーが見られないようにするために、現在のオブジェクトキーのみを取得するためにhasOwnProperty検査を行うことができます.
for ofの場合は、反復オブジェクトを巡回して、現在のオブジェクトのkeyのみを取得します.これもfor inとの違いです.詳細にはMDN for…ofを参照することができます.
Object関数には、プロトタイプチェーンではなく現在のオブジェクトの属性と値にのみアクセスする方法があります.
1.Object.keys()またはObject.getOwn PropertyNames().文字列キー配列を返します.
2.Object.values().値配列を返します.
3.Object.entries().は[key,value]を要素とする二次元配列を返します.
出力結果から見ると、上の属性順序は固定されていません.
オブジェクトの属性が存在するかどうかを確認します.
オブジェクトに属性があるかどうかを確認する方法は3つあります.
1.ハスOwnPropertyを使用する.この方法は、オブジェクト自体が指定された属性を持っているかどうかを示すブール値を返します.
注意:属性の値がnullやundefinedであっても、hasOwnPropertyはtrueに戻ります.
もし私たちがhasOwnPropertyを対象としている属性名はどうなりますか?これは考える価値がある.
2.in演算子を使用します.指定された属性が指定されたオブジェクトまたはその元のチェーンにある場合、in演算子はtrueに戻ります.
注意:hasOwnPropertyは現在のオブジェクト属性のみをチェックし、in演算子は現在＋父親属性をチェックします.
3.カスタム機能を使う
属性が存在するかどうかをカスタマイズする方法があります.その中の一つはObject.keysを通しています.
参照/共有コピーと値でコピーするものは、オブジェクトにどうやって適用されますか?
違いは、値を通じて、コンテンツを作成するたびに新しいメモリ割り当てを行うという意味です.引用の場合は、作成されたメモリ空間を指します.
javascriptのコンテキストでは、すべての元のデータタイプは、値によって割り当てられたメモリであり、オブジェクトについては、値または引用伝達が可能であり、具体的な操作状況に応じて、.
浅いレイヤーと深層コピー/クローンオブジェクトとは?
浅いレイヤーと深層コピーの間のコアの違いは、属性を新しいオブジェクトにコピーする方法です.
浅いコピーでは、新しいオブジェクトは、古いオブジェクトとデータを共有する、すなわち、上記の例の場合には、=オブジェクトの浅いコピーbを作成する.したがって、ほとんどの場合、引用伝達によって浅い層コピーである.
また、浅いコピーはトップクラスの属性をコピーしますが、ネストオブジェクトは元の(ソース)とコピー(ターゲット)の間で共有されます.
浅いコピーのもう一つの方法はObject.assign()を使うことです.この例を見てみましょう.
上で見たように、Object.assignの落とし穴です.Object.assignは浅いコピーしか生成しません.newObj.bとobj.bはオブジェクトの同じ参照を共有していますが、個別のコピーを作成するのではなく、オブジェクトの参照をコピーしました.
Deep copyでは、新しいオブジェクトは共有ではなく、自分のキーペアのセットを持ちます.
深層コピーをする方法を見せてください.
1.JSON.parse(JSON.strigify(oject)
カスタムオブジェクト関数をコピーできません.また、キーに対応する値がundefinedまたはSymbolの場合は、以下の通りです.
また、この方法はループオブジェクトには適用されません.
ループオブジェクトは、自身の属性を参照するオブジェクトです.
上のエラーをスローします.
converting circular structure to JSON.2.ES 6を使って演算子を展開するしかし、netedオブジェクトは依然として浅い層で複製されている.
二つのオブジェクトをどう比較しますか?
オブジェクトの等式==と厳密に等しい==演算子は完全に同じです.つまり、2つのオブジェクトのメモリ参照が同じの場合だけ等しいです.
例えば、2つの変数が同じオブジェクトを参照すると、それらは同じです.
次号に続く
関連記事:
Aray.isArayを使用して配列をより良くチェックします.
JS拡張演算子の5つの使い方
JavaScriptではどのように配列を反転しますか?
どのようにES 6文法を使って配列を重视しますか?
トップ番号にも注目できます.「先端は知っていますか?」