es6的解構賦值

tomener 發布于2019-08-23 14:31 / 1443人閱讀

摘要：函數參數中，模式不能帶有圓括號函數屬于聲明變量賦值語句中，不能將整個模式，或嵌套模式中的一層，放在圓括號之中。

解構賦值的意思：允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構

數組的解構賦值

 大多數變量賦值都是多帶帶進行的
 let a  = 10
 let b = 10
 
 上面這樣寫法就多帶帶進行簡單的賦值，那么數組解構賦值如何去寫，請看下面的例子
 let [a] = 10 
 上面這樣寫會報錯，左邊[a]為匹配項，右邊10為賦值項，如果右邊不是數組，或不是可遍歷的結構就會報錯
 
 ------------------
 下面這樣就不會報錯，匹配項可以匹配到，而且這也算是多帶帶賦值
 let [a] = [10]
 console.log(a) // 將會得到10
 
 結構賦值的優點就是多個賦值，結構化賦值,下面的b會得到undefined，因為匹配項匹配到的賦值為undefined未定義
 let [a,b] = [10]
 console.log(a) // 10
 console.log(b) // undefined
 
 那我們來看看結構化多一點的賦值
 let [a,[b,c,[d]],[e,f],g,[[h]]] = [1,[2,3,[4]],[5,6],7,[[8]]]
 console.log(a,b,c,d,e,f,g,h) // 1,2,3,4,5,6,7,8
 
 如果去掉[[8]]的二維數組，變為一維數組會怎樣
 let [a,[b,c,[d]],[e,f],g,[[h]]] = [1,[2,3,[4]],[5,6],7,[8]]
 console.log(a,b,c,d,e,f,g,h) // 報錯
 
 那我們來看看數組解構賦值的默認值是如何定義的呢？
 let [arr = 3] = []
 console.log(arr) // 3
 
 來看看下面這一組
 let [arr1 = 1,arr2 = 2,arr3=3] = []
 console.log(arr1,arr2,arr3) // 1，2，3
 
 記住數組解構賦值不管你有沒有默認值，右邊只要匹配到并且有值都會覆蓋左邊的默認值
 let [arr1 = 1,arr2 = 2,arr3=3] = [3，2，1]
 console.log(arr1,arr2,arr3) // 3，2，1
 
 但是有一種類型除外不會右邊的不會覆蓋左邊的默認值，undefined(只有它)
 let [a = 3] = [undefined]
 console.log(a) // 3

對象的解構賦值

  對象的結構賦值和數組的不太一樣，對象是對屬性進行匹配的，而數組是按順序匹配的
  
  下面我們來看看對象解構賦值如何來寫
  let {re, ty} = {re: 1, ty: 2}
  console.log(re,ty) // 1,2
  
  下面這個例子obj會報錯是因為obj是匹配項用來匹配右邊對象的屬性key，而左邊的baz才是變量
  let {obj: baz} = {obj: "baz"}
  console.log(baz) // baz
  console.log(obj) // 報錯
  
  我們來試著寫對象解構化的解構賦值
  let obj = {
      a: {
          b: [1],
          c: {
              c1: "c1",
              c2: "c2",
              c3: true
          }
      }
  }
  let {a, a: {b,c: {c1,c2,c3}}} = obj
  console.log(a) // 解構出的結果
  {
      b: [1],
      c: {
          c1: "c1",
          c2: "c2",
          c3: true
      }
  }
  
  會得到[1],這就是對象解構賦值的原因，打印里面的屬性都會得到值而且不會報錯
  console.log(b)
  
  我們再來看看對象解構賦值默認值
  
  右邊的值永遠覆蓋左邊的默認值，除卻undefind
  let {init = 4} = {init: 5}
  console.log(init) //5

字符串，數值布爾，函數解構賦值

 字符串
 
 我理解的啊就是字符串會被分割成數組，然后一一對應，感覺和數組解構賦值差不多
 let [a,b,c,d,e,f] = "qwert"
 console.log(a,b,c,d,e,f) // q,w,e,r,t,undefined

我們還可以獲取字符串的長度，但是匹配屬性必須為length，否則會報錯
let {length : len} = "哈哈哈哈哈哈";
len // 6

