English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScriptの毎日の学習で必ず学ぶ数组和オブジェクトの部分

オブジェクト部分 

Objectタイプ 

Objectは無序列表であり、任意のタイプのオブジェクトを格納できます。すべての他のオブジェクトはこのオブジェクトを継承します。 

Objectの作成には、new演算子とリテラル表現の二種類があります。 

1. new演算子を使用してObjectを作成:
 var obj = new Object();//注意、大文字を使用し、直接Object()として書くこともできます。
注意、new Object()の書き方で新しいオブジェクトを生成することと、文字列表現でobj = {}を生成することは等価です。 

2. 文字列表現で作成:

 var obj = {
 name : 'trigkit4',
 age : 21
};//セミコロンは付けるのが良いでしょう 

文字列表現でObjectオブジェクトを宣言する際には、Object()コンストラクタ関数は呼び出されません(FFを除く) 

Object.prototypeオブジェクト 

すべてのコンストラクタ関数にはprototype属性があり、プロトタイプオブジェクトを指します。

Object.prototype.print = function(){ console.log(this)};
var obj = new Object();
obj.print() // Object 

インスタンスobjは直接Object.prototypeの属性とメソッドを継承します
1.オブジェクトは特別なデータであり、属性とメソッドを持ちます。JavaScriptはオブジェクト指向言語ですが、JavaScriptはクラスを使用しません。JavaScriptは[prototype][に基づいています。1], クラスに基づいていないためです。

2.属性:特定のオブジェクトに属する変数です。メソッド:特定のオブジェクトだけが呼び出すことができる関数です。

3.jsオブジェクトは属性とメソッドの集合です。メソッドは関数であり、オブジェクトのメンバーです。属性は値または値のセット(配列やオブジェクトの形式で)であり、オブジェクトのメンバーです。

4.jsオブジェクトはコンストラクタ関数に基づいており、新しいオブジェクトを作成する際には、新しいオブジェクトのインスタンス化が行われます。属性はコンストラクタ関数内の変数です。
コンストラクタ関数でインスタンス化されたオブジェクト:
 cat = new Animal();
Javascriptはオブジェクト(object)に基づいています。-オブジェクト(object)に基づいた言語であり、あなたが直面するすべてのものはほぼオブジェクトです。しかし、それは本格的なオブジェクト指向プログラミング(OOP)言語ではありません。なぜなら、その文法にはclass(クラス)がありません。

 <script type="text/javascript">
 //オブジェクトは名前/値のペアの集合
  var browser = {  //オブジェクトは括弧で囲まれています
   name:"Firefox",
   kernel:"Gecko"
  };
</script> 
//点号(.)または「[]」を使用してオブジェクトの属性にアクセスします
 browser.name   //"Firefox"
 browser["kernel"] //"Gecko" 

オブジェクト(objct)は属性(property)の集合であり、各属性は「名前/値のペアで構成されているため、jsは特別なオブジェクトとして配列を定義しており、配列は番号付きの値の順序付けされた集合です。 

jsは特別なオブジェクトとして関数を定義しており、関数は関連する実行可能なコードを持つオブジェクトで、関数を呼び出してコードを実行し、計算結果を返します。 

JSにはクラスがありませんが、新しい名前として「プロトタイプオブジェクト」と呼ばれています。したがって「クラス==プロトタイプオブジェクト」となります。詳細はこちらを参照してください:JavaScriptクラスの書き方(一) 

二、クラス(プロトタイプオブジェクト)とオブジェクト(インスタンス)の違いと関連
1.クラス(プロトタイプオブジェクト)は抽象的で概念的であり、一種のものを代表します。
2.オブジェクトは具体的で実際のものを代表します。
3.クラス(プロトタイプオブジェクト)はオブジェクトインスタンスのテンプレートであり、オブジェクトインスタンスはクラスの個体です。
数字のリテラル(リテラル)がオブジェクトでないという一般的な誤解があります。これはJavaScriptの解析器のエラーによるもので、ポイント演算子を浮動小数点リテラルの一部として解釈しようとします。 

数字のリテラルがオブジェクトのように見えるための多くの方法があります。
2..toString(); // 二つ目の点号は通常通り解析できます
2 .toString(); // 注意点号の前に空格があります
(2).toString(); // 2最初に計算されます

属性を削除する 

属性を削除する唯一の方法はdelete演算子を使用することです;属性をundefinedまたはnullに設定することは属性を本当に削除することではなく、属性と値の関連を取り除くことだけです。 

