1. push()
配列の末尾に新しい要素を追加します。
使い所
配列に新しい要素を追加したい場合
注意点
追加する要素は1つだけです。
配列の要素数が増えます。
例
let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
2. pop()
配列の末尾の要素を削除します。
使い所
配列の末尾の要素を削除したい場合
注意点
削除する要素は1つだけです。
配列の要素数が減ります。
例
let arr = [1, 2, 3];
arr.pop();
console.log(arr); // [1, 2]
3. shift()
配列の先頭の要素を削除します。
使い所
配列の先頭の要素を削除したい場合
注意点
削除する要素は1つだけです。
配列の要素数が減ります。
例
let arr = [1, 2, 3];
arr.shift();
console.log(arr); // [2, 3]
4. unshift()
配列の先頭に新しい要素を追加します。
使い所
配列の先頭に新しい要素を追加したい場合
注意点
追加する要素は1つだけです。
配列の要素数が増えます。
例
let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
5. splice()
使い所
配列から要素を取り出す、または要素を追加する
注意点
元の配列を変更する
例
let arr5 = [1, 2, 3, 4, 5];
let removedElements = arr5.splice(2, 2); // [3, 4]
arr5.splice(2, 0, 6, 7); // [1, 2, 6, 7, 5]
6. slice()
使い所
配列の一部分を新しい配列として取り出す
注意点
元の配列は変更しない
例
let arr6 = [1, 2, 3, 4, 5];
let subArray = arr6.slice(1, 4); // [2, 3, 4]
7. concat()
使い所
concat() メソッドは、配列に別の配列や値を結合するために使用されます。
使い方
concat() メソッドは、元の配列を変更する代わりに、新しい配列を作成します。この新しい配列に、元の配列と渡された配列の要素が含まれます。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const newArray = array1.concat(array2);
console.log(newArray); // ['a', 'b', 'c', 'd', 'e', 'f']
複数の配列と値を扱うこともできます。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = ['g', 'h', 'i'];
const newArray = array1.concat(array2, array3, 'j');
console.log(newArray); // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
注意点
concat() メソッドは新しい配列を作成するため、元の配列は変更されません。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const newArray = array1.concat(array2);
console.log(array1); // ['a', 'b', 'c']
console.log(array2); // ['d', 'e', 'f']
concat() メソッドで結合する配列が多数ある場合、パフォーマンスの問題が発生することがあります。その場合は、代わりにスプレッド演算子 ... を使用することが推奨されます。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = ['g', 'h', 'i'];
const newArray = [...array1, ...array2, ...array3, 'j'];
console.log(newArray); // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
例
配列の末尾に新しい要素を追加する方法として、以下のように concat() メソッドを使用することができます。
const array1 = ['a', 'b', 'c'];
const newArray = array1.concat('d');
console.log(newArray); // ['a', 'b', 'c', 'd']
また、concat() メソッドを使用して、2次元配列を1次元配列に変換することもできます。
const array1 = [['a', 'b'], ['c', 'd'], ['e', 'f']];
const newArray = [].concat(...array1);
console.log(newArray); // ['a', 'b', 'c', 'd', 'e', 'f'];
8. slice()
使い所
配列の一部分を取得したい場合に使用します。元の配列は変更せず、取得した部分配列が作られます。
注意点
slice()メソッドの第一引数に指定する開始インデックスは含まれ、第二引数に指定する終了インデックスは含まれません。
また、開始インデックスが終了インデックスよりも大きい場合や、引数が指定されなかった場合は空の配列が返されます。
例
const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(1, 4);
console.log(slicedArr); // [2, 3, 4]
9. filter()
使い所
条件に合う要素のみを抽出したい場合に使用します。元の配列は変更せず、新しい配列が作られます。
注意点
filter()メソッドは、コールバック関数の戻り値がtrueとなる要素だけが新しい配列に含まれます。
また、コールバック関数には、要素の値だけでなく、インデックスや配列自体も引数として渡すことができます。
例
const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter((num) => {
return num % 2 === 0;
});
console.log(filteredArr); // [2, 4]