JavaScriptの配列グループ化
1. データのグループ化（類似GROUP BY）
以下のコードは、配列の要素を指定されたプロパティに基づいてグループ化します。
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQueryを用いた配列のグループ化</title>
<script src="./Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
let a = null;
let aa = a !== null ? a : 0;
console.log(aa);
let b = undefined;
let bb = b !== undefined ? b : 0;
console.log(bb);
let c = '';
let cc = c !== '' ? c : 0;
console.log(cc);
const items = [
{"name": "John", "average": 15, "high": 10, "timestamp": 1358226000000},
{"name": "Jane", "average": 16, "high": 92, "timestamp": 1358226000000},
{"name": "Jane", "average": 17, "high": 45, "timestamp": 1358226000000},
{"name": "John", "average": 18, "high": 87, "timestamp": 1358226000000},
{"name": "Jane", "average": 15, "high": 10, "timestamp": 1358226060000},
{"name": "John", "average": 16, "high": 87, "timestamp": 1358226060000},
{"name": "John", "average": 17, "high": 45, "timestamp": 1358226060000},
{"name": "Jane", "average": 18, "high": 92, "timestamp": 1358226060000}
];
const classified = classify(items, function (item) {
return [item.name];
});
console.log(classified);
})
function classify(array, criteria) {
const groups = {};
array.forEach(function (item) {
const key = JSON.stringify(criteria(item));
groups[key] = groups[key] || [];
groups[key].push(item);
});
return Object.keys(groups).map(function (key) {
return groups[key];
});
}
</script>
</body>
</html>
この実装の特徴：
- classify関数は、配列と分類基準の関数を引数として受け取ります
- groupsオブジェクトが空の場合、配列の要素をグループ化します
- criteria関数の戻り値をJSON文字列化し、groupsのキーとして使用します
- 同じキーを持つ要素を同一配列に格納します
- 最終的にグループ化された配列を返します
2. JSONデータのプロパティに基づくグループ化
<html>
<head>
<meta charset="UTF-8">
<title>JSON配列のグループ化</title>
</head>
<body>
<div id="result" style="width:50px;height:200px;"></div>
</body>
<script>
const data = [
{"group":1,"header":"品質管理","left":"","min":"","right":""},
{"group":1,"header":"","left":"","min":"品質巡回検査","right":""},
{"group":2,"header":"設備管理","left":"","min":"","right":""},
{"group":2,"header":"","left":"","min":"専門点検","right":""},
{"group":2,"header":"","left":"","min":"日検","right":""},
{"group":2,"header":"","left":"","min":"週検","right":""},
{"group":2,"header":"","left":"","min":"月検","right":""}
];
const result = [];
const map = {};
data.forEach(function(item) {
const header = item.header;
if (!map[header]) {
result.push({
header: header,
children: [item]
});
map[header] = true;
} else {
result.forEach(function(group) {
if (group.header === header) {
group.children.push(item);
}
});
}
});
console.log(JSON.stringify(result));
document.getElementById("result").innerHTML = JSON.stringify(result);
</script>
</html>
JavaScript配列のソート
/**
* 配列のソート関数
* @param {string} property ソートするプロパティ名
* @param {string} type ソートタイプ（'desc'：降順、'asc'：昇順）
* @returns {Function} 比較関数
*/
function createSortFunction(property, type) {
return function(a, b) {
const aValue = a[property];
const bValue = b[property];
switch (type) {
case "desc":
return bValue - aValue;
case "asc":
return aValue - bValue;
default:
return aValue - bValue;
}
};
}