JavaScriptのオブジェクト指向の三大特徴 

封装:内部実装を考慮せず、機能の使用のみを考慮します。
継承:既存のオブジェクトから新しいオブジェクトを引き継ぎます。
多態性:多態性とは、あるリファレンスが異なる状況で複数の状態を持つことです。

1.封装 

封装とは、同じ種類のものの共通性(属性と行動を含む)を一つのクラスにまとめることで、使用を便利にすることです。例えば、人というものは以下のように封装できます: 

人{
 年齢(属性の一つめ)
身長(属性の二つめ)
性別(属性の三つめ)

やる(行動の一つめ)
歩く(行動の二つめ)
話す(行動の三つめ)
} 

封装の利点: 

封装は内部データの整合性を保護します;
オブジェクトの再構築を簡単にするための封装;
弱化模块间的耦合,提高对象的可重用性;
モジュール間の結合を弱め、オブジェクトの再利用性を高めます;

ネームスペースの衝突を避けるのに役立ちます;

 <script type="text/javascript"> 
   以下の例を見てください: //var boy = {};
     boy.name = "小明";//プロトタイプオブジェクトの属性に従って
     boy.age = 12;
   空のオブジェクトを作成します
     girl.name = "小红";
     girl.age = 10;
 </script> 

これは最もシンプルな封装です。2つの属性を1つのオブジェクトにまとめていますが、この書き方が2つの欠点があります。1つは、複数のインスタンスを生成する場合、書き方が非常に面倒になること、もう1つは、インスタンスとプロトタイプの間に何か関連があるかどうかを示す方法がないことです。 

構造関数パターン 

プロトタイプオブジェクトからインスタンスを生成する問題を解決するために、Javascriptは構造関数(Constructor)パターンを提供しています。 

「構造関数」とは、通常の関数ですが、内部でthis変数を使用しています。構造関数にnew演算子を使用すると、インスタンスが生成され、this変数はインスタンスオブジェクトにバインドされます。 

例えば、boyとgirlのプロトタイプオブジェクトは以下のように書けます:

 <script type="text/javascript"> 
  function Person(name,age){
    this.name = name;
    this.age = age;
  }
</script> 

それでは、インスタンスオブジェクトを生成できます。

 <script type="text/javascript"> 
  var boy = new Person("小明",12);
  var girl = new Person("小红",10);
  alert(boy.name); //明
  alert(boy.age); //12
</script> 

この時、boyとgirlは自動的にconstructor属性を持ち、その属性はそれぞれの構造関数を指します。

alert(boy.constructor == Person); //true

alert(girl.constructor); //全体の構造関数コードを出力してみてください
Prototypeパターンは、Javascriptで、各構造関数がprototype属性を持っており、この属性は別のオブジェクトを指し示すことを規定しています。このオブジェクトの全ての属性やメソッドは、構造関数のインスタンスが継承します。 

これは、変更されない属性やメソッドを直接prototypeオブジェクトに定義できることを意味します。

<script type="text/javascript">
function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.protype.type = "人間";
Person.protype.eat = function(){
  alert("米飯を食べる");
}
</script> 

それでは、インスタンスを生成します:

 <script type="text/javascript">
var boy = new Person("小明","12");
var girl = new Person("小红","10");
alert(boy.type);//人間
boy.eat();//食事
</script> 

この場合、すべてのインスタンスのtype属性とeat()メソッドは、実際には同じメモリアドレスに指し、prototypeオブジェクトに指しているため、実行効率が向上します。
 alert(boy.eat == girl.eat); //true
プロトタイプ属性は内蔵属性であり、オブジェクトが拡張するコンストラクタ関数を指定します。
 以下のコードはAnimalコンストラクタ関数に新しい属性sizeを追加し、この新しい属性はcatオブジェクトのプロトタイプ属性です。プロトタイプ属性を使用することで、Animalコンストラクタ関数を拡張するすべてのオブジェクトがsize属性にアクセスできます。

cat = new Animal("feline","meow", "walk/run");
cat.prototype.size = "fat"; 

