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

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

あくまでも一例であり網羅しているわけではありませんので、全部見る系男子及び女子並びにその他のあらゆる人類は [MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array) を参照してください。

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

## 目次

### 真偽で判定
* [特定の要素が配列に含まれているかをtrue/falseで判定したい](#特定の要素が含まれているかをtruefalseで判定したい)
* [要素が任意の条件を満たしているかをture/falseで判定したい](#要素が任意の条件を満たしているかをturefalseで判定したい)

### 要素を抽出
* [任意の条件を満たす要素を抽出したい](#任意の条件を満たす要素を抽出したい)
* [任意の条件を満たす要素のindexを抽出したい](#任意の条件を満たす要素のindexを抽出したい)

### 要素の削除
* [添字を指定して任意の値を削除したい](#添字を指定して任意の値を削除したい)
* [任意の条件を満たす要素を削除したい](#任意の条件を満たす要素を削除したい)
* [先頭の要素を取り出したい（先頭の要素を取得して削除したい）](#先頭の要素を取り出したい先頭の要素を取得して削除したい)
* [末尾の要素を取り出したい（先頭の要素を取得して削除したい）](#末尾の要素を取り出したい先頭の要素を取得して削除したい)

### 結合・展開
* [配列を結合したい](#配列を結合したい)
* [配列内の配列を１つの配列に整形したい](#配列内の配列を１つの配列に整形したい)

### その他
* [値の重複を排除したい](#値の重複を排除したい)
* [重複する値の数を集計したい](#重複する値の数を集計したい)
* [ランダムな文字列を生成したい](#ランダムな文字列を生成したい)
* [文字列の値を数値に変換したい](#文字列の値を数値に変換したい)
* [文字列を文字の配列に変換したい](#文字列を文字の配列に変換したい)



## 真偽で判定

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

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

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

fourSeasons.includes('Autumn'); // true
fourSeasons.includes('Fall');   // false
```

```JavaScript: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で返します。

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

numbers.some(value => 3 < value); // true
numbers.some(value => 6 < value); // false
```

```JavaScript: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()`は、任意の条件を満たす要素からなる**新しい配列**を生成します。

```JavaScript: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
```

```JavaScript: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`を返すので注意が必要です。

```JavaScript: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()`は指定した位置から指定した数の値を削除します。
第２引数として削除する数を指定しない場合、指定した位置からの全ての値を削除します。
戻り値は削除した値で、メソッドは**破壊的**であることに注意してください。

```JavaScript: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()`は、任意の条件を満たす要素からなる新しい配列を生成します。
任意の条件を満たさない新しい配列を生成することで、任意の条件を満たす要素を削除します。

```JavaScript: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`は、配列の先頭の要素を取り出します。引数はありません。
```JavaScript:shift.js
const fourSeasons = ['Spring', 'Summer', 'Autumn', 'Winter']

const result = fourSeasons.shift();

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

### 末尾の要素を取り出したい（先頭の要素を取得して削除したい）
`pop`は、配列の末尾の要素を取り出します。引数はありません。
```JavaScript:splice.js
const fourSeasons = ['Spring', 'Summer', 'Autumn', 'Winter']

const result = fourSeasons.pop();

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



## 結合・展開

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

```javascript: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"]
```


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

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

## その他
### 値の重複を排除したい
`Set` オブジェクトは、あらゆる型で多数の一意の値を格納することができます。

```JavaScript
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']
```




### 重複する値の数を集計したい
```JavaScript
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}
```

### ランダムな文字列を生成したい
https://qiita.com/fukasawah/items/db7f0405564bdc37820e


### 全ての要素（値）を足したい
`reduce()` は任意のコールバック関数に対して配列の要素を順番に呼び出します。要素を呼び出すたびに、直前の要素における計算結果の戻り値を渡します。最後の要素における計算結果の戻り値がこのメソッドの戻り値となります。
```javascript: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
```

### 文字列の値を数値に変換したい
```javascript
const value = "500"
console.log(+value) // 500
```

### 文字列を文字の配列に変換したい
`スプレッド構文` はオブジェクトや配列の要素を展開します。
`Array.from` メソッドは、配列のようなオブジェクトや反復可能オブジェクトから、浅くコピーされた新しい配列を生成します。
```javascript
const str = "Zakime";
console.log([...str]);        // ['Z', 'a', 'k', 'i', 'm', 'e']
console.log(Array.from(str)); // ['Z', 'a', 'k', 'i', 'm', 'e']
```