成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

es6之解構(gòu)賦值

yeooo / 1749人閱讀

摘要：的語(yǔ)法已經(jīng)出了很長(zhǎng)的時(shí)間了，在使用上也可以通過(guò)這類的編譯工具轉(zhuǎn)譯為瀏覽器可以識(shí)別的的語(yǔ)法，但是依舊有很多開(kāi)發(fā)在寫代碼的時(shí)候，依舊沒(méi)有用的語(yǔ)法，而是習(xí)慣使用老的語(yǔ)法，這篇文章主要會(huì)介紹解構(gòu)賦值基本用法以及在實(shí)際使用場(chǎng)景中相比語(yǔ)法的優(yōu)勢(shì)，讓大家

es6的語(yǔ)法已經(jīng)出了很長(zhǎng)的時(shí)間了，在使用上也可以通過(guò)babel這類的編譯工具轉(zhuǎn)譯為瀏覽器可以識(shí)別的es5的語(yǔ)法，但是依舊有很多開(kāi)發(fā)在寫代碼的時(shí)候，依舊沒(méi)有用es6的語(yǔ)法，而是習(xí)慣使用老的語(yǔ)法，這篇文章主要會(huì)介紹解構(gòu)賦值基本用法以及在實(shí)際使用場(chǎng)景中相比es5語(yǔ)法的優(yōu)勢(shì)，讓大家從根本上了解es6語(yǔ)法的優(yōu)勢(shì)

基本用法 數(shù)組解構(gòu)

讓我們一起先來(lái)看數(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)時(shí)常用的基本用法

對(duì)象解構(gòu)

接下來(lái)再讓我們一起看看對(duì)象解構(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"
使用場(chǎng)景 變量賦值

我們先來(lái)看最基本的使用場(chǎng)景：變量賦值，先來(lái)看我們?cè)谄綍r(shí)開(kāi)發(fā)中是怎么使用es5對(duì)變量賦值的：

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)

上面兩個(gè)例子是最簡(jiǎn)單的例子，用傳統(tǒng)es5變量賦值，然后調(diào)用，這么寫的問(wèn)題就是顯得代碼啰嗦，明明一行可以搞定的事情非要用三行代碼，來(lái)看看解構(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)

相對(duì)于es5的語(yǔ)法是不是更加簡(jiǎn)單明了，在數(shù)據(jù)量越大用解構(gòu)賦值的優(yōu)勢(shì)越明顯

函數(shù)參數(shù)的定義

一般我們?cè)诙x函數(shù)的時(shí)候，如果函數(shù)有多個(gè)參數(shù)時(shí)，在es5語(yǔ)法中函數(shù)調(diào)用時(shí)參數(shù)必須一一對(duì)應(yīng)，否則就會(huì)出現(xiàn)賦值錯(cuò)誤的情況，來(lái)看一個(gè)例子：

function personInfo(name, age, address, gender) {
  console.log(name, age, address, gender)
}
personInfo("william", 18, "changsha", "man")

上面這個(gè)例子在對(duì)用戶信息的時(shí)候需要傳遞四個(gè)參數(shù)，且需要一一對(duì)應(yīng)，這樣就會(huì)極易出現(xiàn)參數(shù)順序傳錯(cuò)的情況，從而導(dǎo)致bug，接下來(lái)來(lái)看es6解構(gòu)賦值是怎么解決這個(gè)問(wèn)題的：

function personInfo({name, age, address, gender}) {
  console.log(name, age, address, gender)
}
personInfo({gender: "man", address: "changsha", name: "william", age: 18})

這么寫我們只需要知道要傳什么參數(shù)就行來(lái)，不需要知道參數(shù)的順序也沒(méi)問(wèn)題

交換變量的值

在es5中我們需要交換兩個(gè)變量的值需要借助臨時(shí)變量的幫助，來(lái)看一個(gè)例子：

var a=1, b=2, c
c = a
a = b
b = c
console.log(a, b)

來(lái)看es6怎么實(shí)現(xiàn)：

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

是不是比es5的寫法更加方便呢

函數(shù)的默認(rèn)參數(shù)

在日常開(kāi)發(fā)中，經(jīng)常會(huì)有這種情況：函數(shù)的參數(shù)需要默認(rèn)值，如果沒(méi)有默認(rèn)值在使用的時(shí)候就會(huì)報(bào)錯(cuò)，來(lái)看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先對(duì)參數(shù)做一個(gè)默認(rèn)值賦值，然后再使用避免使用的過(guò)程中報(bào)錯(cuò)，再來(lái)看es6中的使用的方法：

