JavaScript ES6 - 仅采用嵌套 JSON 数组的某些键/部分的简洁方法？答案

【问题标题】：JavaScript ES6 - Concise way to take only certain keys/parts of a nested JSON array?JavaScript ES6 - 仅采用嵌套 JSON 数组的某些键/部分的简洁方法？
【发布时间】：2017-11-30 23:27:27
【问题描述】：

我有一个 JSON 数据数组，存储在我的应用程序的状态中。它包括详细页面所需的属性（大约 10 个不同的字段）。

我的列表视图只需要其中两个。例如：

[
  {
    "id": 1,
    "title": 'Derp',
    "subtitle: 'Derp',
    "another": 'Derp,
    //... more attributes
  },
  {
    "id": 2,
    // ... etc
  }
]

我的列表视图只关心 id、title 和 subtitle。获取相同数据的最简洁方法是什么，但只能使用我指定的键？

我应该使用地图吗？还是解构？

编辑：尽管警察出现了努力，但非常感谢您的回答。这对我帮助很大，我确实尝试了一段时间来弄清楚如何做到这一点。我来自 Ruby，所以 ES6 不是我的强项。

用例是仅从包含所有数据属性的全局 Redux 存储中返回 React 组件所需的内容。例如，我的列表视图只需要来自 JSON 数据的 2/3 属性。我正在使用 redux selectors 来执行此操作。

第二个/post问题：这种方法有什么名字吗，你只取JSON的一部分吗？我想创建一个在 redux 选择器中执行此操作的方法，并且我需要想出一个名称。我想称它为 reducer，但这并不完全有效，因为在 Redux 世界中已经使用术语 reducer 来表示修改状态的方法。

【问题讨论】：

你有JSON 还是你有一个对象数组？
@Xotic750 抱歉，我不太确定有什么区别。它是一个 JSON 文件？那是代码？你能告诉我吗？
@Xotic750 在我看来两者都像？我想了解其中的区别。
JSON 始终是序列化对象或原语的字符串。
如果它是.json 文件，那么它只是格式化的 JSON。我假设您在nodejs 上执行此操作？这意味着您无需解析文件，因为当您 require 或 import 时，您只需在代码中获得一组对象即可。因此，您可以像 @NinaScholz 所展示的那样访问它。 :)

标签： javascript ecmascript-6 redux

【解决方案1】：

您可以将值映射到解构和重构的对象。

Destructuring assignment:

解构赋值语法是一种 JavaScript 表达式，它可以将数组中的值或对象中的属性解包到不同的变量中。
var a, b;
({a, b} = {a: 10, b: 20});
console.log(a); // 10
console.log(b); // 20

Shorthand property names

var a = 'foo', b = 42, c = {};
var o = {a, b, c};

var data = [{ id: 1, title: 'Derp', subtitle: 'Derp', another: 'Derp', bla: 42 }, { id: 2, title: 'Derp', subtitle: 'Derp', another: 'Derp', bla: 42 }],
    short = data.map(({ id, title, subtitle }) => ({ id, title, subtitle }));

console.log(short);

【讨论】：

啊。我看到了类似的 stackoverflow 帖子，但无法将示例放在一起。这样就更清楚了！
Aww，FWIW：重建不像 ({ x.id, x.title, .. }) 那样工作。（C# 具有与匿名类型类似的功能，它会提取“。”之后的位作为字段名称.. 而不是 ES6 的工作方式。）
@user2864740，您可以使用嵌套方法进行解构，例如({ x: { id, title } })。
顺便说一句，请参阅this Meta 帖子。我们不应该鼓励人们提出他们在解决问题方面几乎没有努力的问题。
@gregblass，我添加了需要操作的正确条款。

【解决方案2】：

var ele = [
  {
    "id": 1,
    "title": 'Derp',
    "subtitle": 'Derp',
    "another": 'Derp'
  },
  {
    "id": 2,
    "title": 'Derp',
    "subtitle": 'Derp',
    "another": 'Derp'
  }
]

console.log(ele.map(({id, title, subtitle}) => 
                    ({id, title, subtitle}) )  )

【讨论】：

【解决方案3】：

如果您确实拥有JSON，那么简洁的方法是使用JSON.parse 和reviver。

const j = '[{"id":1,"title":"Derp","subtitle":"Derp","another":"Derp"},{"id":2,"title":"Derp","subtitle":"Derp","another":"Derp"}]';

const w = ['id', 'title', 'subtitle'];
const o = JSON.parse(j, (k, v) => (v && typeof v === 'object' ? v : (w.some(i => i === k) ? v : void 0)));

console.log(o);

【讨论】：