この場合、すべてのAnimalオブジェクトのsize属性は「fat」です。プロトタイプはObjectの新しいインスタンスであり、それがオブジェクトであるため、新しい属性を追加することができます。styleがJavaScriptのオブジェクトのように、styleの後にも属性を追加することができます。

 <script type="text/javascript">
  /*Personクラスを定義する*/
  function Person(_name,_age,_salary){
   //Personクラスの公開属性、公開属性の定義方法は:"this.属性名"
   this.Name=_name;
   //Personクラスのプライベート属性、プライベート属性の定義方法は:"var 属性名"
   var Age=_age;
   var Salary=_salary;
   //Personクラスの公開メソッド(特権メソッド)を定義する、クラスの公開メソッドの定義方法
は:"this.functionName=function(){.....}"
   this.Show=function(){
 alert("Age="+Age+"\t"+"Salary="+Salary);//公開メソッド内でクラスのプライベート属性にアクセスすることは許可されています。
   }
</script> 

オブジェクトが属性を検索する際には、まず自身の属性を巡回し、見つからない場合には[[Prototype]]参照のオブジェクトを検索し、それでも見つからない場合には[[Prototype]].[[Prototype]]参照のオブジェクトを検索し、そのようにして順次、[[Prototype]].….[[Prototype]]がundefined(Objectの[[Prototype]]はundefined)になるまで続きます。 

簡単に言えば、オブジェクトの[[Prototype]]を通じて別のオブジェクトへの参照を保存し、その参照を通じて属性の検索を行うことで、これがプロトタイプチェーンです。 

null オブジェクト 

jsで変数にnullを割り当てる目的は以下の通りです:
空のポインタを割り当てることで、その変数がオブジェクトを格納するために準備されていることを人間が理解しやすくし、デバッグを容易にします。 

グローバルなwindowオブジェクト 

JavaScriptのどのグローバル関数や変数もwindowの属性です。
selfオブジェクトはwindowオブジェクトと完全に同じであり、selfは通常、現在のウィンドウ内であることを確認するために使用されます。 

windowの主要なオブジェクトには以下のようなものがあります:
 JavaScript document オブジェクト
JavaScript frames オブジェクト
JavaScript history オブジェクト
JavaScript location オブジェクト
JavaScript navigator オブジェクト
JavaScript screen オブジェクト

いくつかの常用方法
 valueof() メソッド:指定されたオブジェクトの元の値を返します
split() メソッドは、文字列を文字列配列に分割し、その配列を返します。
indexOf() メソッドは、指定された文字列が文字列内で初めて出現する位置を返します。   
substring() メソッドは、指定されたインデックス間の文字列を抽出するために使用されます。
substr() メソッドは、startPos位置から指定された数の文字を含む文字列を抽出します。   
join() メソッドは、配列のすべての要素を一つの文字列にまとめるために使用されます。
arrayObject.join(区切り文字)
reverse() メソッドは、配列内の要素の順序を逆転するために使用されます。   
slice() メソッドは、既存の配列から選択された要素を返します。

オブジェクトリテル 

オブジェクトリテルは、多くの属性を含むプロセスを作成するために使用されます。以下のように示されます:

 <script type="text/javascript">
 var company = {
  name : "Microsoft",
  ages : 39,
  employees : 99000,
  CEO : "Nadella"
 };  
</script> 

ここでは、属性と属性値がコロン(:)で区切られていることに注意が必要です;複数の属性はカンマ(,)で区切ります。オブジェクトリテルは方法も定義できますが、そのオブジェクトの属性にfunctionを書けばいいだけです。これはアノニマス関数であり、呼び出す際にはそのメソッド名()を書けばよいです。

 <script type="text/javascript">
var dog = {
 name:"husky",
 age:2,
 run:function(){
    return "123";
}
}
alert(dog.run());//もしdog.runが入力されたら、その後のfunction部分のコードが弹出されます
</script> 

基本値型の包装器 

jsには基本の値型が五種類あります:number、string、Boolean、null、undefinedです。nullとundefined以外の三つは基本の包装オブジェクトを持っています。Number()、String()、Boolean()の内蔵構造関数を使用して包装オブジェクトを作成できます。

 var num = new Number(10);
console.log(typeof num);//object 
Object()メソッド
 Object() // 空のオブジェクトを返します
Object(undefined) // 空のオブジェクトを返します
Object(null) // 空のオブジェクトを返します
Object(1) // new Number(1)
Object('foo') // new String('foo')と等しい
Object(true) // new Boolean(true)と等しい
Object([]) // 元の配列を返します
Object({}) // 元のオブジェクトを返します
Object(function(){}) // 元の関数を返します 

配列部分 

1.Array オブジェクト 

Array オブジェクト:データ型の配列の作成をサポートします。
arrayObj = new Array()
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])

定義:var arr = [2,3,45,6]); var arr = new Array(2,4,5,7) 

