按字符串路径访问嵌套的 JavaScript 对象和数组

我想你是在问这个：

var part1name = someObject.part1.name;
var part2quantity = someObject.part2.qty;
var part3name1 =  someObject.part3[0].name;

你可能会问这个：

var part1name = someObject["part1"]["name"];
var part2quantity = someObject["part2"]["qty"];
var part3name1 =  someObject["part3"][0]["name"];

两者都有效

或者，也许你正在要求这个

var partName = "part1";
var nameStr = "name";

var part1name = someObject[partName][nameStr];

最后，你可能会要求这个

var partName = "part1.name";

var partBits = partName.split(".");

var part1name = someObject[partBits[0]][partBits[1]];

如果您需要在编码时访问不同的嵌套键而不知道它（解决它们将很简单），您可以使用数组表示法访问器：

var part1name = someObject['part1']['name'];
var part2quantity = someObject['part2']['qty'];
var part3name1 =  someObject['part3'][0]['name'];

它们等效于点表示法访问器，在运行时可能会有所不同，例如：

var part = 'part1';
var property = 'name';

var part1name = someObject[part][property];

相当于

var part1name = someObject['part1']['name'];

或

var part1name = someObject.part1.name;

我希望这能解决你的问题......

编辑

我不会使用字符串来维护某种 xpath 查询来访问对象值。 由于您必须调用一个函数来解析查询并检索值，因此我将遵循另一条路径（不是：

var part1name = function(){ return this.part1.name; }
var part2quantity = function() { return this['part2']['qty']; }
var part3name1 =  function() { return this.part3[0]['name'];}

// usage: part1name.apply(someObject);

或者，如果您对 apply 方法感到不安

var part1name = function(obj){ return obj.part1.name; }
var part2quantity = function(obj) { return obj['part2']['qty']; }
var part3name1 =  function(obj) { return obj.part3[0]['name'];}

// usage: part1name(someObject);

这些函数更短、更清晰，解释器会为您检查它们是否存在语法错误等。

顺便说一句，我觉得在正确的时间完成一个简单的任务就足够了......

您必须自己解析字符串：

function getProperty(obj, prop) {
    var parts = prop.split('.');

    if (Array.isArray(parts)) {
        var last = parts.pop(),
        l = parts.length,
        i = 1,
        current = parts[0];

        while((obj = obj[current]) && i < l) {
            current = parts[i];
            i++;
        }

        if(obj) {
            return obj[last];
        }
    } else {
        throw 'parts is not valid array';
    }
}

这要求您还使用点表示法定义数组索引：

var part3name1 = "part3.0.name";

它使解析更容易。

演示

我只是根据我已经拥有的一些类似代码制作了它，它似乎有效：

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

用法：：

Object.byString(someObj, 'part3[0].name');

在 http://jsfiddle.net/alnitak/hEsys/ 上查看工作演示

编辑：有些人注意到，如果传递一个字符串，其中最左边的索引与对象中正确嵌套的条目不对应，则此代码将引发错误。这是一个合理的担忧，但恕我直言，最好在调用时使用块来解决，而不是让此函数静默返回无效索引。try / catchundefined

使用 EVAL：

var part1name = eval("someObject.part1.name");

包装以在出错时返回未定义

function path(obj, path) {
    try {
        return eval("obj." + path);
    } catch(e) {
        return undefined;
    }
}

http://jsfiddle.net/shanimal/b3xTw/

在使用 eval 的力量时，请使用常识和谨慎。这有点像一把光剑，如果你打开它，你有 90% 的几率会切断一条肢体。它并不适合所有人。

也适用于对象内部的数组/数组。 防御无效值。

/**
 * Retrieve nested item from object/array
 * @param {Object|Array} obj
 * @param {String} path dot separated
 * @param {*} def default value ( if result undefined )
 * @returns {*}
 */
function path(obj, path, def){
    var i, len;

    for(i = 0,path = path.split('.'), len = path.length; i < len; i++){
        if(!obj || typeof obj !== 'object') return def;
        obj = obj[path[i]];
    }

    if(obj === undefined) return def;
    return obj;
}

