JavaScript 配列

配列とは何ですか?

配列は、順序付けられた要素のコレクションを格納するデータ構造です。 JavaScript では、配列は特別なタイプのオブジェクトとして分類され、数値、文字列、オブジェクト、またはその他の配列を格納できます。配列内の要素は角かっこ [ ] で囲まれ、0 から始まるインデックスが使用されます。ゼロベースのインデックスは、配列の最初の要素のインデックスが 0、2 番目の要素のインデックスが 1 などになることを意味します。

const names = ["David", "Hannah", "William"];
console.log(names[0]); // returns the first element
// returns "David"
console.log(names[1]); // returns the second element
// returns "Hannah"
console.log(names[2]); // returns the third element
// returns "William"

配列はどのように変更または操作できますか?

配列内の要素のインデックス

空のインデックスに値を割り当てることで、新しい要素を配列に追加できます。

names[3] = "Eric";
console.log(names);
// returns ["David", "Hannah", "William", "Eric"]

配列内の要素は、既存のインデックスに新しい値を再割り当てすることで変更できます。

names[1] = "Juniper";
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

配列メソッド

配列は、「push」、「pop」、「unshift」、「shift」、「slice」、「splice」などの配列メソッドを使用して変更または操作することもできます。

'押す（）'

「push」メソッドは 1 つ以上の要素を引数として受け取り、その要素を配列の末尾に追加して、変更された配列の長さを返します。

names.push("Bob");
// returns 5 
console.log(names);
// returns ["David", "Juniper", "William", "Eric", "Bob"]

'ポップ（）'

「pop」メソッドは引数をとらず、配列の最後の要素を削除し、削除された要素を返します。

names.pop();
// returns "Bob"
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

'シフト解除()'

「unshift」メソッドは 1 つ以上の要素を引数として受け取り、その要素を配列の先頭に追加して、変更された配列の長さを返します。

names.unshift("Jack", "Jane");
// returns 6
console.log(names);
// returns ["Jack", "Jane", "David", "Juniper", "William", "Eric"]

'シフト（）'

「shift」メソッドは引数をとらず、配列の最初の要素を削除し、削除された要素を返します。

names.shift();
// returns "Jack"
console.log(names);
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'スライス（）'

「slice」メソッドは 2 つのオプションの引数 (startIndex、endIndex) を受け取り、元の配列の startIndex から endIndex までの要素 (ただし、endIndex は含まない) を含む新しい配列を返します。
startIndex を省略した場合は 0 が使用されます。
endIndex が省略された場合は、配列の長さが使用されます。負のインデックス番号は、配列の末尾から逆算するために使用できます。

names.slice(1, 3);
// returns ["David", "Juniper"]
names.slice(3);
// returns ["Juniper", "William", "Eric"]
names.slice(-2, 1);
// returns ["William", "Eric", "Jane"]
names.slice();
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'スプライス（）'

「splice」メソッドは 1 つ以上の引数 (startIndex、deleteCount、element1、element2 など) を受け取り、削除されたすべての要素を含む新しい配列を返します。 startIndex から、deleteCount 個の要素が削除され、次の要素引数が startIndex から始まる配列に追加されます。 deleteCount を省略した場合、startIndex から配列の末尾までのすべての要素が削除されます。要素の引数を省略した場合、要素は追加されません。

names.splice(0, 1, "Joe", "Alex"); 
// returns ["Jane"]
console.log(names);
// returns ["Joe", "Alex", "David", "Juniper", "William", "Eric"]
names.splice(1, 4);
// returns ["Alex", "David", "Juniper", "William"]
console.log(names);
// returns ["Joe", "Eric"]
names.splice(0, 0, "Bob", "Frank", "Maria")
// returns []
console.log(names);
// returns ["Joe", "Bob", "Frank", "Maria", "Eric"]

「push」、「pop」、「unshift」、「shift」、「splice」は元の配列を変更するため、破壊的メソッドとして分類されます。 「スライス」メソッドは元の配列をそのまま残すため、非破壊として分類されます。

スプレッド演算子「...」

配列に要素を追加したり、配列を非破壊的にコピーするには、スプレッド演算子を使用できます。拡散演算子は、配列をその要素に拡散します。

const array = [1, 2, 3];
const newArray = [0, ...array, 4, 5];
// ...array spreads [1, 2, 3] into 1, 2, 3
console.log(newArray);
// returns [1, 2, 3, 4, 5]

スプレッド演算子を使用しない場合、元の配列は新しい配列内でネストされます。

const array = [1, 2, 3];
const newArray = [0, array, 4, 5];
console.log(newArray);
// returns [0, [1, 2, 3], 4, 5];

配列の反復メソッド

反復配列メソッドは、配列内の各要素に対して提供された関数を呼び出し、値または新しい配列を返します。提供された関数は、現在の要素、現在の要素のインデックス、メソッドが呼び出された元の配列の 3 つの引数で呼び出されます。

function callbackFunction (currentElement, currentIndex, originalArray) {
// function body
}

反復配列メソッドの例としては、「find」、「filter」、「map」、「reduce」などがあります。

'探す（）'

「find」メソッドは引数として関数を受け取り、関数の条件を満たす配列内の最初の要素を返します。

const numbers = [5, 10, 15, 20, 25];
numbers.find(number => number > 15);
// returns 20;

'フィルター（）'

「filter」メソッドは「find」メソッドに似ていますが、代わりに、指定された関数の条件を満たすすべての要素の配列を返します。

const numbers = [5, 10, 15, 20, 25];
numbers.filter(number => number > 15);
// returns [20, 25];

'地図（）'

「map」メソッドは、元の配列の各要素に対して関数を呼び出した結果を含む新しい配列を返します。

const numbers = [1, 2, 3, 4, 5];
numbers.map(number => number * number);
// returns [1, 4, 9, 16, 25]

'減らす（）'

「reduce」メソッドは関数と初期値を引数として受け取ります。提供された関数は、アキュムレータ、現在の値、現在のインデックス、および元の配列の 4 つの引数を受け取ります。提供される初期値は、配列の最初の要素のアキュムレータの値です。各要素の関数の結果は、配列内の次の要素のアキュムレータの値として使用されます。初期値が指定されていない場合、アキュムレータは配列の最初の要素に設定され、コールバック関数は 2 番目の要素から呼び出されます。

const numbers = [1, 2, 3, 4, 5]
numbers.reduce(((acc, number) => acc + number), 0);
// returns 15

以上がJavaScript 配列の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。