JavaScript ES6 分割演算子の理解と応用

序文

最近 JavaScript を勉強していて、ES6 の分解記号を見ました。これによってコードのシンプルさが飛躍的に向上し、エンタープライズ開発で使用できるようになりました。将来、他の人が職場でこれを使用していても、そのコードが理解できない場合、その影響は甚大です。だから、一生懸命勉強してください。

使うことはできますが、理解しないわけにはいきません✔

JavaScript ES6 には、コードを簡素化し、プログラマーが簡単に記述できるように設計された機能が多数あります。分解演算子は、最も優れた機能の 1 つです。代入ステートメントの使用を減らしたり、データ添え字やオブジェクトプロパティにアクセスする方法を減らしたりすることで、コードを簡潔にし、コードの読みやすさを向上させることができます。

脱構築記号の役割

構造化代入は代入演算子の拡張です。配列またはオブジェクトのパターンマッチングを行い、その中の変数に値を割り当てる方法です。

ES6 では、配列やオブジェクトから値を抽出し、特定のパターンに従って変数に値を割り当てることができます。これを構造化分解と呼びます。

使い方

基本的な使い方

[a,b,c] = [1,2,3]とします。
// a = 1、b = 2、c = 3 とします。

ネストされた使用

// 配列 let [a, [[b], c]] = [1, [[2], 3]];
	コンソールログ(a); // 1
	コンソールログ(b); // 2
	コンソール.log(c); // 3
// オブジェクト let obj = { x: ['hello', {y: 'world'}] };
 次のように記述します。
	console.log(x); // こんにちは
	console.log(y); // ワールド

無視

// 配列 let [a, , b] = [1, 2, 3];
	コンソールログ(a); // 1
	コンソールログ(b); // 3

// オブジェクト let obj = { x: ['hello', { y: 'world' }] };
 { x: [x, { }] } = obj; とします。
	console.log(x); // こんにちは

不完全な解体

// 配列 let [a = 1, b] = [];
	コンソールログ(a); // 1
	console.log(b); // 未定義

// オブジェクト let obj = { x: [{ y: 'world' }] };
 {x: [{y}, x] } = obj;とします。
	console.log(x); // 未定義
	console.log(y); // ワールド

レスト演算子

// 配列 let [a, ...b] = [1, 2, 3];
	コンソールログ(a); // 1
	コンソール.log(b); // [2,3]

// オブジェクト let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
	コンソールログ(a); // 10
	コンソールログ(b); // 20
	console.log(rest); // { c: 30, d: 40 }

弦

[a, b, c, d, e] = 'hello' とします。
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o

デフォルト値の構造化解除

// 分解パターンに一致する結果があり、一致する結果が未定義の場合、デフォルト値が戻り結果としてトリガーされます。
 [a = 2] = [未定義]とします。 
	コンソールログ(a); // 2
// オブジェクト let {a = 10, b = 5} = {a: 3};
 	コンソールログ(a); // 3
 	コンソールログ(b); // 5

変数の値を入れ替えます。

a = 1 とします。
b = 2 とします。
[a,b] = [b,a];
	コンソールログ(a); // 2
	コンソールログ(b); // 1

分割割り当ての適用

// 1. 浅いクローンとマージ let name = { name: "aaa" }
age = { age: 'bbb' } とします。
person = { ...名前, ...年齢 } とします。
console.log(person) // { 名前: "aaa", 年齢: 'bbb' }

a = [1,2,3]とします。
b = [4,5]とします。
c = [...a,...b] とします。
コンソール.log(c); // [1,2,3,4,5]

// 2. JSON データを抽出します。let JsonData = { id: 10, status: "OK", data: [111, 222] } 
{ id、ステータス、データ: 数値 } = JsonData とします。 
console.log(id, status, numbers); //10 "OK" [111, 222]

// 3. 関数パラメータの定義 // パラメータの順序 function fun1([a, b, c]) { console.log(a, b, c) } 
fun1([1, 2, 3]); // 1 2 3

// パラメータの順序が間違っている function fun2({ x, y, z }) { console.log(x, y, z) } 
fun2({ z: 3, x: 2, y: 1 }); // 2 1 3

// パラメータにはデフォルト値があります function fun3 ([a=1,b]) {
コンソールログ(a,b);
}
fun3([,3]) // 1 3

アプリケーションに関する簡単な説明

JSONデータを抽出する

分解割り当てのいくつかのアプリケーションは上記にリストされています。最も頻繁に使用される 2 番目のアプリケーションは、JSON データを抽出することです。バックエンドからフロントエンドに渡されるデータは JSON データです。フロントエンドは通常、データをオブジェクトに割り当てます。これが使用されるメソッドです。

拡張可能な演算子...

私は Leetcode で質問をしていたときにこれを使いました。arr.push(...arr1) を使用して 2 つの配列をマージしました。これは、上記の浅いクローン作成とマージに少し似ています。配列を結合する以前の操作と比較すると、これははるかに簡単です。

質問 88、ソートされた 2 つの配列を結合します。

var merge = function(nums1, m, nums2, n) {
    nums1.長さ=m;
    nums2.長さ=n;
    nums1.push(...nums2);
    arr = nums1.sort((a,b)=>{とする
        ab を返します。
    })
    arr を返します。
};

...この演算子は配列内のデータを走査し、それを現在のオブジェクトにコピーします。

arr.push(...arr1) メソッドは、arr1 のすべての配列要素を解析し、それらを 1 つずつ arr に追加して、2 つの配列の結合を完了します。

変数値の交換

変数値の交換の応用を見てみましょう。先輩からの面接での質問を漠然と覚えています。余分なメモリスペースを占有せずに、a と b の値を交換してください。当時は 2 つの解決策がありました。1 つは XOR を使用すること、もう 1 つは数学的手法を使用して ab を加算してから別々に減算することです (a=a+b、b=ab、a=ab)。現在、シンボルを分解する方法 [a,b] = [b,a] を使用することも可能ですか?

要約する

これで、JavaScript ES6 のデストラクチャリング演算子の理解と応用に関するこの記事は終了です。ES6 のデストラクチャリング演算子の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: