我的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';
});
},
}
在运行Es-lint时。在此行,我在this.message = res.response.data.errors[0];
处收到一个错误消息,提示“使用数组分解”(首选分解)。什么是数组销毁以及如何执行此操作?请为此提供一个概念。我已经研究过,但无法弄清楚
答案 0 :(得分:5)
目标化是在分配的左侧使用类似于结构的语法,以将右侧的结构元素分配给各个变量。例如,
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
列出了它认为是“正确”的内容。
答案 1 :(得分:4)
U可以将该行重写为[this.message] = res.response.data.errors;
,并且es-lint错误将消失。请参阅此示例以更好地了解
var x = {
y: {
z: {
w: [3, 4]
}
}
};
function foo() {
[this.a] = x.y.z.w
console.log(this.a);
}
foo() // prints 3
有关数组销毁的更多信息,请see here
答案 2 :(得分:1)
如果您想了解有关JavaScript的内容,请始终在MDN上查找内容。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring
这是一个简单的解构示例:
const [a, b] = ['a', 'b'];
它是从es6开始可用的简写形式,它允许以更简捷的方式进行变量分配。
原始方式如下:
const arr = ['a', 'b'];
const a = arr[0];
const b = arr[1];
ES6的方式将是:
const arr = ['a', 'b'];
const [a, b] = arr;
现在关于陪同错误,我实际上不同意。您的代码本身应该没问题。因此,您应该在Eslint github存储库上提交一个问题,以询问该行为何触发“首选破坏”警告。
答案 3 :(得分:0)
在给定的destructuring assignments之外,如果您想采用某些元素(例如数组的第11和15元素),则可以对数组进行对象分解。
在这种情况下,您需要将object property assignment pattern [YDKJS: ES6 & Beyond]与新的变量名一起使用,因为您不能将变量作为数字。
var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
{ 11: a, 15: b } = array;
console.log(a, b);
答案 4 :(得分:0)
解构是一种从存储在(可能嵌套的)对象和数组中的数据中提取多个值的方法。它可以用于接收数据的位置或作为对象的值。我们将通过一些例子来说明如何使用解构:
阵列销毁
数组解构适用于所有可迭代的值
const iterable = ['a', 'b'];
const [x, y] = iterable;
// x = 'a'; y = 'b'
解构有助于处理返回值
const [all, year, month, day] =
/^(\d\d\d\d)-(\d\d)-(\d\d)$/
.exec('2999-12-31');
对象分解
const obj = { first: 'Jane', last: 'Doe' };
const {first: f, last: l} = obj;
// f = 'Jane'; l = 'Doe'
// {prop} is short for {prop: prop}
const {first, last} = obj;
// first = 'Jane'; last = 'Doe'
使用解构的示例
// Variable declarations:
const [x] = ['a'];
let [x] = ['a'];
var [x] = ['a'];
// Assignments:
[x] = ['a'];
// Parameter definitions:
function f([x]) { ··· }
f(['a']);
// OR USE IT IN A FOR-OF loop
const arr = ['a', 'b'];
for (const [index, element] of arr.entries()) {
console.log(index, element);
}
// Output:
// 0 a
// 1 b
解构模式
任何破坏都涉及两个方面
销毁目标是以下三种模式之一:
这意味着您可以任意深度嵌套图案:
const obj = { a: [{ foo: 123, bar: 'abc' }, {}], b: true };
const { a: [{foo: f}] } = obj; // f = 123
**模式如何访问值的内部? **
在访问属性之前,对象模式会强制将解构源代码化为对象。这意味着它可以使用原始值。使用ToObject()将对象强制转换为将原始值转换为包装器对象,并使对象保持不变。遇到Undefined或Null会引发类型错误。可以使用空对象模式来检查值是否对对象强制,如下所示:
({} = [true, false]); // OK, Arrays are coercible to objects
({} = 'abc'); // OK, strings are coercible to objects
({} = undefined); // TypeError
({} = null); // TypeError
数组解构使用迭代器来获取源元素。因此,您可以对任何可迭代的值进行数组解构。
示例:
// Strings are iterable:
const [x,...y] = 'abc'; // x='a'; y=['b', 'c']
// set value indices
const [x,y] = new Set(['a', 'b']); // x='a'; y='b’;
如果值具有键为symbol.iterator且返回对象的方法,则该值是可迭代的。如果要解构的值不可迭代,则数组解构将引发TypeError
示例:
let x;
[x] = [true, false]; // OK, Arrays are iterable
[x] = 'abc'; // OK, strings are iterable
[x] = { * [Symbol.iterator]() { yield 1 } }; // OK, iterable
[x] = {}; // TypeError, empty objects are not iterable
[x] = undefined; // TypeError, not iterable
[x] = null; // TypeError, not iterable
// TypeError is thrown even before accessing elements of the iterable which means you can use empty Array pattern [] to check if value is iterable
[] = {}; // TypeError, empty objects are not iterable
[] = undefined; // TypeError, not iterable
[] = null; // TypeError, not iterable
可以设置默认值
可以将默认值设置为后备
示例:
const [x=3, y] = []; // x = 3; y = undefined
未定义会触发默认值