JavaScript オブジェクト (詳細)

JavaScript オブジェクト (詳細)

JavaScript オブジェクト

1. 定義

オブジェクトは参照データ型であり、複雑なデータ型を格納するためのコンテナです。複数の属性 (データ) とメソッド (関数) の集合です。

属性の動的な追加と削除が可能

2. オブジェクトの分類

(1)組み込みオブジェクト

ES標準で定義されたオブジェクトは、どのES実装でも使用できます。

たとえば、math string number boolean object...

(2)ホストオブジェクト

jsランタイム環境によって提供されるオブジェクト。現在は主にブラウザによって提供されています。

たとえば、BOM DOM

(3)カスタムオブジェクト

開発者自身が作成したオブジェクト

3. オブジェクトを定義する

オブジェクトリテラル

オブジェクトリテラルを使用すると、オブジェクトを作成するときにオブジェクト内のプロパティを直接指定できます。

構文: {属性名:属性値、属性名:属性値...}

オブジェクトリテラルのプロパティ名は引用符で囲んでも囲まなくてもかまいませんが、引用符で囲まないことをお勧めします。

特別な名前を使用する場合は、引用符で囲む必要があります。

境界として「{ }」を使用し、属性を「,」で区切り、属性と属性値を「:」で区切ります。

var obj = {};

コンストラクタはオブジェクトを作成する

newキーワードで呼び出される関数はコンストラクタである

コンストラクタはオブジェクトを作成するために使用される関数です

typeof を使用してオブジェクトをチェックすると、オブジェクトが返されます。

var obj = 新しいオブジェクト();
console.log(obj のタイプ);

4. オブジェクトのプロパティにアクセスする

ポイントアクセスシンボル。

o.name => 'テリー'
o.年齢 => 12

[] アクセサ

o['name'] => 'テリー'
o['年齢'] => 12

オブジェクトに存在しないプロパティを読み取った場合、エラーは報告されませんが、undefined が返されます。

5. オブジェクトにプロパティを追加する

object.attribute = 属性値;

o.gender = '女性';

6. オブジェクトプロパティの削除

オブジェクトプロパティを削除します。

o.gender を削除します。

7.オブジェクトルートコンストラクタ

すべてのオブジェクトは直接的または間接的にObjectを継承し、Objectプロトタイプのメソッドを呼び出すことができます。

var o =新しいオブジェクト();
var arr = 新しい配列();

8. オブジェクト属性の検出

オペレーター

この演算子は、オブジェクトに指定された属性が含まれているかどうかを確認するために使用できます。

はいの場合はtrueを返し、そうでない場合はfalseを返します

文法:

オブジェクト内の「プロパティ名」

Obj 内の 'name';

9. 参照渡しと値渡し

基本データ型は値渡しされます。基本データ型はメモリのスタック領域に直接値を格納します。

js 内の変数はすべてスタック メモリに格納される基本データ型です。値はスタック メモリに直接格納されます。値は独立して存在します。1 つの変数を変更しても、他の変数には影響しません。
var a = 123;
var b = a;
++;
コンソールログ('a='+a); //124
コンソールログ('b='+b); //123

参照データ型は参照によって渡されます。参照データ型の参照アドレスはスタック領域に格納され、実際の値はヒープ領域に格納されます。参照アドレスはヒープ領域内のスペースを指します。

オブジェクトはヒープ メモリに格納されます。新しいオブジェクトが作成されるたびに、ヒープ メモリに新しいスペースが作成されます。

変数はオブジェクトのメモリアドレス(オブジェクトの参照)を格納します。2つの変数に同じオブジェクト参照が格納されている場合

1 つの変数のプロパティが変更されると、他の変数も影響を受けます。

var obj = 新しいオブジェクト();
obj.name='テリー';
var obj2 = obj;
 
//obj の名前属性を変更します。obj.name='tom';
 
console.log(obj.name); //トム
console.log(obj2.name); //トム

2つのプリミティブデータ型を比較す​​る場合、比較値は

2 つの参照データ型を比較す​​る場合、オブジェクトのメモリ アドレスを比較します。

2 つのオブジェクトが同一であるがアドレスが異なる場合も false を返します。

var c = 10;
var d = 10;
console.log(c==d); //true
 
 
var obj3 = 新しいオブジェクト;
var obj4 = 新しいオブジェクト;
obj3.name='トム';
obj4.name='トム';
console.log(obj3==obj4); //偽

10. オブジェクトのシリアル化(オブジェクトを文字列に変換する)

