LoginSignup
12
13

More than 1 year has passed since last update.

@EZ_Denta(kazuki matsumura)

[JavaScript] 超わかる！配列 (Arrayオブジェクト) チートシート

Last updated at Posted at 2021-10-23

はじめに

  • JavaScriptのArrayオブジェクトと仲良くなったので、チートシートとして便利な機能を紹介します。
  • 本記事に書いてあることは、MDN Wec Docsに詳細が書いてあります。
  • 気になる方はそちらを参照ください。 :stars:

チートシート

  • 参考までに個人的な使用頻度を:three:段階で設定してみました。

配列の基本

名前 使用頻度 概要
length ★★★ 配列内の要素数を取得する
Array.isArray() ★ 配列か判定する
Array.from() ★ 配列風、または反復可能オブジェクトから新しいArrayインスタンスを生成する
Array.of() ★ 可変個の引数から、引数の個数や型に関わらず、新しいArrayインスタンスを生成する

要素の追加・削除

名前 使用頻度 概要
push() ★★★ 配列の末尾に要素を追加する
unshift() ★ 配列の先頭の要素を追加する
pop() ★ 配列の末尾の要素を削除する
shift() ★ 配列の先頭の要素を削除する
splice() ★★ 位置を指定して配列の要素を削除する（返り値で削除した要素を配列で取得できる）

配列の操作

名前 使用頻度 概要
concat() ★★ 配列Aと配列Bを結合して新しい配列を作る
join() ★★ 配列のすべての要素を結合した文字列を返す
reverse() ★ 配列の要素の順番を逆転させる
sort() ★★ 配列内の要素の順番を操作する

要素の検索

名前 使用頻度 概要
includes() ★★ 引数で渡した要素が配列に含まれているかどうかをtrueまたはfalseで返す
indexOf() ★ 引数で渡した要素と同じものを検索して見つかった最初の添字を返す
lastIndexOf() ★ 引数で渡した要素と同じものを検索して見つかった最後の添字を返す

各要素に対して関数を呼び出す

名前 使用頻度 概要
forEach() ★★★ 配列中のそれぞれの要素について関数を呼び出す
map() ★★★ 配列中のそれぞれの要素に対して関数を呼び出し、その結果を格納した新しい配列を取得する
find() ★★ 引数で渡したテスト関数を合格した最初の要素を取得する
filter() ★★ 引数で渡したテスト関数を合格した要素から新しい配列を作る
reduce() ★★ かなり便利！配列内のすべての要素に対して関数を適用し任意の新しい要素を取得する（新しい配列や文字列など）
every() ★ 引数で渡したテスト関数を全ての要素が満たした場合trueを返す
some() ★ 引数で渡したテスト関数を1つでも満たす要素があった場合trueを返す

使い方

length

  • 要素数を取得する
const array = ['りんご', 'ゴリラ', 'ラッパ'];
array.length; //3

Array.isArray()

  • 配列か判定する
const array = ['りんご', 'ゴリラ', 'ラッパ'];
Array.isArray(array); //true

const string = '文字列';
Array.isArray(string); //false

Array.from()

  • 配列風、または反復可能オブジェクトから新しいArrayインスタンスを生成する
Array.from('アイウエオ'); //['ア','イ','ウ','エ','オ']
Array.from([1, 2, 3], num => num * 2); //[2, 4, 6]

Array.of()

  • 可変個の引数から、引数の個数や型に関わらず、新しいArrayインスタンスを生成する
Array.of(1); //[1]
Array.of(1, 2, 3); //[1, 2, 3]

push()

  • 配列の末尾に要素を追加する
  • 引数で複数要素を渡すことも可能
  • 返り値：新しい配列の要素数 
const array = ['リンゴ','ゴリラ','ラッパ'];
const newLength = array.push('パイナップル');

console.log(array); //['リンゴ','ゴリラ','ラッパ','パイナップル']
console.log(newLength); //4

unshift()

  • 配列の先頭の要素を追加する
  • 引数で複数要素を渡すことも可能
  • 返り値：新しい配列の要素数 
const array = [2, 3, 4];
const newLength = array.unshift(1);

console.log(array); //[1, 2, 3, 4]
console.log(newLength); //4

pop()

  • 配列の末尾の要素を削除する
  • 返り値：削除した要素 
const array = [1, 2, 3];
const deleteItem = array.pop();

console.log(array); //[1, 2]
console.log(deleteItem); //3

shift()

  • 配列の先頭の要素を削除する
  • 返り値：削除した要素 
const array = [1, 2, 3];
const deleteItem = array.shift();

console.log(array); //[2, 3]
console.log(deleteItem); //1

splice()

  • 位置を指定して配列の要素を削除する
  • 返り値：削除した要素の配列 
const array = ['リンゴ','ゴリラ','ラッパ','パイナップル'];
const spliceArray = array.splice(0, 2);
// 第一引数で削除する開始位置を指定する、第二引数で開始位置からの削除範囲を指定する

console.log(array); //['ラッパ','パイナップル']
console.log(spliceArray); //['リンゴ','ゴリラ']

concat()

  • 配列Aと配列Bを結合して新しい配列を作る
  • 返り値：配列Aと配列Bを結合した新しい配列 
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = array1.concat(array2); 

console.log(newArray); //[1, 2, 3, 4, 5, 6]

