javascript でネストされた連想配列の値を書き換える

Question

javascript でネストされた連想配列の値を書き換える

実装レシピが浮かびません。
試した（実装中の）コードは記述します。
重要：ESscript5標準（IE11対応）

実現したいことのベタ処理（3階層分）

// hasOwnPropertyとか除く・・・
(function (t, a, b, c, v) {
    var arr = [a, b, c];
    var len = arr.length;
    var idx = 0;
    t[arr[0]][arr[1]][arr[2]] = v;
    return t;
})({a: {b: {c: '1'}}},'a','b','c','3');
// -> console: {a: {b: {c: '3'}}}

実際に書いているコード

(function () {
	function UserException (message, type) {
		this.name = "UserException";
		this.message = message || 'Unexpected error information.';
		this.type = type || 'info';
	}
	// 基底セッター＆ゲッター
	Function.prototype.setter = function(member, /*...multilayered, */value) {// -> member, multilayered, valueは実質使用しない....残余引数で対応したい
		var _obj = this;// -> Class化されたオブジェクトに対応
		// argumentsを通常配列化
		var _args = Array.from(arguments); // -> ポリフィルを作成した(IEとか対応)
		// ↓別の書き方...バグが有った際はこちらを使用すれば対応出来ると思われる。
		//var _args = Array.prototype.slice.call(arguments);
		//var _args =[].slice.call(arguments);
		if (_args.length < 2) {
			var msg = 'Unexpected execution: there are not enough arguments to execute ' + typeof this + '.';
			throw new UserException(msg, 'error'); // -> typeは列挙型にしたい
		}
		var changeAssignValue = _args.pop(); // -> _argsから最後の要素を削除し、変数[changeAssignValue]でキャッチする
		var menberLayeredLength = _args.length;
		var menberListIndex = 0;
		var hasMenber = false;
		var memberName = void(0);
		while (menberListIndex < menberLayeredLength) {
			memberName = _args[menberListIndex];
			hasMenber = _obj.hasOwnProperty(memberName); // -> _objではダメ。。1階層目以外書き換え不可
			menberListIndex++;
			if (hasMenber || menberLayeredLength == menberListIndex+1) {// -> 代入判定の条件は？？
				// propertyの書き換え
				Object.defineProperty(_obj, memberName, { value: changeAssignValue, writable: false, enumerable: true });
			} else {
				// nothing
			}
		}
		return _obj;
	};
})()

最終的に出来上がったソースコード

