es6 - 解構賦值

DirtyMind 發布于2019-08-26 11:45 / 3311人閱讀

摘要：比如上面展示的情況都是可以聯合使用的比如對象的解構賦值對象的解構賦值是基于屬性的。當給已存在的變量解構賦值時，注意加這是由于如果不加會把左邊看成一個代碼塊，會報錯。注意事項數組的解構賦值中，使用的變量必須放在最后。

解構賦值

解構賦值是一個聽起來比較高大上的特性，但按我的理解，它就是一種語法糖。它并沒有賦予js更強大的能力，只是讓賦值操作更加的靈活，效率。

在es6之前，賦值操作需要=左邊是一個變量，右邊是一個數據或返回數據的函數等。
而解構賦值，是將=右邊的結構分解(解構)，然后按照格式給=左邊進行賦值，主要分為數組的解構賦值和對象的解構賦值。

語法

解構賦值的格式為，=左邊為解構賦值的語法，=右邊為初始化器，即一個對象或數組。

數組的解構賦值

數組的解構賦值是基于數組位置的，比如：

let [a,b] = [1,2] // 結果a等于1，b等于2

也可以通過解構改變變量的值。比如：

let a = 1, b = 2;
[a,b] = [100, 200];

當=左邊與右邊不完全匹配時，未能匹配到的變量會被賦值為undefined,比如：

let [a,b,c] = [1,2] //a為1，b為2，c為undefined

所以可以通過給一些變量指定默認值，以防止這種情況的發生。比如：

let [a,b,c=3] = [1,2] //a==1, b==2, c==3

注意：只有當在右邊找不到對應的值或值為undefined時，才會使用默認值。

有時候，解構賦值中，你可能只關心一部分數據，這時可以通過占位符只給某些值賦值。比如：

let [a,,,b,,] = [1,2,3,4,5,6,7,8] //a==1 b==4

在解構賦值中，通過在變量前加...號，表示生成的變量為一個數組。比如：

let [a,,...b] = [1,2,3,4,5] //a == 1, b==[3,4,5]

上面展示的情況都是可以聯合使用的,比如：

let [a,b=8,,..c] = [1,2,3,4,5,6] //a==1 b==2 c=[4,5,6]

對象的解構賦值

對象的解構賦值是基于屬性的。比如：

let {name, age} = {
    name: "icode007",
    age: 27
}
//name == "icode007" age==27

與數組的解構賦值一樣，對象的解構賦值一樣給未能解構的變量賦值undefined，一樣可以使用默認值。

當給已存在的變量解構賦值時，注意加()

let name, age;
({name, age} = {name: "icode007", age: 27});

這是由于如果不加(),js會把左邊看成一個代碼塊，會報錯。加了()后，整個變成了一個合法的表達式。

在上面的解構賦值中，變量名和對象中的屬性名必須相同，只有這樣，才能找到對應的要解構賦值的數據。
但如果我們想要給數據賦一個不同的名字呢？也是有辦法的。

let {name:myName, age: myAge} = {name: "icode007", age: 27}

這樣相應的名字和年齡就被賦值給myName和myAge了。

也可以同時使用默認值：

let {name:myName, age: myAge, jog: myJob = "soft Engineer"} = {name: "icode007", age: 27}

以上我們列舉的對象的解構賦值的例子都非常的簡單，但在實際開發中，JSON數據可能是非常復雜的，這時的解構賦值語法也可能變得復雜。比如：

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
};
let {loc: { start }} = node;
console.log(start.line);
console.log(start.column);

注意：每當有:出現在解構賦值中時，:左邊的標識符表示要檢查的位置，右邊表示要賦值的目標，如果右邊是{}或[]時，表示要賦值的變量在更深層次結構中。

上面的所有實例，如默認值，變量更名等特性都可能存在于一個解構賦值語句中。并且，數組的解構賦值與對象的解構賦值，也可以混合使用。這為我們從復雜的數據結構中提取相應數據提供了極大的便利。

函數參數的解構

函數參數的解構功能對于實現多參的函數是非常有用的。
比如

function setCookie(name, value, options){
    options = options || {};
    var secure = option.secure,
        path = option.path,
        domain = option.domain
    ;
    //...
}

setCookie("type", "js", {
    secure: true,
    expires: 60000
    })

上面的函數是常用的實現多參函數的方式，name, value為必填參數，所有可選參數封裝到options中，作為options的屬性使用。
但上面的函數存在一個問題就是，你只看函數的定義，是無法知道到底可選參數的名稱是什么的？你需要閱讀函數代碼，了解函數才能使用它。

使用函數參數解構則直觀很多：

function setCookie(name, value, {secure, path, domain}){
    //...
}

使用同樣的使用方式可以調用這個函數。

但是這種寫法有種問題是當只傳入name和value參數時，會報錯。

更好的寫法是使用函數的默認參數。

function setCookie(name, value, {secure, path = "/", domain} = {}){
    //...
}

注意事項

數組的解構賦值中，使用...rest的變量必須放在最后。

與普通的變量的賦值語句一樣，解構賦值語句也是有值的，它的值就是=右邊的內容。

最佳實踐

變量交換值

在es6之前，交換兩個變量的值，需要創建一個中間變量，類似這樣

var a = 1, b = 2, temp;
temp = a; a = b; b = temp;

現在只需要一行代碼：
[a,b] = [b,a]

提取json中的一些數據

在實際開發中，數據解構是非常復雜的，使用對象屬性去層層調用的語法非常不直觀，通過解構賦值，可以讓代碼更加的直觀與簡潔。

數組的復制

數組的解構賦值中，有個小技巧。

let arr = [1,4,9,55,244];
let [...cloneArray] = arr;
console.log(cloneArray);

這樣就實現了數組的淺復制，而在以前，數組的復制都是通過concat()方法來完成。

更多es6的內容，可以關注我的專欄--學習ES6.

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107514.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學習第二章變量的解構賦值

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