JavaScriptの配列と共通関数を詳しく解説_基礎知識

1. 配列について理解する

配列は、特定の種類のデータのコレクションです。データ型は、整数、文字列、またはオブジェクトです。
JavaScript は多次元配列をサポートしていませんが、配列にはオブジェクトを含めることができるため (配列もオブジェクトです)、配列は互いに入れ子にすることで多次元配列と同様の機能を実現できます。

1.1 配列の定義

10 個の要素を持つ配列を宣言します:

コードをコピーします コードは次のとおりです:

var a = new Array(10);

この時点で、10 個の要素を含むメモリ空間が a に対して開かれています。これを呼び出すには、配列名と [添え字] を使用します (例: a[2])。ただし、この時点では要素は初期化されていません。呼び出しは未定義を返します。
次のコードは、変数配列を定義し、値を割り当てます。

コードをコピー コードは次のとおりです。

var a = new Array();
a [0] = 10;
a[1] = "aaa";
a[2] = 12.6;

上で述べたように、オブジェクトは配列に配置できます。たとえば、次のコードのようになります。

コードをコピー コードは次のとおりです。次のように:

var a = new Array();
a[0] = true;
a[1] = document.getElementById("text");
a[2] = { x:11, y:22};
a[3] = new Array();

配列には、インスタンス化時に値を直接割り当てることもできます。例:

コードをコピー コードは次のとおりです。

var a = 新しい配列(1, 2, 3, 4, 5);
var b = [1, 2, 3, 4, 5];

a と b はどちらも配列ですが、b は暗黙の宣言を使用して別のインスタンスを作成します。このとき、alert(a==b) を使用すると false

が表示されます。

1.2 多次元配列

実際、JavaScript は多次元配列をサポートしていません。asp では、var a = new Array(10,3) を使用して dim a(10,3) を使用して多次元配列を定義できます。 、エラーが報告されます
ただし、前述したように、配列にはオブジェクトを含めることができるため、配列内の要素を配列として宣言できます。たとえば、

コードをコピー コードは次のとおりです。

var a = new Array();
a [0] = new Array();
a[0][0] = 1;
alert(a[0][0]) //ポップアップ 1

ステートメント

コードをコピーする場合 コードは次のとおりです。

var a = new Array([1, 2,3], [4,5,6],[7,8,9]);
var b = [[1,2,3], [4,5,6] 、[7,8, 9]];

効果は同じで、a は通常のインスタンス化を使用し、b は暗黙的な宣言であり、結果は多次元配列になります。

1.3 配列リテラル

これを中国語で何と呼ぶのか本当に分かりません。テキスト配列ですか?
配列と言えば、配列リテラルについて話さなければなりません。配列は実際には固有のプロパティとメソッドを持ち、オブジェクト名.property、object.method() を通じて取得されます。配列リテラルは、多くの点で配列と似ていますが、基本的には、その宣言と呼び出しは配列とは異なります。 >

コードをコピー コードは次のとおりです。

var aa = new Object();
aa .x = "猫";
aa.y = "晴れ";
alert(aa.x) //猫をポップアップします

単純なオブジェクトを作成します。通常、呼び出しは aa.x を介して行われます。これが配列リテラルとして使用される場合、alert(aa["x"]) を使用すると cat

も表示されます。

コードをコピー コードは次のとおりです。

var a = {x: "cat" , y: "晴れ"};
alert(a["y"]) //晴れ

をポップアップします。

これはオブジェクトを作成する別の方法ですが、結果は同じです

2. 配列要素の操作

上で説明したように、配列 [添字] を通じて要素の読み取りと書き込みができます。
添字の範囲は 0 – (23 (上付き文字 2) -1) で、添字は負の数、浮動小数点、またはブール値の場合でも、配列は自動的にオブジェクト型に変換されます。例:

コードをコピー コードは次のとおりです。

var b = new Array();
b[2.2] = "XXXXX";
alert(b[2.2]) //->XXXXX

これは、b["2.2"] = "XXXXX" と同等です。

2.1 配列ループ

コードをコピー コードは次のとおりです:

