Javascript基本集(2)~配列~

#Javascript基本集（配列）

####自分の学習用です

##配列宣言
配列の宣言には2種類の方法がある。

①　配列コンストラクタ「Array」を使う方法
　~　「new」を使ってArray()の引数へ格納したい文字列を設定する　~

②　配列リテラル「[ ]」を使う方法
　~　[]を使ってそのまま文字列を設定する　~

```js
//①配列コンストラクタの例
var array1 = new Array('いぬ', 'さる', 'きじ');
 
//②配列リテラルの例
var array2 = ['いぬ', 'さる', 'きじ'];
 
console.log( array1 );
console.log( array2 );
```

実行結果

```js

["いぬ", "さる", "きじ"]
 
["いぬ", "さる", "きじ"]
```
　　
　　
コントラクタとリテラルでの相違点

```js
var array1 = new Array(5);
var array2 = [5];
 
console.log( array1 );
console.log( array2 );
```
実行結果

```js
1. [empty × 5]　//コントラクタ
2. 
3. [5]　//リテラル
```

配列コンストラクタで「new Array(5)」と記述すると「5つ分の配列要素を用意する」という意味になる。
配列リテラルで「[5]」と記述すると「5という数値を配列に格納する」という意味になる。

**JavaScriptで配列を宣言（作成）する時は、特に理由がない限り「配列リテラル」を使うように**


##配列の初期化

```js

var array = [];
 
console.log( array );
```
実行結果

```js
[]
```
　　
##『配列』操作
例題

```js
var a = ["aa","bb"];
var b = ["EE","FF"];
var c = [1,5,7,3];
```
###よく使う命令

|式|意味|使い方|説明|
|----|-----|---|---|
|indexOf()|配列の要素を検索|a.indexOf(1);|２番目の要素が表示される|
|length|配列の要素の個数|x = a.length;|変数『x』に『2』が入る|
|push(array)|配列を末尾に追加|a.push(b);|変数『a』が『"aa","bb","EE","FF"』になる|
|push(値)|値を末尾に追加|a.push("cc");|変数『a』が『"aa","bb","cc"』になる|
|unshift(array)|配列を先頭に挿入|a.unshift(b);|変数『a』が『"EE","FF","aa","bb"』になる|
|unshift(値)|値を先頭に挿入|a.unshift("cc");|変数『a』が『"cc","aa","bb"』になる|
|pop()|末尾の要素を削除|a.pop()|変数『a』が『"aa"』になる|
|shift()|先頭の要素を削除|a.shift()|変数『a』が『"bb"』になる|
|concat(array)|連結した配列|x = a.concat(b);|変数『x』に『"aa","bb","EE","FF"』が入る|
|sort()|小さい順に並び替える	|c.sort();|変数『c』が『1,3,5,7』になる|
|reverse()|逆向きに並び替える|c.reverse();|変数『c』が『3,7,5,1』になる|
|join("文字列")|配列を文字列で連結|x = a.join("/");|変数『x』に『aa/bb』が入る|
|toString()|配列を文字列にする|x = a.toString();|変数『x』に『aa,bb』が入る|
|map|配列の要素一つ一つにコールバック関数を実行する|c.map(function(value){return value * 2;});|『2,10,14,6』となる|
|filter|対象となるデータに特定の条件を与えて、それに該当するデータだけを抽出|c.filter(function(value){return value > 6;})|『7』が抽出される|

  

    
###mapについては、3つの引数を取得することができる

例えば、

```js
配列データ.map( function( value, index, array ) {
 
});
```
・「value」は、配列の値
・「index」は、配列のインデックス番号
・「array」は、現在処理している配列

***引数の「index」を使って、偶数の「Index番号」の時だけ値を2倍にするパターン***

```js
var items = [1,2,3,4,5,6,7,8,9];
 
var result = items.map( function( value, index, array ) {
 
    //「index番号」が偶数の時だけ2倍にする
    if( index % 2 !== 0 ) {
        return value * 2;
    }
    else {
        return value;
    }
});
 
console.log( result );
```

実行結果

```js
[1, 4, 3, 8, 5, 12, 7, 16, 9]
```

「map」は元の配列データに一切変更を加えない特徴がありますが、3つ目の引数「array」を利用すれば、元のデータを変更することも可能

```js
var items = [1,2,3,4,5,6,7,8,9];
 
items.map( function( value, index, array ) {
 
    //「array」と「index」を利用して、元の配列データを変更する
    array[index] = value * 2;
 
});
 
//元の配列データを出力する
console.log( items );
```

実行結果

```js
[2, 4, 6, 8, 10, 12, 14, 16, 18]
```

***第2引数のオブジェクトについて***
第2引数に任意の「オブジェクト」を指定することが出来る

```js
var array = [ 配列データ ];
 
//第2引数にオブジェクトを指定
array.map( コールバック関数, オブジェクト );
```

例題(オブジェクトから任意のキーワードを指定して「価格」を返す)

```js
var foodList = {
  'オムライス': 450,
  '焼きそば': 500,
  'お好み焼き': 600,
  '焼き飯': 400
};
 
//任意のキーワードを指定する
var order = ['焼き飯', 'お好み焼き'];
 
var result = order.map( function( value, index, array ) {
 
//配列のキーワードを使ってオブジェクト内の値を取得する
    return this[value];
 
}, foodList );
 
console.log( result );
```

実行結果

```js
[400, 600]
```

第2引数へ「foodList」と記述することで、コールバック関数内の「this」が「foodList」を参照できるようになる
  
今回はここまで:santa: