コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JavaScript オブジェクトと arrays_javascript スキルの詳細な説明

WBOY
リリース： 2016-05-16 15:27:50
オリジナル
1122 人が閲覧しました

C、C#、Java やその他の高水準プログラミング言語など、多くの高水準プログラミング言語はオブジェクト指向です。では、オブジェクト指向言語の基本的な要件は何でしょうか。ここで、オブジェクト指向の知識について話しましょう。
オブジェクト指向言語は、開発者に次の 4 つの基本機能を提供する必要があります。

  • (1) カプセル化: 関連情報 (データまたはメソッド) をオブジェクトに格納する機能
  • (2) 集約: 1 つのオブジェクトを別のオブジェクト内に格納する機能
  • (3) 継承: クラスの属性とメソッドを別のクラス (または複数のクラス) から取得する機能
  • (4) ポリモーフィズム: 複数の方法で実行できる関数またはメソッドを作成する機能

ECMAScript はこれらの要件をサポートしているため、オブジェクト指向とみなすことができます。 ECMAScript では、オブジェクトの物理表現にはアクセスできず、参照のみにアクセスできます。オブジェクトが作成されるたびに、変数に格納されるのは、オブジェクト自体ではなく、オブジェクトへの参照です。したがって、JavaScript はオブジェクト指向に基づいた弱い型指定の Web スクリプト言語です。
1. オブジェクトの種類
オブジェクト型には、プロパティ (フィールドとも呼ばれます) とメソッド (関数とも呼ばれます) が含まれています。したがって、オブジェクト型を作成する際に説明しなければならない重要なポイントがあります。 オブジェクト タイプ番号を作成するには、通常 2 つの方法があります:
(1) 新しい演算子を使用します 

var box=new Object(); 
box.name="张三";//创建属性以及初始化 
box.age=23; 
box.run=running();//创建方法 
function running(){ 
   return "我是中国人！"; 
} 
document.write(typeof box+"<br/>"); 
document.write(box.name+"<br/>"); 
document.write(box.age+"<br/>"); 
document.write(box.run);
ログイン後にコピー

出力: オブジェクト
張三
23
私は中国人です！
(2) リテラル表現

var box={ 
 name:"张三", 
 age:23, 
 run:function(){  
   return "我是中国人！"; 
 } 
}; 
document.write(typeof box+"<br/>"); 
document.write(box.name+"<br/>"); 
document.write(box.age+"<br/>"); 
document.write(box.run());
ログイン後にコピー

出力: 上記と同じ
(3) 包括的利用
複数のパラメータを渡す場合、それらを順番に入力する必要があります。この面倒なプロセスを解決するために、複数のパラメータをカプセル化することができます
オブジェクト型に対しては、オブジェクト型をパラメータとして使用することで、存在しないパラメータや余分なパラメータを判断することもでき、関数
の呼び出しが容易になります。 パラメータをカウントして渡します。 

function box(obj){ 
  if(obj.name!=undefined)document.write(obj.name+"<br/>"); 
  if(obj.age!=undefined)document.write(obj.age+"<br/>"); 
  if(obj.love!=undefined)document.write(obj.love+"<br/>"); 
} 
var obj={ 
  name:"张三", 
  age:23 
}; 
box(obj);
ログイン後にコピー

出力: 張三
23
2. 配列型
ECMAScript の配列は他の言語とは大きく異なります。JS の配列の要素は任意のデータ型にすることができ、配列のサイズも
です。 調整可能です。これは、JS が弱い型付け言語であることを側面から反映しています。配列型の番号を作成するには 2 つの方法があります:
(1) new 演算子を使用する (new は省略可能)

var box=new Array(1,2,3,4); 
document.write(typrof box+"<br/>");//Array属于Object类型 
document.write(box);//输出1,2,3,4
ログイン後にコピー

インデックスの添字は 0 から始まります

var box=new Array(1,2,3,4); 
document.write(box[0]+box[1]+box[2]+box[3]);//输出1,2,3,4
ログイン後にコピー

10 個の要素を持つ配列を作成します

var box=new Array(10);//创建数组默认必须是数字，必须是一位数字 
box[3]=4;//初始化数组中的元素 
box[5]=6; 
document.write(box);//输出,,,4,,6,,,,
ログイン後にコピー

(2) リテラルを使用して配列を作成する

var box=[1,2,3,4]; 
document.write(typrof box+"<br/>");//输出Object 
document.write(box.length+"<br/>");//输出数组的长度为4 
document.write(box);//输出1,2,3,4
ログイン後にコピー

複雑な配列を作成します (さまざまな型を使用できます)

