JavaScript オブジェクトの組み込みオブジェクト、値型、参照型の説明

JavaScript オブジェクトの組み込みオブジェクト、値型、参照型の説明

物体

JS のオブジェクトは、属性動作組み合わせです。属性はオブジェクトの静的な特性であり、動作 (メソッドとも呼ばれる) はオブジェクトの動的な特性です。

JavaScript のオブジェクトは主に 3 つのカテゴリに分類されます。

  • 組み込みオブジェクト

ES標準で定義されたオブジェクトは、Math String Number Boolean Function Objectなど、あらゆるES実装で使用できます。

  • ホストオブジェクト

JSランタイム環境によって提供されるオブジェクト。現在は主にBOM DOMなどのブラウザによって提供されるオブジェクト。

  • カスタムオブジェクト

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

オブジェクト定義

空でないオブジェクトを定義する

// null 以外のオブジェクト:
var オブジェクト名 = {
	プロパティ名: 値、
	...
	メソッド名: function([parameters]){
		メソッド本体のステートメント。
	}
	...
}
var p1 = {
	color: 'black', //オブジェクトに属性を追加します weight: '188g', //属性はカンマで区切られます screenSize: 6.5,
	call: function(name){//オブジェクトにメソッドを追加します console.log("発信呼び出し: "+name);
	},
	送信メッセージ: function(msg){
		console.log("送信されたメッセージは次のとおりです: "+msg);
	},
	ビデオを再生: 関数(){
		console.log("ビデオを再生");
	},
	音楽を再生: 関数(){
		console.log("音楽を再生中");
	}
}
console.log("携帯電話の色:"+p1['color']); //object['property']を使用してプロパティ値を出力することもできますconsole.log("携帯電話の重さ:"+p1.weight);
console.log("画面サイズ:"+p1.screenSize);
p1.call("张三");//オブジェクトの送信メソッドを呼び出します p1["sendMassage"]("helo");
p1.ビデオを再生します。
p1.playMusic();
コンソールログ(p1);

new Object() を使用してオブジェクトを作成する

var p = new Object(); // 空のオブジェクト p を作成する
p2.name = '劉備';
p2.sex = '男性';
p2.年齢 = 32;
p2.sayHello = 関数(){
	console.log('こんにちは');
}
p2.sayHello(); //オブジェクトメソッドを呼び出す

コンストラクターを使用してオブジェクトを作成できます。
構文: 新しいコンストラクタ名 ()

関数 Student(名前,性別,年齢){
	this.name = name; //これはコンストラクターの新しく作成されたオブジェクトを参照します this.sex = sex;
	this.age = 年齢;
	this.show = 関数(){
		console.log("名前: "+this.name)
		console.log("性別: "+this.sex)
		console.log("年齢: "+this.age)
	}
}
var s1 = new Student('乔峰','男',28);//s1 はコンストラクターによって作成された新しいオブジェクト、つまりインスタンス s1.show();
var s2 = new Student('段煜','男',23);
s2.表示();

: コンストラクターにはパラメーターがある場合とない場合があります。パラメーターがない場合は、括弧を省略できます。

オブジェクトのメンバーを反復処理する

オブジェクトのプロパティとメソッドを反復処理する: for...in ループを使用する

for(var 変数名 in オブジェクト名){
	ループ文}
関数 Student(名前,性別,年齢){
	this.name = 名前;
	this.sex = セックス;
	this.age = 年齢;
	this.show = 関数(){
		console.log("名前: "+this.name)
		console.log("性別: "+this.sex)
		console.log("年齢: "+this.age)
	}
}
// s2 は走査されるオブジェクトです var s2 = new Student('段煜','男',23);
for(var k in s2){
	console.log(k);//出力 名前 性別 年齢 show()
	console.log(s2[k]); // Duan Yunan 23を順番に出力します 
}

in 演算子<br /> オブジェクト内にメンバー (属性) が存在するかどうかを判断します。存在する場合は true を返し、存在しない場合は false を返します。

JS組み込みオブジェクト

JavaScript には、数学オブジェクト Math、日付オブジェクト Date、配列オブジェクト Array、文字列オブジェクト String など、よく使用される組み込みオブジェクトが多数用意されています。

数学オブジェクト

Math オブジェクト: 数値に対して数学演算を実行するために使用されます。オブジェクトをインスタンス化する必要がなく、その静的プロパティと静的メソッドを直接使用できます。

