Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Zakime(Zakime)

JavaScript 用途から逆引き 配列操作メソッドまとめ forEach, map, filter...

Posted at

JavaScript について、少し他の言語に浮気するとすぐに配列操作方法を忘れてしまうので、自分が見直しやすいようにシチュエーション別にまとめました。いちいち思い出すのは辞めました。

あくまでも一例であり網羅しているわけではありませんので、全部見る系男子及び女子並びにその他のあらゆる人類は MDN Web Docs を参照してください。

シチュエーション別なので、メソッドは重複していることがあります。

目次

真偽で判定

要素を抽出

要素の削除

結合・展開

その他

真偽で判定

特定の要素が含まれているかをtrue/falseで判定したい

includes()は、特定の要素が配列に含まれているかどうかをtrue/falseで返します。
some()は、要素のいずれかが任意の条件を満たしているかをtrue/falseで返します。

配列の中身がプリミティブ型の場合はincludes()で良いですが、配列の中身がオブジェクト（参照型）の場合は条件式を用いるsome()を利用します。

include.js
const fourSeasons = ['Spring', 'Summer', 'Autumn', 'Winter']

fourSeasons.includes('Autumn'); // true
fourSeasons.includes('Fall');   // false
some.js
const fourSeasons = [
  { us:'Spring', jp:'春', ru:'Весна'},
  { us:'Summer', jp:'夏', ru:'Лето'},
  { us:'Autumn', jp:'秋', ru:'Осень'},
  { us:'Winter', jp:'冬', ru:'Зима'}
];

fourSeasons.some(season => season.us === 'Autumn'); // true
fourSeasons.some(season => season.us === 'Fall');   // false

要素が任意の条件を満たしているかをture/falseで判定したい

some()は、要素のいずれかが任意の条件を満たしているかをtrue/falseで返します。
every()は、全ての要素が任意の条件を満たしているかをtrue/falseで返します。

some.js
const numbers = [1, 2, 3, 4, 5]

numbers.some(value => 3 < value); // true
numbers.some(value => 6 < value); // false
every.js
const numbers = [1, 2, 3, 4, 5]

const test1 = numbers.every(value => 0 < value); // true
const test2 = numbers.every(value => 3 < value); // false

要素を抽出

任意の条件を満たす要素を抽出したい

find()は、任意の条件を満たす配列内の最初の要素の値を返します。
filter()は、任意の条件を満たす要素からなる新しい配列を生成します。

find.js
const fourSeasons = [
  { us:'Spring', jp:'春', ru:'Весна'},
  { us:'Summer', jp:'夏', ru:'Лето'},
  { us:'Autumn', jp:'秋', ru:'Осень'},
  { us:'Winter', jp:'冬', ru:'Зима'}
];

fourSeasons.find(season => season.us === 'Autumn');
// { us: 'Autumn', jp: '秋', ru: 'Осень' }
fourSeasons.find(season => season.us !== 'Autumn');
// { us: 'Spring', jp: '春', ru: 'Весна' }
fourSeasons.find(season => season.us === 'Fall'); 
// undefined
filter.js
const fourSeasons = [
  { us:'Spring', jp:'春', ru:'Весна'},
  { us:'Summer', jp:'夏', ru:'Лето'},
  { us:'Autumn', jp:'秋', ru:'Осень'},
  { us:'Winter', jp:'冬', ru:'Зима'}
];

fourSeasons.filter(season => season.us === 'Autumn');
// [ { us: 'Autumn', jp: '秋', ru: 'Осень' } ]
fourSeasons.filter(season => season.us !== 'Autumn');
// [
//   { us: 'Spring', jp: '春', ru: 'Весна' },
//   { us: 'Summer', jp: '夏', ru: 'Лето' },
//   { us: 'Winter', jp: '冬', ru: 'Зима' }
// ]
fourSeasons.filter(season => season.us === 'Fall'); 
// []

任意の条件を満たす要素のindexを抽出したい

indexOf()は、任意の値と一致する最初の要素の添字を返します。
findIndex()は、任意の条件を満たす最初の要素の位置を返します。

どちらのメソッドも指定した要素が存在しない場合はundefinedではなく-1を返すので注意が必要です。

indexOf.js
const fourSeasons = ['Spring', 'Summer', 'Autumn', 'Winter']

fourSeasons.indexOf('Autumn'); // 2
fourSeasons.indexOf('Fall');   // -1
indexOf.js
const fourSeasons = [
  { us:'Spring', jp:'春', ru:'Весна'},
  { us:'Summer', jp:'夏', ru:'Лето'},
  { us:'Autumn', jp:'秋', ru:'Осень'},
  { us:'Winter', jp:'冬', ru:'Зима'}
];

fourSeasons.findIndex(season => season.us === 'Autumn'); // 2
fourSeasons.findIndex(season => season.us !== 'Autumn'); // 0
fourSeasons.findIndex(season => season.us === 'Fall');   // -1

削除編

添字を指定して任意の値を削除したい

