javascript - 访问多个嵌套对象

Question

我正在为我的应用程序(Angular JS 应用程序 - 但这是一个关于 JS 的问题，而不是 Angular 的问题)。

我已经设置了一个服务来设置数据、获取数据等。

看起来是这样的:

angular.module('core').factory('dataService', function(callsService) {
  let properties = {
    globalData: {}
  };

  properties.insertData = function(data) {
    for (let x in data) {
      this.globalData[x] = data[x];
    }
    return;
  }

  properties.getData = function(data) {
    return this.globalData[data];
  }

  return properties;
});

使用该服务会像这样:

dataService.insertData({foo: 'bar'});
dataService.getData('foo'); // 'bar'

然而，当存在嵌套数据时，它就会成为一个问题，如下所示:

dataService.insertData({foo: {bar: 'hello world'}});
dataService.getData('foo'); // {bar: 'hello world'}

这显然是对象引用的工作方式，但我怎么能传递类似这样的东西:

dataService.getData('foo.bar'); // 'hello world'

或

dataService.getData('[foo][bar]'); // 'hello world'

回到我的 properties.getData 方法，有没有办法递归(或其他方式)访问嵌套对象？

properties.getData = function(data) {
  return this.globalData[data]; // needs to be able to get nested objects
}

Answer 1

更新的答案:

我认为这个递归的单行代码将完全满足您的需求:

properties.getData = (args, data) => args.length ? this.getData(args.slice(1), data ? data[args[0]] : this.globalData[args[0]]) : data ? data : this.globalData

在数组中使用无限数量的属性参数或数组索引调用它，如下所示:

dataService.getData(['arrayOfData', 2, 'propOnArrElement', 'subProp', 'desiredValue'])

解释:

函数的“签名”类似于

getData(args: Array, data?: any): 任何,

这意味着:

1. 它采用数组作为第一个参数(包含您希望遍历以获取嵌套数据的属性/索引的踪迹)
2. 它将我们查询的数据结构作为可选的第二个参数(当然，这必须是对象或数组)
3. 它将返回所需的数据，可以是任何类型。

工作原理:

当函数被调用时，

• 不应该定义第二个参数，这样服务就可以到达 globalData 对象，我们稍后会看到。
• 检查 args 数组的长度 (args.length ?)，并且
  • 如果它有元素，则进行递归调用 (this.getData(),
    • 但这一次，我们将从 args 数组 (args.slice(1),) 中删除第一个 arg，
    • 并且数据参数将被(重新)包含(data ?)。
      • 如果它是在最近的递归调用中定义的，则第一个 arg 元素用于访问数据对象/数组上的该属性(或索引)(data[args[0]] :),
      • 但是如果它还没有被定义(比如在初始函数调用中)，递归调用将使用 globalData 属性来代替 (this.globalData[args[0]])。
  • 随着函数继续其递归过程，数据结构正在缩小到更深层次的数据，并且参数列表正在减少。
    • 一旦 args 长度解析为 false(没有更多的 args 需要探索!)，函数不会返回另一个递归调用，而是简单地返回当前数据对象(: data ? data)。
    • 如果使用空数组调用此函数，将返回整个 globalData (: this.globalData)。

我希望你觉得这对你有帮助，或者至少是愉快的阅读。当今晚淋浴时这个解决方案突然出现在我的脑海中时，我真的很兴奋。 :P

奖励 Material

这是一个类似(甚至更好)的方法，使用 ES6 剩余参数和 Array.reduce(这将允许您在不传递数组的情况下调用函数):

properties.getData = (...args) => args.reduce((data, arg) => data[arg], this.globalData)

这样调用:

dataService.getData('firstarg', 'secondarg', 'onemorearg', 'desireddata')

原始的，不满意的答案:

由于您返回数据，您可以简单地直接在函数调用时访问该属性:

const nestedVal = dataService.getData(‘foo’).bar

或者:

const nestedVal = dataService.getData(‘foo’)[‘bar’]