【JavaScript/ESLint】Use array destructuringエラーが発生している（処理的には問題ない）

標題の件、Vue.jsで以下のコードを記述時に
Use array destructuringのエラーが発生しています。

動作的には、問題なく動いているのですが
なぜこの記述がESlintエラーとされているのか、腑に落ちない点があったため質問させていただきました。

    //　対象のコード
    hoge(e) {
      this.hogeState = e.target.files[0];
    },

【質問】
①：なぜ破壊的な処理だとされているのか？
②：このルールの正しいコードの例（ESLint公式参照）
：// With array enabled
var [ foo ] = array;
var foo = array[someIndex];
上記のように書いたら、１行増えるし、冗長かと感じています
どうでしょうか？
③：②はvue.js（this.hogeState）に置き換えると
どう記述するのが良いでしょうか？

（参考）ESLint公式（Use array destructuringについて）
https://eslint.org/docs/rules/prefer-destructuring

よろしくお願いいたします。

think49

2019/11/29 03:35 編集

試行錯誤する過程で概ね理解しましたが、質問が正しく伝わる為にも、「再現可能なコード」を開示することをお勧めします。コードの一部を切り出したものでは、再現できません。

行動規範の内容に同意します

回答1件

ベストアンサー

ESLint

ESLint Demo - ESLint

[prefer-destructuring] を有効にする(初期設定はオフ)

Use array destructuring

①：なぜ破壊的な処理だとされているのか？

"Use array destructuring" は

「配列の**分割代入(Destructuring assignment)**を使用せよ」

の意です(ESLintのドキュメントからそのように読み取れます))。
「破壊」ではありません。
ESLintがエラーを返すのは、分割代入を強制するオプションを有効に設定しているからです。

prefer-destructuring - Rules - ESLint - Pluggable JavaScript linter

再現コード

プロパティアクセサ + 代入式。

JavaScript
1'use strict';
2var files = ['ready','execute','complete'];
3var result = {state: ''};
4
5result.state = files[0]; // Use array destructuring
6console.log(result);  // {state: "ready"}

分割代入

分割代入の使用例1 (Google Chromeで正常動作するも、ESLintでParsing error)

JavaScript
1'use strict';
2var files = ['ready','execute','complete'];
3var result = {state: ''};
4
5[result.state] = files; // 5:1 - Parsing error: Assigning to rvalue
6console.log(result);  // {state: "ready"}

分割代入の使用例2 (Google Chromeで正常動作するも、ESLintでParsing error)

JavaScript
1'use strict';
2var files = ['ready','execute','complete'];
3var result = {state: ''};
4
5{"0":result} = files; // 5:1 - Parsing error: Assigning to rvalue
6console.log(result);  // {state: "ready"}