初めに
javascriptの配列によく使われる関数について学習した内容のoutput用記事です。
※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。
slice()メソッド
配列の中身を何番目から何番目までを切り出して、新しい配列を生成するメソッド。元の配列の値は変更されない。
使ってみる
indexは0から始まるので配列の左から4番目の値からスタートします。何番目までかを指定する第２引数は省略することができ、その場合は最後までがindexになります。
let names = ['Tanaka', 'Suzuki', 'Honda', 'Matsuyama', 'Kobayashi'];
console.log(names.slice(3));
//(2) ["Matsuyama", "Kobayashi"]
第２引数を指定した場合、その引数の含まないindexが範囲になります。以下のように第２引数として４を指定した場合、新しく生成される配列の最後の値は配列の左から3番目(0,1,2,3)の'Matsuyama'になります。
console.log(names.slice(2,4));
//(2) ["Honda", "Matsuyama"]
代入する引数の値がマイナス（-)だった場合には配列の一番右側から-1,-2,-3と数えられ、-1番目から指定した引数の-n番目までの値を持つ配列が生成されます。
console.log(names.slice(-1));
//["Kobayashi"]
console.log(names.slice(-2));
//(2) ["Matsuyama", "Kobayashi"]
これを応用すれば左から2番目からスタートし、右から数えて2番目までを含まない値を新しい配列として生成することができます。
console.log(names.slice(1, -2));
//(2) ["Suzuki", "Honda"]
また、sliceメソッドで引数を指定しないと、対象の配列のコピーが作れます。
console.log(names.slice());
//(5) ["Tanaka", "Suzuki", "Honda", "Matsuyama", "Kobayashi"]
これはスプレッド構文を使った結果と同じです。配列のコピーを作るとき、slice()メソッドを使うかスプレッド構文を使うかは人の好みでありどちらを使ってもいいです。
console.log([...names]);
//(5) ["Tanaka", "Suzuki", "Honda", "Matsuyama", "Kobayashi"]
splice()メソッド
生成する配列はslice()メソッドと全く同じですが、元の配列が変更されるところが違います。このようにsplice()メソッドを使うと切り出した配列の部分を除いたものが元の配列になります。
console.log(names.splice(3));
//(2) ["Matsuyama", "Kobayashi"]
console.log(names);
//(3) ["Tanaka", "Suzuki", "Honda"]
reverse()メソッド
配列の要素の順番を逆にするメソッドです。引数は取りません。
console.log(names.reverse());
//(5) ["Kobayashi", "Matsuyama", "Honda", "Suzuki", "Tanaka"]
reverse()メソッドは元の配列も変更してしまうため、注意が必要です。
console.log(names);
//(5) ["Kobayashi", "Matsuyama", "Honda", "Suzuki", "Tanaka"]
concat()メソッド
2つの配列の要素同士をくっ付けて一つの新しい配列を生成します。元の配列は変更されません。
const alpha = ['c', 'd', 'e', 'f', 'g'];
const nums = [1, 2, 3, 4, 5];
const letters = alpha.concat(nums);
console.log(letters);
//(10) ["c", "d", "e", "f", "g", 1, 2, 3, 4, 5]
これもスプレッドメソッドを使えば同じ配列を作ることができます。
const letters2 = [...alpha, ...nums];
console.log(letters2);
//(10) ["c", "d", "e", "f", "g", 1, 2, 3, 4, 5]
これも好みによるもので、どちらでも構いません。
join()メソッド
引数に文字列を指定し、配列の要素同士をその指定した文字列で繋げます。元の配列は変更されません。
const nums = [1, 2, 3, 4, 5];
console.log(nums.join(' * '));
//1 * 2 * 3 * 4 * 5
参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat