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

Question

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

675

我有一个类似这样的数据结构：

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'
        }, {
            'name': 'Part 3B',
            'size': '5',
            'qty' : '20'
        }, {
            'name': 'Part 3C',
            'size': '7.5',
            'qty' : '20'
        }
    ]
};

我希望可以使用这些变量来访问数据:

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

part1name应该填写someObject.part1.name的值，即"Part 1"。part2quantity同理，应填写60。

是否有办法使用纯JavaScript或JQuery实现这一点？

- Komaruloh

不确定你在这里问什么？你想查询part1.name并返回文本"part1.name"吗？还是你想要一种方法来获取存储在part1.name中的值？ - BonyT

你尝试过像这样做吗：var part1name = someObject.part1name; - Rafay

1

@BonyT：我想查询someObject.part1.name并返回它的值（“Part 1”）。但是，我希望查询（我称之为“键”）存储在变量'part1name'中。感谢您的回复。@3nigma：我当然可以这样做。但这不是我的意图。感谢回复。 - Komaruloh

1

在重复的答案中，我喜欢fyr的回答。https://dev59.com/Gmoy5IYBdhLWcg3wCpoz - Steve Black

1

请参见将JavaScript点符号表示的字符串转换为对象引用。 - Bergi

显示剩余2条评论

46个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- abernier · Answer 1

最近我有同样的问题，成功使用了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

- vincent · Answer 2

使用object-scan，这变成了一行代码。然而更重要的是，此解决方案考虑了性能：

在搜索期间只遍历输入一次（即使查询多个键）
仅在初始化时解析一次（如果查询多个对象）
允许使用*进行扩展语法

// const objectScan = require('object-scan');

const 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' }, { name: 'Part 3B', size: '5', qty: '20' }, { name: 'Part 3C', size: '7.5', qty: '20' }] };

const get = (haystack, needle) => objectScan([needle], { rtn: 'value', abort: true })(haystack);

console.log(get(someObject, 'part1.name'));
// => Part 1
console.log(get(someObject, 'part2.qty'));
// => 60
console.log(get(someObject, 'part3[0].name'));
// => Part 3A

const getAll = (haystack, ...needles) => objectScan(needles, { reverse: false, rtn: 'entry', joined: true })(haystack);

console.log(getAll(someObject, 'part1.name', 'part2.qty', 'part3[0].name'));
/* =>
[ [ 'part1.name', 'Part 1' ],
  [ 'part2.qty', '60' ],
  [ 'part3[0].name', 'Part 3A' ] ]
 */

console.log(getAll(someObject, 'part1.*'));
/* =>
[ [ 'part1.name', 'Part 1' ],
  [ 'part1.size', '20' ],
  [ 'part1.qty', '50' ] ]
 */

.as-console-wrapper {max-height: 100% !important; top: 0}

<script src="https://bundle.run/object-scan@13.8.0"></script>

免责声明: 我是object-scan的作者。

- Ben Aston · Answer 3

请注意，以下内容并非所有有效的Unicode属性名称都适用（但我想其他答案也同样如此）。