//////////////////////////
//         TEST         //
//////////////////////////

var arr = [true, {'sp ace': true}, true]

var obj = {
  'sp ace': true,
  arr: arr,
  nested: {'dotted.str.ing': true},
  arr3: arr
}

shouldThrow(`path(obj, "arr.0")`);
shouldBeDefined(`path(obj, "arr[0]")`);
shouldBeEqualToNumber(`path(obj, "arr.length")`, 3);
shouldBeTrue(`path(obj, "sp ace")`);
shouldBeEqualToString(`path(obj, "none.existed.prop", "fallback")`, "fallback");
shouldBeTrue(`path(obj, "nested['dotted.str.ing'])`);

<script src="https://cdn.rawgit.com/coderek/e7b30bac7634a50ad8fd/raw/174b6634c8f57aa8aac0716c5b7b2a7098e03584/js-test.js"></script>

最近遇到了同样的问题，并成功使用了嵌套对象/数组的 https://npmjs.org/package/tea-properties：set

获取：

var o = {
  prop: {
    arr: [
      {foo: 'bar'}
    ]
  }
};

var properties = require('tea-properties');
var value = properties.get(o, 'prop.arr[0].foo');

assert(value, 'bar'); // true

设置：

var o = {};

var properties = require('tea-properties');
properties.set(o, 'prop.arr[0].foo', 'bar');

assert(o.prop.arr[0].foo, 'bar'); // true

这是我使用的解决方案：

function resolve(path, obj=self, separator='.') {
    var properties = Array.isArray(path) ? path : path.split(separator)
    return properties.reduce((prev, curr) => prev?.[curr], obj)
}

用法示例：

// accessing property path on global scope
resolve("document.body.style.width")
// or
resolve("style.width", document.body)

// accessing array indexes
// (someObject has been defined in the question)
resolve("part3.0.size", someObject) // returns '10'

// accessing non-existent properties
// returns undefined when intermediate properties are not defined:
resolve('properties.that.do.not.exist', {hello:'world'})

// accessing properties with unusual keys by changing the separator
var obj = { object: { 'a.property.name.with.periods': 42 } }
resolve('object->a.property.name.with.periods', obj, '->') // returns 42

// accessing properties with unusual keys by passing a property name array
resolve(['object', 'a.property.name.with.periods'], obj) // returns 42

局限性：

• 不能对数组索引使用括号 （），尽管在分隔符标记之间指定数组索引（例如，）可以正常工作，如上所示。[].

现在有一个模块可以执行此操作：https://github.com/erictrinh/safe-accessnpm

用法示例：

var access = require('safe-access');
access(very, 'nested.property.and.array[0]');

在这里，我提供了更多方法，这些方法在许多方面似乎更快：

选项 1：在 上拆分字符串。或 [ 或 ] 或 ' 或 “，反转它，跳过空项目。

function getValue(path, origin) {
    if (origin === void 0 || origin === null) origin = self ? self : this;
    if (typeof path !== 'string') path = '' + path;
    var parts = path.split(/\[|\]|\.|'|"/g).reverse(), name; // (why reverse? because it's usually faster to pop off the end of an array)
    while (parts.length) { name=parts.pop(); if (name) origin=origin[name]; }
    return origin;
}

选项 2（最快，除了）：低级字符扫描（没有正则表达式/拆分/等，只是快速字符扫描）。注意：此不支持索引的引号。eval

function getValue(path, origin) {
    if (origin === void 0 || origin === null) origin = self ? self : this;
    if (typeof path !== 'string') path = '' + path;
    var c = '', pc, i = 0, n = path.length, name = '';
    if (n) while (i<=n) ((c = path[i++]) == '.' || c == '[' || c == ']' || c == void 0) ? (name?(origin = origin[name], name = ''):(pc=='.'||pc=='['||pc==']'&&c==']'?i=n+2:void 0),pc=c) : name += c;
    if (i==n+2) throw "Invalid path: "+path;
    return origin;
} // (around 1,000,000+/- ops/sec)

