JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。


# はじめに

ここではJavaScriptの配列である、Arrayの基本的な使い方をまとめました。主な内容としては、要素の追加、結合、取得、削除となります。

JavaScriptの最新情報などの技術系のみをつぶやくTwitterをはじめました。
Twitter: [@takeharumikami]
(https://twitter.com/takeharumikami)

RSSはこちら
RSS: http://qiita.com/takeharu/feed
Feedly: [フォロー]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)

# 要素の追加

### 先頭に追加 - unshift

配列の先頭に値を追加します。

```javascript
var array = ['b', 'c'];

array.unshift('a');
console.log(array); // ['a', 'b', 'c']
```

### 末尾に追加 - push

配列の末尾に値を追加します。

```javascript
var array = ['a', 'b'];

array.push('c');
console.log(array); // ['a', 'b', 'c']
```

### 指定した位置に一つ以上追加 - splice

配列の指定した位置に一つ以上の値を追加します。

```javascript
var array = ['a', 'b', 'c'];

array.splice(1, 0, 'A'); // 二番目に挿入
console.log(array); // ['a', 'A', 'b', 'c']


var array = ['a', 'b', 'c'];

array.splice(2, 0, 'A', 'B'); // 三番目に複数挿入
console.log(array); // ['a', 'b', 'A', 'B', 'c']
```






# 配列の結合

### 非破壊的な結合 - concat

結合して新しい配列を生成します。もともとの二つの配列には影響を及ぼしません。

```javascript
var array1 = ['a', 'b'];
var array2 = ['c', 'd'];

var array = array1.concat(array2);

console.log(array);  // ['a', 'b', 'c', 'd']
console.log(array1); // ['a', 'b']
console.log(array2); // ['c', 'd']
```

### 破壊的な結合 - push

一つ目の配列に二つ目の配列を結合します。新しい配列は生成せず、一つ目の配列に影響を及ぼします。

```javascript
var array1 = ['a', 'b'];
var array2 = ['c', 'd'];

Array.prototype.push.apply(array1, array2);

console.log(array1); // ['a', 'b', 'c', 'd']
console.log(array2); // ['c', 'd']
```






# 要素の取得

### 先頭を取得

配列の先頭の値を取得します。

```javascript
var array = ['a', 'b', 'c'];

var value = array[0];

console.log(array); // ['a', 'b', 'c']
console.log(value); // 'a'
```


### 末尾を取得

配列の末尾の値を取得します。

```javascript
var array = ['a', 'b', 'c'];

var value = array[array.length - 1];

console.log(array); // ['a', 'b', 'c']
console.log(value); // 'c'
```

### 配列の数を取得 - length

配列の数である、要素数を取得します。

```javascript
var array = ['a', 'b', 'c'];

var l = array.length;

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

### 値から最初のkeyを取得 - indexOf

配列の値からkeyを取得します。複数以上の同じ値が存在する場合、最初の値のkeyを取得します。

```javascript
var array = ['a', 'b', 'c'];

var index = array.indexOf('b');

console.log(index); // 1
```

### 値から最後のkeyを取得 - lastIndexOf

配列の値からkeyを取得します。複数以上の同じ値が存在する場合、最後の値のkeyを取得します。

```javascript
var array = ['a', 'b', 'c', 'b'];

var index = array.lastIndexOf('b');

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

### 指定した位置から、一つ以上の値(配列)を取得 - slice

指定した位置から、一つ以上の値(配列)を取得します。sliceの第一引数の位置から、第二引数の位置までを取得します。これは少しわかりづらいのですが、第一引数以上、第二引数未満の配列を取得します。

```javascript
var array = ['a', 'b', 'c', 'd'];

var s1 = array.slice(1, 2);
var s2 = array.slice(1, 3);

console.log(array); // ['a', 'b', 'c', 'd']
console.log(s1);    // ['b']
console.log(s2);    // ['b', 'c']

```


### ランダムに取得 - Math.random

Mathオブジェクトを用いて、配列の値をランダムに取得します。

```javascript
var array = ['a', 'b', 'c'];

var r = Math.floor(Math.random() * array.length); // 0~2の値

console.log(array[r]); // 'a' OR 'b' OR 'c'
```

### 最大値、最小値を取得 - Math.max Math.min

Mathオブジェクトを用いて、配列の値の最大値、最小値を取得します。

```javascript
var array = [3, 1, 5, 9];

var max = Math.max.apply(null, array);
var min = Math.min.apply(null, array);

console.log(max); // 9
console.log(min); // 1
```





# 要素の削除

### 先頭を削除 - shift

配列の先頭を削除して詰めます。

```javascript
var array = ['a', 'b', 'c'];

array.shift();
console.log(array); // ['b', 'c']
```

配列の先頭にundefinedを代入して、先頭を削除して詰めません。

```javascript
var array = ['a', 'b', 'c'];

array[0] = void 0; // void 0 によりundefinedを代入できます。
console.log(array); // [undefined, 'b', 'c']
```

### 末尾を削除する - pop

配列の末尾を削除します。

```javascript
var array = ['a', 'b', 'c'];

array.pop();
console.log(array); // ['a', 'b']
```

### 指定した位置から一つ以上の値を削除 - splice

配列の指定した位置から一つ以上の値を削除します。

```javascript
var array = ['a', 'b', 'c'];

array.splice(1, 1); // 二番目から一つ削除
console.log(array); // ['a', 'c']


var array = ['a', 'b', 'c'];

array.splice(1, 2); // 二番目から二つ削除
console.log(array); // ['a']
```


### 配列の全要素を削除(全削除) - length, []

配列の長さを意図的に0にして、配列の全要素の削除をします。

```javascript
var array = ['a', 'b', 'c'];

array.length = 0;
console.log(array); // []
```

空配列を再代入して、初期化することにより配列の全要素の削除をします。

```javascript
var array = ['a', 'b', 'c'];

array = [];
console.log(array); // []
```

# アカウント

JavaScriptの最新情報などの技術系のみをつぶやくTwitterをはじめました。
Twitter: [@takeharumikami]
(https://twitter.com/takeharumikami)

RSSはこちら
RSS: http://qiita.com/takeharu/feed
Feedly: [フォロー]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)

# おすすめな記事

この記事のようにそのまま配列を使うことは基本ないです。便利なUnderscore.js, lodashを使いこなす。
[JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選(lodashもあるよ)](http://qiita.com/takeharu/items/7d4ead780710c627172e)

入門者がつまづく、thisの挙動を4種類に分けて簡単に学ぶならこれ。Apply, callの挙動までわかる。
[JavaScriptの「this」は「4種類」？」](http://qiita.com/takeharu/items/9935ce476a17d6258e27)

JavaScriptはオブジェクト指向？プロトタイプベースのオブジェクト指向を学ぶなら。
[JavaScriptのプロトタイプからオブジェクト指向を学ぶ](http://qiita.com/takeharu/items/809114f943208aaf55b3)