const PATTERN = /[\^|\[|\.]([$|\w]+)/gu

function propValue(o, s) {
    const names = []
    for(let [, name] of [...s.matchAll(PATTERN)]) 
        names.push(name)
    return names.reduce((p, propName) => {
        if(!p.hasOwnProperty(propName)) 
            throw 'invalid property name'
        return p[propName]
    }, o)
}

let path = 'myObject.1._property2[0][0].$property3'
let o = {
    1: {
        _property2: [
            [{
                $property3: 'Hello World'
            }]
        ]
    }
}
console.log(propValue(o, path)) // 'Hello World'

- Oboo Cheng · Answer 4

// (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"]));

- Mohamad Hamouday · Answer 5

受@webjay答案启发: https://dev59.com/XGMk5IYBdhLWcg3w0hI-#46008856 我编写了这个函数，您可以使用它来获取/设置/取消设置对象中的任何值。

function Object_Manager(obj, Path, value, Action) 
{
    try
    {
        if(Array.isArray(Path) == false)
        {
            Path = [Path];
        }

        let level = 0;
        var Return_Value;
        Path.reduce((a, b)=>{
            level++;
            if (level === Path.length)
            {
                if(Action === 'Set')
                {
                    a[b] = value;
                    return value;
                }
                else if(Action === 'Get')
                {
                    Return_Value = a[b];
                }
                else if(Action === 'Unset')
                {
                    delete a[b];
                }
            } 
            else 
            {
                return a[b];
            }
        }, obj);
        return Return_Value;
    }

    catch(err)
    {
        console.error(err);
        return obj;
    }
}

使用方法如下：

 // Set
 Object_Manager(Obj,[Level1,Level2,Level3],New_Value, 'Set');

 // Get
 Object_Manager(Obj,[Level1,Level2,Level3],'', 'Get');

 // Unset
 Object_Manager(Obj,[Level1,Level2,Level3],'', 'Unset');

- georgeawg · Answer 6

AngularJS有`$scope.$eval`

使用AngularJS，可以使用$scope.$eval方法访问嵌套对象：

$scope.someObject = someObject;
console.log( $scope.$eval("someObject.part3[0].name") ); //Part 3A

更多信息，请参见

AngularJS $scope API 参考 - $eval

演示

angular.module("app",[])
.run(function($rootScope) {
     $rootScope.someObject = {
         'part2' : {
              'name': 'Part 2',
              'size': '15',
              'qty' : '60'
         },
         'part3' : [{
              'name': 'Part 3A',
              'size': '10',
              'qty' : '20'
         },{
              name: 'Part 3B'           
         }]
     };
     console.log(
         "part3[0].name =",
         $rootScope.$eval("someObject.part3[0].name")
    );
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app"
</body>

- Re9iNee · Answer 7

我查看了所有其他答案，决定将改进添加到更易读的代码中：

function getObjectValByString(obj, str) {
if (typeof obj === "string") return obj;

const fields = str.split(".");

return getObjectValByString(obj[fields[0]], fields.slice(1).join("."));}

以下是代码片段：

let someObject = {
    partner: {
        id: "AIM",
        person: {
            name: "ANT",
            an: { name: "ESM" },
        },
    },
};

function getObjectValByString(obj, str) {
    if (typeof obj === "string") return obj;

    const fields = str.split(".");

    return getObjectValByString(obj[fields[0]], fields.slice(1).join("."));
}

const result = getObjectValByString(someObject, "partner.person.an.name");
console.log({
    result,
});

- ayushgp · Answer 8

这里的解决方案仅适用于访问深度嵌套的键。我需要一个可以访问、添加、修改和删除键的方法。这就是我想出来的：

var deepAccessObject = function(object, path_to_key, type_of_function, value){
    switch(type_of_function){
        //Add key/modify key
        case 0: 
            if(path_to_key.length === 1){
                if(value)
                    object[path_to_key[0]] = value;
                return object[path_to_key[0]];
            }else{
                if(object[path_to_key[0]])
                    return deepAccessObject(object[path_to_key[0]], path_to_key.slice(1), type_of_function, value);
                else
                    object[path_to_key[0]] = {};
            }
            break;
        //delete key
        case 1:
            if(path_to_key.length === 1){
                delete object[path_to_key[0]];
                return true;
            }else{
                if(object[path_to_key[0]])
                    return deepAccessObject(object[path_to_key[0]], path_to_key.slice(1), type_of_function, value);
                else
                    return false;
            }
            break;
        default:
            console.log("Wrong type of function");
    }
};

path_to_key: 数组中的路径。您可以用string_path.split(".")替换它。
type_of_function：0表示访问（不要将任何值传递给value），0表示添加和修改，1表示删除。

- Jodo · Answer 9

可以使用数组来访问嵌套对象和数组而不是字符串，例如：["my_field", "another_field", 0, "last_field", 10]

这里有一个示例，可以根据此数组表示更改字段。我在react.js中使用类似的东西来控制输入字段，以更改嵌套结构的状态。

let state = {
        test: "test_value",
        nested: {
            level1: "level1 value"
        },
        arr: [1, 2, 3],
        nested_arr: {
            arr: ["buh", "bah", "foo"]
        }
    }

function handleChange(value, fields) {
    let update_field = state;
    for(var i = 0; i < fields.length - 1; i++){
        update_field = update_field[fields[i]];
    }
    update_field[fields[fields.length-1]] = value;
}

handleChange("update", ["test"]);
handleChange("update_nested", ["nested","level1"]);
handleChange(100, ["arr",0]);
handleChange('changed_foo', ["nested_arr", "arr", 3]);
console.log(state);

- Jonan Gueorguiev · Answer 10

这个解决方案怎么样？

setJsonValue: function (json, field, val) {
  if (field !== undefined){
    try {
      eval("json." + field + " = val");
    }
    catch(e){
      ;
    }
  }  
}

还有这个，用于获取：

getJsonValue: function (json, field){
  var value = undefined;
  if (field !== undefined) {
    try {
      eval("value = json." + field);
    } 
    catch(e){
      ;
    }
  }
  return value;
};

可能有些人会认为它们不安全，但它们肯定比解析字符串要快得多。

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

AngularJS有$scope.$eval

演示

AngularJS有`$scope.$eval`