Mathオブジェクト:インスタンス化する必要はありません。Math.PI:算術定数PI
Math.abs(x): x の絶対値を返します。Math.max(args...): 最大値を返します。Math.min(args...): 最小値を返します。Math.pow(x,y): x の y 乗を返します。Math.sqrt(x): x の平方根を返します。Math.random(): 0.0 から 1.0 までの乱数を返します。Math.round(x): x に最も近い整数を返します。Math.floor(x): x 以下で、x に最も近い整数を返します。Math.ceil(x): x 以上で、x に最も近い整数を返します。

日付オブジェクト

日付オブジェクト:オブジェクトを使用する前に、new Date() を使用してオブジェクトをインスタンス化する必要があります。オブジェクトの作成 Date() は、日付オブジェクトを生成するためにパラメーターを渡すことができるコンストラクターです。

ここに画像の説明を挿入
ここに画像の説明を挿入

// 1. パラメータなしで Date オブジェクトを作成します。var date1 = new Date();
コンソールログ(日付1);
// 2. 年、月、日、時、分、秒を渡して、指定された日付と時刻の Date オブジェクトを作成します。// 月は 0 ~ 11 です。
日付を2021年4月22日10時17分に変更します。
コンソールログ(日付2);
// 3. 日付と時刻の文字列を渡して Date オブジェクトを作成します。 var date3 = new Date("2021-5-22 18:19:25");
コンソールログ(日付3);
コンソール.log(date3.getMonth()) //4
console.log(date3.getTime()) // Date オブジェクトと 1970 年 1 月 1 日の午前 0 時までのミリ秒数を表します console.log(date1.toLocaleDateString()) // 2021/6/14
コンソール.log(date1.toLocaleString()) //2021/6/14 午後11:17:36
コンソール.log(date1.getFullYear())//2021

配列オブジェクト

配列: 同じタイプのデータの集合です。機能は普通のオブジェクトに似ており、いくつかの値を格納するためにも使用されます。配列は、内部要素を操作するために数値をインデックスとして使用します。
配列の作成

  • リテラルの使用
    var arr = [] // 空の配列を作成する
  • 新しい配列を使用して作成する
    var arr = new Array(); //空の配列を定義する

オブジェクトが配列であるかどうかを判断する方法は 2 つあります。

  • isArray(オブジェクト名)
  • instanceof: オブジェクト名instanceof配列
    var arr = [];
    var obj = {};
    console.log(Array.isArray(arr));//true
    console.log(Array.isArray(obj));//false
    console.log(arr 配列インスタンス);//trrue 

ここに画像の説明を挿入

その他の配列メソッドについては、以前の記事で詳しく紹介されているので、ここでは説明しません。

文字列オブジェクト

文字列オブジェクト: 文字列オブジェクト。new String() を使用して作成する必要があります。

一般的な文字列メソッド

- charAt(n) は位置 n の文字列を返します - concat(s1,s2,...) は複数の文字列を連結します - charCodeAt(n) は位置 n の ASCII コードを返します - split('separator') は指定された区切り記号に従って文字列を文字列配列に変換します - substr(start,length) は start から length 文字を抽出して新しい文字列を形成します - substring(from,to) は from と to の間の文字列を抽出して新しい文字列を形成します - toLowerCase() は元の文字列に影響を与えずに文字列の大文字を小文字に変換し、新しい文字列を返します - toUpperCase() は元の文字列に影響を与えずに文字列のすべての小文字を大文字に変換し、新しい文字列を返します - replace(str1,str2) は文字列の str1 を str2 に置き換え、元の文字列に影響を与えずに置換結果を返します

文字列オブジェクトの演習

// 文字列を入力し、文字列内で各文字が出現する回数をカウントします。var str = 'abBSdXbdea';
var lower = new Array(26);//26 個の小文字がそれぞれ出現する回数を格納します var upper = new Array(26);//26 個の大文字がそれぞれ出現する回数を格納します // 2 つの配列を初期化します for(var i=0;i<lower.length;i++){
    下[i] = 0
    上[i] = 0
}
(var k=0;k<str.length;k++){
    str.charAt(k)>='a' && str.charAt(k)<='z' の場合{
        下位[str.charCodeAt(k)-97]++
    }そうでない場合、str.charAt(k)>='A' && str.charAt(k)<='Z'){
        上位[str.charCodeAt(k)-65]++
    }
}
console.log(下);
コンソールログ(上部);
/* 10進整数と数値システム (2、8、16) を入力し、10進整数を対応する数値形式に変換して剰余を出力します。
               m=15 k=8
               m%k は残りを配列に格納します*/
        var m = parseInt(prompt('整数を入力してください:'));
        var k = parseInt(prompt('数値システムを入力してください (2~16)'));
        var 結果 = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
        var arr = new Array(); //数値システム変換の結果を保存します。var i = 0;
        while(m!=0){//mを数値システムに変換し、余りをarr配列に格納します。arr[i] = m%k;
            m = parseInt(m/k);
            私は++;
        }
        var str = '';
        もしk==8ならば
            文字列 = '0';
        }そうでなければ(k==16){
            文字列 = '0x';
        }
        for(var i=arr.length-1;i>=0;i--){
            str += 結果[arr[i]];
        }
        console.log('変換の結果は: '+str);

