Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

JavaScript JavaScriptオブジェクトをプロパティ名でソートする

オブジェクトのkeyを元に、プロパティをソートするコード。

▼sort前のオブジェクト

var o = {
	"hidden": false,
	"draggable": false,
	"contentEditable": "inherit",
	"isContentEditable": false,
	"spellcheck": false,
	"offsetTop": 0,
	"offsetLeft": 0,
	"offsetWidth": 941,
	"offsetHeight": 382,
	"tabIndex": -1,
	"namespaceURI": "http://www.w3.org/1999/xhtml",
	"localName": "body",
	"tagName": "BODY",
	"nodeType": 1,
	"nodeName": "BODY",
	"baseURI": "http://127.0.0.1/test/dom/",
	"isConnected": true,
	"attributes": {}
}

▼reduceを使った例

function sortObject(unsorted){
	const sorted = Object.keys(unsorted).sort().reduce(
		(obj, key) => {
			obj[key] = unsorted[key];
			return obj;
		},
		{}
	);
	return sorted
}
console.log(JSON.stringify(sortObject(o), {}, "\t"))

参考リンク:sorting - Sort JavaScript object by key - Stack Overflow

▼reduceを使わない例

function sortObject2(unsorted) {
	var sorted = {},
		key, a = [];

	for (key in unsorted) {
		if (unsorted.hasOwnProperty(key)) {
			a.push(key);
		}
	}

	a.sort();

	for (key = 0; key < a.length; key++) {
		sorted[a[key]] = unsorted[a[key]];
	}
	return sorted;
}
console.log(JSON.stringify(sortObject2(o), {}, "\t"))

参考リンク:Sorting a JavaScript object by property name - Stack Overflow

結果

(画像)sort後のオブジェクト 

参考リンク