如何将 Javascript 中的对象数组解构为 ES6 中的两个预定义变量？答案

【问题标题】：How can you destructure an array of objects in Javascript into two predefined variables in ES6?如何将 Javascript 中的对象数组解构为 ES6 中的两个预定义变量？
【发布时间】：2019-03-08 17:00:28
【问题描述】：

我有一个数组，其中包含一个这种形式的对象：数组 = [ { 类型：类型，消息：消息 } ]

我不断收到 ESLint 错误，要求我使用对象解构和数组解构。

目前我的代码如下所示：

let type=null;
let message=null;
if (data.length > 0) {
  ({ type, message } = data[0]);
}

到目前为止，这可行，并且我的变量已正确分配，但是我仍然从 ESLint 收到“使用数组解构”消息。

对此的任何帮助将不胜感激。谢谢

【问题讨论】：

let [{ type, message }] = data 虽然我真的很讨厌这样
我不想这样做，因为如果数据数组为空，我希望类型和消息变量保持等于 null :(
@VittorioGuerrera 如果数组为空，解构行甚至不会因为你的if 而被执行？
@VittorioGuerrera 然后使用默认值
哦，对不起，伙计们，我现在的时间还早，到目前为止，这些都有效。非常感谢！

标签： javascript arrays ecmascript-6 javascript-objects destructuring

【解决方案1】：

你可以解构数组：

let type=null;
let message=null;
if (data.length > 0) {
  [{ type, message }] = data;
}

上面的代码是一个较短的版本：

[ firstElement ] = data;  // array destructruring
({ type, message } = firstElement);  // object destructuring

【讨论】：

这似乎奏效了！你觉得你能告诉我为什么吗？假设数组有多个对象，那我该怎么做呢？
即使数组中有多个对象也能正常工作。
@V1cst3r - 正如 Faly 所说，如果数组中还有其他对象，这将正常工作。当然，它不会抢占它们的属性；这只会查看数组中的第一个对象。

【解决方案2】：

Faly's way 很好。解构时也可以使用默认值：

function test(label, data) {
  // 1 -----------------------------vvvvv
  let [{type = null, message = null} = {}] = data;
  // 2 -----^^^^^^^---------^^^^^^^
  console.log(label, type, message);
}
test("test1: ", []);
test("test2: ", [{type: "t"}]);
test("test3: ", [{type: "t", message: "m"}]);

这是有效的，因为如果data.length 是0，data[0] 是undefined，则触发使用默认值{} (1) 作为数组部分；在对象部分中，我们也使用null (2) 来处理对象上的任何缺失值。

【讨论】：

【解决方案3】：

EsLint 想让你写

let type = null;
let message = null;
if (data.length > 0) {
  [{ type, message }] = data;
}

它将可迭代data 的第一项解构为{type, message} 目标。（更多项目被忽略）。

不过，我建议对空的情况使用默认值：

const [{type, message} = {type:null, message:null}] = data;

也可以

const [{type = null, message = null} = {}] = data;

【讨论】：

const [{type, message} = {type:null, message:null}] = data; 如果对象存在但没有相关属性（这就是我使用第二个属性的原因:-)），则可能会得到undefined 而不是null。跨度>
@T.J.Crowder ...如果对象存在并且具有所需值undefined 的相应属性，则可能会得到null 而不是undefined。两者都不完全等同于带有if 语句的详细语句。我认为这不重要。