1) 従来の変換

obj.tostring()

2) json文字列に変換する

JSON.stringify(オブジェクト)

3) クエリ文字列

var qs = require('querystring'); //node.jsモジュールを導入する

qs.stringify(obj) =>名前=トム&年齢=12

11. 拡張 for ループ (for in)

オブジェクトの反復処理

文法:
for(var 変数 in オブジェクト){ }
for...in ステートメント オブジェクトに複数の属性がある場合、ループは複数回実行されます。

実行されるたびに、オブジェクト内のプロパティ名が変数に割り当てられます。

var obj = {
    名前:「孫悟空」
    年齢:18歳、
    性別: '男性'、
    住所:'花果山'
}
 
for(var n in obj){
    console.log('プロパティ名:'+n);
    console.log('プロパティ値: '+obj[n]);
    }

Java のスクリプト オブジェクト (詳細) に関するこの記事はこれで終わりです。JavaScript オブジェクトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript によるデータ視覚化: ECharts マップの作成
  • 非常に詳細な基本的なJavaScript構文ルール
  • JavaScript における型の必須および暗黙的な変換の詳細な説明
  • JavaScriptはスライダーを介してWebページの色を変更することを実装します
  • JavaScript es6 における var、let、const の違いの詳細な説明
  • JavaScript における this ポイントの問題の詳細な説明
  • JavaScript 関数呼び出し、適用、バインド メソッドのケース スタディ
  • JavaScript における Arguments オブジェクトの使用に関する詳細な説明
  • JavaScript CollectGarbage 関数の例
  • JavaScript における BOM と DOM の詳細な説明
  • JavaScript の setTimeout と setTimeinterval の使用例の説明
  • 期間限定フラッシュセール機能を実現するJavaScriptタイマー
  • 期間限定フラッシュセール機能を実装するJavaScript

<<:  MySQLのトランザクション管理操作の詳細な説明

>>:  MySQL カーソルの原理と使用例の分析

推薦する

Win10にnginxをインストールする方法

会社から、負荷を実装するためにnginxをベースにFordプロジェクトのWebServiceサーバー...

MySQL マルチテーブルクエリ例の詳しい解説 [リンククエリ、サブクエリなど]

この記事では、例を挙げて MySQL のマルチテーブル クエリについて説明します。ご参考までに、詳細...

Vueは適切なスライドアウトレイヤーアニメーションを実装します

この記事では、適切なスライドアウトレイヤーアニメーションを実装するためのVueの具体的なコードを例と...

CSS のサイズと幅と高さのブラウザ解釈の違いに対する解決策

まずは例を見てみましょうコードをコピーコードは次のとおりです。 <!DOCTYPE html ...

Mysql5.7でのスケジュールバックアップの実装

1. MySQL インストール パス D:\xxx\MYSQL\MySQL Workbench CE...

Linux gzipコマンドの使用

1. コマンドの紹介gzip (GNU zip) コマンドは、ファイルの圧縮と解凍に使用されます。こ...

Vue の el-table は自動天井効果を実現します (固定をサポート)

目次序文実装のアイデア効果:使用:メインソースコード:序文多くのケースを見た結果、単純な観点からは、...

CSS @font-face パフォーマンス最適化の詳細な理解

この記事では主に、フォント読み込みの最適化に関する一般的な戦略を紹介します。内容の大部分は参考資料と...

Docker に Solr 8.6.2 をインストールし、中国語の単語セグメンターを構成する方法

1. 環境バージョンDocker バージョン 19.03.12セントロス7ソル8.6.2 2. Do...

Spring環境を構成するためのDocker-composeの手順

最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...

Linux での MySQL 5.1 および 5.7 のインストール チュートリアル

以下のコンテンツのオペレーティング システムは次のとおりです: Centos 6.7 yum で M...

Vue 監視プロパティと計算プロパティ

目次1. 監視プロパティを監視する1. ショッピングカート2. すべて選択し、すべて選択解除する2....

WeChatミニプログラムをTencent Mapsに接続する2つの方法

最近、WeChat アプレットを作成しているのですが、いくつか問題が発生しました。インターネットでい...

JS で美しい条件式を書く方法についての簡単な説明

目次複数の条件文複数属性オブジェクトスイッチステートメントを置き換えるデフォルトパラメータとデストラ...

ユニークインデックスの S ロックと X ロックによる MySQL デッドロック ルーチンの理解

「初心者向けソースコードからの MySQL デッドロック問題の理解」では、MySQL ソースコードを...