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

Question

我有一个包含以下形式的一个对象的数组： Array = [ { 类型：类型，消息：消息} ]

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

目前我的代码如下所示：

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

到目前为止这是有效的并且我的变量被正确分配，但是我仍然从 ESLint 收到 "Use array destructuring" 消息。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

你可以解构数组：

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

以上代码是以下代码的简化版本：

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

Answer 2

不错。解构时也可以使用默认值：

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) 来处理对象上的任何缺失值。

Answer 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;

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

How can you destructure an array of objects in Javascript into two predefined variables in ES6?

javascript

arrays

destructuring

javascript-objects

ecmascript-6