深入理解ES6--5.解構：更方便的資料訪問

你聽___發表於2018-04-29

深入理解ES6--5.解構：更方便的資料訪問

主要知識點：物件解構、陣列解構、混合解構以及引數解構

解構的知識點

1. 物件解構

物件解構語法

物件解構語法在賦值語句的左側使用了物件字面量，例如：

let person ={
	name:'hello',
	age:18
}
let {name,age}=person;
console.log(name); //hello
console.log(age); //18
複製程式碼

在宣告變數name,age的時候，利用物件解構的方式，將person物件中name,age屬性分別賦值給變數name和age，類似於簡寫的屬性初始化器；

解構賦值

物件解構不僅可以用於變數宣告，還可以用於變數賦值：

let person ={
	name:'hello',
	age:18
}
name = 'world';
age= 20;
({name,age}=person);
console.log(name); //hello
console.log(age); //18
複製程式碼

name,age變數在宣告變數的時候就已經完成了變數初始化操作，之後利用物件解構的方式實現變數賦值。注意：必須使用圓括號來包裹解構賦值語句，否則暴露的花括號會被解析成程式碼塊語句，而程式碼塊語句不允許在賦值（=）語句左側出現。圓括號標示了裡面的花括號並不是塊語句，而是被解釋成表示式，從而完成了賦值操作；

物件解構不僅可以用於變數賦值，任何期望賦值的地方都可以使用物件解構方式賦值，如傳遞給函式：

	let person ={
		name:'hello',
		age:18
	}
	name = 'world';
	age= 20;

	function test(value){
		return Object.is(value,person);
	}

	console.log(test({name,age}=person));//true
	console.log(name); //hello
	console.log(age); //18
複製程式碼

呼叫函式test的時候就是使用解構賦值的方式來傳遞入參；

預設值

如果在使用物件解構賦值的時候，沒有在物件中找到同名屬性的話，那麼本地變數就會賦值為undefined：

let person ={
	name:'hello',
	age:18
}
name = 'world';
age= 20;

function test(value){
	return Object.is(value,person);
}

({name,age,value}=person);

console.log(name); //hello
console.log(age); //18
console.log(value); //undefined
複製程式碼

為了不讓變數值為undefined，可以為變數設定預設值。設定變數預設值使用等號“=”，等號右側為需要設定的預設值，如：

let person ={
	name:'hello',
	age:18
}
name = 'world';
age= 20;

function test(value){
	return Object.is(value,person);
}

({name,age,value=true}=person);

console.log(name); //hello
console.log(age); //18
console.log(value); //true
複製程式碼

利用等號為value設定預設值true。

設定不同名本地變數

使用解構賦值，也可以為不同名的變數賦值：

let person ={
	name:'hello',
	age:18
}
name = 'world';
age= 20;


({name:localName,age:localAge}=person);

console.log(localName); //hello
console.log(localAge); //18
複製程式碼

使用冒號“：”可以為不同名的變數完成賦值，冒號左邊為物件的屬性名，冒號的右邊為另外的變數名。

同樣的可以為非同名的變數設定預設值：

let person ={
	name:'hello',
	age:18
}
name = 'world';
age= 20;


({name:localName,age:localAge,value=true}=person);

console.log(localName); //hello
console.log(localAge); //18
console.log(value); //true
複製程式碼

巢狀的物件解構

物件解構不僅可以處理屬性值為基本型別值的物件的解構，還可以被用於巢狀的物件解構：

let node = {
		type: "Identifier",
		name: "foo",
		loc: {
			start: {
				line: 1,
				column: 1
			},
			end: {
				line: 1,
				column: 4
			}
		}
	};

let{loc:{start}}=node;

console.log(start.line); // 1
console.log(start.column);//1
複製程式碼

同樣的，在巢狀的物件解構中依然也可以為不同名的變數賦值：

let node = {
		type: "Identifier",
		name: "foo",
		loc: {
			start: {
				line: 1,
				column: 1
			},
			end: {
				line: 1,
				column: 4
			}
		}
	};


let{loc:{start:localStart}}=node;
console.log(localStart.line); // 1
console.log(localStart.column);//1
複製程式碼

2. 陣列結構

陣列解構的語法

陣列解構與物件結構十分相似，物件解構是通過物件的屬性名去查詢物件中的屬性值，然後進行賦值給變數，而陣列解構則是通過陣列的索引去找到具體值，再去賦值給變數：

let arr = [1,2,3];
let [first,second]=arr;
console.log(first);//1
console.log(second);//2	
複製程式碼

