ホームページ ウェブフロントエンド jsチュートリアル JavaScript オブジェクトと arrays_javascript スキルの詳細な説明

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

May 16, 2016 pm 03:27 PM

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对象和数组的详细介绍,希望对大家的学习有所帮助。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解:それが何をするのか、なぜそれが重要なのか javascriptの分解:それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は?
または:
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は? または: Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

JavaScriptは学ぶのが難しいですか? JavaScriptは学ぶのが難しいですか? Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

フロントエンド開発でVSCodeと同様に、パネルドラッグアンドドロップ調整機能を実装する方法は? フロントエンド開発でVSCodeと同様に、パネルドラッグアンドドロップ調整機能を実装する方法は? Apr 04, 2025 pm 02:06 PM

フロントエンドのVSCodeと同様に、パネルドラッグアンドドロップ調整機能の実装を調べます。フロントエンド開発では、VSCODEと同様のVSCODEを実装する方法...

See all articles