AngularJS

Question

我有一个数组

fruit={sweet:'apple',dry:{f1:'raisin',f2:'almond'},sour:'strawberry'}

它包含简单和嵌套对象作为项

我可以使用fruit[0]["dry"]["f1"]之类的括号表示法来引用f1 但我有一个字符串变量，其值为var str="dry.f1"

"str"在运行时更改的值可能是"sweet"或"dry.f1"或"sour"

如何使用"str"引用数组项如果str的值为“sweet"或"sour" fruit[str]正常

我们可以使用fruit[0].dry.f1获取f1的值，但我需要使用变量str

来访问它

Answer 1

您可以使用split和reduce：

var fruit={sweet:'apple',dry:{f1:'raisin',f2:'almond'},sour:'strawberry'};

var str1 = "dry.f1";
var str2 = "sweet";

var example1 = str1.split('.').reduce((a, b) => a[b], fruit);
var example2 = str2.split('.').reduce((a, b) => a[b], fruit);

console.log(example1);
console.log(example2);

这会将 split 上的每个点上的字符串转换为数组，然后通过迭代来自中的值来 reduce 水果数组string，将它们应用于fruit数组，以获得您正在寻找的值。

Answer 2

给定数组：

fruit={sweet:'apple',dry:{f1:'raisin',f2:'almond'},sour:'strawberry'}

你的字符串：

var str="dry.f1"

要查找值fruit.dry.f1，您基本上需要为"dry.f1"

编写解析器

有很多库可以解决这个问题。我举一个例子。

AngularJS

此类解析器的示例存在，例如angular 1.x＆＃39; $parse：https://docs.angularjs.org/api/ng/service/$parse

var getter = $parse('dry.f1');
var setter = getter.assign;
var context = {sweet:'apple',dry:{f1:'raisin',f2:'almond'},sour:'strawberry'}

expect(getter(context)).toEqual('raisin');

Lodash

Lodash采用get方法：https://lodash.com/docs/4.17.4#get

Answer 3

您可以创建一个条件的if语句，用str.indexOf('.')检查字符串是否有点并执行

fruit[str]

或者

fruit[str1][str2]

Answer 4

为了访问给定路径的对象中的值，我们必须编写一个函数来搜索对象内部的值路径。

使用split和reduce，我们使用split将路径分解为路径中以点分隔的值数组（即"dry.f1"变为{{ 1}}）。然后我们使用["dry", "f1"]迭代数组中的这些值，在每次迭代中深入到对象，直到我们得到我们的值：

reduce

例如，function findValueByPath(obj, path) { return path.split(".").reduce(function(objSoFar, currPath) { return objSoFar[currPath]; }, obj); }返回5.

Click here详细了解reduce。 Click here了解有关split的更多信息。

作为旁注，此问题通常由Lodash等库实现，Lodash具有完全相同的函数findValueByPath( {a: { b: 5 } } , "a.b")（Lodash中的get文档click here。 / p>

如何使用字符串引用对象数组项？

4 个答案:

AngularJS

Lodash