將陣列arr中第一個元素和第二個元素分別賦值給first和second。如果只想要陣列中第三個元素值：

let arr = [1,2,3];
let [,,third]=arr;
console.log(third);//3
複製程式碼

兩個逗號","相當於佔位符，前兩個元素值不直接賦值給變數，僅僅將陣列中的第3個元素值，賦值給變數third。

解構賦值

可以在賦值表示式中使用陣列解構：

let arr = [1,2,3];
let first = 5,second = 6;
[first,second] = arr;
console.log(first);//1
console.log(second);//2
複製程式碼

與物件解構賦值和陣列解構賦值相比起來，不需要使用圓括號"()"將賦值表示式包裹起來。

使用陣列解構，可以十分方便的完成變數值交換：

let arr = [1,2,3];

[first,second] = arr;
[first,second]=[second,first];
console.log(first);//2
console.log(second);//1
複製程式碼

預設值

與物件解構賦值一樣，陣列解構賦值同樣可以使用預設值，當指定位置的項不存在或者其值為undefined，那麼該預設值就會被使用：

let arr = [1,2];

[first,second,third=3] = arr;

console.log(first);//1
console.log(second);//2
console.log(third);//3
複製程式碼

巢狀的解構

與巢狀物件解構一樣，巢狀的陣列也可以解構：

let array = [1,[2,3],4]
let [first,[second]]=array;
console.log(first);//1
console.log(second);//2
複製程式碼

剩餘項

陣列解構中有一個類似於剩餘引數的概念，可以使用...語法來將剩餘專案給一個指定的變數，這種語法稱之為剩餘項：

//剩餘項
let array = [1,2,3,4,5];
let [first,...subArr]=array;
console.log(first);//1
console.log(subArr.length);//4
console.log(subArr[0]);2
複製程式碼

將陣列array中除了第一項外的其他項都賦給了變數subArr，剩餘項subArr的長度為4，並且第一個元素為2；

使用剩餘項，可以很方便的完成陣列複製：

//陣列複製
let array = [1,2,3,4,5];
let [...clonedArr]=array;
console.log(clonedArr);	//[1,2,3,4,5]
複製程式碼

混合解構

物件解構和陣列解構可以混合在一起使用，這樣就可以建立更加複雜的解構表示式，提取我們想要的內容:

let node = {
		type: "Identifier",
		name: "foo",
		loc: {
				start: {
					line: 1,
					column: 1
				},
				end: {
					line: 1,
					column: 4
				}
		},
		range: [0, 3]
	};

let {loc:{start},range:[rangeArr]}=node;
console.log(start.line); //1
console.log(rangeArr); //0
複製程式碼

3. 引數解構

當一個函式的入參既有必選引數，又有可選引數的時候，可選引數的部分可以利用解構的方式來定義，同時，如果利用到解構，需要為其設定預設值，否則會報錯。因此，引數解構的規範形式為：

function setCookie(name, value,
	{
		secure = false,
		path = "/",
		domain = "example.com",
		expires = new Date(Date.now() + 360000000)
	} = {}
	) {
	// ...
}
複製程式碼

此程式碼中引數解構給每個屬性都提供了預設值，所以你可以避免檢查指定屬性是否已被傳入 （以便在未傳入時使用正確的值） 。而整個解構的引數同樣有一個預設值，即一個空物件， 令該引數成為可選引數。這麼做使得函式宣告看起來比平時要複雜一些，但卻是為了確保每 個引數都有可用的值而付出的微小代價。

4. 總結

  1. 解構使得在 JS 中操作物件與陣列變得更容易。使用熟悉的物件字面量與陣列字面量語法，可以將資料結構分離並只獲取你感興趣的資訊。物件解構模式允許你從物件中進行提取，而陣列模式則能用於陣列。

  2. 物件與陣列解構都能在屬性或項未定義時為其提供預設值；在賦值表示式右側的值為 null 或 undefined 時，兩種模式都會丟擲錯誤。你也可以在深層巢狀的資料結構中使用物件與數 組解構，下行到該結構的任意深度。

  3. 使用 var 、 let 或 const 的解構宣告來建立變數，就必須提供初始化器。解構賦值能替代其他賦值，並且允許你把值解構到物件屬性或已存在的變數上。

  4. 引數解構使用解構語法作為函式的引數，讓“選項”（options ） 物件更加透明。你實際感興趣的資料可以與具名引數一併列出。解構的引數可以是物件模式、陣列模式或混合模式，並且你能使用它們的所有特性。

相關文章