ES5入門 - Array編
本エントリーは「to-R JavaScript Advent Calendar 2015」9日目のエントリー、最近話題のES6ではなくES5の配列周りについて解説します。
なぜいまさらES5かというと「Web制作における対応ブラウザの選定方法」で解説したとおり年内でIE8が役目を終え、多くの案件でIE9以上対応に移行していきます。
ES5で追加された配列周りの機能は以下の10個でこれらはIE9以上のブラウザで利用可能です。
- Array.isArray
- Array.prototype.indexOf
- Array.prototype.lastIndexOf
- Array.prototype.every
- Array.prototype.some
- Array.prototype.forEach
- Array.prototype.map
- Array.prototype.filter
- Array.prototype.reduce
- Array.prototype.reduceRight
いっきに活躍の場をますES5を覚えるには今が絶好のタイミングというわけです。
Array.isArray
Array.isArrayは引数に与えられたオブジェクトが配列かどうかを調べて配列の場合はtrueを返します。
var myArray1 = "yyy";
var myArray2 = ["xxx", "yyy", "zzz"];
console.log(Array.isArray(myArray1)); // false
console.log(Array.isArray(myArray2)); // true
Array.prototype.indexOf
Array.prototype.indexOfは引数に与えられたオブジェクトと一致する最初の配列のインデックス番号を調べて返します。
var myArray = ["xxx", "yyy", "zzz","xxx", "yyy", "zzz"];
console.log(myArray.indexOf("yyy")); // 1
Array.prototype.lastIndexOf
Array.prototype.lastIndexOfは引数に与えられたオブジェクトと一致する最後の配列のインデックス番号を調べて返します。
var myArray = ["xxx", "yyy", "zzz","xxx", "yyy", "zzz"];
console.log(myArray.lastIndexOf("zzz")); // 5
Array.prototype.every
Array.prototype.everyは引数にコールバック関数を指定でき、配列の全項目が条件にあっているか調べる為のメソッドです。
以下のサンプルでは配列の値が10未満であるかどうかを調べており、最初のサンプルのresultにはfalse、後のサンプルのresultにはtrueが格納されます。
var myArray = [1,2,3,4,5,6,7,8,9,10];
var result = myArray.every(function(data){
return data<10;
});
console.log(result); // false
var myArray = [1,2,3,4,5,6,7,8,9];
var result = myArray.every(function(data){
return data<10;
});
console.log(result); // true
Array.prototype.some
Array.prototype.someは引数にコールバック関数を指定でき、配列の項目のどれか一つでも条件にあっているか調べる為のメソッドです。
以下のサンプルでは配列の値が10以上の値が存在するか調べており、最初のサンプルのresultにはtrue、後のサンプルのresultにはfalseが格納されます。
var myArray = [1,2,3,4,5,6,7,8,9,10];
var result = myArray.some(function(data){
return data>=10;
});
console.log(result); // true
var myArray = [1,2,3,4,5,6,7,8,9];
var result = myArray.some(function(data){
return data>=10;
});
console.log(result); // false
Array.prototype.forEach
forEachメソッドは配列をループさせるメソッドです。
これまで配列のループにはfor文などを利用して以下のように記述していたでしょう。
var myArray = ["xxx", "yyy", "zzz"];
for(var i=0;i<myArray.length;i++){
console.log(myArray[i]);
}
Array.prototype.forEachを利用すれば以下のように記述できるようになります。
var myArray = ["xxx", "yyy", "zzz"];
myArray.forEach(function(data){
console.log(data);
});
Array.prototype.map
Array.prototype.mapは配列の各項目に処理を行い新しい配列を作成できます。
以下のサンプルでは小文字の配列から大文字の配列を作成しています。
var myArray = ["xxx", "yyy", "zzz"];
var result = myArray.map(function(data){
return data.toUpperCase();
});
console.log(result); // ["XXX", "YYY", "ZZZ"]
Array.prototype.filter
Array.prototype.filterは配列からから特定の条件のものを取り除いた新しい配列を作成できます。
以下のサンプルでは配列から5未満の値の配列を作成しています・
var myArray = [1,2,3,4,5,6,7,8,9];
var result = myArray.filter(function(data){
return data<5;
});
console.log(result); // [1, 2, 3, 4]
Array.prototype.reduce
Array.prototype.reduceは直前のコールバック関数の結果を含めて計算することができるメソッドです。
var myArray = [1,2,3,4];
var result = myArray.reduce(function(prevResult,data){
return prevResult+data;
});
console.log(result); // 10
上のサンプルの処理の内容を解説するとコールバック関数は3回実行されており、
1回目のコールバック関数ではprevResultには1が、dataには2が格納されており1+2=3をコールバック関数の結果として返しています。
2回目のコールバック関数ではprevResultには3が、dataには3が格納されており3+3=6をコールバック関数の結果として返しています。
3回目のコールバック関数ではprevResultには6が、dataには4が格納されており6+5=10をコールバック関数の結果として返しています。
結果としてresultには最終的なコールバック関数の返し値である10が格納されます。
Array.prototype.reduceRight
Array.prototype.reduceRightは直前のコールバック関数の結果を含めて計算することができるメソッドで、Array.prototype.reduceと異なり配列を後ろから実行していきます。
var myArray = [1,2,3,4];
var result = myArray.reduceRight(function(prevResult,data){
return prevResult+data;
});
console.log(result); // 10
上のサンプルの処理の内容を解説するとコールバック関数は3回実行されており、
1回目のコールバック関数ではprevResultには4が、dataには3が格納されており4+3=7をコールバック関数の結果として返しています。
2回目のコールバック関数ではprevResultには7が、dataには2が格納されており7+2=9をコールバック関数の結果として返しています。
結果としてresultには最終的なコールバック関数の返し値である10が格納されます。
3回目のコールバック関数ではprevResultには9が、dataには1が格納されており9+1=10をコールバック関数の結果として返しています。
次はES5で追加されたJSONの仕様について解説を行います。
スポンサードリンク
«jQueryの$(function(){...});と$(window).on("load",function(){...})の違い | メイン | ES5入門 - JSON編»