function saveInfo({name= "william", age= 18, address= "changsha", gender= "man"} = {}) {
  console.log(name, age, address, gender)
}
saveInfo()

在函數(shù)定義的時(shí)候就定義了默認(rèn)參數(shù)，這樣就免了后面給參數(shù)賦值默認(rèn)值的過(guò)程，是不是看起來(lái)簡(jiǎn)單多了

總結(jié)

這篇文章簡(jiǎn)單介紹了es6的解構(gòu)賦值，如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊收藏

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99840.html

相關(guān)文章

  • ES6筆記之 變量解構(gòu)賦值

    摘要：變量的解構(gòu)賦值中允許按照一定模式，從數(shù)組和對(duì)象中提取，對(duì)變量進(jìn)行賦值。數(shù)組的解構(gòu)賦值上面的代碼標(biāo)示可以從數(shù)組中提取值，按照位置的對(duì)應(yīng)關(guān)系對(duì)變量進(jìn)行賦值。默認(rèn)值解構(gòu)賦值允許指定默認(rèn)值。 變量的解構(gòu)賦值 ES6中允許按照一定模式，從數(shù)組和對(duì)象中提取，對(duì)變量進(jìn)行賦值。 數(shù)組的解構(gòu)賦值 var [a,b,c] = [1,2,3]; a // 1; b // 2; c // 3; 上面的代碼標(biāo)示...

    baukh789 評(píng)論0 收藏0

  • ES6入門之變量的解構(gòu)賦值

    摘要：數(shù)組的解構(gòu)賦值基本用法允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為結(jié)構(gòu)。如下以上都會(huì)報(bào)錯(cuò)但是如果左邊為數(shù)組，右邊為字符串，將會(huì)取字符串的第一個(gè)下標(biāo)的值對(duì)于結(jié)構(gòu)，同樣可以使用數(shù)組的解構(gòu)賦值。 showImg(https://segmentfault.com/img/remote/1460000018826068); 數(shù)組的解構(gòu)賦值 基本用法 ES6 允許按照一定模式...

    gityuan 評(píng)論0 收藏0

  • ES6學(xué)習(xí)手稿之基本類型擴(kuò)展

    摘要：它是一個(gè)通用標(biāo)準(zhǔn)，奠定了的基本語(yǔ)法。年月發(fā)布了的第一個(gè)版本，正式名稱就是標(biāo)準(zhǔn)簡(jiǎn)稱。結(jié)語(yǔ)的基本擴(kuò)展還有一些沒(méi)有在這里詳細(xì)介紹。 前言 ES6標(biāo)準(zhǔn)以及頒布兩年了，但是，好像還沒(méi)有完全走進(jìn)我們的日常開(kāi)發(fā)。這篇文章從ES6的基本類型擴(kuò)展入手，逐步展開(kāi)對(duì)ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...

    tommego 評(píng)論0 收藏0

  • JavaScript基礎(chǔ)之ES6對(duì)象解構(gòu)賦值

    摘要：具體的分析暫時(shí)不討論解決的方式很簡(jiǎn)單，把上面的代碼塊變成一段表達(dá)式就小明總結(jié)解構(gòu)賦值是提供一個(gè)十分方便的表達(dá)式。的解構(gòu)賦值小明的對(duì)象賦值這里可以被賦予初始值小明對(duì)象的屬性不存在能夠賦值給多個(gè)變量 對(duì)象解構(gòu)賦值 ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)(Destructuring)。 --- 阮一峰《ECMAScript...

    sutaking 評(píng)論0 收藏0

  • ES6語(yǔ)法之解構(gòu)賦值

    摘要：類似數(shù)組的對(duì)象都有一個(gè)屬性，因此還可以對(duì)這個(gè)屬性解構(gòu)賦值。默認(rèn)值解構(gòu)賦值允許指定默認(rèn)值當(dāng)結(jié)構(gòu)不成功時(shí)使用默認(rèn)值。用途變量的解構(gòu)賦值用途很多。有了解構(gòu)賦值，取出這些值就非常方便。 原始操作 我們先看看下面的兩個(gè)代碼段，它們使用 ES6 之前的技巧提取數(shù)據(jù)： const point = [10, 25, -34]; const x = point[0]; const y = point[...

    Hancock_Xu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<