1657883700
この投稿では、破壊と...rest
構文を使用してJavaScriptのオブジェクトからプロパティを削除する方法を学習します。
オブジェクトのプロパティを(新しいオブジェクトから除外することで)削除するこの新しい方法により、JavaScriptをよりクリーンに記述でき、コードが少なくて読みやすくなります。また、不変の操作になります。
破棄する前に、通常、delete
キーワードを使用してオブジェクトからプロパティを削除します。の問題delete
は、これが変更可能な操作であり、オブジェクトを物理的に変更し、JavaScriptがオブジェクト参照を処理する方法が原因で望ましくない副作用を引き起こす可能性があることです。
オブジェクトの破棄をrest演算子と組み合わせて使用することで...rest
、ワンライナーのクリーンなアプローチが可能になります。
オブジェクトの破棄により、オブジェクトのプロパティ名から変数を作成できます。変数には、プロパティ名の値が含まれます(例:
const data = { a: 1, b: 2, c: 3 };
const { a, b, c } = data;
console.log(a, b, c); // 1, 2, 3
を使用しconst { a, b, c } = data
て、3つの新しい変数(、、および)を宣言してa
いb
ますc
。
、がのプロパティ名として存在する場合a
、オブジェクトプロパティの値を含む変数が作成されます。プロパティ名が存在しない場合は、を取得します。bcdataundefined
最初にRESTパラメータが登場し、次にRESTプロパティが登場しました。
ECMAScript 2015で追加され、現在はステージ4にあります。これらは、今日も使用できるようになっています。
...rest
これを念頭に置いて、分解によってオブジェクトからプロパティを削除するにはどうすればよいでしょうか。
...rest
前の例を取り上げ、構文を使用して何が起こるかを見てみましょう。
const data = { a: 1, b: 2, c: 3 };
const { a, ...rest } = data;
console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }
ここを使用...rest
すると(そして、好きなように呼び出すことができますrest
) 、残っているすべてのものが得られます。必要に応じて、プロパティの「残りの部分」が表示されます。
では、オブジェクトからプロパティを削除する方法を学んだだけではありませんか?a: 1
中は見えませんrest
-削除されました!
技術的には、オブジェクトから物理的に「削除」されるのではなく除外されdata
ます。JavaScriptを記述し、状態を管理するための不変のパターンに従います(状態は私たちです)。
オブジェクトの破棄や残りの構文を使用せずにこれを行う方法は次のとおりです。これは非常に面倒で、残りのすべてのプロパティを動的に取得することはできません。
const data = { a: 1, b: 2, c: 3 };
const a = data.a;
const rest = { b: data.b, c: data.c };
console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }
おそらくユーザーが削除したいキーを提供したとしましょう。このために使用しますb
。その特定のアイテムを削除するにはどうすればよいですか?これまでのすべての例は、ハードコードされた値です。
どこかに値があると仮定しましょう。オブジェクトルックアップと同じように、'b'
角かっこ構文を使用してこれを破壊構文に動的に渡すことができます(代わりに、動的に渡された値に基づいて新しい変数が作成されます)。[removeProp]
const data = { a: 1, b: 2, c: 3 };
const removeProp = 'b';
const { [removeProp]: remove } = data;
console.log(remove); // 2
そうです、新しい変数を動的に作成しているので、それを使用: remove
して新しい名前を再割り当てする必要があります。そうでなければ、どのようにそれを参照しますか?参照できない[removeProp]
ので、これを覚えておく必要があります。
ただし、この時点で、残りの構文を再度導入して、オブジェクトからプロパティを削除できます。
const data = { a: 1, b: 2, c: 3 };
const removeProp = 'b';
const { [removeProp]: remove, ...rest } = data;
console.log(remove); // 2
console.log(rest); // { a: 1, c: 3 }
これで、オブジェクトの破棄と残りの構文を使用して、JavaScriptでプロパティを動的に削除できました。
StackBlitzのライブの例を確認し、遊んで、それに慣れてください。
私たちは長い道のりを歩んできました!この手法は、変更可能な操作とキーワードを回避するのに役立ちdelete
、JavaScriptのオブジェクトからプロパティを削除するための不変のパターンを提供します。
オブジェクトの破棄を使用し、それを残りの構文と組み合わせて、オブジェクトのプロパティを削除するためのクリーンなソリューションを提供する方法を検討しました。
ハッピーコーディング!
ソース:https ://ultimatecourses.com/blog/remove-object-properties-destructuring
1657883700
この投稿では、破壊と...rest
構文を使用してJavaScriptのオブジェクトからプロパティを削除する方法を学習します。
オブジェクトのプロパティを(新しいオブジェクトから除外することで)削除するこの新しい方法により、JavaScriptをよりクリーンに記述でき、コードが少なくて読みやすくなります。また、不変の操作になります。
破棄する前に、通常、delete
キーワードを使用してオブジェクトからプロパティを削除します。の問題delete
は、これが変更可能な操作であり、オブジェクトを物理的に変更し、JavaScriptがオブジェクト参照を処理する方法が原因で望ましくない副作用を引き起こす可能性があることです。
オブジェクトの破棄をrest演算子と組み合わせて使用することで...rest
、ワンライナーのクリーンなアプローチが可能になります。
オブジェクトの破棄により、オブジェクトのプロパティ名から変数を作成できます。変数には、プロパティ名の値が含まれます(例:
const data = { a: 1, b: 2, c: 3 };
const { a, b, c } = data;
console.log(a, b, c); // 1, 2, 3
を使用しconst { a, b, c } = data
て、3つの新しい変数(、、および)を宣言してa
いb
ますc
。
、がのプロパティ名として存在する場合a
、オブジェクトプロパティの値を含む変数が作成されます。プロパティ名が存在しない場合は、を取得します。bcdataundefined
最初にRESTパラメータが登場し、次にRESTプロパティが登場しました。
ECMAScript 2015で追加され、現在はステージ4にあります。これらは、今日も使用できるようになっています。
...rest
これを念頭に置いて、分解によってオブジェクトからプロパティを削除するにはどうすればよいでしょうか。
...rest
前の例を取り上げ、構文を使用して何が起こるかを見てみましょう。
const data = { a: 1, b: 2, c: 3 };
const { a, ...rest } = data;
console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }
ここを使用...rest
すると(そして、好きなように呼び出すことができますrest
) 、残っているすべてのものが得られます。必要に応じて、プロパティの「残りの部分」が表示されます。
では、オブジェクトからプロパティを削除する方法を学んだだけではありませんか?a: 1
中は見えませんrest
-削除されました!
技術的には、オブジェクトから物理的に「削除」されるのではなく除外されdata
ます。JavaScriptを記述し、状態を管理するための不変のパターンに従います(状態は私たちです)。
オブジェクトの破棄や残りの構文を使用せずにこれを行う方法は次のとおりです。これは非常に面倒で、残りのすべてのプロパティを動的に取得することはできません。
const data = { a: 1, b: 2, c: 3 };
const a = data.a;
const rest = { b: data.b, c: data.c };
console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }
おそらくユーザーが削除したいキーを提供したとしましょう。このために使用しますb
。その特定のアイテムを削除するにはどうすればよいですか?これまでのすべての例は、ハードコードされた値です。
どこかに値があると仮定しましょう。オブジェクトルックアップと同じように、'b'
角かっこ構文を使用してこれを破壊構文に動的に渡すことができます(代わりに、動的に渡された値に基づいて新しい変数が作成されます)。[removeProp]
const data = { a: 1, b: 2, c: 3 };
const removeProp = 'b';
const { [removeProp]: remove } = data;
console.log(remove); // 2
そうです、新しい変数を動的に作成しているので、それを使用: remove
して新しい名前を再割り当てする必要があります。そうでなければ、どのようにそれを参照しますか?参照できない[removeProp]
ので、これを覚えておく必要があります。
ただし、この時点で、残りの構文を再度導入して、オブジェクトからプロパティを削除できます。
const data = { a: 1, b: 2, c: 3 };
const removeProp = 'b';
const { [removeProp]: remove, ...rest } = data;
console.log(remove); // 2
console.log(rest); // { a: 1, c: 3 }
これで、オブジェクトの破棄と残りの構文を使用して、JavaScriptでプロパティを動的に削除できました。
StackBlitzのライブの例を確認し、遊んで、それに慣れてください。
私たちは長い道のりを歩んできました!この手法は、変更可能な操作とキーワードを回避するのに役立ちdelete
、JavaScriptのオブジェクトからプロパティを削除するための不変のパターンを提供します。
オブジェクトの破棄を使用し、それを残りの構文と組み合わせて、オブジェクトのプロパティを削除するためのクリーンなソリューションを提供する方法を検討しました。
ハッピーコーディング!
ソース:https ://ultimatecourses.com/blog/remove-object-properties-destructuring