【JS】JavaScriptの配列 / 連想配列 / Mapクラス

JavaScript

■ 配列(Array)

サンプル

<!doctype html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
</head>
<div id="result1"></div>
<div id="result2"></div>
<body>
<script type="text/javascript" charset="UTF-8">
var array1 = ["value1-1", "value1-2"];
var array2 = new Array('value2-1', 'value2-2', 'value2-3');

var resultValue1 = "";
array1.forEach(function(item, index, array) {
  resultValue1 = resultValue1 + index + " : " + item + "\n";

});
var resultValue2 = "";
array2.forEach(function(item, index, array) {
  resultValue2 = resultValue2 + index + " : " + item + "\n";

});
document.getElementById("result1").innerText = resultValue1;
document.getElementById("result2").innerText = resultValue2;
</script>
</body>
</html>
出力結果 
0 : value1-1
1 : value1-2
0 : value2-1
1 : value2-2
2 : value2-3

参考文献

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
https://www.sejuku.net/blog/31746
* メソッド一覧
http://www.ajaxtower.jp/js/array_class/
* 連想配列 / 配列 との違いを記載している
http://d.hatena.ne.jp/amachang/20070202/1170386546
* new Array() / [] との違いを記載している
http://qiita.com/Hiraku/items/d74690088dfa368875c9

■ 連想配列(Object)

associative array 
 * Key-Value。JavaでいうMap、.NETでいうDictinaryみたいに使える

サンプル

<!doctype html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
</head>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<body>
<script type="text/javascript" charset="UTF-8">
var dictionary1 = new Object();
dictionary1['key1-1'] = 'value1-1';
dictionary1['key1-2'] = 'value1-2';

var resultValue1 = "";
for (var keyValue in dictionary1) {
  resultValue1 = resultValue1 + keyValue + " : " + dictionary1[keyValue] + "\n";
}

var dictionary2 = { 'key2-1': 'value2-1', 'key2-2': 'value2-2', 'key2-3': 'value2-3' };
var resultValue2 = "";
for (var keyValue in dictionary2) {
  resultValue2 = resultValue2 + keyValue + " : " + dictionary2[keyValue] + "\n";
}

document.getElementById("result1").innerText = resultValue1;
document.getElementById("result2").innerText = resultValue2;
document.getElementById("result3").innerText = "dictionary1['key1-1'] = " + dictionary1['key1-1'] + ", dictionary1['keyX-X'] = " + dictionary1['keyX-X'];
</script>
</body>
</html>
出力結果 
key1-1 : value1-1
key1-2 : value1-2
key2-1 : value2-1
key2-2 : value2-2
key2-3 : value2-3
dictionary1['key1-1'] = value1-1 dictionary1['keyX-X'] = undefined

参考文献

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object
http://www.24w.jp/study_contents.php?bid=javascript&iid=javascript&sid=array&cid=005
http://qiita.com/glaytomohiko/items/852ea64bcfc1e4fc1b51
* 「new Object()」「new Array()」の違いが分かりやすい
http://typea.info/tips/wiki.cgi?page=JavaScript+%CF%A2%C1%DB%C7%DB%CE%F3(Map)%A4%CE%A5%AD%A1%BC%A4%F2%BC%E8%A4%EA%BD%D0%A4%B9
* 使用上の注意
http://qiita.com/LightSpeedC/items/6729f49bf7f8a45ee028

■ Mapクラス

 * From ECMAScript 6

連想配列(Object)との違い

連想配列(Object) 
 * キーとして文字列しか使えない
Mapクラス 
 * キーにオブジェクトに使える

サンプル

<!doctype html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
</head>
<div id="result1"></div>
<div id="result2"></div>
<body>
<script type="text/javascript" charset="UTF-8">
var sampleMap = new Map();
sampleMap.set('key1', 'value1');
sampleMap.set('key2', 'value2');
sampleMap.set('key3', 'value3');

document.getElementById("result1").innerText = "sampleMap.get('key2') = " + sampleMap.get('key2');

var resultValue2 = "";
for (var [key, value] of sampleMap.entries()) {
  resultValue2 = resultValue2 + key + " : " + value + "\n";
}

document.getElementById("result2").innerText = resultValue2;
</script>
</body>
</html>
出力結果 
sampleMap.get('key2') = value2
key1 : value1
key2 : value2
key3 : value3

参考文献

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map
http://hakuhin.jp/js/map.html

■データ操作のためのメソッドについて

参考文献

* 「filter」とか使えそう
http://qiita.com/itagakishintaro/items/29e301f3125760b81302

関連記事

配列 / JSON をループする

https://blogs.yahoo.co.jp/dk521123/35714472.html

JavaScriptの列挙型

https://blogs.yahoo.co.jp/dk521123/35655176.html

JavaScriptのクラス

https://blogs.yahoo.co.jp/dk521123/35655181.html