1.解構初了解

解構是ES6的一個新的語法特性，可以把他看作是一個

具有結構賦值功能的一個語法。

關于解構通常有倆種，有數(shù)組解構和對象解構

解構有什么優(yōu)點嗎？為什么我們用他。

ok,讓我們用一個例子來顯示一下解構的優(yōu)點

定義一個函數(shù)，返回一個數(shù)組（含3個數(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)

構造一個函數(shù)手動賦值，用一個臨時變量temp，將值傳遞給a,b,c

2.用解構的方法

  function foo(){
      return [1,2,3]
      }
   var [a,b,c]=foo()
  console.log(a,b,c)

在輸出的結果都是一樣，都輸出（1，2，3）

所以你怎么選。

2.解構詳細解析

2.1對象屬性賦值形式

相比于之前的賦值形式我們都熟悉與=a的賦值形式

但是解構語法翻轉了這種形式，，左側變量作為一個“模式”

用于將右側的數(shù)組賦值給左側的變量

接著討論一下在上面{a,b,c}其實是{a:a,b:b,c:c}的簡寫。

那么在賦值的時候省略的部分是a:   還是 :a

在這我們就需要去了解對象屬性賦值形式

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聲明變量，其實也可以使用let,const聲明

也可以通過IEIF的形式賦值比如({x,y,z}=bar()）

 好的，那么關于變量的話，他只能被設置為變量標識符嗎？

這種想法是愚蠢的，任何合法的賦值表達式都可以

用兩個例子來解析

2.3怎么解構

記住一個原則，對稱解構。

1.解構的過多

 怎么理解，就是左右的賦值不對稱，并不是所有的值都用來解構，

多余的值會被設置為undefinder

2解構的過少

右側的"變量"多余左側的變量

3.解構正好

左右變量相等

 數(shù)組的解構是按順序排列的，變量的取值有他的位置決定

對象的解構，對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值，對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者

3.實踐

3.1數(shù)組的解構

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

在這里采用重復解構的形式，解構的形式就是從內向外依次解構

3.2對象的解構

var  o1={a:{b:{c:6}}}
var {a:{b:{c:w}}}=o1
console.log(w)

輸出6

3.3解構參數(shù)

 function foo({x,y}){
        console.log(x.y)
    }
console.log(3,4)

輸出3，4，如果是console.log(3)的話會報錯，但是x的值是已經(jīng)解構的

3.4復雜解構

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.總結

1.了解了解構的含義，及優(yōu)點

2.學會了解構對象屬性賦值的形式

3.了解了一些解構的技巧

4.用幾個例子來動手實踐。

到此這篇關于ES6新語法之解構的文章就介紹到這了,更多相關ES6新語法解構內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論