原創文章&經驗總結&從校招到A廠一路陽光一路滄桑

詳情請戳www.coderccc.com

> 主要知識點：對象解構、數組解構、混合解構以及參數解構

文章目錄

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. 總結

解構使得在 JS 中操作對象與數組變得更容易。使用熟悉的對象字面量與數組字面量語法，可以將數據結構分離並只獲取你感興趣的信息。對象解構模式允許你從對象中進行提取，而數組模式則能用於數組。
對象與數組解構都能在屬性或項未定義時爲其提供默認值；在賦值表達式右側的值爲 null
或 undefined 時，兩種模式都會拋出錯誤。你也可以在深層嵌套的數據結構中使用對象與數
組解構，下行到該結構的任意深度。
使用 var 、 let 或 const 的解構聲明來創建變量，就必須提供初始化器。解構賦值能替代其他賦值，並且允許你把值解構到對象屬性或已存在的變量上。
參數解構使用解構語法作爲函數的參數，讓“選項”（options ）對象更加透明。你實際感興趣的數據可以與具名參數一併列出。解構的參數可以是對象模式、數組模式或混合模式，並且你能使用它們的所有特性。

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

文章目錄

1. 對象解構

2. 數組結構

3. 參數解構

4. 總結

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

Java8新特性都到碗裏來

深入理解ES6--11.Promise與異步編程

Java併發總結--校招面經

深入理解ES6--1.塊級綁定

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結