join()

  • 配列のすべての要素を結合した文字列を返す
  • 引数で要素を区切る文字列を指定する（デフォルトは、カンマで区切られる）
  • 返り値：文字列 
const array = ['り','ん','ご'];
const string1 = array.join(); 
const string2 = array.join(''); 

console.log(string1); //り,ん,ご
console.log(string2); //りんご

reverse()

  • 配列の要素の順番を逆転させる
  • 返り値：なし
const array = [1, 2, 3];
array.reverse(); //[3, 2, 1]

sort()

  • 配列内の要素の順番を操作する
  • デフォルトのソート順は、要素を文字列に変換してからUTF-16 コード単位の値の並びとして比較する
  • 引数にcompareFunctionを渡すことで任意のソート順を設定できる
  • 返り値：なし
const array1 = ['D','B','C','E','A'];
array1.sort(); //['A','B','C','D','E']

// 昇順
const array1 = [1, 11, 23, 45, 100];
// compareFunctionが 0 未満の場合、a を b より小さいインデックスにソートします
array1.sort((a, b) => a - b); //[1, 11, 23, 45, 100]

// 降順
const array1 = [1, 11, 23, 45, 100];
// compareFunctionが 0 より大きい場合、b を a より小さいインデックスにソートします
array1.sort((a, b) => b - a); //[1, 11, 23, 45, 100]

includes()

  • 引数で渡した要素が配列に含まれているかどうかをtrueまたはfalseで返す
  • 返り値：真偽値
const array = [1, 2, 3, 4, 5];
array.includes(1); //true
array.includes(10); //false

indexOf()

  • 引数で渡した要素と同じものを検索して見つかった最初の添字を返す
  • 返り値：一致する要素の添字
const array = ['A','B','C','D','A'];
array.indexOf('A'); //0
array.indexOf('C'); //2

lastIndexOf()

  • 引数で渡した要素と同じものを検索して見つかった最後の添字を返す
  • 返り値：一致する要素の添字
const array = ['A','B','C','D','A'];
array.lastIndexOf('A'); //4

forEach()

  • 配列中のそれぞれの要素について関数を呼び出す
const array = ['A','B','C'];
// indexは省力可能
array.forEach((num, index) => {
 console.log(num, index);
});
// A 0
// B 1
// C 2

map()

  • 配列中のそれぞれの要素に対して関数を呼び出し、その結果を格納した新しい配列を取得する
  • 返り値：各要素に関数を適用した新しい配列 
const array = [1, 2, 3, 4, 5];
// array配列の各要素を２倍にする
const newArray = array.map((num) => {
 return num * 2;
});
console.log(newArray);
// [2, 4, 6, 8, 10]

find()

  • 引数で渡したテスト関数を合格した最初の要素を取得する
  • 返り値：テスト関数に合格した最初の要素 
const array = [1, 2, 3, 4, 5];
// 3より大きい値を見つける
const passedItem = array.find((num) => {
 return num > 3;
});
console.log(passedItem); // 4

filter()

  • 引数で渡したテスト関数を合格した要素から新しい配列を作る
  • 返り値：テスト関数に合格した要素で作る新しい関数 
const array = [1, 2, 3, 4, 5];
// 3より大きい値でフィルターして関数を作る
const filteredArray = array.filter((num) => {
 return num > 3;
});
console.log(filteredArray); // [4, 5]

reduce()

  • 配列内のすべての要素に対して関数を適用し任意の新しい要素を取得する
  • 返り値：利用者の任意 
/**
 * accumulator　の初期値には reduce の第二引数の値が入る
 * その後、第一引数で渡した関数の返り値が accumulator に入っていく
 */
const array = [1, 2, 3, 4, 5];

// 数値配列の合計値を取得する
const total1 = array.reduce((accumulator ,num) => {
 return accumulator += num;
}, 0);
console.log(total1); // 15

// 3より大きい数のみ合計した数値を取得する
const total2 = array.reduce((accumulator ,num) => {
 if (num > 3) accumulator += num;
 return accumulator;
}, 0);
console.log(total2); // 9

// ３より大きい値のみ２倍した配列を取得する
const newArray = array.reduce((accumulator ,num) => {
 if (num > 3) accumulator.push(num * 2);
 return accumulator;
}, []);
console.log(newArray); // [8, 10]

every()

  • 引数で渡したテスト関数を全ての要素が満たした場合trueを返す
  • 返り値：真偽値 
const array = [1, 2, 3, 4, 5];

// 1以上の要素で構成された配列かチェックする
const result1 = array.every((num) => {
 return num >= 1;
});
console.log(result1); // true

// 2より大きい要素で構成された配列かチェックする
const result2 = array.every((num) => {
 return num > 2;
});
console.log(result2); // false

some()

  • 引数で渡したテスト関数を1つでも満たす要素があった場合trueを返す
  • 返り値：真偽値 
const array = [1, 2, 3, 4, 5];

// 配列に1が入っているかチェックする
const result1 = array.some((num) => {
 return num === 1;
});
console.log(result1); // true

// 配列に10より大きい数値が入っているかチェックする
const result2 = array.some((num) => {
 return num > 10;
});
console.log(result2); // false

終わりに

  • 個人的にreduce()を使いこなせると配列操作がグッと楽になった印象です。
  • それでは〜 :rocket:
12
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
13