ES6新語法之解構(gòu)實(shí)踐指南
1.解構(gòu)初了解
解構(gòu)是ES6的一個(gè)新的語法特性,可以把他看作是一個(gè)
具有結(jié)構(gòu)賦值功能的一個(gè)語法。
關(guān)于解構(gòu)通常有倆種,有數(shù)組解構(gòu)和對(duì)象解構(gòu)
解構(gòu)有什么優(yōu)點(diǎn)嗎?為什么我們用他。
ok,讓我們用一個(gè)例子來顯示一下解構(gòu)的優(yōu)點(diǎn)
定義一個(gè)函數(shù),返回一個(gè)數(shù)組(含3個(gè)數(shù)),用a,b,c來接受。
1.用平常的語法
function foo(){
return [1,2,3]
}
var temp=foo(),
a=temp[0],b=temp[1],c=temp[2]
console.log(a,b,c)構(gòu)造一個(gè)函數(shù)手動(dòng)賦值,用一個(gè)臨時(shí)變量temp,將值傳遞給a,b,c
2.用解構(gòu)的方法
function foo(){
return [1,2,3]
}
var [a,b,c]=foo()
console.log(a,b,c)在輸出的結(jié)果都是一樣,都輸出(1,2,3)
所以你怎么選。
2.解構(gòu)詳細(xì)解析
2.1對(duì)象屬性賦值形式
相比于之前的賦值形式我們都熟悉與=a的賦值形式
但是解構(gòu)語法翻轉(zhuǎn)了這種形式,,左側(cè)變量作為一個(gè)“模式”
用于將右側(cè)的數(shù)組賦值給左側(cè)的變量
接著討論一下在上面{a,b,c}其實(shí)是{a:a,b:b,c:c}的簡寫。
那么在賦值的時(shí)候省略的部分是a: 還是 :a
在這我們就需要去了解對(duì)象屬性賦值形式
function foo(){
return {a:4,b:5,c:6}
}
var { a:aitem,b:bitem,c:citem }=foo()
console.log(aitem,bitem,citem)
var x=10,y=20
var o={d:x,e:y}
console.log(o.d,o.e)
現(xiàn)在我們大概能明白了吧,
用一張圖來解釋

2.2變量的聲明
在前面我們看到了使用var聲明變量,其實(shí)也可以使用let,const聲明
也可以通過IEIF的形式賦值比如({x,y,z}=bar())
好的,那么關(guān)于變量的話,他只能被設(shè)置為變量標(biāo)識(shí)符嗎?
這種想法是愚蠢的,任何合法的賦值表達(dá)式都可以
用兩個(gè)例子來解析
2.3怎么解構(gòu)
記住一個(gè)原則,對(duì)稱解構(gòu)。
1.解構(gòu)的過多
怎么理解,就是左右的賦值不對(duì)稱,并不是所有的值都用來解構(gòu),
多余的值會(huì)被設(shè)置為undefinder
2解構(gòu)的過少
右側(cè)的"變量"多余左側(cè)的變量
3.解構(gòu)正好
左右變量相等
數(shù)組的解構(gòu)是按順序排列的,變量的取值有他的位置決定
對(duì)象的解構(gòu),對(duì)象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值,對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制,是先找到同名屬性,然后再賦給對(duì)應(yīng)的變量。真正被賦值的是后者,而不是前者
3.實(shí)踐
3.1數(shù)組的解構(gòu)
var a1=[1,[2,3,[4]],5] var [a,[b,c,[d]],e]=a1 console.log(a,b,c,d,e)
輸出1,2,3,4,5
在這里采用重復(fù)解構(gòu)的形式,解構(gòu)的形式就是從內(nèi)向外依次解構(gòu)
3.2對(duì)象的解構(gòu)
var o1={a:{b:{c:6}}}
var {a:{b:{c:w}}}=o1
console.log(w)輸出6
3.3解構(gòu)參數(shù)
function foo({x,y}){
console.log(x.y)
}
console.log(3,4)輸出3,4,如果是console.log(3)的話會(huì)報(bào)錯(cuò),但是x的值是已經(jīng)解構(gòu)的
3.4復(fù)雜解構(gòu)
let wangfei = {
name: "王菲",
age: 18,
songs: ["紅豆", "流年", "曖昧", "傳奇"],
history: [{ name: "竇唯" }, { name: "李亞鵬" }, { name: "謝霆鋒" }],
};
let {
songs: [one, two, three],
history: [first, second, third],
} = wangfei;
console.log(one, two, three,first, second, third)
4.總結(jié)
1.了解了解構(gòu)的含義,及優(yōu)點(diǎn)
2.學(xué)會(huì)了解構(gòu)對(duì)象屬性賦值的形式
3.了解了一些解構(gòu)的技巧
4.用幾個(gè)例子來動(dòng)手實(shí)踐。
到此這篇關(guān)于ES6新語法之解構(gòu)的文章就介紹到這了,更多相關(guān)ES6新語法解構(gòu)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript異步編程模型Promise模式詳細(xì)介紹
異步模式在 Web 編程中變得越來越重要,如何處理異步請(qǐng)求后的操作是一件麻煩事。Promise 是一種異步編程模型,術(shù)語稱作 Deferred 模式,它通過一組API來規(guī)范化異步操作,讓異步操作的流程控制更加容易。2014-05-05
javascript記錄文本框內(nèi)文字個(gè)數(shù)檢測文字個(gè)數(shù)變化
要對(duì)文本框中用戶輸入的文字進(jìn)行記數(shù),在下面顯示出來,經(jīng)研究找到個(gè)不錯(cuò)的方法,可以完美解決在刪除文字后,字?jǐn)?shù)變化問題2014-10-10
微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法,簡單講述了image組件的常用屬性,并結(jié)合實(shí)例形式分析了微信小程序?qū)崿F(xiàn)圖片自適應(yīng)寬度比例的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
javascript中使用正則表達(dá)式清理table樣式的代碼
本文給大家講解的是使用javascript實(shí)現(xiàn)去除多余的TABLE的樣式,主要通過結(jié)合正則表達(dá)式來實(shí)現(xiàn),非常的簡單實(shí)用,有需要的小伙伴可以參考下。2015-07-07
JavaScript對(duì)象合并實(shí)現(xiàn)步驟介紹
這篇文章主要介紹了JavaScript對(duì)象合并實(shí)現(xiàn)步驟,為什么要合并?這是我在重構(gòu)代碼的時(shí)候的一個(gè)需求。簡單來說,我會(huì)有若干個(gè)對(duì)象需要合并為一個(gè)對(duì)象。而這些對(duì)象為兩層,如果直接展開或者賦值會(huì)涉及到深拷貝2023-01-01
微信小程序基于本地緩存實(shí)現(xiàn)點(diǎn)贊功能的方法
這篇文章主要介紹了微信小程序基于本地緩存實(shí)現(xiàn)點(diǎn)贊功能的方法,涉及微信小程序界面布局、事件響應(yīng)及緩存操作等相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12
self.attachevent is not a function的解決方法
今天一個(gè)客戶用chrome瀏覽器訪問網(wǎng)站,他的網(wǎng)站js提示self.attachevent is not a function,這個(gè)問題就是這個(gè)瀏覽器不支持attachevent,可以通過如下方法解決了,分享一下,需要的朋友可以參考下2017-04-04

