Javascript基本集(2)~配列~

#Javascript基本集（配列）

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

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

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

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

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

実行結果

["いぬ", "さる", "きじ"]
 
["いぬ", "さる", "きじ"]

　　
　　
コントラクタとリテラルでの相違点

var array1 = new Array(5);
var array2 = [5];
 
console.log( array1 );
console.log( array2 );

実行結果

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

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

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

##配列の初期化

var array = [];
 
console.log( array );

実行結果

[]

　　
##『配列』操作
例題

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つの引数を取得することができる

例えば、

配列データ.map( function( value, index, array ) {
 
});

・「value」は、配列の値
・「index」は、配列のインデックス番号
・「array」は、現在処理している配列

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

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 );

実行結果

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

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

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 );

実行結果

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

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

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

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

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

実行結果

[400, 600]

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

今回はここまで