深入理解ES6之《解構》

2021-09-16 12:44:54 字數 2256 閱讀 4895

如果使用var、let、const解析宣告變數，則必須提供初始化程式（也就是等號右側的值）

以下語句有語法錯誤

var ;


let 


const
解構賦值表示式（也就是右側的表示式）如果為null或undefined會導致程式丟擲錯誤，因為任何嘗試讀取null或undefined的屬性的行為都會觸發執行時錯誤

let node = 


let  = node
上面**是宣告type、name變數同時賦值node相應的屬性值

那如果已經存在type、name，重新賦值 使用解構的話則需要在表示式兩側加小括號

let node = ,


type = 'demo',


name = 1;


//新增小括號可以將塊語句轉化為乙個表示式，從而實現整個解構賦值的過程


( = node)
在任何使用值的地方你都可以使用解構賦值表示式

let node = ,


type = 'demo',


name = 1;


function outputinfo(value) 


outputinfo( = node)//true
解構還可以使用預設值

let node = 


let  = node
為非同名區域性變數賦值

let node = 


let  = node


console.log(localtype)//identifier


console.log(localname)//angela
解構巢狀物件，很可能會無意中建立乙個無效表示式，比方說下面的loc後的大括號則不需要，更好的做法是定義乙個預設值

let  } = node
let colors = ['red', 'green', 'blue']


let [, , thirdcolor] = colors
可以像如上所示只取陣列第三個元素，忽略前兩個

let colors = ['red', 'green', 'blue'],


firstcolor = 'black',


secondcolor = 'purple';


[firstcolor, secondcolor] = colors
對變數重新賦值利用解構時，陣列解構不再需要左右兩側加小括號了

可能陣列解構用的最多的莫過於交換值吧

let a = 1,


b = 2;


[a, b] = [b, a]
同樣陣列解構中也可以新增預設值

陣列解構中有乙個不定元素的概念，可以通過...語法將陣列中的其餘元素賦值給乙個特定的變數

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


let [firstcolor, ...restcolors] = colors//restcolors包含兩個元素green和blue
concat方法的設計初衷是連線兩個陣列，如果呼叫時不傳遞引數就會返回當前函式的副本

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


let clonecolors = colors.concat() //["red", "green", "blue"]
上述**用es6中不定元素也可以實現該目標

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


let [...clonecolors] = colors //["red", "green", "blue"]
需要注意的是在被解構的陣列中，不定元素必須為最後乙個條目，在後面繼續新增逗號會導致語法錯誤

解構引數

function setcookie(name, value, ={}) 


setcookie("type", "js", )
想的最全面的就是既使用解構又使用預設值

const setcookiedefaults = 


function setcookie(name, value,


)

深入理解ES6 解構

解構時一種打破資料結構，將其拆分為更小部分的過程。解構在實際開發中經常會應用到物件和陣列中。關於解構的基本用法，請參考 es6 變數的宣告及解構賦值 const node let node 對已經宣告的變數賦值 const node let a,b node const obj let obj co...

深入理解ES6之《擴充套件物件》

當物件字面量只有乙個屬性的名稱時，js引擎會在可訪問作用域中查詢其同名變數 如果找到則該變數的值被賦給物件字面量裡的同名屬性 function createperson name,age var person 在es5中如果屬性名中包含空格或者是動態的字串變數作為屬性名，則需要用方括號來訪問，如下所...

深入理解ES6之《ES6中較小的改動》

console.log number.isinteger 25 true console.log number.isinteger 25.0 true console.log number.isinteger 25.1 falseieee 754只能準確的表示 2的53次方到2的53次方的整數 le...