ES 6新特性(1)分解賦課値:対象の異性賦課値、拡張演算子

はじめに、
前後端相互作用の過程で,大量の配列を処理したい.値が分解されない前にバックエンドから戻ってくるデータを処理するのは、比較的に面倒です.データの構造を壊し、データを分割して値を取るプロセス.
 
二例
1.オブジェクトの構造割り当て

const player={
				nickName:'shaonianla',
				master:'    ',
				skill:[
					{
						skillName:'    ',
						mp:1000,
						time:3000
					},
					{
						skillName:'    ',
						mp:1000,
						time:3000
					},{
						skillName:'    ',
						mp:1000,
						time:3000
					},
				]
			};
			
			const {nickName}=player;
			const {master}=player;
			const {skill:[skill1,{skillName},{skillName:sklName}]}=player;

解説:

オブジェクトのデフォーカシング値を行うとき、変数名は大括弧を通して{}を含み、変数名は構造データ内の変数名と一致します. nikNameが対応しているのはplayerの中のnikNameです.

const{skil:[skylName]、{skil Name}この段はskyl:playerの配列を展開し、skyl 1は配列の中の最初のオブジェクトをとっています.skyill Nameとは第二のオブジェクトの中のskill Nameを取り出すことです.問題が来ました.私達が定義したデータの種類はconstで、繰り返し声明することはできません.だから、第三の対象を取る時、私達はこの方式を使って、除去した変数に対して新たな声明の割り当てを行います.skyNameを作成したのと同じです.

2.コンストラクタの使用

const obj={
				name:"   ",
				age:18,
				sex:"man"
			};
			
			const {name,...oth}=obj;
			console.log(oth);
			
			const obj1={
				summery:'     ',
				...obj
			};
			
			console.log(obj1)

解説:

ここでは、2つの変数、objおよびObj 1を定義します.まず私達はconst{name、...oth}=objを通します.objを分解して、それぞれnameに値を与えます.ここのothはキーワードではなく、自分で定義した変数名です.演算子の割当値を拡張することにより、othで得られた変数値は{age:18、sex:"man"である.

は、Obj 1において、対象に直接拡張演算子を使用して、Objの内容をObj 1に展開しました.得られた変数値は{summery:'は若いが、お金がない'というもので、name:"少年よ",age:18,sex:"man";

思考の幅:

const obj={
				name:"   ",
				age:18,
				sex:"man"
			};
			
			const {name,...oth}=obj;
			console.log(oth);
			
			const obj1={
				age:23,
				summery:'     ',
				...obj
			};
			
			console.log(obj1)

TIPS:このコードの中で、objとobj 1は同じ変数ageを持っていますが、拡張演算子を分解して値を割り当てた後、obj 1のageはobjの値によって上書きされます.
3.宣言した変数をどのように構成しますか?

           let price;
		const shop1={
				name:'    ',
				price:22
			};
			
			({price}=shop1);

解説:

ここでは、まず変数priceを宣言しました.多くの人が、なぜすでに宣言された変数に値を付ける時に括弧をつけたいのかと思っているかもしれません.「price」＝shop 1は、ブロックレベルのスコープに割り当てられていると解釈されています.でも、普通はこのような書き方は勧められません.let｛price｝＝shop 1という方法で直接に値を割り付けます.

4.プロファイルのデフォルト値

let girlFriend={
				name;'    ',
				age:25
			};
			
			let {name,age=21,hobby=[' ','   ']}=girlFriend;

解説:

は変数girlFriendにおいて、Hobryという属性はありませんが、レンダリングされたページに表示する必要があります.そうすると、私たちはデスティネーション値にデフォルトの変数を定義することができます.

しかし、ageは存在し、デフォルト値も与えられていることが分かりました.そうすると、デスティネーションを行う際には、ageのデフォルト値は25に上書きされます.

5.抽出対象の属性

const {name,hobby:[hobby1],hobby}={
				name:'   ',
				hobby:['  ','  ']
			}

解説:

ここで、ホビー1が取った値は「学習」で、ホビーが取った値は「学習」、「食事」

です.
6.オブジェクトを使って乱順に入る関数のパラメータ

function Request({
				url,
				data,
				type='get'
			}){
				
			}

解説:

私たちはajaxを使ってネットワーク要求をするとき、要求の種類を判断する必要があります.関数パラメータを定義するとき、デフォルトのtype割り当てはgetとなります.

7.複数取得  関数の戻り値

function getUserInfo(userId){
				//..ajax
				return{
					status:true,
					data:{
						name:'  '
					},
					msg:'    '
				}
			}
			
			const {status,data,msg}=getUserInfo(123);

解説:

は、関数から返されたパラメータを直接的に構成します.

第三総括
csdnは私のideに対して友好的ではないようで、レイアウトはすべて乱れています.我慢して見ましょう.次回は配列の解凍を記録します.ついでにガイドを変えます.