var a = [1,2,3,4,5,6];
for(var i =0; ialert(a[i]);
}

これは最も一般的に使用されるものです。配列を走査した後、コードは 1 から 6 まで順番に表示されます。
もう 1 つ一般的に使用されるものがあります:

コードをコピー コードは次のとおりです:

var a = [1,2,3,4,5 ,6];
for(var e in a){
alert(e);
}

引き続き 1 から 6 までがポップアップします。 for...in はトラバーサル オブジェクト (配列は特殊なオブジェクト) で使用されます。配列には属性名がないため、値が直接出力されます。この構造ステートメントはオブジェクトで使用されます。例:

コードをコピーします コードは次のとおりです。 >var a = {x:1,y :2,z:3};

for(var e in a){

alert(e ":" a[e]);
}



このとき、e は属性名、つまり x、y、x を取得します。値の取得には配列名 [attribute] が使用されるため、a[e] は a["x"] と同等になります。 、a[" y"]、a["z"]

2.2 一般的な配列関数

連結

既存の配列の後に配列を追加し、既存の配列に影響を与えずに新しい配列を返します:

コードをコピー コードは次のとおりです:var a = [123];

var b = "サニーキャット";

var c = ["www",21,"ido"];
var d = {x:3.14, y:"SK"};
var e = [1, 2,3,4,[5,6,[7,8]]];

alert(a.concat(b)) // -> 123,sunnycat
alert; (a) ; // -> 123
alert(b.concat(c, d)) // ->sunnycatwww,21,ido[object Object]
alert(b); ); / / -> www,21,ido,sunnycat
alert(e.concat(11,22,33).join(" # ")); // -> #5、6、7、8 #11 #22 #33



接続 (先頭の a) が数値、ブール値、またはオブジェクトの場合、文字列が接続されるとエラーが報告されることに注意してください。配列の場合、文字列の後に配列の最初の要素が続き、配列の接続文字列は新しい要素を追加します (この理由はわかりません。知っている場合は開示してください)。配列とオブジェクトは、接続後もそのまま残ります。

参加

指定された区切り文字で配列を連結し、配列を文字列に変換します:

コードをコピーします コードは次のとおりです:var a = ['a','b','c','d','e','f','g'];

lert(a.join( "," )); // -> a、b、c、d、e、f、g は a.toString()

alert(a.join(" x ")) と同等です。 > a x b x c x d x e x f x g



これは理解するのは簡単ですが、配列内に配列が存在する場合は、join で指定された文字列接続は使用されず、デフォルトの toString() が変換されることに注意してください。

などの使用

コードをコピー コードは次のとおりです。var a = ['a',' b', 'c','d','e','f','g',[11,22,33]];

alert(a.join(" * ")); > a * b * c * d * e * f * g * 11,22,33

注: 配列内の配列は * 接続には使用されません

ポップ

配列の最後の要素を削除し、要素を返します

コードをコピー コードは次のとおりです:

var a = ["aa","bb","cc"];
document.write(a.pop()); // -> cc
document.write(a) ); // -> aa、bb

注: 配列が空の場合は、未定義が返されます

プッシュ

配列の末尾に配列を追加し、配列の新しい長さを返します

コードをコピー コードは次のとおりです。

var a = ["aa"," bb", "cc"];
document.write(a.push("dd")); // -> 4
document.write(a); // -> aa,bb, cc,dd
document.write(a.push([1,2,3])); // -> 5
document.write(a); // -> ,dd, 1,2,3

concat との違いは、concat は元の配列に影響を与えず、新しい配列を直接返すのに対し、push は元の配列を直接変更し、配列の新しい長さを返すことです

並べ替え

配列の並べ替え、まず例を見てみましょう

コードをコピー コードは次のとおりです:

var a = [11,2,3,33445,5654,654,"asd","b"];
alert(a.sort()) // -> 11,2,3 ,33445,5654, 654,asd,b

結果は驚くべきものではありませんか? はい、ソートは整数のサイズではなく、文字列の比較によって行われます。つまり、最初の文字が同じであれば、小さい方が優先されます。 2 番目の文字が取得され、次に比率が取得されます。整数値で比較したい場合は、これを行うことができます

