JavaScript配列メソッドまとめ

JavaScript配列メソッドまとめ

配列操作に慣れるようにまとめてみました。

push - 末尾に追加

let players = ['kagawa', 'honda', 'yoshida', 'okazaki', 'minamino'];

players.push('kubo');

console.log(players) // [ 'kagawa', 'honda', 'yoshida', 'okazaki', 'minamino', 'kubo' ]

pop - 末尾を取り除く

let players = ['kagawa', 'honda', 'yoshida', 'okazaki', 'minamino'];

players.pop();

console.log(players) // [ 'kagawa', 'honda', 'yoshida', 'okazaki' ]

shift - 先頭を取り除く

let players = ['kagawa', 'honda', 'yoshida', 'okazaki', 'minamino'];

players.shift();

console.log(players); // [ 'honda', 'yoshida', 'okazaki', 'minamino' ]

unshift - 先頭に追加する

let players = ['kagawa', 'honda', 'yoshida', 'okazaki', 'minamino'];

players.unshift('kazu');

console.log(players); // [ 'kazu', 'kagawa', 'honda', 'yoshida', 'okazaki', 'minamino' ] 

concat - 配列を結合する

let cats = ['tama', 'tora'];

let dogs = ['pochi', 'hachi'];

let pets = cats.concat(dogs);

console.log(pets) // ['tama', 'tora', 'pochi', 'hachi']

// 元々の配列に変化はない
console.log(cats) // ['tama', 'tora']

includes - 配列の検索

let cats = ['tama', 'tora'];

cats.includes('tama'); // true

cats.includes('kuro'); false

indexOf - 配列の検索(インデックスを返す)

let pets = ['tama', 'tora', 'pochi', 'hachi'];

pets.indexOf('tora'); // 1

pets.indexOf('kuro'); // -1 検索結果がない時は-1を返す

reverse - 配列を逆順に変換する

let pets = ['tama', 'tora', 'pochi', 'hachi'];

pets.reverse();

console.log(pets); // ['hachi', 'pochi', 'tora', 'tama']

slice - 配列を部分的にコピーして新たに作成する

let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'black', 'white'];

// 指定したインデックスから末尾まで取得
let r = colors.slice(1);

console.log(r); // ['orange', 'yellow', 'green', 'blue', 'black', 'white']

// 第一引数=開始位置、第二引数=終了位置
// 第一引数で指定したインデックスから第二引数で指定したインデックスの手前までの要素を取得
let r2 = colors.slice(2, 5);

console.log(r2); // ['yellow', 'green', 'blue']

splice - 要素を取り除いたり置き換えたりする

let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'black', 'white'];

// 'blackを削除'
colors.splice(5, 1);

console.log(colors); // ['red', 'orange', 'yellow', 'green', 'blue', 'white']

// 値の挿入
colors.splice(1, 0, 'red-orange');

console.log(colors); // ['red', 'red-orange', 'orange', 'yellow', 'green', 'blue', 'white']

// 値の置き換え
colors.splice(5, 1, 'sky-blue')

console.log(colors); // ['red', 'red-orange', 'orange', 'yellow', 'green', 'sky-blue', 'white']