var box=[ 
  { 
   name:"张三", 
   age:23 
  },//Object类型 
  [1,2,3,4],//Array类型 
  "JS",//String类型 
  25+25,//Number类型 
  new Array(1,2,3)//Array类型 
]; 
document.write(typeof box+"<br/>"); 
document.write(box[0].name+"<br/>"); 
document.write(box[3]);
ログイン後にコピー

ページの出力結果は次のとおりです:

3. オブジェクト内のメソッド
(1)変換方法
オブジェクトまたは配列には、toLocaleString()、toString()、および valueOf() メソッドがあります。このうち、toString() と valueOf() は、どちらがオーバーライドされても
を返します。 同じ値を返します。配列は、各値を文字列形式でカンマで区切って連結します。 

var box=[1,2,3,4]; 
document.write(box+"<br/>");//输出1,2,3,4 
document.write(box.toString()+"<br/>");//输出1,2,3,4 
document.write(box.valueOf()+"<br/>");//输出1,2,3,4 
document.write(box.toLocaleString());//输出1,2,3,4
ログイン後にコピー

デフォルトでは、配列文字列はカンマで区切られます。 join() メソッドを使用する場合、さまざまな区切り文字を使用してこの文字列
を構築できます。 

var box=[1,2,3,4]; 
document.write(box+"<br/>"); 
document.write(typeof box+"<br/>"); 
document.write(box.join("-")+"<br/>"); 
document.write(typeof box.join("-"));
ログイン後にコピー

页面输出的结果为：

(2)栈方法
 ECMAScript数组提供了一种让数组的行为类似于其他数据结构的方法。也就是说，可以让数组像栈一样，可以限
制插入和删除想的数据结构。栈是一种后进先出的数据结构，也就是最新添加的元素最早被移除。而栈元素的插入和
移除，只发生在栈的顶部。ECMAScript为数组专门提供了push()和pop()方法。
栈操作数组元素的图片：

push()方法可以接受任意数量的参数，把它们逐个添加到数组的末尾，并返回修改数组的长度。而pop()方法则从
数组末尾移除最后一个元素，减小数组的length值，然后返回移除的元素。

var box=[1,2,3,4]; 
document.write(box+"<br/>"); 
box.push(5,6);//在数组末尾添加元素 
document.write(box+"<br/>"); 
document.write(box.push(7,8)+"<br/>");//在数组末尾添加元素，并返回添加元素后数组的长度 
document.write(box+"<br/>"); 
box.pop();//移除数组末尾的元素 
document.write(box+"<br/>"); 
document.write(box.pop()+"<br/>");//移除数组末尾的元素，并返回移除的元素 
document.write(box);
ログイン後にコピー

输出：

(3)队列方法
 栈方法是后进先出，队列方法是先进先出。队列在数组的末端添加元素，从数组的前端移除元素。通过push()向
数组末端添加一个元素，然后通过shift()方法从数组的前端移除一个元素。
队列操作数组元素的图片

var box=[1,2,3,4]; 
document.write(box+"<br/>"); 
box.push(5,6);//在数组末尾添加元素 
document.write(box+"<br/>"); 
document.write(box.push(7,8)+"<br/>");//在数组末尾添加元素，并返回添加元素后数组的长度 
document.write(box+"<br/>"); 
box.shift();//移除数组前端的一个元素 
document.write(box+"<br/>"); 
document.write(box.shift()+"<br/>");//移除数组前端的一个元素，并返回移除的元素 
document.write(box);
ログイン後にコピー

输出：

ECMAScript还为数组提供了一个unshift()方法，它和shift()方法的功能完全相反。unshift()方法为数组的前端添加
一个元素。

var box=[1,2,3,4]; 
document.write(box+"<br/>"); 
box.unshift(0);//在数组的前端添加一个元素 
document.write(box+"<br/>"); 
document.write(box.unshift(-1)+"<br/>");//在数组的前端添加一个元素，并返回添加元素会数组的长度 
document.write(box+"<br/>"); 
box.pop();//在数组末尾移除元素 
document.write(box+"<br/>"); 
document.write(box.pop()+"<br/>");//在数组末尾移除元素，并返回移除元素后数组的长度 
document.write(box);
ログイン後にコピー

输出：

(4)重排序方法
数组中已经存在两个直接用来排序的方法：reverse()和sort()。
reverse()：逆向排序

var box=[1,2,3,4,5]; 
box.reverse(); 
document.write(box+"<br/>");//输出54321 
document.write(box.reverse());//再次进行逆序，输出12345
ログイン後にコピー

sort():从小到大排序

var box=[3,2,6,4,1,5]; 
box.sort(); 
document.write(box+"<br/>");//输出1,2,3,4,5,6 
document.write(box.sort());//再次从小到大进行排序
ログイン後にコピー

