配列及び連想配列にはそれぞれキーを持っていて、対応する値を管理しています。
そのキーの一覧を取得するためには標準オブジェクトである Object の Object.keys() メソッドを使用します。
Object.keys() メソッドは、指定されたオブジェクトが持つプロパティの 名前の配列を、通常のループで取得するのと同じ順序で返します。 それでは、以下にの例を示します。
■配列のキー一覧取得（Object.keys）
var arrTest;
var arrKeys;
// 単純な配列
arrTest = ['a', 'b', 'c'];
arrKeys = Object.keys(arrTest);
console.log(arrKeys);
// オブジェクトのような配列
arrTest = { 0: 'abcdefg', 1: 123, 2: true };
arrKeys = Object.keys(arrTest);
console.log(arrKeys);
// key定義がランダムな配列
arrTest = { 100: 'abcdefg', 5: 123, 10: true };
arrKeys = Object.keys(arrTest);
console.log(arrKeys);
// key定義がランダムな配列２
arrTest = { aaa: 'abcdefg', 100: 123, 20: 45, cc:'10', bb: true };
arrKeys = Object.keys(arrTest);
console.log(arrKeys);
結果をコンソールに表示していますので、ブラウザの開発環境を開いてコンソール出力を表示させます。 ブラウザにより少し違いがありますが、以下の様な結果が表示されるはずです。
Array(3) [ "0", "1", "2" ] Array(3) [ "0", "1", "2" ] Array(3) [ "5", "10", "100" ] Array(5) [ "20", "100", "aaa", "cc", "bb" ]
ここで注意するのは key が昇順でソートされて返されるところです。 数値と文字列が混在した場合には、数値はソートされ、文字列は発生した順番の様です。
キーの一覧取得には Object.keys() メソッドを使用するのですが、 キーの示す値の取得にはそれに対応する Object.values() メソッドを使用することになります。
上のソースを少し変更したものを以下に示します。
■配列の値一覧取得（Object.values）
var arrTest;
var arrVals;
// 単純な配列
arrTest = ['a', 'b', 'c'];
arrVals = Object.values(arrTest);
console.log(arrVals);
// オブジェクトのような配列
arrTest = { 0: 'abcdefg', 1: 123, 2: true };
arrVals = Object.values(arrTest);
console.log(arrVals);
// key定義がランダムな配列
arrTest = { 100: 'abcdefg', 5: 123, 10: true };
arrVals = Object.values(arrTest);
console.log(arrVals);
// key定義がランダムな配列２
arrTest = { aaa: 'abcdefg', 100: 123, 20: 45, cc:'10', bb: true };
arrVals = Object.values(arrTest);
console.log(arrVals);
結果は以下の通りです。 先ほどのキーの出力順番通りキーに対応する値が出力されています。
Array(3) [ "a", "b", "c" ] Array(3) [ "abcdefg", 123, true ] Array(3) [ 123, true, "abcdefg" ] Array(5) [ 45, 123, "abcdefg", "10", true ]
この Object.values() メソッドですが、 FireFox 、Chrome 、Edge などは対応していますが IE(Internet Explorer) は対応していません。 これを実行すると「オブジェクトは 'values' プロパティまたはメソッドをサポートしていません。」のエラーが表示されるはずです。
IE を対象外とはまだできないと思いますので、Object.values() メソッドを作ってみたいと思います。
■ IE(Internet Explorer) で Object.values() メソッドをエミュレート
function EmulateObjectValues() {
if(!Object.values) {
// 「Object.values」の定義が存在しない場合、関数生成
Object.values = function(obj) {
// 戻り値の配列
var arr = new Array();
// [obj]の中のキー値の一覧
for(var key in obj) {
// [obj]の中の値を配列に設定
arr.push(obj[key]);
}
// 配列を戻す
return (arr);
}
}
}
この関数は Object.values() メソッドが存在しない場合にメソッドの関数を生成する様にしています。 この関数を Object.values() メソッドを使用する前にコールする様にします。 上のソースにこの関数をコールする様にした例を示します。
■Object.values() メソッドのエミュレート関数をコールする
var arrTest;
var arrVals;
// エミュレート関数生成をコール
EmulateObjectValues();
// 単純な配列
arrTest = ['a', 'b', 'c'];
arrVals = Object.values(arrTest);
console.log(arrVals);
// オブジェクトのような配列
arrTest = { 0: 'abcdefg', 1: 123, 2: true };
arrVals = Object.values(arrTest);
console.log(arrVals);
// key定義がランダムな配列
arrTest = { 100: 'abcdefg', 5: 123, 10: true };
arrVals = Object.values(arrTest);
console.log(arrVals);
// key定義がランダムな配列２
arrTest = { aaa: 'abcdefg', 100: 123, 20: 45, cc:'10', bb: true };
arrVals = Object.values(arrTest);
console.log(arrVals);
これを実行すると上の方の実行結果と同じになるはずです。
Object.values() に関連したメソッドとして Object.entries() が有りますが、 このメソッドも IE(Internet Explorer) は対応していませんので、これのエミュレート関数を作成してみます。
■Object.entries() メソッドのエミュレート関数
function EmulateObjectEntries() {
if(!Object.entries) {
// 「Object.entries」の定義が存在しない場合、関数生成
Object.entries = function(obj) {
// 戻り値の配列
var arr = new Array();
// [obj]の中のキー値の一覧
for(var key in obj) {
// 子のオブジェクトに設定
var objSub = {};
objSub[key] = obj[key];
arr.push(objSub);
}
// 配列を戻す
return (arr);
}
}
}
これを実行するソースは以下の様になります。
var arrTest;
var arrEnts;
// エミュレート関数生成をコール
EmulateObjectEntries();
// key定義がランダムな配列２
arrTest = { aaa: 'abcdefg', 100: 123, 20: 45, cc:'10', bb: true };
arrEnts = Object.entries(arrTest);
console.log(arrEnts);
以下に IE 及び FireFox での実行結果（コンソール画面）の表示を示します。
コメント