JavaScript基礎：配列のよく使うメソッド

#はじめに
配列の操作は普段よく使うので、関連メソッドをまとめてみます。

#配列の重複値を削除
##new setで重複値取り除く
```javascript
const data = ["four", "one", "two", "three", "one"]

const newData = new Set(data)
console.log(newData)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/af29d79b-4353-6ab1-8560-9ef564255487.png)

#配列の値置換
splice() メソッドは、 既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。

```javascript
const data = ["four", "one", "two", "three", "one"]
data.splice(1, 1, 'one1','one2')
    
console.log(data)
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/c09a6b9d-c2bd-b1d9-f235-97c5bc73e761.png)

#map、fromメソッドで配列値加工
###fromメソッド
Array.from() メソッドは、配列風オブジェクトや反復可能オブジェクトから、新しい、浅いコピーの Array インスタンスを生成します。

```javascript
const data = ["1", "2", "3"]
console.log(Array.from(data, x => x + x));
```
> Array ["11", "22", "33"]

###mapメソッド
```javascript
var arr = [1, 3, 6, 9];
const map = arr.map(x => x ** 2);

console.log(map);
```

>Array [1, 9, 36, 81]

#配列クリア
```javascript
var arr = [1, 3, 6, 9];
// 長さを0でクリア
arr.length = 0

// 空の配列でリセット
//arr = []
console.log(arr);
```

>Array []

#配列をオブジェクトに変換
```javascript
var arr = ["one", "two", "three"];
var obj = {...arr}
console.log(obj);
```

>Object { 0: "one", 1: "two", 2: "three" }


#配列に初期値をfill
```javascript
var arr = new Array(8).fill(100)

console.log(arr)
```

>Array [100, 100, 100, 100, 100, 100, 100, 100]

#配列のマージ
```javascript
const arr1 = new Array(8).fill(100)
const arr2 = new Array(8).fill(200)
const arr3 = [...arr1, ...arr2]

console.log(arr3)
```

>Array [100, 100, 100, 100, 100, 100, 100, 100, 200, 200, 200, 200, 200, 200, 200, 200]

concatも配列マージできるメソッドです。
concat() メソッドは、配列に他の配列や値をつないでできた新しい配列を返します。


###スプレッド構文
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

#配列の反転
```javascript
const array1 = ['one', 'two', 'three'];
const reversed = array1.reverse(); 
console.log('reversed: ', reversed);
```

> "reversed: " Array ["three", "two", "one"]

#reduceメソッド
reduce() は配列の各要素に対して（引数で与えられた）reducer 関数を実行して、単一の値にします。

```javascript
const array = [1, 2, 3, 4];
const total = array.reduce((total, currentValue) => total + currentValue)

console.log(total)
```
>10

#filterメソッド
filter() メソッドは、引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。

```javascript
const nums = [10, 15, 20, 25];
const oddNums = nums.filter(num => num % 2 == 1)

console.log(oddNums)

```

>Array [15, 25]

#forEach
for句の代わりとしてよく使います。

```javascript
const array = ['one', 'two', 'three'];

array.forEach(function(element) {
  console.log(element);
});
```

> "one"
> "two"
> "three"


#sort
```javascript
// 文字列で昇順にする
const data = ['1', '2', '10', '20'];
data.sort();
console.log(data);

// 数字で昇順にする
const data2 = [1, 2, 10, 20];
data2.sort();
console.log(data2);

// 自分の比較メソッドで降順にする
const data3 = [1, 2, 10, 20];
data3.sort(function(a, b) {
  if (a < b) {
    return 1;
  } else if (a > b) {
    return -1;
  } else {
    return 0;
  }
});
console.log(data3);
```

>Array ["1", "10", "2", "20"]
>Array [1, 10, 2, 20]
>Array [20, 10, 2, 1]

ほかもいろいろなメソッドがあります。
参考URL
Map: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map
Array: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
Set: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set

以上