(function () {
	// 基底セッター
	Object.prototype.setter = function(member, /*...multilayered, */value) {// -> member, multilayered, valueは実質使用しない....残余引数で対応したい
		var obj = this;// -> Class化されたオブジェクトに対応
		// 通常配列化
		var _args = Array.from(arguments); // -> ポリフィルを作成した(IEとか対応)
		if (_args.length < 2) {
			var msg = 'Unexpected execution: there are not enough arguments to execute ' + typeof this + '.';
			throw new TypeError(msg);
		}
		var changeAssignValue = _args.pop(); // -> _argsから最後の要素を削除し、変数[changeAssignValue]でキャッチする
		var menberKeyList = getMenberKeyList(_args.flat(1/0)); //-> _argsの中身を単配列化&階層を配列に詰める
		var menberLayeredLength = menberKeyList.length;
		var menberListIndex = 0;
		var hasMenber = false;
		var memberName = void(0);
		var _obj = obj; // -> 処理用変数
		var isLast = false;
		while (menberListIndex < menberLayeredLength) {
			isLast = (menberListIndex == menberLayeredLength - 1);
			memberName = menberKeyList[menberListIndex];
			hasMenber = _obj.hasOwnProperty(memberName); // -> objではダメ。。1階層目以外書き換え不可
			if (hasMenber) {
				// 最後のindexのみ、propertyの書き換え
				if (isLast) {
					Object.defineProperty(_obj, memberName, { value: changeAssignValue, writable: false, enumerable: true });
				}
				_obj = _obj[memberName];
			} else {
				//_obj[memberName] = {};// -> 不用意なメンバー追加は避けた方が良いかも。。。
			}
			menberListIndex++;
		}
		return obj;
	};
	// 念のため、列挙不可へ書き換え...jQueryUIの処理とバッティングする
	Object.defineProperty(Object.prototype, 'setter', { value: Object.prototype.setter, writable: false, enumerable: false });
	
	// 基底ゲッター
	Object.prototype.getter = function(member/*, ...multilayered*/){// -> m, multilayeredは実質使用しない....残余引数で対応
		var obj = this;// -> Class化されたオブジェクトに対応
		// 通常配列化
		var _args = Array.from(arguments); // -> ポリフィルを作成した(IEとか対応)
		if (_args.length < 1) {
			var msg = 'Unexpected execution: there are not enough arguments to execute ' + typeof this + '.';
			throw new TypeError(msg);
		}
		var results = null;
		var menberKeyList = getMenberKeyList(_args.flat(1/0)); //-> _argsの中身を単配列化&階層を配列に詰める
		var menberLayeredLength = menberKeyList.length;
		var menberListIndex = 0;
		var hasMenber = false;
		var memberName = void(0);
		var _obj = obj; // -> 処理用変数
		while (menberListIndex < menberLayeredLength) {
			isLast = (menberListIndex == menberLayeredLength - 1);
			memberName = menberKeyList[menberListIndex];
			hasMenber = _obj.hasOwnProperty(memberName); // -> objではダメ。。1階層目以外書き換え不可
			if (hasMenber) {
				if (isLast) {
					results = _obj[memberName];
				}
				_obj = _obj[memberName];
			}
			menberListIndex++;
		}
		return results;
	};
	// 念のため、列挙不可へ書き換え...jQueryUIの処理とバッティングする
	Object.defineProperty(Object.prototype, 'getter', { value: Object.prototype.getter, writable: false, enumerable: false });
	
	// Array[ポリフィル:IE11対応]
	Object.defineProperty(Array.prototype, 'flat', { writable: false, enumerable: false, value: (function (){
		return (Array.prototype.flat) ? Array.prototype.flat : function (deepth) {
			var _arr = this;
			if (isNaN(deepth)) { deepth = 1; }
			return deepth > 0 ? _arr.reduce(function (acc, val) {
				return acc.concat(Array.isArray(val) ? val.flatDeep(deepth - 1) : val);
			}, []) : _arr.slice();
		};
	})()});
	Object.defineProperty(Array, 'from', { writable: false, enumerable: false, value: (function () {
		return (Array.from) ? Array.from : function (arrayLike/*, mapFn, thisArg */) {
			var arr = this;
			var items = Object(arrayLike);
			if (arrayLike == null) {
				throw new TypeError('Array.from requires an array-like object - not null or undefined');
			}
			var mapFn = arguments.length > 1 ? arguments[1] : void undefined;// -> 受け取った場合はそれを使う
			var _this;
			if (typeof mapFn !== 'undefined') {
				if (!isCallable(mapFn)) {
					throw new TypeError('Array.from: when provided, the second argument must be a function');
				}
				if (arguments.length > 2) {
					_this = arguments[2];
				}
			}
			var len = toLength(items.length);
			var Arr = isCallable(arr) ? Object(new arr(len)) : new Array(len);
			var index = 0;
			var item;
			while (index < len) {
				item = items[index];
				if (mapFn) {
					Arr[index] = typeof _this === 'undefined' ? mapFn(item, index) : mapFn.call(_this, item, index);
				} else {
					Arr[index] = item;
				}
				index += 1;
			}
			Arr.length = len;
			return Arr;
		};
		// 秘匿関数
		function isCallable (fn) {
			return typeof fn === 'function' || Object.prototype.toString.call(fn) === '[object Function]';
		}
		function toInteger (value) {
			var number = Number(value);
			if (isNaN(number)) {
				return 0;
			}
			if (number === 0 || !isFinite(number)) {
				return number;
			}
			return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
		}
		function toLength (value) {
			var maxSafeInteger = Math.pow(2, 53) - 1; // 2^53-1 約9千兆
			var len = toInteger(value);
			return Math.min(Math.max(len, 0), maxSafeInteger);
		};
	})()});
		
	/** 秘匿関数 */
	// 階層を順番に並び替えて返却（単配列化）
	function getMenberKeyList (obj) {
		return (!Array.isArray(obj) || obj.length < 1) ? [] : (function (r, o) {
			var i = 0;
			while (i < o.length) {
				var k = o[i];
				if (Array.isArray(k)) { k = k.flat(1/0).join('.'); }
				if (typeof k != 'string') { k = k.toString(); }
				k = k.split('.');
				r = r.concat(k);
				i++;
			}
			return r;
		})([], obj);
	}
	/** under test code */
​
	// -> test code setter by type Array.
	var nestedArray = [[[[[[1,2,3]]]]]];
	console.log(nestedArray.setter('0.0.0.0.0.1',5)); // -> [0: [0: [0: [0: [0: [0: 1. 1: 5, 2: 3]]]]]];
	// -> test code setter by type Object.
	var nestedObject = {a: {b: {c: {d: {e: 'hoge', z: 'fuga'}}}}};
	console.log(nestedObject.setter('a.b','c',['d','e'],'hogehoge')); // -> {a: {b: {c: {d: {e: 'hogehoge', z: 'fuga'}}}}};
	// -> test code setter by type Instance.
	var _func = function _func () { this.mem1 = {mem2: {mem3: {mem4: {mem5: 'member5', mem6: 'member6'}}}}; };
	var nestedPropIns = new _func();
	console.log(nestedPropIns.setter('mem1.mem2.mem3.mem4.mem5', '12345')); // -> _func: {mem1: {mem2: {mem3: {mem4: {mem5: '12345', mem6: 'member6'}}}}};
​
	// -> test code getter by type Array.
	console.log(nestedArray.getter('0.0.0.0.0.1'));// -> 5
	console.log(nestedArray.getter('0.0.0.0.0.4'));// -> null
	// -> test code getter by type Object.
	console.log(nestedObject.getter('a.b','c',['d','e'])); // -> hogehoge
	console.log(nestedObject.getter('a.b','c',['d','j'])); // -> null
	// -> test code getter by type Instance.
	console.log(nestedPropIns.getter('mem1.mem2.mem3.mem4.mem5')); // -> 12345
	console.log(nestedPropIns.getter('mem1.mem2.mem3.mem5.mem5')); // -> null
})();

