JavaScript の配列オブジェクトについての簡単な説明_基礎知識

配列 配列

1. はじめに

配列は、順序付けられた値のコレクションです。各値は要素と呼ばれ、各要素には配列内の位置があり、インデックスと呼ばれる数値で表されます。 JavaScript 配列には型がありません。配列要素は任意の型にすることができ、同じ配列内の異なる要素は異なる型を持つ可能性があります。 --「JavaScript の決定版ガイド (第 6 版)」

2. 定義

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

var names = new Array("Zhang San", "Li Si", "Wang Wu");
// または
var names = ["Zhang San", "Li Si", "Wang Wu"];

3. 属性

length: 配列内の要素の長さを示します。

4. インスタンスメソッド

一般的な方法:

1) unshift(): 配列の先頭に要素を挿入します

2)shift(): 配列の最初の要素を削除して返します

3) Push(): 配列の末尾に要素を挿入します

4) Pop(): 配列の最後の要素を削除して返します

4.1 concat(): 要素を配列に接続します。元の配列は変更されず、新しい配列が返されます
パラメータ:

①value1,value2....valueN: 任意の数の値

戻り値:

{Array} 元の配列と新しく追加された要素を含む新しい配列。

例:

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

var デモ配列 = ['a', 'b', 'c'];
varデモArray2 =デモArray.concat('e');
console.log(demoArray); // =>demoArray:['a','b','c'] 元の配列は変更されません
console.log(demoArray2); // => ['a','b','c','e']

4.2 Every(): 要素を順番に走査し、各要素が true かどうかを判断します
パラメータ:

①function(value,index,self){}: 各要素はこの関数を使用して true かどうかを判断し、いずれかが false であると判断された場合、トラバースは直ちに終了します。

値: 配列トラバーサルの要素

インデックス: 要素番号

自己: 配列自体

戻り値:

{Boolean}: すべての要素が true の場合にのみ true を返し、1 つの要素が false である限り false を返します。

例:

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

var デモ配列 = [1, 2, 3];
var rs =デモArray.every(関数(値, インデックス, 自己) {
戻り値 > 0;
});
console.log(rs); // =>

4.3 filter(): 要素を順番に走査し、条件を満たす要素を含む新しい配列を返します。

パラメータ:

①function(value,index,self){}: 各要素に対してこの関数を順番に呼び出し、条件を満たす要素を含む新しい配列を返します。

値: 配列トラバーサルの要素

インデックス: 要素番号

自己: 配列自体

戻り値:

{Array} 条件を満たす要素を含む新しい配列

例:

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

var デモ配列 = [1, 2, 3];
var rs =デモArray.filter(関数(値, インデックス, 自己) {
戻り値 > 0;
});
console.log(rs); // => [1, 2, 3]

4.4 forEach(): 要素を順番に走査し、指定された関数を実行します。戻り値はありません。

パラメータ:

①function(value,index,self){}: 各要素に対してこの関数を順番に呼び出します

値: 配列トラバーサルの要素

インデックス: 要素番号

自己: 配列自体

戻り値: なし

例:

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

var デモ配列 = [1, 2, 3];
demoArray.forEach(関数 (値, インデックス, 自己) {
Console.log(value); // => 順番に出力: 1 2 3
});

4.5 IndexOf(): 配列内の一致する要素を検索します。一致する要素がない場合は、-1 が返されます。検索時には「===」演算子を使用するため、1 と '1' を区別する必要があります
パラメータ:

①value: 配列内で検索される値。

②start: 検索を開始する連番位置。省略した場合は0となります。

戻り値:

{Int}: 配列内で最初に一致した値のシリアル番号を返します。存在しない場合は、-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: '===' 一致メソッドが使用されました

4.6 join(): セパレータを使用して、配列内のすべての要素を文字列に結合します。
パラメータ:

①sparator {String}: 各要素間の区切り文字。省略した場合、デフォルトでは英語のカンマ「,」で区切られます。

戻り値:

{String}: 各要素は、区切り文字としてスパレータを使用して文字列に結合されます。

例:

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

['a', 'b', 'c'].join(); // => 'a,b,c'
['a', 'b', 'c'].join('-') // =>

4.7 lastIndexOf: 逆配列で一致する要素を検索します。一致する要素がない場合は、-1 が返されます。検索時には「===」演算子を使用するため、1 と '1' を区別する必要があります

パラメータ:

①value: 配列内で検索される値。

②start: 検索を開始する連番位置 省略した場合は最後の要素から検索を開始します。

戻り値:

{Int}: 配列内で最初に一致する値のシーケンス番号を右から左に探します。存在しない場合は、-1

を返します。

例:

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