コードをコピー コードは次のとおりです。

var a = [11,2,3 ,33445, 5654,654];
a.sort(function(a,b) {
return a - b;
});
alert(a); ,3, 11,654,5654,33445

sort() メソッドにはオプションのパラメーターがあり、これはコード内の関数です。これは単純な例であり、数値以外の場合はさらに判断が必要になるため、ここでは詳しく説明しません。

反転

配列の逆ソートはsort()と同じで、比較のために最初の文字のASCII値を取得します

コードをコピー コードは次のとおりです。

var a = [11,3,5,66,4];
alert(a.reverse()); // -> ,5,3 ,11

配列に配列も含まれている場合は、オブジェクトとして扱われ、要素は抽出されません

コードをコピー 次のコード:

var a = ['a','b','c','d','e','f','g',[4,11 ,33] ];
alert(a.reverse()) // -> 4,11,33,g,f,e,d,c,b,a
alert(a.join() " * " )); // -> 4,11,33 * g * f * e * d * c * b * a

論理的には、行 11 の最後にあるはずです。ここでは 4、11、33 が完全なオブジェクトとして比較されるため、最初にランク付けされます。
理解できない場合は、join() を使用して文字列化してください。一緒にすると、より明確になります

。

シフト

配列の最初の要素を削除し、その要素を返します。これは、pop に似ています

コードをコピーします コードは次のとおりです

var a = ["aa","bb","cc"];
document.write(a.shift()); // aadocument.write( a) // -> bb,cc

注: 配列が空の場合は、unknown が返されます

シフト解除

シフトとは対照的に、配列の先頭に要素を追加し、配列の新しい長さを返します。

コードをコピー コードは次のとおりです:

var a = ["aa","bb","cc"];
document.write(a.unshift(11)); // -> 4 注: IE では未定義が返されます。
document.write(a); // -> 11,aa,bb,cc
document.write([11,22])); // -> document.write(a); // -> 11,22,11,aa,bb,cc
document.write("cat"); // -> .write(a); // -> 猫,11,22,11,aa,bb,cc

このメソッドは IE では未定義を返すことに注意してください。これは Microsoft のバグのようですが、Firefox では新しい長さの配列を正しく使用できます。

スライス

配列フラグメントを返す

コードをコピー コードは次のとおりです。

var a = ['a',' b', 'c','d','e','f','g'];

alert(a.slice(1,2)); // -> a.slice (2)); // -> c,d,e,f,g
alert(a.slice(-4)); // -> d,e,f,galert( a.slice(-2,-6)); // -> 空



a.slice(1,2)、下付き文字 1 から下付き文字 2 までの番号。下付き文字 2 の要素は含まれないことに注意してください。
パラメーターが 1 つしかない場合、デフォルトは最後の

配列の -4 は下から 4 番目の要素を表すので、 の最後の行は下から 2 番目から始まります。要素を取得できないため、空の配列を返します。 a.slice(-6,-2) に変更すると、b,c,d,e

が返されます。

スプライス

配列からフラグメントの要素を削除し、削除された要素を返します

コードをコピー

コードは次のとおりです。var a = [1,2,3 ,4, 5,6,7,8,9];document.write(a.splice(3,2)) // -> 4,5

document.write(a); / -> ; 1,2,3,6,7,8,9

document.write(a.splice(4)); // -> 7,8,9 注: IE では、空の
ドキュメントが返されます。 // -> 1,2,3,6
document.write(a.splice(0,1)); // -> .write(a); // -> 2,3,6
document.write(1,1,["aa","bb","cc"]); > 3
document.write(a) // -> 2,aa,bb,cc,6,7,8,9
document.write(1,2,"ee; ").join(" #")); // -> aa,bb,cc#6
document.write(a); // -> 2,ee,7,8,9
document.write(a. splice(1,2,"cc","aa","tt").join("#")); // -> ee#7
document.write(a) ; // -> 2,cc,aa,tt,8,9



