CODEMemorandum
Hatena pocket LINE
JavaScript

【JavaScript】配列のメソッドまとめ

よく見かける配列メソッドの覚え書き。

push()

配列の最後に新しい要素を追加する

const animals = ['mouse', 'cow', 'tiger'];
animals.push('rabbit', 'horse', 'sheep');
console.log(animals);
// ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep']

unshift()

配列の先頭に新しい要素を追加する

const animals = ['mouse', 'cow', 'tiger'];
animals.unshift('rabbit', 'horse', 'sheep');
console.log(animals);
// ['rabbit', 'horse', 'sheep', 'mouse', 'cow', 'tiger']

pop()

配列の最後の要素を取り除く

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
animals.pop();
console.log(animals);
// ['mouse', 'cow', 'tiger', 'rabbit', 'horse']

shift()

配列の先頭の要素を取り除く

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
animals.shift();
console.log(animals);
// ['cow', 'tiger', 'rabbit', 'horse', 'sheep']

splice()

配列の要素を取り除いたり、置き換えたり、新しい要素を追加したりする

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
animals.splice(1, 0, 'monkey', 'dog');
console.log(animals);
// ['mouse', 'monkey', 'dog', 'cow', 'tiger', 'rabbit', 'horse', 'sheep']

第1引数は変更する位置（追加する場合は指定した要素の手前へ入る）
第2引数は取り除く要素の個数（取り除かない場合は0）
第3引数以降　配列に追加する新しい要素
第2、第3引数が省略された場合は、第1引数で指定した位置以降の要素をすべて取り除く

slice()

配列の指定した範囲にある要素で新しい配列をつくる

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
const newAnimals = animals.slice(2, 4);
console.log(newAnimals);
// ['tiger', 'rabbit']

第1引数は開始位置
第2引数は配列から除外される最初の要素の位置
　→つまりanimals.slice(2、4)の場合インデックス番号4の要素’horse’は含まない
第2引数が省略された場合は、第1引数で指定した位置以降の要素をすべて取り出す

join()

配列の要素を文字列として結合する

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
animals.join();
console.log(animals);
// mouse, cow, tiger, rabbit, horse, sheep

引数で各要素を区切るセパレータを指定
省略した場合はカンマ(,)で区切られる
join(”)とした場合は区切り文字なし
join(‘/’)とした場合はスラッシュ(/)で区切られる

concat()

引数へ渡された配列を結合して新しい配列をつくる

const animals1 = ['mouse', 'cow', 'tiger'];
const animals2 = ['rabbit', 'horse', 'sheep'];
const newAnimals = animals1.concat(animals2);
console.log(newAnimals)
// ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep']

sort()

配列の要素をソートする（デフォルトでは文字列として昇順にソートする。）
※独自のソート順にしたい場合は引数で設定できる

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
animals.sort();
console.log(animals);
// ['cow', 'horse', 'mouse', 'rabbit', 'sheep', 'tiger']

reverse()

配列の要素を逆順にする

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
animals.reverse();
console.log(animals);
// ['sheep', 'horse', 'rabbit', 'tiger', 'cow', 'mouse']

find() , findLast()

find()は条件に合う最初の要素を配列から取り出す
findLast()は条件に合う最後の要素を配列から取り出す

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
console.log(animals.find((animal) => animal.length > 4));
// mouse
console.log(animals.findLast((animal) => animal.length > 4));
// sheep

indexOf() , lastIndexOf()

indexOf()は引数の内容と同じ内容の最初の配列要素のインデックス番号を返す
lastIndexOf()は引数の内容と同じ内容の最後の配列要素のインデックス番号を返す
存在しない場合は-1を返す

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep', 'cow'];
console.log(animals.indexOf('cow'));
// 1
 console.log(animals.lastIndexOf('cow'));
// 6

filter()

条件に合う要素のみを取り出して新しい配列をつくる

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
const newAnimals = animals.filter((animal) => animal.length > 4);
console.log(newAnimals);
// ['mouse', 'tiger', 'rabbit', 'horse', 'sheep']

includes()

引数で指定した内容と同じ要素が配列に含まれている場合はtrue、ない場合はfalseを返す

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
console.log(animals.includes('cow'));
// true

第2引数は検索開始位置（省略可）

some()

条件に合う要素がある場合はtrue、ない場合はfalseを返す

  const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
  console.log(animals.some((animal) => animal.length > 4));
  // true

map()

配列内のすべての要素に処理を行いその戻り値から新しい配列を作る

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
const newAnimals = animals.map((animal) => animal.toUpperCase());
console.log(newAnimals);
// ['MOUSE', 'COW', 'TIGER', 'RABBIT', 'HORSE', 'SHEEP']

forEach()

配列内の要素を1つずつ取り出してすべての要素に繰り返し同じ処理をする

const animals = ['mouse', 'cow', 'tiger', 'rabbit', 'horse', 'sheep'];
animals.forEach((animal) => console.log(`there are ${animal} in the zoo.`));
// there are mouse in the zoo.
// there are cow in the zoo.
// there are tiger in the zoo.
// there are rabbit in the zoo.
// there are horse in the zoo.
// there are sheep in the zoo.
ホーム » JavaScript » 【JavaScript】配列のメソッドまとめ