es6之解構賦值

yeooo 發布于2019-08-23 13:57 / 1752人閱讀

摘要：的語法已經出了很長的時間了，在使用上也可以通過這類的編譯工具轉譯為瀏覽器可以識別的的語法，但是依舊有很多開發在寫代碼的時候，依舊沒有用的語法，而是習慣使用老的語法，這篇文章主要會介紹解構賦值基本用法以及在實際使用場景中相比語法的優勢，讓大家

es6的語法已經出了很長的時間了，在使用上也可以通過babel這類的編譯工具轉譯為瀏覽器可以識別的es5的語法，但是依舊有很多開發在寫代碼的時候，依舊沒有用es6的語法，而是習慣使用老的語法，這篇文章主要會介紹解構賦值基本用法以及在實際使用場景中相比es5語法的優勢，讓大家從根本上了解es6語法的優勢

基本用法 數組解構

讓我們一起先來看數組解構的基本用法：

let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3
let [d, [e], f] = [1, [2], 3] // 嵌套數組解構 d=1, e=2, f=3
let [g, ...h] = [1, 2, 3] // 數組拆分 g=1, h=[2, 3]
let [i,,j] = [1, 2, 3] // 不連續解構 i=1, j=3
let [k,l] = [1, 2, 3] // 不完全解構 k=1, l=2

上面的例子包含了數組解構時常用的基本用法

對象解構

接下來再讓我們一起看看對象解構的基本用法：

let {a, b} = {a: "aaaa", b: "bbbb"} // a="aaaa" b="bbbb"
let obj = {d: "aaaa", e: {f: "bbbb"}}
let {d, e:{f}} = obj // 嵌套解構 d="aaaa" f="bbbb"
let g;
(g = {g: "aaaa"}) // 以聲明變量解構 g="aaaa"
let [h, i, j, k] = "nice" // 字符串解構 h="n" i="i" j="c" k="e"

使用場景 變量賦值

我們先來看最基本的使用場景：變量賦值，先來看我們在平時開發中是怎么使用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)

上面兩個例子是最簡單的例子，用傳統es5變量賦值，然后調用，這么寫的問題就是顯得代碼啰嗦，明明一行可以搞定的事情非要用三行代碼，來看看解構賦值是怎么干的：

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的語法是不是更加簡單明了，在數據量越大用解構賦值的優勢越明顯

函數參數的定義

一般我們在定義函數的時候，如果函數有多個參數時，在es5語法中函數調用時參數必須一一對應，否則就會出現賦值錯誤的情況，來看一個例子：

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

上面這個例子在對用戶信息的時候需要傳遞四個參數，且需要一一對應，這樣就會極易出現參數順序傳錯的情況，從而導致bug，接下來來看es6解構賦值是怎么解決這個問題的：

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

這么寫我們只需要知道要傳什么參數就行來，不需要知道參數的順序也沒問題

交換變量的值

在es5中我們需要交換兩個變量的值需要借助臨時變量的幫助，來看一個例子：

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

來看es6怎么實現：

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

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

函數的默認參數

在日常開發中，經常會有這種情況：函數的參數需要默認值，如果沒有默認值在使用的時候就會報錯，來看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()

在函數離 main先對參數做一個默認值賦值，然后再使用避免使用的過程中報錯，再來看es6中的使用的方法：

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

在函數定義的時候就定義了默認參數，這樣就免了后面給參數賦值默認值的過程，是不是看起來簡單多了

總結

這篇文章簡單介紹了es6的解構賦值，如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏

GPU云服務器云服務器解構賦值對象解構解構函數 ES6

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99840.html

ES6筆記之變量解構賦值

摘要：變量的解構賦值中允許按照一定模式，從數組和對象中提取，對變量進行賦值。數組的解構賦值上面的代碼標示可以從數組中提取值，按照位置的對應關系對變量進行賦值。默認值解構賦值允許指定默認值。變量的解構賦值 ES6中允許按照一定模式，從數組和對象中提取，對變量進行賦值。數組的解構賦值 var [a,b,c] = [1,2,3]; a // 1; b // 2; c // 3; 上面的代碼標示...

baukh789 2019-08-19 17:34 評論0 收藏0
ES6入門之變量的解構賦值

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

gityuan 2019-08-23 16:51 評論0 收藏0
ES6學習手稿之基本類型擴展

摘要：它是一個通用標準，奠定了的基本語法。年月發布了的第一個版本，正式名稱就是標準簡稱。結語的基本擴展還有一些沒有在這里詳細介紹。前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創造的，該公司1996年11月將JavaSc...

tommego 2019-08-21 18:25 評論0 收藏0
JavaScript基礎之ES6對象解構賦值

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

sutaking 2019-08-22 15:31 評論0 收藏0
ES6語法之解構賦值

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

Hancock_Xu 2019-08-21 18:32 評論0 收藏0