JavaScriptの配列

## 配列の定義

```:js
//空の配列を作る
const array1 = [];

//数値をまとめた配列
const array2 = [0, 2, 8];

//文字列をまとめた配列
const array3 = ["bernard", "peter", "stephen", "gillian"];

//数値、文字列、真偽値をまとめた配列
const array4 = [1, "bernard", false];

//数値をまとめた2次元配列
const array5 = [
  [1, 1, 1],
  [2, 2, 2]
];

//オブジェクトをまとめた配列
const array6 = [{
  id: 1,
  name: "bernard"
}, {
  id: 2,
  name: "peter"
}];
``` 




## 配列の長さの取得

```:js
const array = ["bernard", "peter", "stephen", "gillian"];
console, log(array.length);
```


## 要素の追加
### 先頭への要素の追加

```:js
const array = ["bernard", "peter", "stephen", "gillian"];

array.unshift("phil", "tom");
console.log(array); //["phil", "tom", "bernard", "peter", "stephen", "gillian"]
```

### 末尾への要素の追加

```:js
const array = ["bernard", "peter", "stephen", "gillian"];
 
array.push("phil", "tom");
console.log(array); //["bernard", "peter", "stephen", "gillian", "phil", "tom"]
```

## 要素の削除
### 先頭の要素の削除

```:js
const array = ["bernard", "peter", "stephen", "gillian"];

array.shift();
console.log(array); //["peter", "stephen", "gillian"]
```

### 末尾の要素の削除

```:js
const array = ["bernard", "peter", "stephen", "gillian"];
 
array.pop();
console.log(array); //["bernard", "peter", "stephen"]
```

## 要素の置換
置換対象を0個にして追加として使う事もできます。

```:js
const array = ["bernard", "peter", "stephen", "gillian"];

//1番目の要素(peter)から1つ分の要素をphilに置換する
array.splice(1, 1, "phil");
console.log(array);
```

## 配列の連結
### concatによる連結

```:js
const array1 = ["bernard", "peter"];
const array2 = ["stephen"];

const combinedArray = array1.concat(array2);
console.log(combinedArray); //) ["bernard", "peter", "stephen"]
```

### "..."による連結

```:js
const array1 = ["bernard", "peter"];
const array2 = ["stephen"];

const combinedArray = [...array1, ...array2];
console.log(combinedArray); // ["bernard", "peter", "stephen"]
```

## 配列の要素の結合
区切り文字指定省略時は「,」区切りです。

```:js
const array = ["bernard", "peter", "stephen", "gillian"];
 
const combinedString = array.join();
console.log(combinedString); //bernard,peter,stephen,gillian
```

区切り文字指定が("")の場合：区切り文字無し

```:js
const array = ["bernard", "peter", "stephen", "gillian"];

const combinedString = array.join("");
console.log(combinedString); //bernardpeterstephengillian
```

## 分割代入

```:js
let a;
let b;
let c;

[a, b, c] = [1, 2, 3];

console.log(a); //1
console.log(b); //2
console.log(c); //3
```


## 要素の検索
### 検索したい要素が最初に出てくる位置
最初に出てくるもののみヒットするので、2回目以降はヒットしません。

```:js
const array = ["bernard", "peter", "stephen", "gillian", "bernard"];
      
console.log(array.indexOf("bernard")); //0
```

#### 検索開始位置を指定する

```:js
const array = ["bernard", "peter", "stephen", "gillian", "bernard"];
       
console.log(array.indexOf("bernard", 1)); //4(最初の要素が検索対象から外れるため)
```

### 検索したい要素が最後に出てくる位置
末尾から検索して、最初に出てくるもののみヒットするので、2回目以降はヒットしません。

```:js
const array = ["bernard", "peter", "stephen", "gillian", "bernard"];

console.log(array.lastIndexOf("bernard")); //4
```

#### 検索開始位置を指定する

```:js
const array = ["bernard", "peter", "stephen", "gillian", "bernard"];

console.log(array.lastIndexOf("bernard", 1)); //(末尾の要素が検索対象から外れるため)
```

### 検索したい要素が配列に含まれるか判定
1個以上含まれるとtrueが返ります。

```:js
const array = ["bernard", "peter", "stephen", "gillian"];
 
console.log(array.includes("bernard")); //true
```

#### 検索開始位置を指定する

```:js
const array = ["bernard", "peter", "stephen", "gillian"];

console.log(array.includes("bernard", 1)); //false(0番目の要素が検索対象から外れるため)
```


## 配列の要素が条件を満たすか判定
### everyとsomeの違い

|everyとsomeの違い|内容|
|---|---|
|every|条件を全ての値が満たすかの判定|
|some|条件を満たすものがあるかの判定|




### every
結果は真偽値になります。

|引数の位置|変数|
|---|---|
|1|値|
|2|インデックス(省略可能)|
|3|配列(省略可能)|


```:js
const sampleArray = [1, 2, 3, 4, 5];

const judgment = sampleArray.every((value, index, array) => {
  return (value >= 1);
});

console.log(judgment);
```

### some
結果は真偽値になります。