數值布爾
我看官方是給了兩個例子，數值和布爾解構都會將之轉化為對象，軟老師的解釋就是數值和布爾值的包裝對象都有toString屬性，那我們來打印一下Number.prototype和Boolean.prototype果然兩個里面都有toString的方法，而且還有一個valueOf方法，我們來試試
let {toString: s} = 123;
console.log(s) // 這會是一個toString方法

let {valueOf: s3} = true
s3 === Boolean.prototype.valueOf // true

函數

我們這里會得到12，其實這和上邊的數組解構賦值和對象解構賦值一樣，只要你能匹配到就可以解構
function add({a,b}) {
    return a+b
}
console.log(add({a:10,b:2})) 

function add({hh:[x, y],c}){
  return x + y+c;
}
console.log(add({hh:[1,2],c: 1})) //4

圓括號

 變量聲明語句中，不能帶有圓括號。
 let [(x)] = [3]
 let ({a}) = {a: 3}
 函數參數中，模式不能帶有圓括號(函數屬于聲明變量)
 
 賦值語句中，不能將整個模式，或嵌套模式中的一層，放在圓括號之中。
 整個模式我理解的意思就是呢就是把左邊的匹配模式包起來了
 ([b]) = [123]
 這種情況就是包裹一部分而且把模式包裹起來了
 [({ p: a }), { x: c }] = [{}, {}];
 那么正確的使用呢,就是例如下面這樣，有對象的話一定要包裹變量，或是全部包裹起來
 [{ p: (a) }, { x: c }] = [{}, {}];
 [{ p: (a) }, { x: (c) }] = [{}, {}];
 [({ p: a }, { x: c })] = [({}, {})];
 ([{ p: a }, { x: c }] = [{}, {}]);

云服務器 GPU云服務器解構賦值對象解構解構函數 php的變量賦值

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

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

ES6 學習筆記（一）let，const和解構賦值

摘要：另外對于已經聲明的變量進行解構賦值時，要非常小心。因此在行首加，將其強制轉化為表達式執行。由于和無法轉為對象，所以對它們進行解構賦值，都會報錯。 let和const let和const是es6新增的兩個變量聲明關鍵字，與var的不同點在于：（1）let和const都是塊級作用域，在{}內有效，這點在for循環中非常有用，只在循環體內有效。var為函數作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 評論0 收藏0
es6 - 解構賦值

摘要：比如上面展示的情況都是可以聯合使用的比如對象的解構賦值對象的解構賦值是基于屬性的。當給已存在的變量解構賦值時，注意加這是由于如果不加會把左邊看成一個代碼塊，會報錯。注意事項數組的解構賦值中，使用的變量必須放在最后。解構賦值解構賦值是一個聽起來比較高大上的特性，但按我的理解，它就是一種語法糖。它并沒有賦予js更強大的能力，只是讓賦值操作更加的靈活，效率。在es6之前，賦值操作需要=...

DirtyMind 2019-08-26 11:45 評論0 收藏0
ES6學習第二章變量的解構賦值

摘要：前言前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據對象值進行匹配。前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接：變量的解構賦值解構賦值ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。解構賦值是對賦值運...

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637
ES6學習第二章變量的解構賦值

摘要：前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據對象值進行匹配。前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接：變量的解構賦值解構賦值ES6 允許按照一定模式，從數組和對象中提取值，對...

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637
ES6-變量的解構賦值(3)

摘要：數組的解構賦值特點根據數據的下標來賦值的，有次序。模式能夠匹配起來，如長度為數值和布爾值的解構賦值解構賦值的規則是只要等號右邊的值不是對象或數組，就先將其轉為對象。布爾值解構賦值為字符串的一種。在很多獨立細小的方面，解構賦值都非常有用。 1、解構賦值簡介官方解釋：按照一定的模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。舉個例子，想獲取數組中...

Jason_Geng 2019-08-23 16:46 評論0 收藏0
《ES6學習2》變量的解構賦值

摘要：解構賦值的分類數組解構賦值對象解構賦值字符串解構賦值數值解構賦值布爾值解構賦值函數參數解構賦值。嵌套情況默認值解構賦值允許設置默認值，當數組成員嚴格等于，默認值將生效。報錯報錯函數參數的解構賦值函數的參數也可以使用解構賦值和指定默認值 ES6可以從數組和對象中提取值，然后對變量進行賦值。解構賦值的分類：數組解構賦值、對象解構賦值、字符串解構賦值、數值解構賦值、布爾值解構賦值、函數參...

mist14 2019-08-26 13:52 評論0 收藏0