学ぶ配列要素の操作

メニューを表示するにはスワイプしてください

すでに配列の作成方法は知っていますが、もし上司から配列の最初または最後の要素を削除するように言われたらどうしますか？あるいは、配列に要素を追加する場合は？配列の長さ（配列内の要素数）を求めるように指示されたら？そのとき「やり方がわかりません」と答えてしまうと、クビになるかもしれません😩。

でも心配はいりません！この章では、その方法を解説し、配列操作の基本的なメソッドについて学びます。

配列への要素追加

まずは最も簡単なことから始めましょう。配列に要素を追加するにはどうすればよいでしょうか？そのためには、pushメソッドを使います！例を見てみましょう:


              123
            
let numbers: number[] = [1, 2, 3];
let newLength = numbers.push(4);
console.log(numbers);

このように、numbers配列に要素を追加しました。pushメソッドを使えば、複数の要素を一度に追加することもできます:


              123
            
let numbers: number[] = [1, 2, 3];
let newLength = numbers.push(4, 5);
console.log(numbers);

最後の要素の削除

配列から最後の要素を静かに取り出す必要がある場合、pop() メソッドを使用できます。このメソッドは配列の最後の要素を削除し、その値を返します。例を見てみましょう:


              1234
            
let numbers: number[] = [1, 2, 3];
let lastElement = numbers.pop();
console.log(`array after modifying: ${numbers}`);
console.log(`the last element was ${lastElement}`);

値を返すとは、その値を別の変数に代入することを意味します。したがって、配列のメソッドを使って値を変数に代入します。メソッドや関数、その違いについては次のセクションで説明します。

最初の要素の削除

shift() メソッドは配列の最初の要素を削除し、その値を返します。例えば次のようになります:


              123
            
let numbers: number[] = [1, 2, 3];
let firstElement = numbers.shift();
console.log(`numbers: ${numbers}, deleted element: ${firstElement}`);

逆に、配列の先頭に1つ以上の要素を追加し、新しい配列の長さを返す reverse メソッドもあります。例えば、次のようになります。


              123
            
let numbers: number[] = [2, 3, 4];
let newLength = numbers.unshift(0, 1);
console.log(`numbers: ${numbers} with length: ${newLength}`);

配列の結合

TypeScript では、concat() メソッドを使用して2つの配列を結合し、新しい大きな配列を作成することもできます。


              1234
            
let array1: number[] = [1, 2];
let array2: number[] = [3, 4];
let combinedArray = array1.concat(array2); 
console.log(`combined array = ${combinedArray}`);

slice() メソッドを使用して、配列の一部を抽出し新しい配列に格納することも可能。ここでは、端となる要素のインデックスを指定し、その間のすべての要素が新しい配列に転送される。例：


              123
            
let numbers: number[] = [1, 2, 3, 4, 5];
let slicedArray = numbers.slice(1, 4); 
console.log(`sliced array = ${slicedArray}`);