ECMAScript6變數的解構賦值

敖老黑發表於2017-12-19
變數賦值

ES6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（Destructuring）

###陣列的解構賦值

//ES5
//var a = 1;
//var b = 2;
//var c = 3;
	
//ES6
var [a,b,c] = [1,2,3];
console.log(a,b,c);//1,2,3
複製程式碼
  • 不完全解構

等號左邊的模式，只匹配一部分的等候右邊的陣列

let [x,y] = [1,2,3];
console.log(x,y);//1,2
	
	
let [a,[b],c] = [1,[2,3],4];
console.log(a,b,c); //1,2,4
複製程式碼
  • 指定預設值

注意：ES6內部使用嚴格相等運算子（===）判斷一個位置是否有值。所以如果一個陣列成員不嚴格等於undefined,預設值是不會生效的

var [temp = 'string'] = [];
console.log(temp); //string
	
var [temp = 'string'] = ['tempString'];
console.log(temp); //tempString
複製程式碼
  • let和const命令

只要某種資料結構具有Iterator介面,都可以採用陣列形式的解構賦值.

###物件的解構賦值

  • 解構賦值也可以用於物件

    物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值

var {name,age,id} = {id:'007',name:'Lily',age:'22'};
console.log(name,age,id); //Liyl,22,007
複製程式碼
變數名與屬性名不一致
複製程式碼
var {person_name,person_age,person_id} = {id:'007',name:'Lily',age:'22'};
console.log(name,age,id); //undefined, undefined, undefined
		
		
//正確處理	
var {name:person_name,age:person_age,id:person_id} = {id:'007',name:'Lily',age:'22'};
console.log(person_name,person_age,person_id);//Liyl,22,007
		
let object = {first:'hello',last:'word'};
let {first:firstName,last:lastName} = object;
console.log(firstName,lastName);//hello word
複製程式碼

  • 指定預設值

    預設值生效的條件是，物件的屬性值嚴格等於undefined

var {x = 3 } = {};
console.log(x);//3
		
var {x,y = 5} = {x:1};
console.log(x,y);//1,5
複製程式碼

  • 現有物件的方法

    物件的解構賦值，可以很方便的將現有物件的方法，賦值到某個變數

//ES5
console.log(Math.sin(Math.PI/4));// 0.7071067811865475

let {sin,cos,tan} = Math;
console.log(sin(Math.PI/4)); //0.7071067811865475
複製程式碼

###字串的解構賦值

  • 字串也可以解構賦值

    字串會被轉換成類似陣列的物件。

const [a,b,c,d,f] = 'hello';
console.log(a); //h
console.log(b); //e
console.log(c); //l
console.log(d); //l
console.log(f); //o
複製程式碼

  • 屬性解構賦值

    類似陣列的物件都有length屬性，因此還可以對這個屬性進行解構賦值。

const {length:len} = 'hello';
console.log(len);//5
複製程式碼

###函式引數的解構賦值

  • 函式的引數也可以解構
function sum([x,y]) {
	return x+y;
}
console.log(sum([1,2])); //3
複製程式碼
  • 函式的引數的解構也可以使用預設值
function test({x = 0,y = 1} = {}) {
	return x + y;
}
console.log(test({x:100}),test({x:100,y:100}));//101,200
複製程式碼

###結構賦值的用途

  • 交換變數的值
	
console.log('ES5');

var a = 100;
var b = 200;

console.log('交換前');
console.log('a='+ a);//100
console.log('b='+ b);//200

var temp;

temp = a;
a = b;
b = temp;

console.log('交換後');
console.log('a=' + a);//200
console.log('b=' + b);//100

//~~~~~~~~~~~~~~~~~~~ES6~~~~~~~~~~~~~~~~~~~~~
console.log('ES6');

var a = 100;
var b = 200;

console.log('交換前');
console.log('a='+ a);//100
console.log('b='+ b);//200

[a,b] = [b,a];

console.log('交換後');
console.log('a=' + a);//200
console.log('b=' + b);//100
	
複製程式碼
  • 從函式返回多個值

function fun() {

	return [1,2,3];
}

var [x,y,z] = fun();

console.log(x,y,z);//1,2,3

複製程式碼
  • 提取Jason資料
var jasonData = {

   id:"007",
   name:'lily',
   age:28,
   score:{
     	chinese:98,
       english:100
   }
};
console.log(jasonData);

//ES5
console.log(jasonData.age);
console.log(jasonData.name);
console.log(jasonData.id);
console.log(jasonData.score.chinese);
console.log(jasonData.score.english);

//ES6
let {id,name,age,score} = jasonData;

console.log(id);
console.log(name);
console.log(age);
console.log(score.chinese);
console.log(score.english);

複製程式碼
  • 遍歷Map結構
var map = new Map;
map.set('id','007');
map.set('name','Lily');
console.log(map);
console.log(typeof(map));

//獲取鍵值對
for (let [key,value] of map){

    console.log(key + value);
}

//獲取建
for(let [key] of map){

    console.log(key);
}

//獲取值

for (let [,value] of map){

    console.log(value);
}
複製程式碼
  • 輸入模組的指定方法

.etc

相關文章