选项 3：（新：选项 2 扩展为支持报价 - 速度稍慢，但仍然很快）

function getValue(path, origin) {
    if (origin === void 0 || origin === null) origin = self ? self : this;
    if (typeof path !== 'string') path = '' + path;
    var c, pc, i = 0, n = path.length, name = '', q;
    while (i<=n)
        ((c = path[i++]) == '.' || c == '[' || c == ']' || c == "'" || c == '"' || c == void 0) ? (c==q&&path[i]==']'?q='':q?name+=c:name?(origin?origin=origin[name]:i=n+2,name='') : (pc=='['&&(c=='"'||c=="'")?q=c:pc=='.'||pc=='['||pc==']'&&c==']'||pc=='"'||pc=="'"?i=n+2:void 0), pc=c) : name += c;
    if (i==n+2 || name) throw "Invalid path: "+path;
    return origin;
}

JSPerf：http://jsperf.com/ways-to-dereference-a-delimited-property-string/3

不过，“eval（...）”仍然是王道（性能方面）。如果您直接控制属性路径，则使用“eval”应该不会有任何问题（尤其是在需要速度的情况下）。如果“通过网络”拉取属性路径（在线！？哈哈:P），那么是的，使用其他东西来确保安全。只有白痴才会说永远不要使用“eval”，因为什么时候使用它是有充分理由的。此外，“它用于 Doug Crockford 的 JSON 解析器。如果输入是安全的，那么完全没有问题。为正确的工作使用正确的工具，仅此而已。

AngularJS的

Speigg 的方法非常简洁明了，尽管我在搜索通过字符串路径访问 AngularJS $scope 属性的解决方案时发现了这个回复，并且稍作修改即可完成工作：

$scope.resolve = function( path, obj ) {
    return path.split('.').reduce( function( prev, curr ) {
        return prev[curr];
    }, obj || this );
}

只需将此函数放在根控制器中，然后将其用于任何子作用域，如下所示：

$scope.resolve( 'path.to.any.object.in.scope')

您可以使用以下简单技巧设法在没有任何外部 JavaScript 库的情况下获取具有点表示法的深层对象成员的值：

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

在你的情况下，要从中获取值，只需执行：part1.namesomeObject

objectGet(someObject, 'part1.name');

这是一个简单的小提琴演示： https://jsfiddle.net/harishanchu/oq5esowf/

我还没有找到一个包来执行带有字符串路径的所有操作，所以我最终编写了自己的快速小包，它支持 insert（）、get（）（默认返回）、set（） 和 remove（） 操作。

您可以使用点表示法、括号、数字索引、字符串数字属性和带有非单词字符的键。简单用法如下：

> var jsocrud = require('jsocrud');

...

// Get (Read) ---
> var obj = {
>     foo: [
>         {
>             'key w/ non-word chars': 'bar'
>         }
>     ]
> };
undefined

> jsocrud.get(obj, '.foo[0]["key w/ non-word chars"]');
'bar'

https://www.npmjs.com/package/jsocrud

https://github.com/vertical-knowledge/jsocrud

现在，lodash 使用 .查看 https://lodash.com/docs#get_.get(obj, property)

文档中的示例：

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// → 3

_.get(object, ['a', '0', 'b', 'c']);
// → 3

_.get(object, 'a.b.c', 'default');
// → 'default'

/**
 * Access a deep value inside a object 
 * Works by passing a path like "foo.bar", also works with nested arrays like "foo[0][1].baz"
 * @author Victor B. https://gist.github.com/victornpb/4c7882c1b9d36292308e
 * Unit tests: http://jsfiddle.net/Victornpb/0u1qygrh/
 */
