ES6 での Javascript の構造化

Todayjavascript コラムでは、ES6 での Javascript の分解について紹介します。

ES6 の分割機能により、オブジェクト (Object) または配列 (Array) から値を取得することがより便利になり、書き出されたコードも読みやすくなります。 . 性的にも強い。以前に Python 言語に触れたことがある友人なら、この機能に精通しているはずです。この機能はすでに Python に実装されています。 Python では、次のコードを使用して、配列内の 3 と 5 にそれぞれ割り当てられている 2 つの変数

lst = [3, 5]
first, second = lst 
print(first, second)复制代码

first と Second の値を取得できます。

この機能が利用可能になる前は、通常、オブジェクトや配列から値をどのように取得していましたか?次のコードを見てみましょう:

let list = [3, 5]let first = list[0]let second = list[1]复制代码

このメソッドでは、配列添字を手動で指定して、指定した変数に対応する値を割り当てる必要があります。 ES6 の分割機能を使用すると、コードがよりシンプルで読みやすくなります。

let [first, second] = list;复制代码

オブジェクトの分割

基本オブジェクトの分割

まず見てみましょう。 ES6 で基本的なオブジェクトの構造を記述する方法:

const family = {	father: ''
	mother: ''}const { father, mother } = family;复制代码

ファミリー オブジェクトからその 2 つの属性、父と母を分解し、それらを個別に定義された父と母のオブジェクトに割り当てました。その後、父親変数と母親変数を通じて、ファミリー内の対応するキーの値を直接取得できます。この例は、オブジェクトの構造を分割する最も単純な応用例です。さらに興味深い例を見てみましょう。

未宣言のオブジェクトの構造化

上記の例では、まずファミリー オブジェクトを宣言し、次に構造化構文を通じて値を取得します。では、宣言しなくても大丈夫ですか:

const { father, mother } =  {father: '',mother: ''}复制代码

実際には大丈夫ですが、場合によっては、オブジェクトを宣言したり、オブジェクトを変数に割り当ててから分解したりする必要がありません。多くの場合、宣言されていないオブジェクトを直接分解できます。

オブジェクトを分解して変数の名前を変更する

オブジェクト内のプロパティを分解して、次のように名前を変更することもできます。

const { father: f, mother:m } =  {father: '1',mother: '2'}console.log(f); // '1'复制代码

上記のコードでは、オブジェクトの After父親の in が分解され、変数 f に再割り当てされます。前の例と比較すると、父親変数の名前を f に変更するのと同じです。その後、f を使用して操作を続行できます。

デフォルト値の構造化

ファミリー オブジェクトがバックグラウンドで返されるシナリオを想像してください。元のファミリー オブジェクトには、父親、母親、子という 3 つの属性があります。返されたデータを取得し、次の 3 つの属性を分解します。

const { father, mother, child } =  {father: '1',mother: '2', child: '3'}复制代码

これは問題ないようですが、現実は常に満足のいくものではありません。バックグラウンドのコードのバグにより、返されたファミリー オブジェクトには母親と子のみが含まれますが、父親は欠落しています。この時点で、上記のコードを分解した後、父は未定義になります:

const { father, mother, child } =  {father: '1',mother: '2'}console.log(child) //undefined复制代码

バックグラウンドで特定の属性が欠落している場合、デフォルト値を分解したいことがよくあります。実際、次のように書くことができます:

const { father = '1', mother = '2', child = '3'} =  {father: '1',mother: '2'}console.log(child) //'3'复制代码

前の例と組み合わせると、変数名を変更し、デフォルト値を割り当てることができます: 関数パラメーター ## の

const { father: f = '1', mother: m = '2', child: c = '3'} =  {father: '1',mother: '2'}复制代码

Deconstruct #

const family = {	father: ''
	mother: ''}function log({father}){	console.log(father)
}
log(family)复制代码

In 関数のパラメーターのうち、受信オブジェクトと送信オブジェクトの属性値は、以前のように family.father を使用して渡す必要がなく、構造化を使用して直接取得できます。

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

上の例では、ファミリーの属性には 1 つのレベルしかありません。ファミリーの一部の属性の値もオブジェクトまたは配列である場合、それらをネストするにはどうすればよいでしょうか?オブジェクトの属性値を分解してみるのはどうでしょうか?次のコードを見てみましょう:

const family = {	father: 'mike'
	mother: [{		name: 'mary'
	}]
}const { father, mother: [{	name:motherName
}]} = family;console.log(father); //'mike'console.log(motherName) //'mary'复制代码

配列の構造化

配列の構造化方法は、実際にはオブジェクトの構造化方法と非常によく似ています。この記事の冒頭でも少し触れましたが、ですが、配列を見てみましょう。分解の典型的なシーンをいくつか示します。

基本的なオブジェクトの分解

const car = ['AUDI', 'BMW'];const [audi, bmw] = car;console.log(audi); // "AUDI"console.log(bmw); // "BMW"复制代码

対応する配列の位置が使用されている限り、対応する値を正しく分解できます。

デフォルト値の構造化

オブジェクト構造化のデフォルト値シナリオと同様に、多くの場合、ビジネス ニーズを満たすために配列を構造化するときに、デフォルト値を追加する必要があります。

const car = ['AUDI', 'BMW'];const [audi, bmw, benz = 'BENZ'] = car;console.log(benz); // "BENZ"复制代码

分解での変数の交換

次の 2 つの変数があるとします。

let car1 = 'bmw';let car2 = 'audi'复制代码

これら 2 つの変数を交換したい場合、従来のアプローチは次のとおりです。

let temp = car1;
car1 = car2;
car2 = temp;复制代码

は、中間変数を使用して実装する必要があります。配列の分割を使用する方がはるかに簡単です。

let car1 = 'bmw';let car2 = 'audi'[car2, car1] = [car1, car2]console.log(car1); // 'audi'console.log(car2); // 'bmw'复制代码

配列内の要素の位置の交換を完了したい場合は、たとえば、[1,2,3] を [1,3,

const arr = [1,2,3];
[arr[2], arr[1]] = [arr[1], arr[2]];console.log(arr); // [1,3,2]复制代码

関数から返された配列を分解する

多くの関数は配列型の結果を返し、値は配列の構造化を通じて直接取得できます。

functin fun(){	return [1,2,3]
}let a, b, c; 
[a, b, c] = fun();复制代码

もちろん、関数が配列内の値の一部を返すだけであれば、それらは無視できます

functin fun(){	return [1,2,3]
}let a, c; 
[a, , c] = fun();复制代码

ご覧のとおり、ES6 の分割機能多くのシナリオで非常に役立ちます。誰もがプロジェクトにさらに分解を適用して、コードをよりシンプル、明確、理解しやすくできることを願っています。

関連する無料学習の推奨事項: javascript (ビデオ)

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