javascript - JavaScript 中的数组解构

Question

我的 vue-js 应用程序中有以下代码:

methods: {
    onSubmit() {
      ApiService.post('auth/sign_in', {
        email: this.email,
        password: this.password,
      })
        .then((res) => {
          saveHeaderToCookie(res.headers);
          this.$router.push({ name: 'about' });
        })
        .catch((res) => {
          this.message = res.response.data.errors[0];
          this.msgStatus = true;
          this.msgType = 'error';
        });
    },
  }

运行Eslint时，我在这一行收到一个错误，提示“使用数组解构”(prefer-destructuring):

this.message = res.response.data.errors[0];

什么是数组解构以及如何执行此操作？请给我一个关于这个的概念。我研究过，但无法弄清楚。

Answer 1

解构是在赋值的左侧使用类似结构的语法，将右侧结构的元素分配给各个变量。例如，

let array = [1, 2, 3, 4];
let [first, _, third] = array;

解构数组[1, 2, 3]并将各个元素分配给first和third(_ 作为占位符，使其跳过第二个元素)。由于 LHS 比 RHS 短，因此 4 也会被忽略。它相当于:

let first = array[0];
let third = array[2];

还有一个对象解构赋值:

let object = {first: 1, second: 2, third: 3, some: 4};
let {first, third, fourth: some} = object;

这相当于

let first = object.first;
let third = object.third;
let fourth = object.some;

也允许使用扩展运算符:

let [first, ...rest] = [1, 2, 3];

会将 1 分配给 first，将 [2, 3] 分配给 rest。

在您的代码中，它说您可以这样做:

[this.message] = res.response.data.errors;

The documentation on prefer-destructuring列出了它认为“正确”的内容。