splice()は指定した位置から指定した数の値を削除します。
第２引数として削除する数を指定しない場合、指定した位置からの全ての値を削除します。
戻り値は削除した値で、メソッドは破壊的であることに注意してください。

splice.js
const fourSeasons = ['Spring', 'Summer', 'Autumn', 'Winter']

const result = fourSeasons.splice(1,1);

console.log(fourSeasons) // [ 'Spring', 'Autumn', 'Winter' ]
console.log(result)      // [ 'Summer' ]

任意の条件を満たす要素を削除したい

filter()は、任意の条件を満たす要素からなる新しい配列を生成します。
任意の条件を満たさない新しい配列を生成することで、任意の条件を満たす要素を削除します。

filter.js
const fourSeasons = [
  { us:'Spring', jp:'春', ru:'Весна'},
  { us:'Summer', jp:'夏', ru:'Лето'},
  { us:'Autumn', jp:'秋', ru:'Осень'},
  { us:'Winter', jp:'冬', ru:'Зима'}
];

// '夏'を含む要素と'Autumn'を含む要素を削除する
const processedFourSeasons = fourSeasons.filter((season)=> {
  return season.jp !== '夏' && season.us !== 'Autumn'
});

console.log(processedFourSeasons);
//[
//  { us: 'Spring', jp: '春', ru: 'Весна' },
//  { us: 'Winter', jp: '冬', ru: 'Зима' }
//]

先頭の要素を取り出したい（先頭の要素を取得して削除したい）

shiftは、配列の先頭の要素を取り出します。引数はありません。

shift.js
const fourSeasons = ['Spring', 'Summer', 'Autumn', 'Winter']

const result = fourSeasons.shift();

console.log(fourSeasons) // ['Summer', 'Autumn', 'Winter']
console.log(result)      // 'Spring'

末尾の要素を取り出したい（先頭の要素を取得して削除したい）

popは、配列の末尾の要素を取り出します。引数はありません。

splice.js
const fourSeasons = ['Spring', 'Summer', 'Autumn', 'Winter']

const result = fourSeasons.pop();

console.log(fourSeasons) // ['Spring', 'Summer', 'Autumn']
console.log(result)      // 'Winter'

結合・展開

配列を結合したい

スプレッド構文 はオブジェクトや配列の要素を展開します。
concat は結合して新しい配列を生成します。引数には任意の数の配列を指定できます。このメソッドは元々の配列には影響を及ぼしません。

concat.js
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];

const result = [...array1, ...array2];
console.log(result1); //  ["a", "b", "c", "d", "e", "f"]

const result2 = array1.concat(array2);
console.log(result2); //  ["a", "b", "c", "d", "e", "f"]

配列内の配列を１つの配列に整形したい

const array = [['a', 'b', 'c'], ['d', 'e'], ['f']];
const newArray = [];
  array.forEach((value) => {
    newArray.push(...value);
  });

その他

値の重複を排除したい

Set オブジェクトは、あらゆる型で多数の一意の値を格納することができます。

const array = Math.random().toString(10).substring(2).split('');
// ['0', '1', '1', '5', '2', '4', '2', '5', '4',
//  '8', '1', '9', '9', '4', '5', '2', '3', '4']

const set_array = [...new Set(array)];
console.log(set_array)  // ['0', '1', '5', '2', '4', '8', '9', '3']

// Set を使わない場合
const new_array = []
array.forEach(val => new_array.includes(val) || new_array.push(val));
console.log(new_array); // ['0', '1', '5', '2', '4', '8', '9', '3']

重複する値の数を集計したい

const array = Math.random().toString(3).substring(2).split('');
// ['0', '0', '0', '2', '2', '0', '0', '2', '0',
//  '1', '2', '1', '1', '2', '2', '0', '2', '0',
//  '1', '1', '0', '2', '0', '1', '1', '2', '1',
//  '1', '0', '0', '1', '1', '0', '1', '1', '1']

const result = {}
array.forEach(val => result[val] = result[val] ? result[val] + 1 : 1);

console.log(result); // {0: 13, 1: 14, 2: 9}

ランダムな文字列を生成したい

全ての要素（値）を足したい

reduce() は任意のコールバック関数に対して配列の要素を順番に呼び出します。要素を呼び出すたびに、直前の要素における計算結果の戻り値を渡します。最後の要素における計算結果の戻り値がこのメソッドの戻り値となります。

reduce.js
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const result = array.reduce((prev, current) => prev + current, 0);
console.log(result) // 45

文字列の値を数値に変換したい

const value = "500"
console.log(+value) // 500

文字列を文字の配列に変換したい

スプレッド構文 はオブジェクトや配列の要素を展開します。
Array.from メソッドは、配列のようなオブジェクトや反復可能オブジェクトから、浅くコピーされた新しい配列を生成します。

const str = "Zakime";
console.log([...str]);        // ['Z', 'a', 'k', 'i', 'm', 'e']
console.log(Array.from(str)); // ['Z', 'a', 'k', 'i', 'm', 'e']
0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?