両者は定義に違いはありませんが、コードが短いため[]のパフォーマンスが高いです。 

配列とオブジェクトリテラルを使用する:var aTest = [];配列を定義する際には、オブジェクトリテラルを使用するとスペースを節約できます;同様に、オブジェクトリテラルもスペースを節約するために使用できます。以下の二行は等しいですが、オブジェクトリテラルを使用するとより簡潔です:

 var oTest = new Object; //できるだけ使用しない
 var oTest = { }; //最善の選択、またはvar 0Test = [ ]; 

巡回配列を巡回するために、古典的なforループを使用することをお勧めします。

 var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i < l; i++) {
 console.log(list[i]);
} 

上記のコードには、l = list.lengthをキャッシュする処理があります。 

Arrayコンストラクタ 

Arrayのコンストラクタは引数の処理方法が少し曖昧であるため、配列のリテラル記法を使用することを常に推奨します。 - [] - 配列を作成するために使用します。 

したがって以下のコードは非常に混乱します:
 new Array(3, 4, 5); // 結果: [3, 4, 5]
new Array(3) // 結果: []、この配列の長さは 3
新しい配列を作成する際には、配列のコンストラクタを使用することを避けるべきです。代わりに、配列のリテラル記法を使用することをお勧めします。それらは短くて簡潔で、コードの可読性を向上させます。 

Array配列の属性 

Array配列の3の属性:length属性、prototype属性、constructor属性 

1.length属性 

Length属性は配列の長さを表し、その中の要素の数です。配列のインデックスは常に0から始まるため、配列の範囲は0とlengthです。-1。ほとんどの他の言語とは異なり、JavaScriptの配列のlength属性は可変です。これは特に注意が必要です。 

2.prototype属性 

オブジェクトのプロトタイプリファレンスを返します。prototype属性はobjectが共有しています。 

Arrayオブジェクトに対して、以下の例でprototype属性の用途を説明します。
 配列オブジェクトに配列内の最大要素値を返すメソッドを追加します。これを達成するために、関数を宣言し、それをArray.prototypeに追加し、それを使用します。

 function array_max() 
{ 
var i,max=this[0]; 
for(i=1;i<this.length;i++) 
{ 
if(max<this[i]) 
max=this[i]; 
} 
return max; 
} 
Array.prototype.max=array_max; 
var x=new Array(1,2,3,4,5,6); 
var y=x.max(); 

このコードが実行されると、yが配列xの最大値を保存します、または言い換えれば6。 

3.constructor属性 

これはオブジェクトを作成する関数を示します。説明:constructor属性は、prototypeを持つすべてのオブジェクトのメンバーです。これにはGlobalおよびMathオブジェクト以外のすべてのJScript固有オブジェクトが含まれます。constructor属性は、特定のオブジェクトのインスタンスを作成する関数への参照を保存します。 

例えば:

 x = new String("Hi"); 
if(x.constructor==String) //処理を行います(条件が真の場合)。 
//または 
function MyFunc{ 
//関数体。 
} 
y=new MyFunc; 

if(y.constructor==MyFunc)//処理を行います(条件が真の場合)。
配列に対して:
 y = new Array();

Array オブジェクトメソッド

sort()メソッド 

文法
arrayObject.sort(sortby)
sortbyオプション。ソート順序を指定します。関数でなければなりません。
var arr = [11,2,28,4,5,1});
console.log(arr.sort());//return  [1, 11, 2, 28, 4, 5]
ここではなぜ11、28配列が順序に並んでいない理由は、無引数のsortは文字コードの順序でソートするからです。 

配列の要素を小到大にソートするにはどうすればいいですか?以下のコードをご覧ください:

 var arr = [11,2,28,4,5,1});
 console.log(arr.sort(function(a,b){
  return a-b;//return [1, 2, 4, 5, 11, 28]
 }); 

他の基準でソートしたい場合、比較関数を提供する必要があります。この関数は、2つの値を比較し、それらの値の相対的な順序を示す数字を返します。比較関数は、aとbという2つの引数を持ち、以下の返値を持つべきです:
 aがbよりも小さい場合、ソートされた配列ではaがbの前に配置されるべきであり、0よりも小さい値を返します。
aがbと等しい場合、0を返します。
aがbよりも大きい場合、0よりも大きい値を返します。

これが本文のすべてです。皆様の学習に役立つことを願っています。また、ナイアラートゥートゥリムのサポートを多くお願いします。

おすすめ