CODEPREP「JavaScript基礎 配列操作編」に登場するプロパティ、メソッド

備忘録として、CODEPREP[「JavaScript基礎 配列操作編」](https://codeprep.jp/books/54)に登場するプロパティ、メソッドをまとめてみました。

# プロパティ

## lengthプロパティ
配列の長さを取得する

```javascript:コード
var array = ["Taro", "Hanako", "Ichiro"];
console.log(array.length);
```
```console:コンソール
3
```

# メソッド

## pushメソッド
配列の末尾に値を追加する

```javascript:コード
var array = [1, 2, 3];
array.push(4);
console.log(array);
```
```console:コンソール
[1, 2, 3, 4]
```

## popメソッド
末尾の要素を取得し、同時に削除する

```javascript:コード
var array = [1, 2, 3, 4, 5];
var a = array.pop();
console.log(array);
console.log(a);
```
```console:コンソール
[1, 2, 3, 4]
[5]
```

## shiftメソッド
先頭の要素を取得し、同時に削除する

```javascript:コード
var array = [1, 2, 3, 4, 5];
var a = array.shift();
console.log(array);
console.log(a);
```
```console:コンソール
[2, 3, 4, 5]
[1]
```

## unshiftメソッド
配列の先頭に値を追加する(shiftの取り消し)

```javascript:コード
var array = [1, 2, 3];
array.unshift(0);
console.log(array);
```
```console:コンソール
[0, 1, 2, 3]
```

## concatメソッド
配列を連結する

```javascript:コード
var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat(array2);
console.log(array3);
```
```console:コンソール
[1, 2, 3, 4, 5, 6]
```

## spliceメソッド
配列の途中から複数の値を削除し、別の複数の値を挿入する

```javascript:コード
var array = [1, 2, 3, 4, 5, 6];
var a = array.splice(3, 2, 14, 15, 16);
// 第一引数　index: 配列の変更を開始する位置。先頭のインデックスは0。負数の場合は末尾から数えた位置が指定される。
// 第二引数　howMany: 配列から取り除く要素の数。0の場合は要素の削除は行われない。
// 第三引数以降は追加する要素
// 要素を削除した場所に、新たな要素を追加する
console.log(array);
console.log(a);
```
```console:コンソール
[1, 2, 3, 14, 15, 16, 6]
[4, 5]
```

配列の途中に値を挿入する

```javascript:コード
var array = [1, 2, 4];
array.splice(2, 0, 3);
console.log(array);
```
```console:コンソール
[1, 2, 3, 4]
```

配列の途中の要素を削除する

```javascript:コード
var array = [1, 2, 3, 4, 5];
var a = array.splice(1, 2);
console.log(array);
console.log(a);
```
```console:コンソール
[1, 4, 5]
[2, 3]
```

## indexOfメソッド
先頭から検索して要素の位置を取得する

```javascript:コード
var array = [1, 2, 3, 5, 3, 2, 7];
var index = array.indexOf(3);
console.log(array);
console.log(index);
```
```console:コンソール
[1, 2, 3, 5, 3, 2, 7]
2
```

## lastIndexOfメソッド
末尾から検索して要素の位置を取得する

```javascript:コード
var array = [1, 2, 3, 5, 3, 2, 7];
var index = array.lastIndexOf(3);
console.log(array);
console.log(index);
```
```console:コンソール
[1, 2, 3, 5, 3, 2, 7]
4
```

## joinメソッド
要素を連結して文字列化する

```javascript:コード
var array = [1, 2, 3, 5, 3, 2, 7];
console.log(array.join(","));
console.log(array);
```
```console:コンソール
1, 2, 3, 5, 3, 2, 7
[1, 2, 3, 5, 3, 2, 7]
```

## sliceメソッド
配列の一部を切り出す

```javascript:コード
var array = [1, 2, 3, 5, 3, 2, 7];
console.log(array.slice(1, 3));
// 第一引数　begin: どこから取得を開始するかを示す0から始まるインデックス。終了位置は含まれない。負数の場合は末尾が指定される。
// 第二引数　end: どこまでを取得するかを示す0から始まるインデックス。負数の場合は末尾から数えた位置になる。省略時は配列の最後までを取得する。
// spliceは元の配列を変更するが、sliceは変更を加えない
console.log(array);
```
```console:コンソール
[2, 3]
[1, 2, 3, 5, 3, 2, 7]
```

## sortメソッド
配列をソートする

```javascript:コード
var array = [1, 2, 3, 5, 3, 2, 7];
array.sort();
console.log(array);
```
```console:コンソール
[1, 2, 2, 3, 3, 5, 7]
```

条件を指定して配列をソートする

```javascript:コード
var array = ["one", "two", "three", "four", "five", "six", "seven", "eight"];
// 文字数の多い順にソート
array.sort((a, b) => {
  return a.length > b.length ? -1 : 1;
});
console.log(array);
```
```console:コンソール
["eight", "seven", "three", "five", "four", "six",  "two", "one"]
```

## forEachメソッド
個別に要素を処理する

```javascript:コード
var array = ["Taro", "Hanako", "Ichiro", "Keiko", "Jiro"];
array.forEach((v, idx) => {
  // 第一引数　配列のデータ
  // 第二引数　配列のインデックス番号
  // 第三引数　現在処理している配列
  console.log(idx + ": " + v);
});
```
```console:コンソール
0: Taro
1: Hanako
2: Ichiro
3: Keiko
4: Jiro
```

## filterメソッド
要素を条件で絞る

```javascript:コード
var array = [1, 2, 3, 4, 5, 6, 7];
var array2 = array.filter(v => { // コールバック関数
  return v % 2 === 0;
});
console.log(array2);
console.log(array);
```
```console:コンソール
[2, 4, 6]
[1, 2, 3, 4, 5, 6, 7]
```

## mapメソッド
要素を変換する

```javascript:コード
var array = [1, 2, 3, 4, 5, 6, 7];
var array2 = array.map(v => { // コールバック関数
  return v + 5;
});
console.log(array2);
console.log(array);
```
```console:コンソール
[6, 7, 8, 9 , 10, 11, 12]
[1, 2, 3, 4, 5, 6, 7]
```

## findメソッド
条件に合う最初の要素を検索し、その要素を返す

```javascript:コード
var array = [1, 2, 3, 4, 5, 6, 7];
var a = array.find(v => { // コールバック関数
  return v % 2 === 0;
});
console.log(a);
console.log(array);
```
```console:コンソール
2
[1, 2, 3, 4, 5, 6, 7]
```

## findIndexメソッド
条件に合う最初の要素を検索し、そのインデックスを返す

```javascript:コード
var array = [1, 2, 3, 4, 5, 6, 7];
var a = array.findIndex(v => { // コールバック関数
  return v % 2 === 0;
});
console.log(a);
console.log(array);
```
```console:コンソール
1
[1, 2, 3, 4, 5, 6, 7]
```

## everyメソッド
すべての要素が条件を満たすかを検証する

```javascript:コード
var array1 = [1, 2, 3, 4, 5, 6, 7, 8];
var array2 = [2, 4, 6, 8];
var a1 = array1.every(v => { // コールバック関数
  return v % 2 === 0;
});
var a2 = array2.every(v => { // コールバック関数
  return v % 2 === 0;
});
console.log(a1);
console.log(a2);
console.log(array1);
console.log(array2);
```
```console:コンソール
false
true
[1, 2, 3, 4, 5, 6, 7, 8]
[2, 4, 6, 8]
```

## someメソッド
いずれかの要素が条件を満たすかを検証する

```javascript:コード
function isEven(v) {
  return v % 2 === 0;
}

var array1 = [1, 2, 3, 4, 5, 6, 7, 8];
var array2 = [1, 3, 5, 7];

var a1 = array1.some(isEven);
var a2 = array2.some(isEven);

console.log(a1);
console.log(a2);
console.log(array1);
console.log(array2);
```
```console:コンソール
true
false
[1, 2, 3, 4, 5, 6, 7, 8]
[1, 3, 5, 7]
```

## reduceメソッド
要素に関数を適用しながらまとめる(1)

```javascript:コード
var array = [1, 2, 3, 4, 5];
var a = array.reduce((a, b) => {
  return a + b;
});
console.log(a);
console.log(array);
```
```console:コンソール
15
[1, 2, 3, 4, 5]
```

要素に関数を適用しながらまとめる(2)

```javascript:コード
var array = ["Taro", "Hanako", "Ichiro", "Keiko", "Jiro"];
var a = array.reduce((a, b) => {
  return a + b.length;
}, 0); // 初期値０
console.log(a);
console.log(array);
```
```console:コンソール
25
["Taro", "Hanako", "Ichiro", "Keiko", "Jiro"]
```