JavaScriptのハッシュとは？使い方や効率的なキー取得方法を解説
- SE
- javascriptの連想配列ってどんな配列なのですか？
- PM
- javascriptでの連想配列は「キー」と「値」のペアによるデータ構造のことを言います。
この記事でわかること
JavaScriptのハッシュ（連想配列）とは？
JavaScriptの配列は、例えば次のように宣言して参照します。
|
1 2 3 4 5 6 |
array0 = [‘a’,’b’,’c’,’d’,’e’]; console.log(array0[0]); → a array1 = [0,1,2,3,4]; console.log(array1[0]); → 0 |
JavaScriptの配列の各要素はデータ型が何であっても構いません。配列の中に配列があるという場合でも、可能になります。例えば、次のようなコードが存在します。
|
1 2 3 4 5 6 |
array = [ [0,”a”], [1,”b”], [2,”c”] ]; |
JavaScriptでの配列の参照は、必ずインデックスで行います。書き方としては、以下のようになります。
|
1 2 3 |
array[0] |
つまり、JavaScriptのハッシュ(連想配列)とは、インデックスと言う数字ではなく、文字列で参照できるようになっているデータ型のことになります。
JavaScriptでハッシュを使うメリット
JavaScriptでハッシュ(連想配列)を宣言するには以下のようにします。配列との違いは、{}で囲むという点です。
|
1 2 3 |
array = { name:”JS太郎”, address:”東京都”, age:48 }; |
あるいは、以下のように書いても連想配列は宣言できます。どちらで書いても同じ意味になるので、双方で試してみてください。
|
1 2 3 4 5 6 |
array = {}; array[“name”] = “JS太郎”; array[“address”] = “東京都”; array[“age”] = 48; |
JavaScriptでのハッシュの使い方6つ
上記で宣言した連想配列arrayにJavaScriptでアクセスするには、以下のように書きます。
|
1 2 3 4 5 |
console.log(array[“name”]); → JS太郎 console.log(array[“address”]); → 東京都 console.log(array[“age”]); → 48 |
文字列でアクセスしていることが確認できます。これが、ハッシュ(連想配列)です。インデックスでアクセスする配列との違いは、ここにあります。
1：JavaScriptでのハッシュの宣言方法
JavaScriptでハッシュ(連想配列)を宣言するには以下のようにします。配列との違いは、{}で囲むという点です。
|
1 |
array = { name:”JS太郎”, address:”東京都”, age:48 }; |
あるいは、以下のように書いてもハッシュ(連想配列)は宣言できます。どちらで書いても同じ意味になるので、双方で試してみてください。
|
1 2 3 4 |
array = {}; array[“name”] = “JS太郎”; array[“address”] = “東京都”; array[“age”] = 48; |
2：JavaScriptでハッシュにアクセスする方法
上記で宣言したハッシュ(連想配列)arrayにJavaScriptでアクセスするには、以下のように書きます。
|
1 2 3 4 5 |
console.log(array[“name”]); → JS太郎 console.log(array[“address”]); → 東京都 console.log(array[“age”]); → 48 |
文字列でアクセスしていることが確認できます。これが、ハッシュ(連想配列)です。インデックスでアクセスする配列との違いは、ここにあります。
3：ハッシュとメソッドはどちらを使ってもよい
実際にJavaScriptでは、下記のように書いた場合でもハッシュ(連想配列)にアクセスできます。
|
1 2 3 4 5 |
console.log(array.name); → JS太郎 console.log(array.address) → 東京都 console.log(array.age) → 48 |
この書き方を見て、ピンと来る方もいるでしょう。JavaScriptでは、ハッシュ(連想配列)とメソッドは同じものなのです。そのため、どちらで書いても大丈夫です。
ハッシュ(連想配列)にアクセスする文字列のことを「キー」と言いますが、キーが外部から与えられ、どのようなキーでアクセスするのかが分からないときは、ハッシュ(連想配列)に文字列でアクセスします。
自分で明示的にキーを使用するときは、メソッドでアクセスするのがよいでしょう。
一般的に、使用するキーによりメソッド、もしくは文字列でアクセスをするというような分け方がされています。
4：連想配列の要素の削除
ハッシュ(連想配列)の要素を削除するには、deleteを使います。下記のようにして、キーを指定し、削除します。
|
1 2 3 4 |
array = { name:”JS太郎”, address:”東京都”, age:48 }; delete(“address”); |
5：ハッシュを追加する方法と注意点
ハッシュ(連想配列)を追加する方法は以下の5つの方法があります。それぞれを順に追って解説していきます。
・ドット表記
・ブラケットを記述
・pushは使えない
・ハッシュを並び替える方法(ハッシュが１つだけでsortがある場合と、ハッシュが複数ある場合)
ドット表記の場合
JavaScript のオブジェクトは、自身に関連付けられたプロパティを持ちます。オブジェクトのプロパティは、オブジェクトに関連付けられている変数と捉えることができます。
オブジェクトのプロパティは、オブジェクトに属するものという点を除けば、基本的に通常の JavaScript 変数と同じようなものです。オブジェクトのプロパティは、オブジェクトの特性を定義します。オブジェクトのプロパティには、単純なドット表記でアクセスします。
|
1 2 3 |
objectName.propertyName |
ブラケットを記述する場合
JavaScript オブジェクトのプロパティは、ブラケット (角括弧) 記述法でもアクセスすることができます (詳しくはプロパティのアクセサーを参照してください)。個々のプロパティが文字列値と関連付けられてアクセスできるため、オブジェクトは連想配列と呼ばれることがあります。ですから例えば、myCar オブジェクトのプロパティに次のようにアクセスできます。
|
1 2 3 4 5 |
myCar['make'] = 'Ford'; myCar['model'] = 'Mustang'; myCar['year'] = 1969; |
pushは使えない
配列には、pushメソッドは使用できません。その理由は、push()メソッドが、あくまで配列を組み込むメソッドであるためです。しかし、push()を使って、配列の中に配列を作ることはできます。
|
1 2 3 4 5 |
var obj = { name:'太郎', age:30 }; obj.push( ['花子', 28] ); console.log( obj ); |
実行結果は以下の通りです。
|
1 2 3 |
Uncaught TypeError: obj.push is not a function |
6：ハッシュを並び替える方法
続いてハッシュを並び替える方法についてご紹介いたします。大きく分けて、2点に分かれてます。
・ハッシュが1つだけでsortがある場合
・ハッシュが複数ある場合
以上2点をご紹介します。
ハッシュが1つだけでsortがある場合
sort() メソッドは、配列の要素を in place でソートします。既定のソート順は昇順で、要素を文字列に変換してから、UTF-16 コード単位の値の並びとして比較します。
|
1 2 3 4 5 6 7 8 9 10 11 |
const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // expected output: Array [1, 100000, 21, 30, 4] |
ハッシュが複数ある場合
続いて、複数のあるハッシュを並び替えるコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
var sort_by; (function() { // utility functions var default_cmp = function(a, b) { if (a == b) return 0; return a < b ? -1 : 1; }, getCmpFunc = function(primer, reverse) { var dfc = default_cmp, // closer in scope cmp = default_cmp; if (primer) { cmp = function(a, b) { return dfc(primer(a), primer(b)); }; } if (reverse) { return function(a, b) { return -1 * cmp(a, b); }; } return cmp; }; // actual implementation sort_by = function() { var fields = [], n_fields = arguments.length, field, name, reverse, cmp; // preprocess sorting options for (var i = 0; i < n_fields; i++) { field = arguments[i]; if (typeof field === 'string') { name = field; cmp = default_cmp; } else { name = field.name; cmp = getCmpFunc(field.primer, field.reverse); } fields.push({ name: name, cmp: cmp }); } // final comparison function return function(A, B) { var a, b, name, result; for (var i = 0; i < n_fields; i++) { result = 0; field = fields[i]; name = field.name; result = field.cmp(A[name], B[name]); if (result !== 0) break; } return result; } } }()); |
ハッシュから効率的にキーを取得する方法
ハッシュから効率的にキーを取得する方法には、以下の2つがあります。
・for…in文
・foreach文
いずれも繰り返し文の一種である、for文とforeach文が、この2つの内容が該当しており、ご紹介させていただきます。
for … in文の使い方
ハッシュ(連想配列)から効率的にキーを取得するための手段として、for … in文があります。次のようにして使います。
|
1 2 3 4 5 6 7 |
array = { name:”JS太郎”, address:”東京都”, age:48 }; for (key in array) { console.log(key); console.log(array[key]); } |
上記の結果は以下のようになります。
|
1 2 3 4 5 6 7 8 |
name JS太郎 address 東京都 age 48 |
for … inで取得できるのは、あくまでも「キー」だけということには注意が必要です。値を取得するためには、取得したキーでアクセスします。
そして、for … inは順番を保証しない、ということも注意してください。定義した順番にキーが返ってくるとは限りません。
forEach文の使い方
forEach文を使うと、連想配列に対しての処理がよりスマートに書くことができます。例えば、以下のサンプルコードを実行すると、下記のような結果になります。
|
1 2 3 4 5 6 7 8 9 10 |
array = { name:”JS太郎”, address:”東京都”, age:48 }; Object.keys(array).forEach(function(item) { console.log(item + “:” + this[item]); }, array); name:JS太郎 address:東京都 age:48 |
orEachは、「配列の各要素に対してこの関数の処理を実行せよ」という命令です。連想配列なので、そのままでは使うことができません。Object.keys(連想配列)と書いて「キーの配列」を取り出します。その取り出したキーの配列に対して処理を行うわけです。
取り出したキーの配列に対して以下のように書くと、「変数」にキーが入り、thisに連想配列が入って関数内で使えるようになります。
.forEach(function(変数) {
関数の処理
}, 連想配列);
- SE
- コードには、多くの種類があるのですね。
- PM
- これらのコードを使いこなすことで、効率のいい開発をすることができます。
JavaScriptでハッシュを使い可読性の高いコードを書こう
JavaScriptで開発するときは、連想配列を使って可読性の高いコードを書きましょう。いつでも連想配列を使えばいい、というものではありません。シンプルな配列の方がいい場合も、多々あります。
シンプルな配列を使うべきところは、for(;;)が使えるところです。
例えば、
|
1 |
array = [“a”, “b”, “c”];に対して、for(i=0; i<array.length; i++) |
と書いて繰り返し処理を行うのは、実にシンプルで強力な手法です。
もちろんですが、連想配列は添え字が数ではないため、lengthメソッドは使えません。lengthメソッドを使い、繰り返し処理を書くべき場面は多々あります。
しかし、先ほども書いたことですが、要素の意味が分からなくなる場合は、連想配列を使いましょう。
キーを取り出すには、「for … in」や「forEach」があります。覚えてしまえばこれほど便利なものもありません。連想配列を使いこなし、可読性の高いコードを書き、効率良くJavaScriptで開発をしましょう。