如果我们实验次数多的话可能回遇到这样的问题，

var box=[0,15,10,1,5]; 
box.sort(); 
document.write(box);//输出0,1，10，15,5
ログイン後にコピー

我们从结果可以看出，这违背了我们想要的结果，解决方法：

function compare(value1,value2){ 
  if(value1<value2){ 
   return -1; 
  } 
  else if(value1>value2){ 
   return 1; 
  } 
  else{ 
   return 0;  
  }  
} 
var box=[0,15,10,1,5]; 
box.sort(compare); 
document.write(box);//输出0,1,5,10,15
ログイン後にコピー

(5)操作方法
JS为操作已经包含在数组中的元素提供了许多的方法。concat()方法可以基于当前数组创建一个新数组。slice()方
法可以基于当前数组获取指定区域元素并创建一个新数组。splice()方法主要用途是向数组的中部插入元素。
a

var box=[1,2,3,4,5]; 
var box1=box.concat(6);//创建新数组，并添加新元素 
document.write(box1+"<br/>");//输出1,2,3,4,5,6， 
document.write(box);//原数组不变化
ログイン後にコピー

b

var box=[1,2,3,4,5]; 
var box1=box.slice(2);//取出索引为2以后的元素组成新的数组 
document.write(box1+"<br/>");//输出3,4,5 
document.write(box);//原数组不变化
ログイン後にコピー

c

var box=[1,2,3,4,5]; 
var box1=box.slice(2,3);//取出索引为2到3之间的元素组成新的数组 
document.write(box1+"<br/>");//输出3 
document.write(box);//原数组不变化
ログイン後にコピー

splice中的删除功能

var box=[1,2,3,4,5]; 
var box1=box.splice(0,2);//截取索引为0开始的两个元素组成新的数组 
document.write(box1+"<br/>");//返回截取的元素1,2 
document.write(box);//当前数组被截取的元素被删除，输出3,4,5
ログイン後にコピー

splice中的插入功能

var box=[1,2,3,4,5]; 
var box1=box.splice(4,0,6);//索引为4的位置插入了一个元素 
document.write(box1+"<br/>");//返回新的数组为空，并没有截取元素 
document.write(box);//当前数组索引为4的位置插入一个元素1,2,3,4，6，5
ログイン後にコピー

splice中的替换功

var box=[1,2,3,4,5]; 
var box1=box.splice(4,1,6);//索引为4的元素被替换，替换下来的元素组成新数组 
document.write(box1+"<br/>");//返回新的数组5 
document.write(box);//被替换后的原数组1,2,3,4,6
ログイン後にコピー

以上就是关于JavaScript对象和数组的详细介绍，希望对大家的学习有所帮助。

関連ラベル：
javascript对象 javasript数组
ソース：php.cn
前の記事：jQuery モバイル ページのタッチ イベントと仮想マウス イベントの概要development_jquery 次の記事：JavaScript_javascript スキルにおける apply、call、this の使用の簡単な比較分析
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
無効な React 子要素 (見つかった: キー {clientVersion} を持つオブジェクト)。子要素のコレクションをレンダリングする場合は、代わりに配列を使用してください 複数ステップのフォームを持っているのですが、送信しようとするとこのエラーが表示されます。ただし、createOrganization スケジュールを単純な形式で使用すると、機能しま...
から 2024-04-06 16:25:39
0
1
346
vue vee-validate は日付ピッカーの選択の問題をキャプチャします datepicker フィールドの v-model バインディングが正しく機能しません。選択を行うと、画面上でライブ更新されますが、値は formValues リアクティブ オブジ...
から 2024-04-06 11:38:56
0
1
510
**エラーの種類: 'NoneType' オブジェクトを反復できません** SSHトンネルを使用してMySQLデータベースにアクセスしたいと考えています。残念ながら、関数が私のクエリ形式と互換性がないように見えるため、このコードのアーキテクチャは私のクエリ...
から 2024-04-06 10:26:38
0
1
378
オブジェクトを配列にプッシュする、コンポーザブル API プロジェクトがあります。 「サイズ」（大、小）と数量（2/4/6）の 2 つの選択オプションがあります。各オプションが選択されると、その選択内容がタイトルに表示される必要があります...
から 2024-04-05 14:41:47
0
1
1526
HTML テーブル内のオブジェクトのネストされた配列を反復して表示します ネストされたオブジェクトの配列を含む次の入力があります。 summary は親オブジェクト配列、run_type はネストされたオブジェクト配列です。 letinput={&quo...
から 2024-04-05 14:11:42
0
1
1373
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート