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 カーソルの原理と使用例の分析

推薦する

VMware仮想マシンを使用してUbuntu 20.04をインストールする完全なチュートリアル

Ubuntu は比較的人気のある Linux デスクトップ システムです。最近、Ubuntu 20....

水平プログレスバーの最後にテキストを表示するための実装コードの CSS 記述

問題の説明仕事で以下の成果を達成したいと考えています。 解決div タグに相対配置を追加し、絶対配置...

Tomcatの全体構造の簡単な紹介

Tomcat は Web コンテナとして広く知られています。Java を学び始めたときから現在の仕事...

nginx設定ファイルの解釈の詳細な説明

nginx 設定ファイルは主に 4 つの部分に分かれています。 main{#(グローバル設定) ht...

Linux での感嘆符コマンド (!) の使用の概要

序文最近、弊社では mbp の設定をしており、ssh を使うことが多くなりました。複雑なコマンドを書...

MySQL 集計関数のネストされた使用操作

目的: MySQL 集計関数のネストされた使用集計関数は直接ネストできません。例: max(coun...

MySQLで日付と時刻を照会する方法

序文:プロジェクト開発では、一部のビジネス テーブル フィールドで日付と時刻の型が使用されることが多...

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

MySQL における UNION と UNION ALL の基本的な使い方

データベースでは、UNION キーワードと UNION ALL キーワードの両方が 2 つの結果セッ...

CSS3 で作成したホバーズーム効果

結果:実装コード: html <link href='https://fonts.go...

バージョン管理ツール Rational ClearCase の紹介

Rational ClearCase は、コードやその他のソフトウェア開発資産のバージョン管理を実...

Vueログイン機能の実装

目次前面に書かれたログインの概要ログインビジネスプロセスログインサービスの関連技術ポイントログイント...

最小限のルートファイルシステムを構築するためにbusyboxを移植するための詳細な手順

Busybox: 小さなコマンドが詰まったスイスアーミーナイフ。ステップ1: ディレクトリ構造を作成...

get メソッドによる HTML フォームの値転送の例

google.htmlインターフェースは図の通りですコードは図のとおりです: (比較的シンプルで、入...

Docker 経由で CentOS コンテナを作成する手順

目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...