['a', 'b', 'c'].lastIndexOf('a') // => 0
['a', 'b', 'c'].lastIndexOf('a', 1); // => 0
['a', 'b', 'c'].lastIndexOf('d'); // => [1, 2, 3].lastIndexOf('1'); // => -1: '===' 一致メソッドが使用されました

4.8 map(): 各要素を順番に走査して計算し、計算された要素の配列を返します パラメータ:

①function(value,index,self){}: 各要素がこの関数を順番に呼び出し、計算された要素を返します

値: 配列トラバーサルの要素

インデックス: 要素番号

自己: 配列自体

戻り値:

{Array} 適切な要素を含む新しい配列

例:

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

[1, 2, 3].map(関数 (値, インデックス, 自己) {

戻り値 * 2;
}); // => [2, 4, 6]

4.9 Pop(): 配列の最後の要素を削除して返します パラメータ: なし

戻り値:

{Object} 配列の最後の要素。配列が空の場合は、未定義

が返されます。

例:

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

var デモ配列 = ['a', 'b', 'c'];

デモ配列.pop(); // => デモ配列.pop(); // => demoArray.pop(); // => demoArray.pop(); // =>


4.10 Push(): 配列の末尾に要素を追加します
パラメータ:

①value1,value2....valueN: 配列の末尾に任意の数の値を追加します

戻り値:

{int} の配列の新しい長さ

例:

コードをコピーします

コードは次のとおりです: var デモ配列 = ['a', 'b', 'c']; デモ配列.push('d'); // => 4, デモ配列: ['a', 'b', 'c', 'd'] デモ配列.push('e', 'f'); // => 6, デモ配列: ['a', 'b', 'c', 'd', 'e', 'f'] console.log(demoArray); // => ['a', 'b', 'c', 'd', 'f']

4.11 reverse(): 配列要素の順序を逆にします。
パラメータ: なし

戻り値: なし (元の配列の要素の順序を逆にします)。

例:

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

var DemonArray = ['a', 'b', 'c', 'd', 'e'];
デモArray.reverse();
console.log(demoArray); // => ["e", "d", "c", "b", "a"]

4.12 SHIFT(): 配列の最初の要素を削除して返します
パラメータ: なし

戻り値:

{Object} 配列の最初の要素。配列が空の場合は、未定義が返されます。

例:

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

var デモ配列 = ['a', 'b', 'c'];
demoArray.shift(); // => デモ配列.shift(); // => デモ配列.shift(); // => demoArray.shift(); // =>


4.13 slide(startIndex,endIndex): 配列の一部を返します。
パラメータ:

①startIndex: 先頭のシリアル番号。負の数値の場合は最後から数えることを意味し、-1 は最後の要素を表し、-2 は最後から 2 番目の要素を表します。

②endIndex: 最後の要素の後の通し番号 指定しない場合は終了となります。インターセプトされた要素には、ここでのシリアル番号を持つ要素は含まれておらず、ここでのシリアル番号より前の要素で終了します。

戻り値:

{Array} 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 (シーケンス番号の 1 つ前) を切り取る4) 要素

[1, 2, 3, 4, 5, 6].slice(-2) // => [5, 6]: 次の 2 つの要素をインターセプトします。


4.14 sort(opt_orderFunc): 特定のルールに従って並べ替えます
パラメータ:

①opt_orderFunc(v1,v2) {関数}: オプションの並べ替え関数。省略した場合、要素はアルファベット順に小さいものから大きいものへと並べ替えられます。

v1: トラバース時の前の要素。

v2: 横断時の以下の要素。

並べ替え:

v1 と v2 を比較し、v1 と v2 の並べ替えルールを表す数値を返します:

0 未満: v1 は v2 より小さく、v1 は v2 の前にランクされます。

0 に等しい: v1 は v2 と等しく、v1 は v2 の前にランクされます。

0 より大きい: v1 は v2 より大きく、v1 は v2 よりも下にランクされます。

戻り値: なし (元の配列でのソート操作)。

例:

コードをコピーします

コードは次のとおりです: [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) { v1 - v2 を返します;

}); // => [1, 2, 3, 4, 5, 11, 22]: 小さい順に並べ替えます

[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
Return -(v1 - v2) //否定すればFrom big to small
に変換可能 }); // => [22, 11, 5, 4, 3, 2, 1]



4.15 splice(): 配列要素の挿入と削除
パラメータ:

①start {int}: 挿入、削除、置換を開始する開始シーケンス番号。

②deleteCount {int}: 先頭から数えた削除する要素の数。

③value1,value2 ... valueN {Object}: 先頭から挿入する要素を示すオプションのパラメータ。 ②パラメータが0以外の場合は、削除操作を行ってから挿入操作を行います。

戻り値:

{Array} 削除された要素を含む新しい配列を返します。 ②パラメータが0の場合、要素は削除されず、空の配列が返されることを意味します。

例:

コードをコピー

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

