ES6下javascript解構賦值常見用法總結
更新時間：2022年01月30日 09:42:14 投稿：wdc
這篇文章主要介紹了在ES6下javascript賦值常見用法總結,需要的朋友可以參考下
Javascript解構賦值出現(xiàn)的契機：
let obj = {
a: 1,
b: 2
}
// 取值
let a = obj.a
let b = obj.b
Javascript解構賦值問題核心：
每次取值既要確定對象屬性名，還得重新定義一個變量占用多一行，代碼行數(shù)和重復的聲明a，使得代碼不夠簡潔，能否通過左邊變量名，匹配到右邊的屬性名從而取得對應的值，ES6解構語法核心就基于這樣的模式匹配思想
上面的問題解構方案:
let obj = {
a: 1,
b: 2
}
// 取值
let {a, b} = obj
// a=1 b=2
很明顯看到，我們無需在右側顯式聲明取值屬性名，完全依據(jù)右邊結構進行對應取值，非常優(yōu)雅
Javascript解構賦值應用場景：
1.對象聲明解構
let obj = {
a: 1,
b: 2
}
// 取值
let {a, b} = obj
// a=1 b=2
2.對象賦值解構
let a, b
let obj = {
a: 1,
b: 2
}
// 取值
({a, b} = obj)
// 更常見的場景是變量c d被聲明到全局,這種情況在vue很常見，數(shù)據(jù)被提前聲明到data選項，數(shù)據(jù)訪問一般都是this.xxxdata,此時就很有用了
({a:c, b:d} = obj)
3.變量交換
[x,y] = [y,x]
4.數(shù)組解構
let [first,] = arr//獲取 let [first, ...rest] = arr//獲取第一個，以及剩余參數(shù)
5.函數(shù)對象實參解構
function buildAnimal({accessory = "", animal = "cat", color = 'rainbow', hairType = 'straight'} = {})
{...}
更多關于ES6下的Javascript使用小技巧請查看下面的相關鏈接
相關文章
DOM 節(jié)點屬性操作方法小結。2009-05-05
javascript 基礎篇1 什么是js 建立第一個js程序
javascript是很多東西的基礎，比如jsp，ajax等，如果不會這么，那么學起這些來就比較麻煩，所以要先學好這個，為將來的學習打好經濟基礎2012-03-03
JavaScript初級教程(第一課)...2007-04-04
這篇文章主要介紹了JavaScript中的Promise使用詳解,promise對象是JS進階學習中的重要知識點,需要的朋友可以參考下2015-06-06
JavaScript初學者應注意的七個細節(jié)詳細介紹
種種語言都有它特別的地方，對于JavaScript來說，使用var就可以聲明任意類型的變量，這門腳本語言看起來很簡單，然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經驗的,接下來介紹初學者應注意2012-12-12
淺談JavaScript中setInterval和setTimeout的使用問題
這篇文章主要介紹了淺談JavaScript中setInterval和setTimeout的使用問題,作者建議在任務龐大時盡量避免使用setInterval,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了簡介JavaScript中的setHours()方法的使用,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了javaScript中的this示例學習詳解及工作原理，大家參考使用吧2014-01-01
javascript引用對象的方法...2007-01-01
JavaScript高級程序設計（第3版）學習筆記12 js正則表達式
前面在分析PhoneGap源碼的時候，曾經總結過一次正則表達式的用法，為了不同系列文章的完整性，這里將那里的總結遷移過來2012-10-10