Answer 1

こんにちは

ご質問にある、

実現したいことのベタ処理（3階層分）

を、任意の階層のプロパティで行うために、ライブラリの力を借りるのはいかがでしょうか？

重要：ESscript5標準（IE11対応）

とのことですが、オブジェクトや配列の操作で便利なライブラリ lodash は、

Support

Tested in Chrome 74-75, Firefox 66-67, IE 11, Edge 18, Safari 11-12, & Node.js 8-12.

とあるように IE 11 もサポートしています。この lodash が提供するメソッドの _.set を使えば、任意の階層のプロパティを文字列の配列で指定することで、その値を変更できます。以下、使用例です。

// 3階層
const obj = {a: {b: {c: '1'}}};

console.log(obj.a.b.c);  // => '1'

_.set(obj, ['a', 'b', 'c'], '3');

console.log(obj.a.b.c);  // => '3'



// 5階層
const obj2 = {a: {b: {c: {d: {e: '10'}}}}};

console.log(obj2.a.b.c.d.e);  // => '10'

_.set(obj2, ['a', 'b', 'c', 'd', 'e'], '30');

console.log(obj2.a.b.c.d.e);  // => '30'

• 動作確認用サンプル: codepen.io/jun68ykt/pen/yLJNeqg

補足

• 上記の _.set と対になるメソッドとして、値の取得は _.get として提供されています。

Comments

[tama_yn0815]

ご回答をいただきまして、ありがとうございますっ！
すみません。。。今回の要件を予め記述していませんでした。。。
libraryの使用が、ライセンス上の都合で使用できないのです。
jQueryのAPIを含め、必要な機能を必要な分だけ自分たちで用意する必要があるのでした。。。

ですが、回答を拝見して、lodashの"_.set"メソッドは内部を追ってみても良いかもです。

[jun68ykt]

コメントありがとうございます。

> libraryの使用が、ライセンス上の都合で使用できないのです。

なるほどですね。
lodash の _,set は与えるpath が配列でも文字列でもよかったり、配列のインデクスに相当する数字が含まれていると、それをよしなに解釈してくれる優れモノですが、そこまでのものでなくても、回答に挙げたサンプルコードの中で、lodashの_.set の替わりになるだけの関数であれば、そんなに大変なものにはならないと思いましたので、自作してみました。以下

https://codepen.io/jun68ykt/pen/gOMpRPR?editors=0012

の

function setByPath(obj, path, value)

です。簡易的なものですが、参考になれば幸いです。

[tama_yn0815]

こちらのコメントの回答を参考に組み上げてみました！
ありがとうございますっ！

[jun68ykt]

どういたしまして
> こちらのコメントの回答を参考に組み上げてみました！
とのことでよかったです????