<li id="ecaos"></li>

點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

深入理解ES6之數據解構的用法

來源：懂視網責編：小采時間：2020-11-27 22:21:48

深入理解ES6之數據解構的用法

深入理解ES6之數據解構的用法:一對象解構對象解構語法在賦值語句的左側使用了對象字面量 let node = { type: true, name: false } //既聲明又賦值 let { type, name } = node; //或者先聲明再賦值 let type, name ({type,name} = node); conso

推薦度：

點擊下載本文 文檔為doc格式

導讀深入理解ES6之數據解構的用法:一對象解構對象解構語法在賦值語句的左側使用了對象字面量 let node = { type: true, name: false } //既聲明又賦值 let { type, name } = node; //或者先聲明再賦值 let type, name ({type,name} = node); conso

一對象解構

對象解構語法在賦值語句的左側使用了對象字面量

let node = {
 type: true,
 name: false
}

//既聲明又賦值
let {
 type,
 name
} = node;

//或者先聲明再賦值
let type, name
({type,name} = node);
console.log(type);//true
console.log(name);//false

type與name標識符既聲明了本地變量，也讀取了對象的相應屬性值。

解構賦值表達式的值為表達式右側的值。當解構表達式的右側的計算結果為null或者undefined時，會拋出錯誤。

默認值

當你使用解構賦值語句時，如果所指定的本地變量在對象中沒有找到同名屬性，那么該變量會被賦值為undefined

let node = {
 type: true,
 name: false
},
 type, name, value;
({type,value,name} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//undefined

你可以選擇性地定義一個默認值，以便在指定屬性不存在時使用該值。

let node = {
 type: true,
 name: false
 },
 type, name, value;
({
 type,
 value = true,
 name
} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//true

賦值給不同的本地變量名

let node = {
 type: true,
 name: false,
 value: "dd"
}
let {
 type: localType,
 name: localName,
 value: localValue = "cc"
} = node;
console.log(localType);
console.log(localName);
console.log(localValue);

type:localType這種語法表示要讀取名為type的屬性，并把它的值存儲在變量localType上。該語法與傳統對象字面量的語法相反

嵌套的對象結構

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

let {
loc: localL,
loc: {
 start: localS,
 end: localE
}
} = node;

console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4}
console.log(localS);//{line: 1,column: 1}
console.log(localE);//{line: 1,column: 4}

當冒號右側存在花括號時，表示目標被嵌套在對象的更深一層中（loc: {start: localS,end: localE}）

二數據解構

數組解構的語法看起來跟對象解構非常相似，只是將對象字面量換成了數組字面量。

let colors = ["red", "blue", "green"];
let [firstC, secondC, thirdC, thursC = "yellow"] = colors;
console.log(firstC//red
console.log(secondC);//blue
console.log(thirdC);//green
console.log(thursC);//yellow

你也可以在解構模式中忽略一些項，并只給感興趣的項提供變量名。

let colors = ["red","green","blue"];

let [,,thirdC] = colors;
console.log(thirdC);//blue

thirdC之前的逗號是為數組前面的項提供的占位符。使用這種方法，你就可以輕易從數組任意位置取出值，而無需給其他項提供名稱。

解構賦值

let colors = ["red","green","blue"],
 firstColor = "black",
 secondColor = "purple";
[firstColor,secondColor] = colors;
console.log(firstColor);//red
console.log(secondColor);//green

數組解構有一個非常獨特的用例，能輕易的互換兩個變量的值。

let a =1,b =2;
[a,b] = [b,a];
console.log(a);//2
console.log(b);//1

嵌套的解構

let colors = ["red", ["green", "blue"], "yellow"];
let [firstC, [, ssc]] = colors;
console.log(ssc);//blue

剩余項

let colors = ["red", "green", "blue"];
let [firstC, ...restC] = colors;
console.log(firstC);
console.log(...restC);
console.log(restC[0]);//green
console.log(restC[1]);//blue

使用剩余項可以進行數組克隆

let colors = ["red", "green", "blue"];
let [...restC] = colors;
console.log(restC);//["red", "green","blue"]

三混合解構

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

let {
type,
name: localName,
loc: {
 start: {
 line: ll
 },
 end: {
 column: col
 }
},
range: [, second]
} = node;

console.log(type);//Identifier
console.log(localName);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

深入理解ES6之數據解構的用法

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用的使深入

熱門焦點

深入理解ES6之數據解構的用法

深入理解ES6之數據解構的用法

深入理解ES6之數據解構的用法

最新推薦

猜你喜歡

熱門推薦