es6基礎(chǔ)學(xué)習(xí)之解構(gòu)賦值
前言
es6的語法已經(jīng)出了很長的時間了，在使用上也可以通過babel這類的編譯工具轉(zhuǎn)譯為瀏覽器可以識別的es5的語法，但是依舊有很多開發(fā)在寫代碼的時候，依舊沒有用es6的語法，而是習(xí)慣使用老的語法，這篇文章主要會介紹解構(gòu)賦值基本用法以及在實際使用場景中相比es5語法的優(yōu)勢，讓大家從根本上了解es6語法的優(yōu)勢
下面話不多說了，來一起看看詳細的介紹吧
基本用法
數(shù)組解構(gòu)
讓我們一起先來看數(shù)組解構(gòu)的基本用法：
let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3 let [d, [e], f] = [1, [2], 3] // 嵌套數(shù)組解構(gòu) d=1, e=2, f=3 let [g, ...h] = [1, 2, 3] // 數(shù)組拆分 g=1, h=[2, 3] let [i,,j] = [1, 2, 3] // 不連續(xù)解構(gòu) i=1, j=3 let [k,l] = [1, 2, 3] // 不完全解構(gòu) k=1, l=2
上面的例子包含了數(shù)組解構(gòu)時常用的基本用法
對象解構(gòu)
接下來再讓我們一起看看對象解構(gòu)的基本用法：
let {a, b} = {a: 'aaaa', b: 'bbbb'} // a='aaaa' b='bbbb'
let obj = {d: 'aaaa', e: {f: 'bbbb'}}
let {d, e:{f}} = obj // 嵌套解構(gòu) d='aaaa' f='bbbb'
let g;
(g = {g: 'aaaa'}) // 以聲明變量解構(gòu) g='aaaa'
let [h, i, j, k] = 'nice' // 字符串解構(gòu) h='n' i='i' j='c' k='e'
使用場景
變量賦值
我們先來看最基本的使用場景：變量賦值，先來看我們在平時開發(fā)中是怎么使用es5對變量賦值的：
var data = {userName: 'aaaa', password: 123456}
var userName = data.userName
var password = data.password
console.log(userName)
console.log(password)
var data1 = ['aaaa', 123456]
var userName1 = data1[0]
var password1 = data1[1]
console.log(userName1)
console.log(password1)
上面兩個例子是最簡單的例子，用傳統(tǒng)es5變量賦值，然后調(diào)用，這么寫的問題就是顯得代碼啰嗦，明明一行可以搞定的事情非要用三行代碼，來看看解構(gòu)賦值是怎么干的：
const {userName, password} = {userName: 'aaaa', password: 123456}
console.log(userName)
console.log(password)
const [userName1, password1] = ['aaaa', 123456]
console.log(userName1)
console.log(password1)
相對于es5的語法是不是更加簡單明了，在數(shù)據(jù)量越大用解構(gòu)賦值的優(yōu)勢越明顯
函數(shù)參數(shù)的定義
一般我們在定義函數(shù)的時候，如果函數(shù)有多個參數(shù)時，在es5語法中函數(shù)調(diào)用時參數(shù)必須一一對應(yīng)，否則就會出現(xiàn)賦值錯誤的情況，來看一個例子：
function personInfo(name, age, address, gender) {
console.log(name, age, address, gender)
}
personInfo('william', 18, 'changsha', 'man')
上面這個例子在對用戶信息的時候需要傳遞四個參數(shù)，且需要一一對應(yīng)，這樣就會極易出現(xiàn)參數(shù)順序傳錯的情況，從而導(dǎo)致bug，接下來來看es6解構(gòu)賦值是怎么解決這個問題的：
function personInfo({name, age, address, gender}) {
console.log(name, age, address, gender)
}
personInfo({gender: 'man', address: 'changsha', name: 'william', age: 18})
這么寫我們只需要知道要傳什么參數(shù)就行來，不需要知道參數(shù)的順序也沒問題
交換變量的值
在es5中我們需要交換兩個變量的值需要借助臨時變量的幫助，來看一個例子：
var a=1, b=2, c c = a a = b b = c console.log(a, b)
來看es6怎么實現(xiàn)：
let a=1, b=2; [b, a] = [a, b] console.log(a, b)
是不是比es5的寫法更加方便呢
函數(shù)的默認參數(shù)
在日常開發(fā)中，經(jīng)常會有這種情況：函數(shù)的參數(shù)需要默認值，如果沒有默認值在使用的時候就會報錯，來看es5中是怎么做的：
function saveInfo(name, age, address, gender) {
name = name || 'william'
age = age || 18
address = address || 'changsha'
gender = gender || 'man'
console.log(name, age, address, gender)
}
saveInfo()
在函數(shù)離 main先對參數(shù)做一個默認值賦值，然后再使用避免使用的過程中報錯，再來看es6中的使用的方法：
function saveInfo({name= 'william', age= 18, address= 'changsha', gender= 'man'} = {}) {
console.log(name, age, address, gender)
}
saveInfo()
在函數(shù)定義的時候就定義了默認參數(shù)，這樣就免了后面給參數(shù)賦值默認值的過程，是不是看起來簡單多了
總結(jié)
這篇文章簡單介紹了es6的解構(gòu)賦值，如果有錯誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評指正，如果喜歡，歡迎點贊收藏
好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
獲取當(dāng)前網(wǎng)頁document.url location.href區(qū)別總結(jié)
請教:document.URL和window.location.href區(qū)別2008-05-05
解決iframe嵌套第三方網(wǎng)址不能訪問的各種報錯
在一些場景下,我們的網(wǎng)站需要通過iframe標(biāo)簽嵌入第三方廠家的頁面,這時候就得通過iframe標(biāo)簽去引入需要嵌入網(wǎng)頁的網(wǎng)址了,這篇文章主要給大家介紹了關(guān)于解決iframe嵌套第三方網(wǎng)址不能訪問的各種報錯,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了JavaScript如何編寫簡單的計算器，功能很簡單，可以實現(xiàn)加減乘除功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
在前端中可以使用多種方法來判斷一個對象是否為空,這篇文章主要給大家介紹了關(guān)于前端判斷對象為空的6種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)隨機點名器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了JavaScript實現(xiàn)職責(zé)鏈模式概述，詳細的介紹了什么是職責(zé)鏈模式和實現(xiàn)方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
javascript獲取指定區(qū)間范圍隨機數(shù)的方法
下面小編就為大家?guī)硪黄猨avascript獲取指定區(qū)間范圍隨機數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
setTimeout函數(shù)是一個原生的javascript函數(shù)。setTimeout函數(shù)會在一個指定的延遲時間之后調(diào)用一個函數(shù)或執(zhí)行一段指定的代碼。它的應(yīng)用非常廣泛，例如我們希望用戶在瀏覽器某個頁面一段時間后彈出一個對話框，或者是鼠標(biāo)點擊某個元素后隔幾秒鐘在刪除這個元素。2017-02-02
這篇文章主要介紹了JavaScript中 this 指向問題深度解析,JavaScript 中的 this 指向問題有很多文章在解釋，仍然有很多人問，本文給大家深度解析，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了談?wù)劄槭裁茨愕?JavaScript 代碼如此冗長，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01