JavaScriptのオブジェクトと配列を破壊します-jsチュートリアル-php.cn

Destructuring Objects and Arrays in JavaScript

javascriptの解体と割り当て：コードを簡素化し、読みやすさを改善

JavaScriptの分解された割り当てにより、簡潔な構文を使用して配列またはオブジェクトから個々の要素を抽出し、変数に割り当て、コードを簡素化し、より明確かつ読みやすくすることができます。

API応答、機能的プログラミング、およびReactなどのフレームワークとライブラリなど、

分解と割り当てが広く使用されています。また、ネストされたオブジェクトと配列、デフォルトの関数パラメーター、可変値交換、関数からの複数の値を返す、ループのループ、および正規表現処理にも使用できます。

分解された割り当てを使用する場合、次のポイントに注意を払う必要があります。コードのブロックのように見えるため、カーリーブレースでステートメントを開始することはできません。エラーを回避するには、変数を宣言するか、変数が宣言されている場合はブラケットを使用します。また、宣言された変数と非宣言されていない変数の混合を避けるように注意してください。

分解割り当ての使用方法

配列の分解

配列があると仮定します：

分解は、各要素を抽出するためのより簡単でエラーが発生しない代替品を提供します：

const myArray = ['a', 'b', 'c'];

ログイン後にコピー

割り当て時に値名を省略することで特定の値を無視できます。たとえば、

const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'

ログイン後にコピー

または残りのオペレーター（...）を使用して、残りの要素を抽出します。

const [one, , three] = myArray;

// one = 'a', three = 'c'

ログイン後にコピー

オブジェクトの分解

const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']

ログイン後にコピー

解体はオブジェクトにも適用されます：

この例では、変数名は1、2、および3つの名前がオブジェクトプロパティ名と一致します。任意の名前の変数に属性を割り当てることもできます。

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
// ES6 解构示例
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'

ログイン後にコピー

ネストされたオブジェクトを分解

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};

// ES6 解构示例
const {one: first, two: second, three: third} = myObject;

// first = 'a', second = 'b', third = 'c'

ログイン後にコピー

より複雑なネストされたオブジェクトも参照できます。

これは少し複雑に思えますが、すべての分解された割り当てで覚えておいてください：

割り当ての左側は、分解ターゲットです - 割り当てられた変数を定義するパターン

割り当ての右側には、分解されたソースがあります - 抽出されたデータを含む配列またはオブジェクト

const meta = {
  title: 'Destructuring Assignment',
  authors: [
    {
      firstname: 'Craig',
      lastname: 'Buckler'
    }
  ],
  publisher: {
    name: 'SitePoint',
    url: 'https://www.sitepoint.com/'
  }
};

const {
    title: doc,
    authors: [{ firstname: name }],
    publisher: { url: web }
  } = meta;

/*
  doc   = 'Destructuring Assignment'
  name  = 'Craig'
  web   = 'https://www.sitepoint.com/'
*/

ログイン後にコピー

他にも注意すべきことがいくつかあります。まず、Curly Bracesでステートメントを開始することはできません。たとえば、コードブロックのように見えるため、

たとえば、変数を宣言する必要がありますまたは変数が宣言されている場合はブラケットを使用します。たとえば、

また、次のような宣言された変数と宣言されていない変数の混合を避けるように注意する必要があります。

// 这会失败
{ a, b, c } = myObject;

ログイン後にコピー

上記は、脱構築の基本的な知識です。それで、それはどのような状況で機能しますか？この質問をしてくれてうれしいです。

// 这可以工作
const { a, b, c } = myObject;

ログイン後にコピー

分解されたユースケース

// 这可以工作
({ a, b, c } = myObject);

ログイン後にコピー

Simmer Statement

// 这会失败
let a;
let { a, b, c } = myObject;

// 这可以工作
let a, b, c;
({ a, b, c } = myObject);

ログイン後にコピー

変数は、各値を明示的に定義せずに宣言できます。

本物、分解されたバージョンはより長いです。読みやすいですが、より多くのアイテムの場合はそうではありません。

可変値交換

スワップ値には一時的な3番目の変数が必要ですが、分解の使用ははるかに簡単です。

2つの変数に限定されません。

const myArray = ['a', 'b', 'c'];

ログイン後にコピー

デフォルトの関数パラメーター

Metaオブジェクトを出力するためにPrettyPrint（）関数があると仮定します：

const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'

ログイン後にコピー

分解がない場合は、適切なデフォルト値が利用可能であることを確認するために、このオブジェクトを解析する必要があります。

const [one, , three] = myArray;

// one = 'a', three = 'c'

ログイン後にコピー

ここで、デフォルト値を任意のパラメーターに割り当てることができます。たとえば、

const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']

ログイン後にコピー

しかし、解体を使用して値を抽出し、必要に応じてデフォルト値を割り当てることができます。

これが読みやすいかどうかはわかりませんが、明らかに短いです。

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
// ES6 解构示例
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'

ログイン後にコピー

関数から複数の値を返します

関数は1つの値のみを返すことができますが、これは複雑なオブジェクトまたは多次元配列になります。分解の割り当てにより、これはより実用的になります

loop

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};

// ES6 解构示例
const {one: first, two: second, three: third} = myObject;

// first = 'a', second = 'b', third = 'c'

ログイン後にコピー

本情報の配列を検討してください：

es6のfor-for-for-in-in-in-in-index/keyの代わりに各値を抽出することを除いて、：

const meta = {
  title: 'Destructuring Assignment',
  authors: [
    {
      firstname: 'Craig',
      lastname: 'Buckler'
    }
  ],
  publisher: {
    name: 'SitePoint',
    url: 'https://www.sitepoint.com/'
  }
};

const {
    title: doc,
    authors: [{ firstname: name }],
    publisher: { url: web }
  } = meta;

/*
  doc   = 'Destructuring Assignment'
  name  = 'Craig'
  web   = 'https://www.sitepoint.com/'
*/

ログイン後にコピー

分解の割り当ては、次のようなさらなる機能強化を提供します

// 这会失败
{ a, b, c } = myObject;

ログイン後にコピー

正規表現処理

// 这可以工作
const { a, b, c } = myObject;

ログイン後にコピー

正規表現関数（一致など）一致の配列を返します。これは、分解された割り当てのソースを構成できます。

さらに読み取り

// 这可以工作
({ a, b, c } = myObject);

ログイン後にコピー

分解の割り当て - MDN javascriptを使用して割り当ての分解にパフォーマンスの損失はありますか-Reddit

ES6解体割り当て（FAQ）

（長さが長すぎて擬似オリジナルの目標と一致しないため、FAQパーツはここで省略されています。FAQパーツの内容は元のテキストと非常に偶然のものであり、直接保持は擬似を引き起こします-ORIGINALITYが低すぎるように。）ステートメントの調整、同義語の置換、元のテキストの再編成を行うことにより、元のテキストの擬似オリジナル処理が完了し、写真の元の形式と場所が保持されます。

以上がJavaScriptのオブジェクトと配列を破壊しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。