値型と参照型

値の型:単純なデータ型 (文字列、数値、ブール値、未定義、null)
参照型:複合データ型 (オブジェクト) 変数は参照のアドレスを格納します

注:参照型の特徴は、変数が参照のアドレスのみを格納することです。変数に値を割り当てると、オブジェクトはコピーされませんが、2 つの変数は同じオブジェクトの参照を指します。

以下はメモリ内のスタックとヒープの分析です
スタック: メモリ空間は自動的に割り当てられ、解放され、単純なデータ型はスタックに格納されます。
ヒープ: 動的に割り当てられるメモリ。サイズは可変で、自動的には解放されません。複雑なデータ型はヒープに格納されます。

ここに画像の説明を挿入

ヒープメモリに格納されているオブジェクトの場合、変数には実際に別の場所を指すポインタが格納されていることがわかります。このポインタは、ヒープに格納されているオブジェクトのプロパティと値を見つけるために使用され、各スペースのサイズは異なるため、状況に応じて特定の割り当てを行う必要があります。

これで、JavaScript オブジェクト、組み込みオブジェクト、値型、参照型に関するこの記事は終了です。JavaScript の基本オブジェクトの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript の組み込みオブジェクト 数学と文字列の詳細な説明
  • JavaScript の組み込み Date オブジェクトの詳細な説明
  • 組み込みオブジェクトに関するJavascriptの基礎
  • JSPの9つの組み込みオブジェクトの詳細な説明
  • JSP組み込みオブジェクト
  • JavaScript 組み込みオブジェクトの概要

<<:  MySQL における 10 進数型の使用法の簡単な紹介

>>:  CentOS 7.4 で MySQL 5.7.28 バイナリモードをインストールする方法

推薦する

ウェブページでグレーまたはブラックモードを実現するための CSS3 フィルターコード

フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...

CSSは5つの一般的な2D変換を実装します

CSS の 2D 変換を使用すると、移動、回転、拡大縮小、変形などの基本的な変換操作を 2 次元空間...

継続的インテグレーションテストにおけるDocker Swarmの適用の詳細な説明

背景アジャイル モデルは広く使用されており、テストは特に重要です。新しいバージョンは頻繁にリリースす...

一般的なブラウザ互換性の問題(概要)

ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript...

HTMLページが3秒後に自動的にジャンプする3つの一般的な方法

実際には、N 秒後にページを自動的にジャンプさせるにはどうすればよいかという問題によく遭遇します。私...

Apache クロスドメイン リソース アクセス エラーの解決策

多くの場合、大規模および中規模の Web サイトでは、静的リソース (フォント ファイル、画像など)...

Docker コンテナは実行後に終了します (実行を継続する方法)

現象Dockerコンテナを起動する docker run –name [コンテナ名] [コンテナID...

床スクロール効果を実現する js

この記事ではjQueryを使用して、階段のスライド効果を実装し、フロアをスクロールし、フロアボタンを...

Linux 上での Go 環境の構築のインストールと設定の説明

Linux で Go 環境を構築するのは非常に簡単です。 1. go1.2.1.linux-386....

Word のコンテンツを Web サイトのエディターに直接コピーすることはお勧めしません。

<br />質問: Word のコンテンツを Web サイトのエディターに直接コピーする...

MySQL では UTF-8 が推奨されないのはなぜですか?

最近、Rails 経由で「utf8」でエンコードされた UTF-8 文字列を MariaDB に保存...

MySQL トリガーの追加、削除、変更、クエリ操作の例

この記事では、例を使用して、MySQL トリガーの追加、削除、変更、およびクエリ操作について説明しま...

vue 動的コンポーネント

目次1. コンポーネント2. キープアライブ2.1 問題点2.2 キープアライブを使って解決する2....

Ubuntu 20.04 Firefox でビデオを再生できない (Flash プラグインがない) 場合の解決策

1. Flashプラグインパッケージのダウンロードアドレス: https://get.adobe.c...

フィボナッチ数列のJavaScript出力を実装する方法

目次トピック分析する基本的な解決策基本的な再帰再帰最適化要約するトピック私たちが答えなければならない...