// 1.
を削除します var DemonArray = ['a', 'b', 'c', 'd', 'e'];
var DemonArray2 = demoArray.splice(0, 2); // 0 から始まる 2 つの要素を削除し、削除された要素を含む配列を返します: ['a', 'b']
console.log(demoArray2); // => ['a', 'b']
console.log(demoArray); // => ['c', 'd', 'e']
// 2.
を挿入します var DemonArray = ['a', 'b', 'c', 'd', 'e'];
var DemonArray2 = demoArray.splice(0, 0, '1', '2', '3'); // ②パラメータが0で空の配列が返される
console.log(demoArray2); // => console.log(demoArray); // => ['1', '2', '3', 'c', 'd', 'e']
// 3. まず削除してから
を挿入します var DemonArray = ['a', 'b', 'c', 'd', 'e'];
// ②パラメータが0以外の場合、まず削除操作(0から4つの要素を削除し、削除した要素を含む配列を返す)を行ってから、挿入操作を実行します
varデモArray2 =デモArray.splice(0, 4, '1', '2', '3');
console.log(demoArray2); // => ['a', 'b', 'c', 'd']
console.log(demoArray); // => ['1', '2', '3', 'c', 'd', 'e']

4.16 toString(): 配列内のすべての要素を英語のカンマ「,」で文字列に連結します。

パラメータ: なし

戻り値:

{String} 配列内のすべての要素が英語のカンマ「,」で文字列に連結されて返されます。パラメータを指定せずに join() メソッドを呼び出すのと同じです。

例:

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

[1, 2, 3, 4, 5].toString() // => '1,2,3,4,5'
['a', 'b', 'c', 'd', 'e'].toString() // => 'a,b,c,d,e'

4.17 unshift(): 配列の先頭に要素を挿入します

パラメータ:

①value1,value2....valueN: 配列の先頭に任意の数の値を追加します

戻り値:

{int} の配列の新しい長さ

例:

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

var デモ配列 = [];
デモ配列.unshift('a'); // => デモ配列:['a']
demoArray.unshift('b'); // => デモ配列:['b', 'a']
demoArray.unshift('c'); // => デモ配列:['c', 'b', 'a']
demoArray.unshift('d'); // => デモ配列:['d', 'c', 'b', 'a']
デモ配列.unshift('e'); // => デモ配列:['e', 'd', 'c', 'b', 'a']

5. 静的メソッド

5.1 Array.isArray(): オブジェクトが配列かどうかを判断します

パラメータ:

①値 {Object}: 任意のオブジェクト

戻り値:

{Boolean} 判定結果を返します。 true の場合はオブジェクトが配列であることを意味し、false の場合はオブジェクトが配列ではないことを意味します

例:

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

Array.isArray([]); // => Array.isArray(['a', 'b', 'c']); // => Array.isArray('a'); // => Array.isArray('[1, 2, 3]'); // =>



6. 実際の操作

6.1 インデックス

説明: 各要素には、配列内の位置があり、インデックスと呼ばれる数値で表されます。インデックスは 0 から始まります。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などです。 配列内に存在しないインデックスを取得した場合はunknownを返します。

例:

コードをコピーします

コードは次のとおりです: var DemonArray = ['a', 'b', 'c', 'd', 'e']; demoArray[0]; // => 最初の要素を取得します: 'a' demoArray[0] = 1 // 最初の要素を 1

に設定します。 console.log(demoArray); // => デモ配列:[1, 'b', 'c', 'd', 'e']

console.log(demoArray[9]); // => unknown: 取得したインデックスが存在しない場合は、unknown
を返します。


6.2 for ステートメント
注: for ステートメント
を使用して配列を 1 つずつ走査できます。

例:

コードをコピーします

コードは次のとおりです: var DemonArray = ['a', 'b', 'c', 'd', 'e']; for (var i = 0, length = demoArray.length; i console.log(demoArray[i]); // => 配列内の要素を 1 つずつ出力します

}

6.3 浅いコピー
注: 配列型は参照型です。配列 a が配列 b にコピーされると、配列 b の要素が変更されると、配列 a も変更されます。

例:

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

var DemonArrayA = ['a', 'b', 'c', 'd', 'e'];
var DemonArrayB = DemonArrayA // 配列 A を配列 B
に代入します。 demoArrayB[0] = 1; // 配列 B
の要素を変更します。 console.log(demoArrayA); // => [1, 'b', 'c', 'd', 'e']: 配列 A の要素も変更されました

6.4 ディープコピー
説明: concat() メソッドを使用して新しい配列を返します。浅いコピーを防止するには、配列 b の要素を変更します。配列 a は変更されません。

例:

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

var DemonArrayA = ['a', 'b', 'c', 'd', 'e'];
var DemonArrayB = 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 の要素が変更されました