JavaScript で構造化を使用する 5 つの方法

オブジェクトのプロパティの読み取りと配列項目へのアクセスは一般的な操作です。割り当てを破棄すると、これらの操作が簡単かつクリーンになります。この記事では、基本的な使い方に加えて、JavaScript における構造化の面白い使い方を 5 つ紹介します。

1. 変数の交換

通常、2 つの変数を交換する方法には追加の一時変数が必要です。例を見てみましょう:

let a = 1;
let b = 2;
let temp;

temp = a;
a = b;
b = temp;

a; // => 2
b; // => 1

temp は一時変数で、最初に a の値を保存します。次に、b の値を a に割り当て、次に temp の値を b に割り当てます。

分割を使用するとより簡単になります。おかしな temp 変数は必要ありません。

let a = 1;
let b = 2;

[a, b] = [b, a];

a; // => 2
b; // => 1

[a, b] = [b, a] は分割代入です。右側では、配列 [b, a] が作成されます。つまり、 [2,1]です。この配列 2 は a に割り当てられ、1 は b に割り当てられます。

このメソッドは一時配列も作成しますが、このメソッドは少なくともより簡潔に見えます。分割を使用すると、2 を超える変数を交換することもできます。

let zero = 2;
let one = 1;
let two = 0;

[zero, one, two] = [two, one, zero];

zero; // => 0
one;  // => 1
two;  // => 2

2. 配列内の要素へのアクセス

空の項目配列が存在するシナリオがあります。配列の最初、2 番目、または n 番目の項目にアクセスしたいが、その項目が存在しない場合は、指定されたデフォルト値を使用します。

通常、配列の length 属性は

const colors = [];

let firstColor = 'white';
if (colors.length > 0) {
 firstColor = colors[0];
}

firstColor; // => 'white'

を決定するために使用されます。配列の分割を使用すると、同じ効果をより簡潔に達成できます。

const colors = [];

const [firstColor = 'white'] = colors;

firstColor; // => 'white'

const [firstColor = 'white'] = Colors 分割すると、colors 配列の最初の要素が firstColor 変数に割り当てられます。配列のインデックス 0 に要素がない場合は、デフォルト値「white」が割り当てられます。

もちろん、より柔軟にすることもできます。2 番目の要素のみにアクセスしたい場合は、これを行うことができます。

const colors = [];

const [, secondColor = 'black'] = colors;

secondColor; // => 'black'

分解の左側にあるカンマに注意してください。これは、最初の要素 secondColor を無視することを意味します。 インデックス 1 を持つ要素を で使用します。 Colors

配列 割り当てを行います。

3. 不変操作

React と Redux

を使い始めたとき、コンプライアンスに準拠した Immutable を記述する必要がありました。コード。最初は少し難しかったですが、後になってその利点が分かりました。それは、一方向のデータ フローの処理が容易になったことです。

不変性を実現するには、元のオブジェクトが変更できないことが必要です。幸いなことに、構造を分割すると、特定の操作を不変の方法で簡単に実装できます。

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers;

fooNumbers; // => [2, 3]
numbers; // => [1, 2, 3]

Destructuring[, ... fooNumbers] =numbersnumbers## を含む新しい配列 fooNumbers, fooNumbers を作成します #最初の要素を除く要素。

numbers 配列は変更されておらず、操作は変わりません。

同じ不変の方法で、オブジェクトから属性を削除してから、オブジェクトから foo 属性を削除してみます。 big:

const big = {
 foo: 'value Foo',
 bar: 'value Bar'
};

const { foo, ...small } = big;

small; // => { bar: 'value Bar' }
big; // => { foo: 'value Foo', bar: 'value Bar' }

4. iterable の構造化

前の例では、構造化は配列に使用されていましたが、iterable プロトコルを実装する任意のオブジェクトを構造化することができます。

多くのネイティブ プリミティブ型とオブジェクトは反復可能です: array、string、typed arrays、set、## ＃地図＃＃＃。 基本的な型に限定したくない場合は、反復可能なプロトコルを実装して、構造化ロジックをカスタマイズできます。

movies

movie オブジェクトのリストが含まれます。 movies を分解するときに title を文字列として取得できるのは素晴らしいことです。カスタムイテレータを実装しましょう。 <pre class="brush:php;toolbar:false">const movies = {   list: [     { title: 'Heat' },      { title: 'Interstellar' }   ],   [Symbol.iterator]() {     let index = 0;     return {       next: () =&gt; {         if (index &lt; this.list.length) { const value = this.list[index++].title; return { value, done: false }; } return { done: true }; } }; } }; const [firstMovieTitle] = movies; console.log(firstMovieTitle); // =&gt; 'Heat'</pre>

movies

オブジェクトは、Symbol.iterator メソッドを定義することで反復可能プロトコルを実装し、反復子は title を反復します。

反復可能なプロトコル

に従い、最初の movies を読み取ることで、movies オブジェクトを title に分解できます。 #title:const [firstMovieTitle] = 映画。 5. 動的プロパティの構造化

経験則として、プロパティによるオブジェクトの構造化は、配列の構造化よりも一般的です。

オブジェクトの分割は非常に簡単に見えます:

const movie = { title: 'Heat' };

const { title } = movie;

title; // => 'Heat'

const {title} = movie

変数

title を作成し、属性 ## を設定します。 #movie.title の値が割り当てられます。 オブジェクトの構造化に関しては、プロパティ名を静的に知る必要がなく、動的なプロパティ名を使用してオブジェクトを分解できることに少し驚きました。 動的分割の仕組みを理解するには、

greet

関数を作成します。

function greet(obj, nameProp) {
 const { [nameProp]: name = 'Unknown' } = obj;
 return `Hello, ${name}!`;
}

greet({ name: 'Batman' }, 'name'); // => 'Hello, Batman!'
greet({ }, 'name'); // => 'Hello, Unknown!'

2 引数を指定して

greet()# を呼び出します ##機能: オブジェクト名とプロパティ名。

greet() 内、代入の構造化 const {[nameProp]：name ='Unknown'} = obj

角括弧の形式を使用します

[nameProp] ]動的属性名を読み取ると、name 変数が動的属性値を受け取ります。 プロパティが存在しない場合は、デフォルト値「Unknown」を指定することをお勧めします。

6. 結論

オブジェクトのプロパティや配列項目にアクセスしたい場合、破棄は非常に便利です。

配列デストラクターは、基本的な使用法に加えて、変数の交換、配列項目へのアクセス、いくつかの不変操作の実行も簡単に行うことができます。

JavaScript では、イテレータを使用してカスタムの破棄ロジックを定義できるため、より大きな可能性が提供されます。

元のアドレス: https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/

プログラミング関連の知識の詳細については、次のサイトを参照してください。 プログラミング学習! ！

以上がJavaScript で構造化を使用する 5 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。