将点符号中的JavaScriptstring转换为对象引用

给定一个JS对象: var obj = { a: { b: '1', c: '2' } }和一个string"ab"我怎样才能将string转换为点符号,所以我可以去: var val = obj.ab ;

如果string只是'a',我可以使用obj[a]但是这更复杂。 我想有一些直截了当的方法,但是现在却逃脱了。

最近的笔记:虽然我很高兴这个答案得到了许多upvotes,我也有些害怕。 如果需要将“xabc”之类的点符号string转换为引用,这可能是一个标志,说明有一些非常错误的情况(除非您正在执行一些奇怪的反序列化)。 这是过度的,因为它是不必要的元编程,也有些违反function无副作用的编码风格。 另外,如果你做这个比你需要的更多(例如作为你的应用程序默认的传递对象和引用它们的forms),你也需要大量的性能命中。 如果由于某种原因,这是服务器端JS,通常是input消毒。 新手find自己的答案应该考虑与数组表示,而不是像['x','a','b','c'],甚至更直接/简单/直接的工作跟踪引用本身,或者可能是一些预先存在的唯一ID等

这是一个优雅的单线,比其他解决scheme短10倍:

 function index(obj,i) {return obj[i]} 'abetc'.split('.').reduce(index, obj) 

或者在ECMAScript 6中:

 'abetc'.split('.').reduce((o,i)=>o[i], obj) 

(不是说我觉得eval总是像其他人一样表示它是坏的(虽然通常是这样),但是这些人会很高兴这种方法不使用eval。以上将findobj.abetc给定的obj和string"abetc" 。)