|引数の位置|変数|
|---|---|
|1|値|
|2|インデックス(省略可能)|
|3|配列(省略可能)|

```:js
const sampleArray = [1, 2, 3, 4, 5];

const judgment = sampleArray.some((value, index, array, js) => {
 return (value > 3);
});

console.log(judgment);
```




## 条件を満たす要素を検索

### find

条件を満たす最初の最初の要素の値を返します。

|引数の位置|変数|
|---|---|
|1|値|
|2|インデックス(省略可能)|
|3|配列(省略可能)|

```:js
const sampleArray = [1, 2, 3, 4, 5];

const target = sampleArray.find((element, index, array) => {
  return (element === 3);
});

console.log(target); //3
``` 


### 最初に条件を満たす番目を取得

```:js
const array = ["bernard", "peter", "stephen", "gillian"];

console.log(array.findIndex((element) => {
  return (element === "peter")
})); //1
```






## 配列の要素の順番を変更する
### 逆順
元の配列に変更を加えます。

```:js
const array = ["bernard", "peter", "stephen", "gillian"];

array.reverse();
console.log(array); //["gillian", "stephen", "peter", "bernard"]
```

### ソート
元の配列に変更を加えます。

```:js
const array = ["bernard", "peter", "stephen", "gillian"];

array.sort();
console.log(array); //["bernard", "gillian", "peter", "stephen"]
```


## 配列の要素を全部足す
### reduceとreduceRightの違い

|reduceとreduceRightの違い|内容|
|---|---|
|reduce|左から処理する|
|reduceRight|右から処理する|


### reduce
処理をして1つの値を取得します。(合計などに使います)

|引数の位置|変数|
|---|---|
|1|それまでの結果|
|2|現在の値|
|3|インデックス(省略可能)|
|4|配列(省略可能)|


```:js
const sampleArray = [1, 2, 3, 4, 5];

const total = sampleArray.reduce((previousValue, currentValue, index, array) => {
  return previousValue + currentValue;
});

console.log(total);
```

### reduceRight
処理をして1つの値を取得します。(合計などに使います)

|引数の位置|変数|
|---|---|
|1|それまでの結果|
|2|現在の値|
|3|インデックス(省略可能)|
|4|配列(省略可能)|

```:js
const sampleArray = [1, 2, 3, 4, 5];

const total = sampleArray.reduceRight((previousValue, currentValue, index, array) => {
  return previousValue + currentValue;
});

console.log(total);
```

### 2次元配列を1次元配列にする

```:js
const arrayGroup = [
  ["bernard", "peter", "stephen"],
  ["gillian", "phil", "tom"]
];

const reducedArray = arrayGroup.reduce((previousArray, currentArray) => {
  return previousArray.concat(currentArray);
});

console.log(reducedArray);
```


## 配列から別の配列を作る

### map
配列から配列を作るメソッドです。
元の配列は変更されません。

|引数の位置|変数|
|---|---|
|1|値|
|2|インデックス(省略可能)|
|3|配列(省略可能)|

```:js
const sampleArray = [1, 2, 3, 4, 5];
  const square = sampleArray.map((value, index, array) => {
  return value * value;
});

console.log(square);
```

### オブジェクトから配列を作る

```:js
const data = [{
     id: 1,
     name: "bernard"
   },
   {
     id: 2,
     name: "peter"
  },
  {
    id: 3,
    name: "stephen"
  },
  {
    id: 4,
    name: "gillian"
  }
];
 
const array = data.map((value, index, array) => {
  return value.name;
});

console.log(array);
```

## 配列をフィルタリングして別の配列を作る
### filter
条件にあうものだけを抽出します。
配列の各要素を引数として、都度コールバック関数を実行して、trueを返した値から新しい配列を返します。

|引数の位置|変数|
|---|---|
|1|値|
|2|インデックス(省略可能)|
|3|配列(省略可能)|
```:js
const sampleArray = [1, 2, 3, 4, 5];

const filteredArray = sampleArray.filter((value, index, array) => {
  return (value > 2);
});

console.log(filteredArray);
``` 












## 配列風オブジェクトを配列に変換

### NordList

```:html
 <div>a</div>
 <div>b</div>
 <div>c</div>
```

```:js
const divGroup = document.querySelectorAll("div");
console.log(divGroup); //NodeList

const divArray = [...divGroup];
console.log(divArray); //配列
```

### HTMLCollection

```:html
<div>a</div>
<div>b</div>
<div>c</div>
```

```:js
const divGroup = document.getElementsByTagName("div");
console.log(divGroup); //NodeList
       
const divArray = [...divGroup];
console.log(divArray); //配列
```

### String

```:js
const string = "sampleword";
console.log(string); //NodeList

const stringArray = [...string];
console.log(stringArray); //配列
```



## 配列の各要素に処理
### forEach
配列の値に同じ処理を繰り返します。
undefinedを返します。

|引数の位置|変数|
|---|---|
|1|値|
|2|インデックス(省略可能)|
|3|配列(省略可能)|

```:js
const sampleArray = [1, 2, 3, 4, 5];

sampleArray.forEach((value, index, array) => {
  console.log(value);
});
```