arrayについて

よく使うarrayですが、改めて勉強します。
##array(配列)
arrayとはデータ（プリミティブまたはオブジェクトのどちらか）が順序付けされて集まったものです。

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

![スクリーンショット 2019-12-08 5.56.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/5617b268-a647-06a1-d472-b95b389a0187.png)

##要素を取り出す
**配列の先頭の値**
![スクリーンショット 2019-12-08 6.02.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/02942d36-46ff-3e32-33fc-b594bd6a5a2a.png)

**配列の末尾の値**

``` js
const lastNum = testArray.length - 1; 
console.log(testArray[lastNum]); //配列の最後の値
```
![スクリーンショット 2019-12-08 6.24.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/864f661c-71be-657b-28cc-37c0f4047db3.png)


##値を追加する(push,unshift)

- **末尾に値を追加する**

``` js
testArray.push(6);
```
![スクリーンショット 2019-12-08 6.04.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/7fcfbac9-368b-c48a-f89f-6a4c48d26b34.png)

- **先頭に追加する**

``` js
testArray.unshift(0);
```
![スクリーンショット 2019-12-08 6.13.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/29bb3c91-124b-0419-5c24-861632ed6d20.png)


##値を消す(shift,splice,pop)
- **先頭の値を消す**

``` js
console.shift(testArray);
```
![スクリーンショット 2019-12-08 6.29.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/6bc01e22-46dd-7ef2-c2d9-99971426f2eb.png)


- **特定の値を消したい場合**

```js
array.splice(2, 1); //配列の2番目の値を1つ削除する
```
![スクリーンショット 2019-12-08 6.31.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/3beb757e-7eae-3c71-0a7c-e4357a76f753.png)

- **末尾の値を消す**

``` js
testArray.pop();
```
![スクリーンショット 2019-12-08 6.34.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/4cdfad4a-dec2-ae9c-9568-935280bdb8d4.png)

## map(要素ひとつひとつを取り出す)
arrayのオブジェクトはmap関数を持っています。

```js
const testArray = [1, 2, 3, 4, 5];
testArray.map((elem ,index) => elem);
// [1, 2, 3, 4, 5] 
```
↑要素ひとつひとつを取り出して、最後はarrayを返してくれます。

**確認**
![スクリーンショット 2019-12-08 6.48.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/8e2498cf-c243-f680-00cd-cb7f3f539638.png)


**arrayで返す時に文字列を追加することもできる**

```js
[1,2,3].map((elem, index) => {
    const key = `property${elem}`; //一度keyという名前で文字列を追加しから
    return {[key]: elem} //arrayに返す！
});
```

**確認**
<img width="416" alt="スクリーンショット 2019-12-10 9.58.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/aaa72c8b-5a41-d888-8098-3fc56d54b1c8.png">

注意
一度変数に入れずにarrayに追加しようとするとerrorになりました。
<img width="381" alt="スクリーンショット 2019-12-10 10.00.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/13c0bff7-479f-14fa-5b0b-6d238ff6649f.png">

## some(true / falseを返す)
some()は、配列のいずれかの要素が指定した条件を満たしているか否かをtrue / false で返すメソッドです。
1つでも条件を満たしている要素があれば、trueを返します。
任意の値が含まれていたら即座に処理が終わります。

``` js
[1,2,3,4,3].some(elem => elem === 3)  // ３がきたらtrueを返し、即処理終了

// もっと基礎的に書くと...
const test = [1,2,3,4,5];
const exists =test.includes(3); //3がtestの配列の中にあればtrue!
console.log(exists); // => true
```
↑これで実行すると**true**が返ってくる


**やってみた**
<img width="616" alt="スクリーンショット 2020-01-05 3.49.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/39dce01e-ef8f-fea9-d2e2-2ce454c35d8a.png">

どの値にも一致しなかった場合は、最後まで比較したあと、falseを返します。

これのメリットは、左から数えて1番最初の3が来た時にすぐに処理が終わることです。

パフォーマンスを意識したいときなどによく使います。

## includes(true / falseを返す)
includesは特定の要素が配列に含まれているかどうかをtrue / false で返します。

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

test.includes(5); // ture
test.includes(10); //false
```
**やってみた**
<img width="411" alt="スクリーンショット 2020-03-15 3.12.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/6f6e64f2-0931-dd76-e8ad-7d34c1c98541.png">

## slice(指定した部分の配列の一部をコピーして、新しい配列を返す )
slice() メソッドは begin から end まで選択された配列の一部をシャローコピーして、新しい配列オブジェクトを返します (end は含まれません)。元の配列は変更されません。

``` js
const test = ['a', 'b', 'c', 'd', 'e'];

const sliceArr = test.slice(0, 1); // ['a']
const sliceArr_2 = test.slice(0, 2); // ['a', 'b']
const sliceArr_3 = test.slice(2, 3); // ['c']
```
**やってみた**
<img width="504" alt="スクリーンショット 2020-03-15 3.41.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/b50cf2f7-451d-fe5c-3aad-25d90f2d4b40.png">


## fillter(条件に一致した値のみを抽出する)
配列からある特定の条件下で条件に一致した値のみを抽出して、配列を返します。
一致しなかったものは配列には含まれません。

```js

const test = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const filterArr =test.filter(elem => elem > 1);
console.log(filterArr ); //[2, 3, 4, 5, 6, 7, 8, 9, 10]

// もっと基礎的に書くと...
const fillterArr_2 = test.filter(function( value ) {
    return value < 5; //5よりも小さい数値だけを抽出
});
console.log(fillterArr_2 ); //[1, 2, 3, 4,]

```
**やってみた**
<img width="598" alt="スクリーンショット 2020-03-15 4.09.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/52ad2eb2-6794-40e2-216a-a154b7387e1e.png">


連想配列の配列の要素を条件にする場合

```js
const arr2 = [
    { id: 1, name: 'test', height: 160},
    { id: 2, name: 'testさん', height: 170},
    { id: 3, name: 'test君', height: 180},
    { id: 4, name: 'testちゃん', height: 190}
];

// heightが１８０以上を抽出したい場合
const filterArr2 = arr2.filter(elem => elem.height >= 180); // id: 3、４が取れるはず
```
**やってみた**
<img width="673" alt="スクリーンショット 2020-03-15 4.15.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394411/7bad73ae-e472-e472-8b99-f1552ddfcedb.png">