ReactまたはVueプロジェクトでは、いくつかの場所でES6拡張演算子が使用され始めていることに気づいたかもしれません...この演算子は非常に簡潔であり、慣れていないと理解が難しい場合があります。ここでは、拡張演算子について少し紹介します。使い方。
ES6拡張演算子は、配列またはオブジェクトの割り当ての問題を単純化します。オブジェクトタイプを例にとると、最初にオブジェクトのコピーを作成したとき、新しいオブジェクトに他のプロパティがある場合は、オブジェクトのすべてのプロパティを新しいオブジェクトに1つずつ割り当てる必要があります、設定する必要があります：
var obj = {id:1,name:'buejee'}
var obj2 = {};
for( var key in obj){
obj2[key] = obj[key]
}
obj2.age = 18;
console.log(obj)
console.log(obj2)このjsを実行すると、次のような結果が得られます。
{id：1、name： 'buejee'}
{id：1、name： 'buejee'、age：18}
ES6拡張演算子がある場合、割り当ての問題は非常に単純になり、1つのステップしか正常に割り当てることができません。
const obj = {id:1,name:'buejee'}
const obj2 = {...obj,age:18}
console.log(obj)
console.log(obj2)このコードを実行しても、上記の結果が得られます。
この例から、spreadオペレーターがオブジェクトのobj = {id：1、name： 'buejee'}を分割して、あたかも属性のコレクションに分割されたかのように、{nested }、objを単独で使用すると、結果は次のようになります。
スクリーンショットから、objが... objの代わりに直接使用されており、最後のobj2がobjオブジェクトをネストしていることがわかります。
同様に、拡張演算子は配列割り当てで使用され、同様の機能を持っています。配列の各要素を個別に抽出し、それを新しい配列に接合します。
arr = [1,2,3]
arr2 = [...arr,4,5,6]
console.log(arr)
console.log(arr2)このコードを実行すると、結果は次のようになります。
[1、2、3]
[1、2、3、4、5、6]
上記は、展開演算子を使用して右辺値の割り当てを行うことです。実際、左辺値の割り当ても行うことができます。左辺値の場合、これは減算に似ており、オブジェクトまたは配列の残りの部分を新しい変数に割り当てます。次の例を見てみましょう：
const obj = {id:1,name:'buejee',age:18}
let {id,...info} = obj
console.log(id)
console.log("info =",info)
let [a,b,...c]=[1,2,3,4,5]
console.log(a)
console.log(b)
console.log(c)このコードを実行した結果は次のとおりです。
1
info = {name： 'buejee'、age：18}
1
2
[3、4、5]
上記の簡単な例を通して、基本的に展開演算子の使い方を理解することができます。これはとても便利です。少しわかりづらいです。実際のアプリケーションで注意する必要があるのは、オブジェクトと配列を混同しないことです。
