javascript - 如何从包含字符串、对象和数组的 Javascript 对象中检索动态指定的、任意的和深度嵌套的值？

Question

更新:虽然下面答案中提供的代码很有值(value)，但可以找到此问题及其答案的改进版本 here .

编辑:更正示例数据对象并简化(希望)问题

目标:给定以下对象，函数应通过其所有嵌套解析该对象并返回对应于键路径字符串参数的值，该参数可能是一个简单的字符串，或包含方括号/点分符号。该解决方案应该适用于 Angular(纯 JavaScript、TypeScript，一个适用于 Angular 的库)。

我的目标:

const response = {
  "id": "0",
  "version": "0.1",
  "interests": [ {
    "categories": ["baseball", "football"],
    "refreshments": {
      "drinks": ["beer", "soft drink"],
    }
  }, {
    "categories": ["movies", "books"],
    "refreshments": {
      "drinks": ["coffee", "tea"]
    }
  } ],
  "goals": [ {
    "maxCalories": {
      "drinks": "350",
      "pizza": "700",
    }
  } ],
}

初始函数是:

function getValues(name, row) {
  return name
    .replace(/\]/g, '') 
    .split('[')
    .map(item => item.split('.'))
    .reduce((arr, next) => [...arr, ...next], [])
    .reduce ((obj, key) => obj && obj[key], row);
}

因此，如果我们运行 getValues("interests[refreshments][drinks]", response); 函数应该返回一个包含所有适用值的数组:["beer", "soft drink", “咖啡”, “茶”].

以上对于简单的字符串键工作正常。 getRowValue("version", response) 按预期产生“0.1”。但是，getRowValue("interests[refreshments][drinks]", response) 返回 undefined。

我爬过 this以及许多相关链接，但我很难理解如何处理对象的复杂性质。

Answer 1

这是一个使用 object-scan 的解决方案.

唯一棘手的部分是将搜索输入转换为对象扫描所期望的内容。

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

const response = { id: '0', version: '0.1', interests: [{ categories: ['baseball', 'football'], refreshments: { drinks: ['beer', 'soft drink'] } }, { categories: ['movies', 'books'], refreshments: { drinks: ['coffee', 'tea'] } }], goals: [{ maxCalories: { drinks: '350', pizza: '700' } }] };

const find = (haystack, needle) => {
  const r = objectScan(
    [needle.match(/[^.[\]]+/g).join('.')],
    { rtn: 'value', useArraySelector: false }
  )(haystack);
  return r.length === 1 ? r[0] : r.reverse();
};

console.log(find(response, 'interests[categories]'));
// => [ 'baseball', 'football', 'movies', 'books' ]
console.log(find(response, 'interests.refreshments.drinks'));
// => [ 'beer', 'soft drink', 'coffee', 'tea' ]
console.log(find(response, 'goals[maxCalories][drinks]'));
// => 350

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

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

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