JavaScript Arayオブジェクト
12284 ワード
JsのAray配列オブジェクトを紹介します.
目次
1.紹介:Aray配列オブジェクトの説明、定義方法および属性を紹介します.
2.例示的な方法:Arayオブジェクトの例を紹介する方法:concat、every、filter、forEach、indexOf、join、lastIndexOf、map、pop、push、reverse、shift、slice、sort、splice、tostring、tounshiftなど.
3.静的方法:Arayオブジェクトの静的方法を紹介する:Aray.isAray().
4.実際の操作:Arayを例示的に操作する:索引、for遍歴、浅い複製、深さコピーなどの操作.
1.紹介
1.1説明
配列は値の規則的な集合である.各値は要素と呼ばれていますが、各要素は配列内に位置し、数字で表されています.インデックスと呼ばれています.JavaScript配列は無タイプであり、配列要素は任意のタイプであり、同じ配列の異なる要素も異なるタイプである可能性がある.『JavaScript権威ガイド(第六版)』
1.2定義方式
1.3属性
length:配列内の要素長を表します.
2.例示的な方法
常用方法:
1) unshift():配列ヘッドに要素を挿入する
2) shift():配列の最初の要素を削除して返します.
3) push():配列の最後に要素を挿入する
4) pop():配列の最後の要素を削除して返します.
2.1 concat():要素を配列に接続します.元のarrayを変更せずに、新しい配列を返します.
パラメータ:
①value 1,value 2....valueN:任意の複数の値
戻り値:
新しい配列は元のArayと新しく加入した元素を含む.
例:
2.2 everry():元素を順次巡回して、各元素がすべてtrueなのかどうかを判断します.
パラメータ:
①function(value,index,self){}:各要素はこの関数を使ってtrueかどうかを判断し、falseかを判断したら、すぐに巡回を終了します.
value:配列遍歴の要素
index:要素番号
self:Aray自体
戻り値:
｛Boolean｝:各元素だけがtrueであるからtrueに戻ります.一つがfalseである限り、falseに戻ります.
例:
2.3 filter():要素を順次巡回して、条件に合う要素を含む新しい配列を返します.
パラメータ:
①function(value,index,self){}:各要素はこの関数を順次呼び出して、条件に合う要素を含む新しい配列を返します.
value:配列遍歴の要素
index:要素番号
self:Aray自体
戻り値:
条件に合う要素を含む新しい配列
例:
2.4 forEach():要素を順次巡回し、指定された関数を実行します.戻り値なし
パラメータ:
①function(value,index,self){}:各要素は順次この関数を呼び出します.
value:配列遍歴の要素
index:要素番号
self:Aray自体
戻り値:なし
例:
2.5 indexOf():整合要素を配列内で検索します.マッチする要素が存在しない場合は-1を返します.検索するときは「==」演算子を使いますので、1と「1」を区別します.
パラメータ:
①value:行列で検索する値です.
②start:検索開始番号の位置は、省略すれば0.
戻り値:
｛Int｝:配列の最初の一致valueの番号を返します.存在しない場合は、-1を返します.
例:
2.6 join():配列中のすべての要素を一つの区切り記号でつなぎ合わせて文字列とする.
パラメータ:
①sparator｛String｝:各要素間のセパレータは、省略するとデフォルトでは英語のコンマで区切られます.
戻り値:
｛String｝:各要素はsparatorを区切り子として、つなぎ合わせて作られた文字列です.
例:
2.7 lastIndexOf:整合要素を配列内で逆方向に検索します.マッチする要素が存在しない場合は-1を返します.検索するときは「==」演算子を使いますので、1と「1」を区別します.
パラメータ:
①value:行列で検索する値です.
②start:検索を開始するシーケンス番号の位置は、省略すると最後の要素から検索を開始します.
戻り値:
｛Int｝:右から左までの検索配列の最初の一致valueの番号が存在しない場合は、-1を返します.
例:
2.8 map():各要素を順次巡回して計算し、計算された要素の配列を返します.
パラメータ:
①function(value,index,self){}:各要素はこの関数を順次呼び出して、計算された要素を返します.
value:配列遍歴の要素
index:要素番号
self:Aray自体
戻り値:
{Aray}良い要素を含む新しい配列
例:
2.9 pop():配列の最後の要素を削除して返します.
パラメータ:なし
戻り値:
{Object}配列の最後の要素.配列が空の場合、undefinedを返します.
例:
2.10 push():配列の最後に要素を追加します.
パラメータ:
①value 1,value 2....valueN:任意の複数の値を配列の末尾に追加します.
戻り値:
{int}配列の新しい長さ
例:
2.11 reverse():配列要素の順序を反転します.
パラメータ:なし
戻り値:なし(元の配列内で要素順反転)です.
例:
2.12 shift():配列の最初の要素を削除して返します.
パラメータ:なし
戻り値:
{Object} 配列の最初の要素配列が空の場合、undefinedを返します.
例:
2.13 slice(startIndex,endIndex):配列の一部を返します.
パラメータ:
①startIndex:スタートの番号.負の数であれば、末尾から計算することを表し、-1は最後の要素を表し、-2は後ろから二つ目の要素を表し、これに類推する.
②endIndex:終了箇所の要素の後の番号は、指定されていない場合は終了となります.切り取られた要素はここの番号の要素を含みません.ここの番号の前の要素に終わります.
戻り値:
｛Aray｝新しい配列は、startIndexからendIndexの前の要素までのすべての要素を含んでいます.
例:
2.14 sort:一定の規則で並べ替えます.
パラメータ:
①opt_order Fun(v 1,v 2)｛Function｝:オプションのソート規則関数.省略すると、要素のアルファベットに従って小から大に並べ替えます.
v 1:前に続く元素.
v 2:繰り返し後の要素.
ソート規則:
v 1とv 2を比較して、v 1とv 2の並べ替え規則を表す数字を返します.
0より小さい:v 1はv 2より小さく、v 1はv 2より前にある.
イコール0:v 1はv 2に等しく、v 1はv 2の前に並ぶ.
0より大きい:v 1はv 2より大きく、v 1はv 2の後ろにある.
戻り値:なし(元の配列で並べ替え操作).
例:
2.15 splice():配列要素の挿入、削除
パラメータ:
①start｛int｝:挿入、削除、または置き換えの開始番号を開始します.
②deleteCount｛int｝:要素の個数を削除するには、startから計算を開始します.
③value 1,value 2…valueN｛Object｝:オプションパラメータは、挿入する要素を表し、startから挿入します.②参が0でない場合は、まず削除操作を行い、挿入操作を行います.
戻り値:
{Aray} 削除要素を含む新しい配列を返します.②が0の場合、要素が削除されていないことを示し、空の配列を返します.
例:
2.16 toString():配列中のすべての要素を英語のカンマで区切って、「文字列としてスティッチングする」
パラメータ:なし
戻り値:
{Stering} 配列内のすべての要素は英字コンマで連結され、文字列として返されます.無参加ジョンを呼び出す方法と同じです.
例:
2.17 unshift():配列ヘッドに要素を挿入する
パラメータ:
①value 1,value 2....valueN:任意の複数の値を配列ヘッドに追加します.
戻り値:
{int}配列の新しい長さ
例:
3.静的方法
3.1 Aray.isAray():対象が配列かどうかを判断する
パラメータ:
①value｛Object｝:任意の対象
戻り値:
｛Boolean｝ 判定結果を返します.為すべきである trueの場合、オブジェクトは配列となります.falseの場合、オブジェクトは配列ではないことを表します.
例:
4.実際の操作
4.1索引
説明:各要素は配列内に位置し、数字で表され、索引と呼ばれます.索引は0から始まります.つまり、最初の要素の索引は0で、2番目の要素の索引は1で、これに類推します.
配列が存在しないインデックスを取得すると、 undefined
例:
4.2 for文
説明:行列はfor文で一つ一つ巡ることができます.
例:
4.3レプリカ
説明:Arayタイプは参照タイプです.配列aが配列bにコピーされると、配列bが要素修正され、配列aも修正される.
例:
4.4深さコピー
説明:concat()方法を使って、新しい配列を返します.浅いコピーを防ぐ場合は、配列bを要素修正操作し、配列aは変更されません.
例:
4.5 2つの配列が等しいかどうかを判断する.
説明:Aray配列は参照タイプですので、[]===[]でもfalseに戻りますので、配列tostring()で返した文字列は等しいかどうかを判断できます.
例:
End
Web開発の道シリーズ
メニュー読み込み中..
目次
1.紹介:Aray配列オブジェクトの説明、定義方法および属性を紹介します.
2.例示的な方法:Arayオブジェクトの例を紹介する方法:concat、every、filter、forEach、indexOf、join、lastIndexOf、map、pop、push、reverse、shift、slice、sort、splice、tostring、tounshiftなど.
3.静的方法:Arayオブジェクトの静的方法を紹介する:Aray.isAray().
4.実際の操作:Arayを例示的に操作する:索引、for遍歴、浅い複製、深さコピーなどの操作.
1.紹介
1.1説明
配列は値の規則的な集合である.各値は要素と呼ばれていますが、各要素は配列内に位置し、数字で表されています.インデックスと呼ばれています.JavaScript配列は無タイプであり、配列要素は任意のタイプであり、同じ配列の異なる要素も異なるタイプである可能性がある.『JavaScript権威ガイド(第六版)』
1.2定義方式
var names = new Array(" ", " ", " ");
//
var names = [" ", " ", " "];1.3属性
length:配列内の要素長を表します.
2.例示的な方法
常用方法:
1) unshift():配列ヘッドに要素を挿入する
2) shift():配列の最初の要素を削除して返します.
3) push():配列の最後に要素を挿入する
4) pop():配列の最後の要素を削除して返します.
2.1 concat():要素を配列に接続します.元のarrayを変更せずに、新しい配列を返します.
パラメータ:
①value 1,value 2....valueN:任意の複数の値
戻り値:
新しい配列は元のArayと新しく加入した元素を含む.
例:
var demoArray = ['a', 'b', 'c'];
var demoArray2 = demoArray.concat('e');
console.log(demoArray); // => demoArray:['a','b','c']
console.log(demoArray2); // => ['a','b','c','e']
2.2 everry():元素を順次巡回して、各元素がすべてtrueなのかどうかを判断します.
パラメータ:
①function(value,index,self){}:各要素はこの関数を使ってtrueかどうかを判断し、falseかを判断したら、すぐに巡回を終了します.
value:配列遍歴の要素
index:要素番号
self:Aray自体
戻り値:
｛Boolean｝:各元素だけがtrueであるからtrueに戻ります.一つがfalseである限り、falseに戻ります.
例:
var demoArray = [1, 2, 3];
var rs = demoArray.every(function (value, index, self) {
return value > 0;
});
console.log(rs); // => true
2.3 filter():要素を順次巡回して、条件に合う要素を含む新しい配列を返します.
パラメータ:
①function(value,index,self){}:各要素はこの関数を順次呼び出して、条件に合う要素を含む新しい配列を返します.
value:配列遍歴の要素
index:要素番号
self:Aray自体
戻り値:
条件に合う要素を含む新しい配列
例:
var demoArray = [1, 2, 3];
var rs = demoArray.filter(function (value, index, self) {
return value > 0;
});
console.log(rs); // => [1, 2, 3]
2.4 forEach():要素を順次巡回し、指定された関数を実行します.戻り値なし
パラメータ:
①function(value,index,self){}:各要素は順次この関数を呼び出します.
value:配列遍歴の要素
index:要素番号
self:Aray自体
戻り値:なし
例:
var demoArray = [1, 2, 3];
demoArray.forEach(function (value, index, self) {
console.log(value); // => ：1 2 3
});
2.5 indexOf():整合要素を配列内で検索します.マッチする要素が存在しない場合は-1を返します.検索するときは「==」演算子を使いますので、1と「1」を区別します.
パラメータ:
①value:行列で検索する値です.
②start:検索開始番号の位置は、省略すれば0.
戻り値:
｛Int｝:配列の最初の一致valueの番号を返します.存在しない場合は、-1を返します.
例:
['a', 'b', 'c'].indexOf('a'); // =>0
['a', 'b', 'c'].indexOf('a', 1); // =>-1
['a', 'b', 'c'].indexOf('d'); // =>-1
[1, 2, 3].indexOf('1'); // => -1 ： '==='
2.6 join():配列中のすべての要素を一つの区切り記号でつなぎ合わせて文字列とする.
パラメータ:
①sparator｛String｝:各要素間のセパレータは、省略するとデフォルトでは英語のコンマで区切られます.
戻り値:
｛String｝:各要素はsparatorを区切り子として、つなぎ合わせて作られた文字列です.
例:
['a', 'b', 'c'].join(); // => 'a,b,c'
['a', 'b', 'c'].join('-'); // => 'a-b-c'
2.7 lastIndexOf:整合要素を配列内で逆方向に検索します.マッチする要素が存在しない場合は-1を返します.検索するときは「==」演算子を使いますので、1と「1」を区別します.
パラメータ:
①value:行列で検索する値です.
②start:検索を開始するシーケンス番号の位置は、省略すると最後の要素から検索を開始します.
戻り値:
｛Int｝:右から左までの検索配列の最初の一致valueの番号が存在しない場合は、-1を返します.
例:
['a', 'b', 'c'].lastIndexOf('a'); // => 0
['a', 'b', 'c'].lastIndexOf('a', 1); // => 0
['a', 'b', 'c'].lastIndexOf('d'); // => -1
[1, 2, 3].lastIndexOf('1'); // => -1 ： '==='
2.8 map():各要素を順次巡回して計算し、計算された要素の配列を返します.
パラメータ:
①function(value,index,self){}:各要素はこの関数を順次呼び出して、計算された要素を返します.
value:配列遍歴の要素
index:要素番号
self:Aray自体
戻り値:
{Aray}良い要素を含む新しい配列
例:
[1, 2, 3].map(function (value, index, self) {
return value * 2;
}); // => [2, 4, 6]
2.9 pop():配列の最後の要素を削除して返します.
パラメータ:なし
戻り値:
{Object}配列の最後の要素.配列が空の場合、undefinedを返します.
例:
var demoArray = ['a', 'b', 'c'];
demoArray.pop(); // => c
demoArray.pop(); // => b
demoArray.pop(); // => a
demoArray.pop(); // => undefined
2.10 push():配列の最後に要素を追加します.
パラメータ:
①value 1,value 2....valueN:任意の複数の値を配列の末尾に追加します.
戻り値:
{int}配列の新しい長さ
例:
var demoArray = ['a', 'b', 'c'];
demoArray.push('d'); // => 4, demoArray ： ['a', 'b', 'c', 'd']
demoArray.push('e', 'f'); // => 6, demoArray ：['a', 'b', 'c', 'd', 'e', 'f']
console.log(demoArray); // => ['a', 'b', 'c', 'd', 'e', 'f']
2.11 reverse():配列要素の順序を反転します.
パラメータ:なし
戻り値:なし(元の配列内で要素順反転)です.
例:
var demoArray = ['a', 'b', 'c', 'd', 'e'];
demoArray.reverse();
console.log(demoArray); // => ["e", "d", "c", "b", "a"]
2.12 shift():配列の最初の要素を削除して返します.
パラメータ:なし
戻り値:
{Object} 配列の最初の要素配列が空の場合、undefinedを返します.
例:
var demoArray = ['a', 'b', 'c'];
demoArray.shift(); // => a
demoArray.shift(); // => b
demoArray.shift(); // => c
demoArray.shift(); // => undefined
2.13 slice(startIndex,endIndex):配列の一部を返します.
パラメータ:
①startIndex:スタートの番号.負の数であれば、末尾から計算することを表し、-1は最後の要素を表し、-2は後ろから二つ目の要素を表し、これに類推する.
②endIndex:終了箇所の要素の後の番号は、指定されていない場合は終了となります.切り取られた要素はここの番号の要素を含みません.ここの番号の前の要素に終わります.
戻り値:
｛Aray｝新しい配列は、startIndexからendIndexの前の要素までのすべての要素を含んでいます.
例:
[1, 2, 3, 4, 5, 6].slice(); // => [1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6].slice(1); // => [2, 3, 4, 5, 6] ： 1
[1, 2, 3, 4, 5, 6].slice(0, 4); // => [1, 2, 3, 4] ： 0 3( 4 )
[1, 2, 3, 4, 5, 6].slice(-2); // => [5, 6] ： 2
2.14 sort:一定の規則で並べ替えます.
パラメータ:
①opt_order Fun(v 1,v 2)｛Function｝:オプションのソート規則関数.省略すると、要素のアルファベットに従って小から大に並べ替えます.
v 1:前に続く元素.
v 2:繰り返し後の要素.
ソート規則:
v 1とv 2を比較して、v 1とv 2の並べ替え規則を表す数字を返します.
0より小さい:v 1はv 2より小さく、v 1はv 2より前にある.
イコール0:v 1はv 2に等しく、v 1はv 2の前に並ぶ.
0より大きい:v 1はv 2より大きく、v 1はv 2の後ろにある.
戻り値:なし(元の配列で並べ替え操作).
例:
[1, 3, 5, 2, 4, 11, 22].sort(); // => [1, 11, 2, 22, 3, 4, 5] ： ，11 2
[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
return v1 - v2;
}); // => [1, 2, 3, 4, 5, 11, 22] ：
[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
return -(v1 - v2); // ，
}); // => [22, 11, 5, 4, 3, 2, 1]
2.15 splice():配列要素の挿入、削除
パラメータ:
①start｛int｝:挿入、削除、または置き換えの開始番号を開始します.
②deleteCount｛int｝:要素の個数を削除するには、startから計算を開始します.
③value 1,value 2…valueN｛Object｝:オプションパラメータは、挿入する要素を表し、startから挿入します.②参が0でない場合は、まず削除操作を行い、挿入操作を行います.
戻り値:
{Aray} 削除要素を含む新しい配列を返します.②が0の場合、要素が削除されていないことを示し、空の配列を返します.
例:
// 1.
var demoArray = ['a', 'b', 'c', 'd', 'e'];
var demoArray2 = demoArray.splice(0, 2); // 0 2 ， ：['a', 'b']
console.log(demoArray2); // => ['a', 'b']
console.log(demoArray); // => ['c', 'd', 'e']
// 2.
var demoArray = ['a', 'b', 'c', 'd', 'e'];
var demoArray2 = demoArray.splice(0, 0, '1', '2', '3'); // ② 0，
console.log(demoArray2); // => [ ]
console.log(demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e']
// 3.
var demoArray = ['a', 'b', 'c', 'd', 'e'];
// ② 0， ( 0 4 ， )，
var demoArray2 = demoArray.splice(0, 4, '1', '2', '3');
console.log(demoArray2); // => ['a', 'b', 'c', 'd']
console.log(demoArray); // => ['1', '2', '3', 'e']
2.16 toString():配列中のすべての要素を英語のカンマで区切って、「文字列としてスティッチングする」
パラメータ:なし
戻り値:
{Stering} 配列内のすべての要素は英字コンマで連結され、文字列として返されます.無参加ジョンを呼び出す方法と同じです.
例:
[1, 2, 3, 4, 5].toString(); // => '1,2,3,4,5'
['a', 'b', 'c', 'd', 'e'].toString(); // => 'a,b,c,d,e'
2.17 unshift():配列ヘッドに要素を挿入する
パラメータ:
①value 1,value 2....valueN:任意の複数の値を配列ヘッドに追加します.
戻り値:
{int}配列の新しい長さ
例:
var demoArray = [];
demoArray.unshift('a'); // => demoArray:['a']
demoArray.unshift('b'); // => demoArray:['b', 'a']
demoArray.unshift('c'); // => demoArray:['c', 'b', 'a']
demoArray.unshift('d'); // => demoArray:['d', 'c', 'b', 'a']
demoArray.unshift('e'); // => demoArray:['e', 'd', 'c', 'b', 'a']
3.静的方法
3.1 Aray.isAray():対象が配列かどうかを判断する
パラメータ:
①value｛Object｝:任意の対象
戻り値:
｛Boolean｝ 判定結果を返します.為すべきである trueの場合、オブジェクトは配列となります.falseの場合、オブジェクトは配列ではないことを表します.
例:
Array.isArray([]); // => true
Array.isArray(['a', 'b', 'c']); // => true
Array.isArray('a'); // => false
Array.isArray('[1, 2, 3]'); // => false4.実際の操作
4.1索引
説明:各要素は配列内に位置し、数字で表され、索引と呼ばれます.索引は0から始まります.つまり、最初の要素の索引は0で、2番目の要素の索引は1で、これに類推します.
配列が存在しないインデックスを取得すると、 undefined
例:
var demoArray = ['a', 'b', 'c', 'd', 'e'];
demoArray[0]; // => :'a'
demoArray[0] = 1; // 1
console.log(demoArray); // => demoArray:[1, 'b', 'c', 'd', 'e']
console.log(demoArray[9]); // => undefined ： ， undefined4.2 for文
説明:行列はfor文で一つ一つ巡ることができます.
例:
var demoArray = ['a', 'b', 'c', 'd', 'e'];
for (var i = 0, length = demoArray.length; i < length; i++) {
console.log(demoArray[i]); // =>
}
4.3レプリカ
説明:Arayタイプは参照タイプです.配列aが配列bにコピーされると、配列bが要素修正され、配列aも修正される.
例:
var demoArrayA = ['a', 'b', 'c', 'd', 'e'];
var demoArrayB = demoArrayA; // A B
demoArrayB[0] = 1; // B
console.log(demoArrayA); // => [1, 'b', 'c', 'd', 'e']： A
4.4深さコピー
説明:concat()方法を使って、新しい配列を返します.浅いコピーを防ぐ場合は、配列bを要素修正操作し、配列aは変更されません.
例:
var demoArrayA = ['a', 'b', 'c', 'd', 'e'];
var demoArrayB = demoArrayA.concat(); // concat() ，
demoArrayB[0] = 1; // B
console.log(demoArrayA); // => ['a', 'b', 'c', 'd', 'e']： A
console.log(demoArrayB); // => [ 1, 'b', 'c', 'd', 'e']： B
4.5 2つの配列が等しいかどうかを判断する.
説明:Aray配列は参照タイプですので、[]===[]でもfalseに戻りますので、配列tostring()で返した文字列は等しいかどうかを判断できます.
例:
console.log([]===[]); // => false
console.log(['a', 'b'] === ['a', 'b']); // => false
console.log(['a', 'b'].toString() === ['a', 'b'].toString()); // true
End
Web開発の道シリーズ
メニュー読み込み中..