🐤

【JavaScript】よく使うArrayオブジェクトのメソッド

2024/01/18に公開

予習

  • JSでは配列はプリミティブ型ではなく、オブジェクト型
  • JSでは他言語で言うところの「連想配列」を連想配列といわず、これもオブジェクトと呼ぶ(値としてデータだけではなく、 関数も入れることができるため)

よく使うArrayオブジェクトのメソッド

よく使うArrayオブジェクトのメソッドを破壊的・非破壊的にわけてまとめました。

破壊的メソッド

  • 実行すると元の配列を変えるメソッド

push

  • 引数で指定した値を配列末尾に追加
  • 公式
const reptiles = ['トカゲ', 'ワニ', 'ヤモリ'];
reptiles.push('ヘビ', 'リクガメ');

// console.log(reptiles);
// ['トカゲ', 'ワニ', 'ヤモリ', 'ヘビ', 'リクガメ']

pop

  • 配列から最後の要素を取り除き、その要素を返す
  • 公式
const reptiles = ['トカゲ', 'ワニ', 'ヤモリ'];
const last = reptiles.pop();

console.log(reptiles);
// ['トカゲ', 'ワニ']
console.log(last);
// ヤモリ

shift

  • 配列から最初の要素を取り除き、その要素を返す
  • 公式
const reptiles = ['トカゲ', 'ワニ', 'ヤモリ'];
const first = reptiles.shift();

console.log(reptiles);
// (2) ['ワニ', 'ヤモリ']
console.log(first);
// トカゲ

unshift

  • 配列から先頭に要素を追加する
  • 公式
const reptiles = ['トカゲ', 'ワニ', 'ヤモリ'];
reptiles.unshift('ヘビ', 'リクガメ');

console.log(reptiles);
// (5) ['ヘビ', 'リクガメ', 'トカゲ', 'ワニ', 'ヤモリ']

reverse

  • 配列の順番を逆転させる
  • 元の配列コピーして逆転させるにはtoReversedを使う
  • 公式
const reptiles = ['トカゲ', 'ワニ', 'ヤモリ'];
reptiles.reverse();

console.log(reptiles);
// (3) ['ヤモリ', 'ワニ', 'トカゲ']

fill

  • 指定した範囲にある配列要素を同じ値に書き換え
  • 終了位置は処理の対象外となる
  • 公式
const reptiles = ['リクガメ', 'トカゲ', 'ワニ'];
reptiles.fill('ヘビ', 0, 2);
console.log(reptiles);
// (3) ['ヘビ', 'ヘビ', 'ワニ']

sort

  • 値を比較してソートする
  • 降順はb-a
  • 昇順はa-b
  • 公式
const age = [60, 100, 10, 40];
age.sort(function (a, b) {
	return b - a;
});
console.log(age);
// (4) [100, 60, 40, 10]

非破壊的メソッド

  • 元の配列に変更を加えずに処理を行うメソッド

slice

  • 配列の指定した範囲から新たな配列を生成
  • 公式
const reptiles = ['リクガメ', 'ミズガメ', 'ワニ'];
const kame = reptiles.slice(0, 2);
console.log(kame);
// (2) ['リクガメ', 'ミズガメ']

join

  • 配列の全要素を順に連結した新しい文字列を返す
  • 引数を指定しないと,で繋がれる
  • 公式
const reptiles = ['リクガメ', 'ミズガメ', 'ワニ'];
const animals = reptiles.join('と');
console.log(animals);
// リクガメとミズガメとワニ

includes

  • 引数が配列に含まれるか検索してboolean型を返す
  • 検索開始位置を引数で指定可能
  • 公式
const reptiles = ['ワニ', 'リクガメ', 'ミズガメ'];
reptiles.includes('ワニ') && console.log('ワニがいます');
reptiles.includes('ワニ', 1) && console.log('ワニはいませんか?');
reptiles.includes('カエル') || console.log('カエルはいません');
// console結果
// ワニがいます
// カエルはいません

indexOf

  • 引数に与えられた内容と同じ内容を持つ最初の配列要素のインデックスを返す
  • 存在しない場合は-1を返す
  • 公式
const reptiles = ['ワニ', 'リクガメ', 'ミズガメ'];
console.log(reptiles.indexOf('ワニ'));
console.log(reptiles.indexOf('ワニ', 1));
reptiles.indexOf('カエル') === -1 && console.log('カエルはいません');
// console結果
// 0
// -1
// カエルはいません

some

  • 指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が合格するかどうかを判定する
  • boolean型でリターンされる
  • 公式
const age = [20, 30, 80, 45,];
const ozisan = (e) => e >= 40;
const ozisanFlag = age.some(ozisan);
console.log(ozisanFlag);
// true

find

  • テスト関数を満たす配列内の最初の要素を返す
  • テスト関数を満たす値がない場合は、undefinedを返す
  • 公式
const age = [20, 30, 80, 45,];
const ozisan = (e) => e >= 40;
const firstOzisan = age.find(ozisan);
console.log(firstOzisan);
// 80

findIndex

  • テスト関数に合格する最初の要素のインデックス返す
  • テスト関数に合格する要素がなかった場合は-1を返す
  • 公式
const age = [20, 30, 80, 45,];
const ozisan = (e) => e >= 40;
const firstOzisan = age.findIndex(ozisan);
console.log(firstOzisan);
// 2

filter

  • テスト関数に合格した要素だけを含む新しい配列を作成する
  • テスト関数に合格した要素がないと空の配列にを返す
  • 公式
const age = [20, 30, 80, 45,];
const ozisan = (e) => e >= 40;
const ozisans = age.findIndex(ozisan);
console.log(ozisans);
// (2) [80, 45]

map

  • 配列のすべての要素に対して呼び出して、新しい配列を生成
  • 公式
const age = [20, 30, 80, 45,];
const tenYearsAgo = age.map(function(e) {
	return e - 10;
});
console.log(tenYearsAgo);
// (4) [10, 20, 70, 35]

forEach

  • 配列の要素を繰り返し処理する
  • for文などの制御構文の代わり且つ、シンプルに記述できる
  • 公式
const age = [20, 30, 80, 45,];
let total = 0;
age.forEach(e => {
	total += e;
});
console.log(total);

Discussion