function getDeepVal(obj, path) {
    if (typeof obj === "undefined" || obj === null) return;
    path = path.split(/[\.\[\]\"\']{1,2}/);
    for (var i = 0, l = path.length; i < l; i++) {
        if (path[i] === "") continue;
        obj = obj[path[i]];
        if (typeof obj === "undefined" || obj === null) return;
    }
    return obj;
}

适用于

getDeepVal(obj,'foo.bar')
getDeepVal(obj,'foo.1.bar')
getDeepVal(obj,'foo[0].baz')
getDeepVal(obj,'foo[1][2]')
getDeepVal(obj,"foo['bar'].baz")
getDeepVal(obj,"foo['bar']['baz']")
getDeepVal(obj,"foo.bar.0.baz[1]['2']['w'].aaa[\"f\"].bb")

这是一个带有 lodash 的单衬里。

const deep = { l1: { l2: { l3: "Hello" } } };
const prop = "l1.l2.l3";
const val = _.reduce(prop.split('.'), function(result, value) { return result ? result[value] : undefined; }, deep);
// val === "Hello"

甚至更好......

const val = _.get(deep, prop);

或 ES6 版本，带 reduce...

const val = prop.split('.').reduce((r, val) => { return r ? r[val] : undefined; }, deep);

普伦克尔

简单的函数，允许字符串或数组路径。

function get(obj, path) {
  if(typeof path === 'string') path = path.split('.');

  if(path.length === 0) return obj;
  return get(obj[path[0]], path.slice(1));
}

const obj = {a: {b: {c: 'foo'}}};

console.log(get(obj, 'a.b.c')); //foo

或

console.log(get(obj, ['a', 'b', 'c'])); //foo

ES6：Vanila JS 中只有一行（如果没有找到，它将返回 null 而不是给出错误）：

'path.string'.split('.').reduce((p,c)=>p&&p[c]||null, MyOBJ)

或者示例：

'a.b.c'.split('.').reduce((p,c)=>p&&p[c]||null, {a:{b:{c:1}}})

使用可选链接运算符：

'a.b.c'.split('.').reduce((p,c)=>p?.[c], {a:{b:{c:1}}})

对于同时识别假数、0 和负数并接受默认值作为参数的现成函数：

const resolvePath = (object, path, defaultValue) => path
   .split('.')
   .reduce((o, p) => o ? o[p] : defaultValue, object)

使用示例：

resolvePath(window,'document.body') => <body>
resolvePath(window,'document.body.xyz') => undefined
resolvePath(window,'document.body.xyz', null) => null
resolvePath(window,'document.body.xyz', 1) => 1

奖励：

要设置路径（由 @rob-Gordon 请求），您可以使用：

const setPath = (object, path, value) => path
   .split('.')
   .reduce((o,p,i) => o[p] = path.split('.').length === ++i ? value : o[p] || {}, object)

例：

let myVar = {}
setPath(myVar, 'a.b.c', 42) => 42
console.log(myVar) => {a: {b: {c: 42}}}

使用 [] 访问数组：

const resolvePath = (object, path, defaultValue) => path
   .split(/[\.\[\]\'\"]/)
   .filter(p => p)
   .reduce((o, p) => o ? o[p] : defaultValue, object)

例：

const myVar = {a:{b:[{c:1}]}}
resolvePath(myVar,'a.b[0].c') => 1
resolvePath(myVar,'a["b"][\'0\'].c') => 1

基于前面的答案，我创建了一个也可以处理括号的函数。但由于分裂，它们内部没有点。

function get(obj, str) {
  return str.split(/\.|\[/g).map(function(crumb) {
    return crumb.replace(/\]$/, '').trim().replace(/^(["'])((?:(?!\1)[^\\]|\\.)*?)\1$/, (match, quote, str) => str.replace(/\\(\\)?/g, "$1"));
  }).reduce(function(obj, prop) {
    return obj ? obj[prop] : undefined;
  }, obj);
}

虽然reduce很好，但我很惊讶没有人使用Each：

function valueForKeyPath(obj, path){
        const keys = path.split('.');
        keys.forEach((key)=> obj = obj[key]);
        return obj;
    };

测试

// (IE9+) Two steps

var pathString = "[0]['property'].others[3].next['final']";
var obj = [{
  property: {
    others: [1, 2, 3, {
      next: {
        final: "SUCCESS"
      }
    }]
  }
}];

// Turn string to path array
var pathArray = pathString
    .replace(/\[["']?([\w]+)["']?\]/g,".$1")
    .split(".")
    .splice(1);

// Add object prototype method
Object.prototype.path = function (path) {
  try {
    return [this].concat(path).reduce(function (f, l) {
      return f[l];
    });
  } catch (e) {
    console.error(e);
  }
};

// usage
console.log(obj.path(pathArray));
console.log(obj.path([0,"doesNotExist"]));

这可能永远不会见到曙光......但无论如何，它都在这里。

1. 将括号语法替换为[].
2. 按字符划分.
3. 删除空白字符串
4. 查找路径（否则undefined)

（若要查找对象的路径，请使用此 pathTo 解决方案。

// "one liner" (ES6)

const deep_value = (obj, path) => 
path
    .replace(/\[|\]\.?/g, '.')
    .split('.')
    .filter(s => s)
    .reduce((acc, val) => acc && acc[val], obj);
    
// ... and that's it.

var someObject = {
    'part1' : {
        'name': 'Part 1',
        'size': '20',
        'qty' : '50'
    },
    'part2' : {
        'name': 'Part 2',
        'size': '15',
        'qty' : '60'
    },
    'part3' : [
        {
            'name': 'Part 3A',
            'size': '10',
            'qty' : '20'
        }
        // ...
    ],
    'pa[rt3' : [
        {
            'name': 'Part 3A',
            'size': '10',
            'qty' : '20'
        }
        // ...
    ]
};

console.log(deep_value(someObject, "part1.name"));               // Part 1
console.log(deep_value(someObject, "part2.qty"));                // 60
console.log(deep_value(someObject, "part3[0].name"));            // Part 3A
console.log(deep_value(someObject, "part3[0].....name"));        // Part 3A - invalid blank paths removed
console.log(deep_value(someObject, "pa[rt3[0].name"));           // undefined - name does not support square brackets

以防万一，有人在 2017 年或以后访问这个问题并寻找一种易于记忆的方式，这里有一篇关于在 JavaScript 中访问嵌套对象而不会被迷惑的详细博客文章

无法读取未定义错误的属性“foo”

使用 Array Reduce 访问嵌套对象

让我们以这个示例结构为例

const user = {
    id: 101,
    email: '[email protected]',
    personalInfo: {
        name: 'Jack',
        address: [{
            line1: 'westwish st',
            line2: 'washmasher',
            city: 'wallas',
            state: 'WX'
        }]
    }
}

为了能够访问嵌套数组，您可以编写自己的数组 reduce util。

const getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== undefined) ? obj[key] : undefined, nestedObj);
}

// pass in your object structure as array elements
const name = getNestedObject(user, ['personalInfo', 'name']);

// to access nested array, just pass in array index as an element the path array.
const city = getNestedObject(user, ['personalInfo', 'address', 0, 'city']);
// this will return the city from the first address item.

还有一个出色的类型处理最小库类型，可以为您完成所有这些工作。

使用 typy，您的代码将如下所示

const city = t(user, 'personalInfo.address[0].city').safeObject;

免责声明：我是这个包的作者。

我正在用 React 开发在线商店。我尝试更改复制状态对象中的值，以在提交时更新原始状态。 上面的例子对我不起作用，因为它们中的大多数都改变了复制对象的结构。我找到了用于访问和更改深度嵌套对象属性值的函数的工作示例： https://lowrey.me/create-an-object-by-path-in-javascript-2/ 这里是：

const createPath = (obj, path, value = null) => {
  path = typeof path === 'string' ? path.split('.') : path;
  let current = obj;
  while (path.length > 1) {
    const [head, ...tail] = path;
    path = tail;
    if (current[head] === undefined) {
      current[head] = {};
    }
    current = current[head];
  }
  current[path[0]] = value;
  return obj;
};

您可以使用库。ramda

学习还可以帮助您轻松处理不可变对象。ramda

var obj = {
  a:{
    b: {
      c:[100,101,{
        d: 1000
      }]
    }
  }
};


var lens = R.lensPath('a.b.c.2.d'.split('.'));
var result = R.view(lens, obj);

https://codepen.io/ghominejad/pen/BayJZOQ

根据 Alnitak 的回答。

我把 polyfill 包装在一个检查中，并将函数简化为单个链式缩减。

if (Object.byPath === undefined) {
  Object.byPath = (obj, path) => path
    .replace(/\[(\w+)\]/g, '.$1')
    .replace(/^\./, '')
    .split(/\./g)
    .reduce((ref, key) => key in ref ? ref[key] : ref, obj)
}

const data = {
  foo: {
    bar: [{
      baz: 1
    }]
  }
}

console.log(Object.byPath(data, 'foo.bar[0].baz'))

如果你想要一个可以正确检测和报告路径解析任何问题细节的解决方案，我为此编写了自己的解决方案 - 库路径值。

const {resolveValue} = require('path-value');

resolveValue(someObject, 'part1.name'); //=> Part 1
resolveValue(someObject, 'part2.qty'); //=> 50
resolveValue(someObject, 'part3.0.name'); //=> Part 3A

请注意，对于索引，我们使用 ，而不是 ，因为解析后者会增加性能损失，而直接在 JavaScript 中工作，因此速度非常快。.0[0].0

但是，也支持完整的 ES5 JavaScript 语法，只需要先进行标记化：

const {resolveValue, tokenizePath} = require('path-value');

const path = tokenizePath('part3[0].name'); //=> ['part3', '0', 'name']

resolveValue(someObject, path); //=> Part 3A

这可以通过将逻辑拆分为三个单独的函数来简化：

const isVal = a => a != null; // everything except undefined + null

const prop = prop => obj => {
    if (isVal(obj)) {
        const value = obj[prop];
        if (isVal(value)) return value;
        else return undefined;
    } else return undefined;
};

const path = paths => obj => {
    const pathList = typeof paths === 'string' ? paths.split('.') : paths;
    return pathList.reduce((value, key) => prop(key)(value), obj);
};

//usage:
const myObject = { foo: { bar: { baz: 'taco' } } };
const result = path('foo.bar')(myObject);
//results => { baz: 'taco' }

此变体支持：

• 传递数组或字符串参数
• 在调用和执行期间处理值undefined
• 独立测试每个功能
• 独立使用每个函数

与其尝试模拟 JS 语法，您将不得不花费大量计算解析，或者只是出错/忘记诸如一堆答案（带有 s 的键，有人吗？），只需使用一组键即可。.

var part1name     = Object.get(someObject, ['part1', 'name']);
var part2quantity = Object.get(someObject, ['part2', 'qty']);
var part3name1    = Object.get(someObject, ['part3', 0, 'name']);

如果您需要改用单个字符串，只需对其进行 JSONify 即可。
此方法的另一个改进是您可以删除/设置根级对象。

function resolve(obj, path) {
    let root = obj = [obj];
    path = [0, ...path];
    while (path.length > 1)
        obj = obj[path.shift()];
    return [obj, path[0], root];
}
Object.get = (obj, path) => {
    let [parent, key] = resolve(obj, path);
    return parent[key];
};
Object.del = (obj, path) => {
    let [parent, key, root] = resolve(obj, path);
    delete parent[key];
    return root[0];
};
Object.set = (obj, path, value) => {
    let [parent, key, root] = resolve(obj, path);
    parent[key] = value;
    return root[0];
};

其他功能演示：

除非您的路径可能为空（操作根对象），否则 for / 不是必需的。
我证明我不会通过保留对原始对象的引用并首先检查来克隆对象bob = .set(.del(stevebob == steve //true.set(

DotObject = obj => new Proxy(obj, {
  get: function(o,k) {
    const m = k.match(/(.+?)\.(.+)/)
    return m ? this.get(o[m[1]], m[2]) : o[k]
  }
})

const test = DotObject({a: {b: {c: 'wow'}}})
console.log(test['a.b.c'])