针对那些仍然害怕使用reduce尽pipe它是ECMA-262标准(第5版),这是一个双线recursion实现:

 function multiIndex(obj,is) { // obj,['1','2','3'] -> ((obj['1'])['2'])['3'] return is.length ? multiIndex(obj[is[0]],is.slice(1)) : obj } function pathIndex(obj,is) { // obj,'1.2.3' -> multiIndex(obj,['1','2','3']) return multiIndex(obj,is.split('.')) } pathIndex('abetc') 

根据JS编译器正在进行的优化,您可能需要确保每次调用时,通过常规方法(将它们放置在闭包,对象或全局名称空间中),不会重新定义任何嵌套函数。

编辑

在评论中回答一个有趣的问题:

你怎么把这个变成一个二传手呢? 不仅通过path返回值,而且如果一个新的值被发送到函数中,还设置它们? – Swader 6月28日21:42

(注:遗憾的是不能用Setter返回一个对象,因为这违反了调用约定;评论者似乎是指一个普通的setter风格的函数,其副作用如index(obj,"abetc", value)obj.abetc = value 。)

reduce方式并不适合这种情况,但我们可以修改recursion实现:

 function index(obj,is, value) { if (typeof is == 'string') return index(obj,is.split('.'), value); else if (is.length==1 && value!==undefined) return obj[is[0]] = value; else if (is.length==0) return obj; else return index(obj[is[0]],is.slice(1), value); } 

演示:

 > obj = {a:{b:{etc:5}}} > index(obj,'abetc') 5 > index(obj,['a','b','etc']) #works with both strings and lists 5 > index(obj,'abetc', 123) #setter-mode - third argument (possibly poor form) 123 > index(obj,'abetc') 123 

…虽然我个人build议做一个单独的函数setIndex(...) 。 我想结束一个侧面说明,问题的原始forms可以(应该)使用索引数组(可以从.split获得),而不是string; 虽然方便function通常没有错。

如果你可以使用lodash ,有一个函数,它确实是这样的:

_.get(object,path,[defaultValue])

 var val = _.get(obj, "ab"); 

更多的涉及recursion的例子。

 function recompose(obj,string){ var parts = string.split('.'); var newObj = obj[parts[0]]; if(parts[1]){ parts.splice(0,1); var newString = parts.join('.'); return recompose(newObj,newString); } return newObj; } var obj = { a: { b: '1', c: '2', d:{a:{b:'blah'}}}}; alert(recompose(obj,'adab')); //blah 

如果您希望多次parsing相同的path,那么为每个点符号path构build一个函数实际上具有迄今为止最好的性能 (扩展了上面评论中所链接的性能testingJames Wilkins)。

 var path = 'abx'; var getter = new Function("obj", "return obj." + path + ";"); getter(obj); 

使用函数构造函数与eval()在安全性和最坏情况下的性能方面有一些相同的缺点,但是对于需要结合极端活力和高性能的情况,IMO还是一个使用不足的工具。 我使用这种方法来构build数组过滤函数,并在AngularJS摘要循环中调用它们。 我的configuration文件始终显示array.filter()步骤取消引用和过滤大约2000个复杂的对象,使用dynamic定义的3-4层深的pathless于1毫秒。

当然,类似的方法可以用来创buildsetter函数:

 var setter = new Function("obj", "newval", "obj." + path + " = newval;"); setter(obj, "some new val"); 
 var a = { b: { c: 9 } }; function value(layer, path, value) { var i = 0, path = path.split('.'); for (; i < path.length; i++) if (value != null && i + 1 === path.length) layer[path[i]] = value; layer = layer[path[i]]; return layer; }; value(a, 'b.c'); // 9 value(a, 'b.c', 4); value(a, 'b.c'); // 4 

与更简单的eval方法相比,这是很多代码,但是像Simon Willison所说的, 你永远不应该使用eval 。

另外, JSFiddle 。

其他的build议是有点神秘,所以我想我会贡献:

 Object.prop = function(obj, prop, val){ var props = prop.split('.') , final = props.pop(), p while(p = props.shift()){ if (typeof obj[p] === 'undefined') return undefined; obj = obj[p] } return val ? (obj[final] = val) : obj[final] } var obj = { a: { b: '1', c: '2' } } // get console.log(Object.prop(obj, 'a.c')) // -> 2 // set Object.prop(obj, 'a.c', function(){}) console.log(obj) // -> { a: { b: '1', c: [Function] } } 

请注意,如果您已经在使用Lodash ,则可以使用propertyget函数:

 var obj = { a: { b: '1', c: '2' } }; _.property('a.b')(obj); // => 1 _.get(obj, 'a.b'); // => 1 

下划线也有一个property函数,但不支持点符号。

多年以来,原来的职位。 现在有一个叫“对象path”的很好的库。 https://github.com/mariocasciaro/object-path

在NPM和BOWER上可用https://www.npmjs.com/package/object-path

这很简单:

 objectPath.get(obj, "ac1"); //returns "f" objectPath.set(obj, "aj0.f", "m"); 

并且适用于深度嵌套的属性和数组。

我已经通过ninjagecko扩展了优雅的答案,以便函数处理虚线和/或数组样式引用,并且使空string返回父对象。

干得好:

 string_to_ref = function (object, reference) { function arr_deref(o, ref, i) { return !ref ? o : (o[ref.slice(0, i ? -1 : ref.length)]) } function dot_deref(o, ref) { return ref.split('[').reduce(arr_deref, o); } return !reference ? object : reference.split('.').reduce(dot_deref, object); }; 

看到我在这里工作的jsFiddle例子: http : //jsfiddle.net/sc0ttyd/q7zyd/

 var find = function(root, path) { var segments = path.split('.'), cursor = root, target; for (var i = 0; i < segments.length; ++i) { target = cursor[segments[i]]; if (typeof target == "undefined") return void 0; cursor = target; } return cursor; }; var obj = { a: { b: '1', c: '2' } } find(obj, "ab"); // 1 var set = function (root, path, value) { var segments = path.split('.'), cursor = root, target; for (var i = 0; i < segments.length - 1; ++i) { cursor = cursor[segments[i]] || { }; } cursor[segments[segments.length - 1]] = value; }; set(obj, "ak", function () { console.log("hello world"); }); find(obj, "ak")(); // hello world 

您可以用一行代码通过点符号来获取对象成员的值:

 new Function('_', 'return _.' + path)(obj); 

在你的情况下:

 var obj = { a: { b: '1', c: '2' } } var val = new Function('_', 'return _.a.b')(obj); 

为了简单起见,你可以写一个这样的函数:

 function objGet(obj, path){ return new Function('_', 'return _.' + path)(obj); } 

说明:

Function构造函数创build一个新的Function对象。 在JavaScript中,每个函数实际上都是一个Function对象。 用Function构造函数显式创build一个函数的语法是:

 new Function ([arg1[, arg2[, ...argN]],] functionBody) 

其中arguments(arg1 to argN)必须是对应于有效的javaScript标识符的string,而functionBody是包含函数定义的javaScript语句的string。

在我们的例子中,我们利用string函数体来用点符号来检索对象成员。

希望它有帮助。

我build议分割path并迭代它并减less你拥有的对象。 此提案适用于缺less属性的默认值

 function getValue(object, keys) { return keys.split('.').reduce(function (o, k) { return (o || {})[k]; }, object); } console.log(getValue({ a: { b: '1', c: '2' } }, 'a.b')); console.log(getValue({ a: { b: '1', c: '2' } }, 'foo.bar.baz')); 

我从里卡多·托马西(Ricardo Tomasi)的回答中复制了以下内容,并且修改了这些内容,以便根据需要创build尚不存在的子对象。 效率稍差( if创build空对象的if效果会更好),但是应该不错。

另外,它可以让我们做Object.prop(obj, 'a.b', false) ,这是我们以前做不到的。 不幸的是,它仍然不会让我们分配undefined …不知道如何去那个呢。

 /** * Object.prop() * * Allows dot-notation access to object properties for both getting and setting. * * @param {Object} obj The object we're getting from or setting * @param {string} prop The dot-notated string defining the property location * @param {mixed} val For setting only; the value to set */ Object.prop = function(obj, prop, val){ var props = prop.split('.'), final = props.pop(), p; for (var i = 0; i < props.length; i++) { p = props[i]; if (typeof obj[p] === 'undefined') { // If we're setting if (typeof val !== 'undefined') { // If we're not at the end of the props, keep adding new empty objects if (i != props.length) obj[p] = {}; } else return undefined; } obj = obj[p] } return typeof val !== "undefined" ? (obj[final] = val) : obj[final] } 

获取/设置答案也可以在原生反应 (你不能分配给Object.prototype目前):

 Object.defineProperty(Object.prototype, 'getNestedProp', { value: function(desc) { var obj = this; var arr = desc.split("."); while(arr.length && (obj = obj[arr.shift()])); return obj; }, enumerable: false }); Object.defineProperty(Object.prototype, 'setNestedProp', { value: function(desc, value) { var obj = this; var arr = desc.split("."); var last = arr.pop(); while(arr.length && (obj = obj[arr.shift()])); obj[last] = value; }, enumerable: false }); 

用法:

 var a = { values: [{ value: null }] }; var b = { one: { two: 'foo' } }; a.setNestedProp('values.0.value', b.getNestedProp('one.two')); console.log(a.values[0].value); // foo 

这是我的代码没有使用eval 。 它也容易理解。

 function value(obj, props) { if (!props) return obj; var propsArr = props.split('.'); var prop = propsArr.splice(0, 1); return value(obj[prop], propsArr.join('.')); } var obj = { a: { b: '1', c: '2', d:{a:{b:'blah'}}}}; console.log(value(obj, 'adab')); //returns blah 

是的,4年前有人问,是的,扩展基本原型通常不是好主意,但如果将所有扩展名保留在一个地方,它们可能是有用的。
所以,这是我的方式来做到这一点。

  Object.defineProperty(Object.prototype, "getNestedProperty", { value : function (propertyName) { var result = this; var arr = propertyName.split("."); while (arr.length && result) { result = result[arr.shift()]; } return result; }, enumerable: false }); 

现在,您将可以在任何地方获得嵌套属性,而无需导入具有function或复制/粘贴function的模块。

UPD.Example:

 {a:{b:11}}.getNestedProperty('a.b'); //returns 11 

UPD 2.在我的项目中,下一个扩展名为榫。 另外我读过,它可能会打破jQuery。 所以,绝对不要这样做

  Object.prototype.getNestedProperty = function (propertyName) { var result = this; var arr = propertyName.split("."); while (arr.length && result) { result = result[arr.shift()]; } return result; }; 

这是我的实现

实施1

 Object.prototype.access = function() { var ele = this[arguments[0]]; if(arguments.length === 1) return ele; return ele.access.apply(ele, [].slice.call(arguments, 1)); } 

实现2 (使用数组reduce而不是slice)

 Object.prototype.access = function() { var self = this; return [].reduce.call(arguments,function(prev,cur) { return prev[cur]; }, self); } 

例子:

 var myobj = {'a':{'b':{'c':{'d':'abcd','e':[11,22,33]}}}}; myobj.access('a','b','c'); // returns: {'d':'abcd', e:[0,1,2,3]} myobj.abaccess('c','d'); // returns: 'abcd' myobj.access('a','b','c','e',0); // returns: 11 

它也可以处理数组内的对象

 var myobj2 = {'a': {'b':[{'c':'ab0c'},{'d':'ab1d'}]}} myobj2.access('a','b','1','d'); // returns: 'ab1d' 

这是我提出的扩展解决scheme:ninjagecko

对我来说简单的string表示法还不够,所以下面的版本支持如下的东西:

index(obj,'data.accounts [0] .address [0] .postcode');

 /** * Get object by index * @supported * - arrays supported * - array indexes supported * @not-supported * - multiple arrays * @issues: * index(myAccount, 'accounts[0].address[0].id') - works fine * index(myAccount, 'accounts[].address[0].id') - doesnt work * @Example: * index(obj, 'data.accounts[].id') => returns array of id's * index(obj, 'data.accounts[0].id') => returns id of 0 element from array * index(obj, 'data.accounts[0].addresses.list[0].id') => error * @param obj * @param path * @returns {any} */ var index = function(obj, path, isArray?, arrIndex?){ // is an array if(typeof isArray === 'undefined') isArray = false; // array index, // if null, will take all indexes if(typeof arrIndex === 'undefined') arrIndex = null; var _arrIndex = null; var reduceArrayTag = function(i, subArrIndex){ return i.replace(/(\[)([\d]{0,})(\])/, (i) => { var tmp = i.match(/(\[)([\d]{0,})(\])/); isArray = true; if(subArrIndex){ _arrIndex = (tmp[2] !== '') ? tmp[2] : null; }else{ arrIndex = (tmp[2] !== '') ? tmp[2] : null; } return ''; }); } function byIndex(obj, i) { // if is an array if(isArray){ isArray = false; i = reduceArrayTag(i, true); // if array index is null, // return an array of with values from every index if(!arrIndex){ var arrValues = []; _.forEach(obj, (el) => { arrValues.push(index(el, i, isArray, arrIndex)); }) return arrValues; } // if array index is specified var value = obj[arrIndex][i]; if(isArray){ arrIndex = _arrIndex; }else{ arrIndex = null; } return value; }else{ // remove [] from notation, // if [] has been removed, check the index of array i = reduceArrayTag(i, false); return obj[i] } } // reduce with byIndex method return path.split('.').reduce(byIndex, obj) } 

冒着摔死马的危险…我发现这在遍历嵌套对象时最有用,以引用您在基础对象或具有相同结构的类似对象的位置。 为此,这对嵌套对象遍历函数很有用。 请注意,我用一个数组来保存path。 将其修改为使用stringpath或数组将是微不足道的。 还要注意,与其他一些实现不同,您可以将“未定义”赋值给该值。

 /* * Traverse each key in a nested object and call fn(curObject, key, value, baseObject, path) * on each. The path is an array of the keys required to get to curObject from * baseObject using objectPath(). If the call to fn() returns falsey, objects below * curObject are not traversed. Should be called as objectTaverse(baseObject, fn). * The third and fourth arguments are only used by recursion. */ function objectTraverse (o, fn, base, path) { path = path || []; base = base || o; Object.keys(o).forEach(function (key) { if (fn(o, key, o[key], base, path) && jQuery.isPlainObject(o[key])) { path.push(key); objectTraverse(o[key], fn, base, path); path.pop(); } }); } /* * Get/set a nested key in an object. Path is an array of the keys to reference each level * of nesting. If value is provided, the nested key is set. * The value of the nested key is returned. */ function objectPath (o, path, value) { var last = path.pop(); while (path.length && o) { o = o[path.shift()]; } if (arguments.length < 3) { return (o? o[last] : o); } return (o[last] = value); } 

我在我的项目中使用了这个代码

 const getValue = (obj, arrPath) => ( arrPath.reduce((x, y) => { if (y in x) return x[y] return {} }, obj) ) 

用法:

 const obj = { id: { user: { local: 104 } } } const path = [ 'id', 'user', 'local' ] getValue(obj, path) // return 104 

目前还不清楚你的问题是什么。 鉴于你的对象, obj.ab会给你“2”,就像它。 如果你想操作string来使用括号,你可以这样做:

 var s = 'a.b'; s = 'obj["' + s.replace(/\./g, '"]["') + '"]'; alert(s); // displays obj["a"]["b"]