このメソッドの 2 番目のパラメーターは IE では必須であることに注意してください。入力されていない場合は、デフォルトで 0 (a.splice(4) など) が返され、効果は a と同等になります。スプライス(4,0 )

toString

配列を文字列に変換します (配列だけでなく、すべてのオブジェクトでこのメソッドを使用できます)

コードをコピー

コードは次のとおりです:var a = [5,6,7,8,9,["A","BB"],100];document.write(a.toString()) ; / / -> 5,6,7,8,9,A,BB,100var b = new Date()

document.write(b.toString()); Sat Aug 8 17:08:32 UTC 0800 2009

var c = function(s){
alert(s);
}
document.write(c.toString()); // -> ; 関数{ アラート }



ブール値は true または false を返し、オブジェクトは [オブジェクト objectname] を返します
join() メソッドと比較すると、join() は 1 次元配列のみを置き換えますが、toString() は (1 次元に関係なく) 配列全体を置き換えます。次元または多次元) 完全にフラット
同時に、このメソッドは 10 進数、2 進数、8 進数、および 16 進数の変換にも使用できます。たとえば、

コードをコピー

コードは次のとおりです:var a = [5,6,7,8,9,"A","BB" ,100]; for(var i=0; idocument.write(a[i].toString() " バイナリ システムは " a[i].toString (2) "、8 進数は " a[i].toString(8) "、16 進数は " a[i].toString(16)); // -> 4,5

}

;

出力結果:

コードをコピー コードは次のとおりです:

のバイナリ5は101、8進法は5、16進法は5
6の2進法は110、8進法は6、16進法は6
7の2進法は111、8進法
8 の 2 進法は 1000、8 進法は 10、16 進法は 8。
9 の 2 進法は 1001、8 進法は 8 A
A の 2 進数は A、8 進数は A、10 進数は A 16 進数は A
BB、2 進数は BB、8 進数は BB、および16 進数は BB
100 は 2 進数で 1100100、8 進数は 144、16 進数は 64

変換は要素に対してのみ実行できます。配列全体が変換された場合、配列は変更されずに返されます。

toLocaleString

主に Date オブジェクトで使用されるローカルの書式文字列を返します

コードをコピー コードは次のとおりです。

var a = new Date();
document .write(a.toString()); // -> 2009 年 8 月 8 日土曜日 17:28:36
document.write(a.toLocaleString()); // -> , 2009 日付 17:28:36
document.write(a.toLocaleDateString()) // -> 2009 年 8 月 8 日

違いは、toString() は標準形式を返し、toLocaleString() はローカル形式で完全な日付を返すことです ([コントロール パネル]>[地域と言語のオプション]で、[時刻]を変更することで)および [長い日付] 形式)、toLocaleDateString() は toLocaleString() と同じですが、時間がかかりません

の値

出力に使用すると、toString() と似ていますが、toString() は文字列型を返し、valueOf() は元のオブジェクト型を返します。

コードをコピー コードは次のとおりです。

var a = [1,2,3 ,[4 ,5,6,[7,8,9]]];
var b = new Date();
var c = true;
var d = function(){
alert("サニーキャット");
};
document.write(a.valueOf()) // -> 1,2,3,4,5,6,7,8,9document.write(typeof(a.valueOf())); // -> オブジェクト
document.write(b.valueOf()); // -> 1249874470052
document.write( b.valueOf ())); // -> 数値
document.write(c.valueOf()) // -> true
document.write(typeof(c.valueOf())) ; // -> boolean
document.write(d.valueOf()) // -> function () {alert("sunnycat"); ()) ); // -> 関数



配列もオブジェクトであるため、typeof (a.valueOf()) は多次元配列であるオブジェクトを返します

コードをコピー コードは次のとおりです。var a = [1,2,3 ,[4 ,5,6,[7,8,9]]];

var aa = a.valueOf();

document.write(aa[3][3][1]); / -> ; 8



Date オブジェクトは、1970 年 1 月 1 日からのミリ秒数を返します。Math オブジェクトと Error オブジェクトには valueOf メソッドがありません。