ES6-解構

import. 發布于2019-08-22 17:03 / 1637人閱讀

摘要：對象和數組是中常用的數據解構，由于的普及，二者已經成為語言中特別重要的一個部分。解構是一種打破數據結構，將其拆分成更小部分的過程。數組解構數組解構和對象解構非常相似，只是將對象替換成數組。例這種解構對從配置中抽取數據來說尤為有用。

對象和數組是js中常用的數據解構，由于JSON的普及，二者已經成為語言中特別重要的一個部分。ES6中添加了可以簡化解析這種解構的新特性：解構。解構是一種打破數據結構，將其拆分成更小部分的過程。

在早期版本中，開發者為了從對象和數組中獲取特定數據并賦值給變量，就像這樣：

var  = {
    name: "tom",
    type: "1"
}
var name = node.name,    //tom
    type = node.type;    //1

對象解構

對象解構的語法是在賦值的左邊放置一個對象，例：

let node = {
    name:"tom",
    type: "1"
}

let {name, type} = node;

console.log(name, type)    //tom, 1

默認值

使用解構表達式時，如果指定的局部變量在對象中不存在，那么這個局部變量會被賦值為undefined，例：

let node = {
    name:"tom",
    type: "1"
}

let {name, type， value} = node;

console.log(name, type, value)    //tom, 1, undefined

這段代碼額外定義了一個局部變量value，然后嘗試為它賦值，然而在node對象上，并沒有對應名稱的屬性值，所以像預期中那樣賦值為undefined.

當指定的屬性不存在時，可以定義一個默認值，在屬性名稱后面添加默認值即可，例：

let node = {
    name:"tom",
    type: "1"
}

let {name, type， value="true"} = node;

console.log(name, type, value)    //tom, 1, true

為變量value設置了默認值true，只有當node上沒有該屬性或者該屬性當值為undefined時才會生效。

為非同名變量賦值

若你想使用不同的變量賦值，例：

let node = {
    name:"tom",
    type: "1"
}

let {name, type:nameType， value="true"} = node;

console.log(name, nameType, value)    //tom, 1, true

在上面的代碼中，名稱被放置在右邊，需要進行值讀取的位置被放在左邊。

嵌套對象的解構

對于深層次的解構，可以深入到嵌套對象的結構中去提取你想要的數據，例：

let node = {
    name:"tom",
    type: "1",
    meat:{
        start:{
            date: "1980-01-23",
            time: "10:00"
        },
        end:{
            date: "1980-01-23",
            time: "11:00"
        }
    }
}

let {meat:{start}} = node;

console.log(start.time, start.date)    //11:00, 1980-01-23

還能更近一步，在對象的嵌套解構中為本地變量使用不同的名稱，和為非同名變量賦值語法相同。

數組解構

數組解構和對象解構非常相似，只是將對象替換成數組。數組解構時，解構作用在數組內部的位置上，而不是作用在對象的具體的屬性名稱上，例：

let colors = ["red", "green", "blue"];
let [firstColor, secondColor] = colors;
console.log(firstColor, secondColor)    //red, green

其他的基本一樣不在一一列出。

混合解構

對象和數組解構能被用在一起，以創建更復雜的解構表達式。在對象和數組混合解構中這么做能更準確的提取出你想要的數據片段。例：

let node = {
    name:"tom",
    type: "1",
    meat:{
        start:{
            date: "1980-01-23",
            time: "10:00"
        },
        end:{
            date: "1980-01-23",
            time: "11:00"
        }
    },
    colors: ["red", "green", "blue"]
}

let {
    meat:{start},
    colors: [firstColor]
    } = node;

console.log(start.date, firstColor)    //1980-01-23, red

這種解構對從JOSN配置中抽取數據來說尤為有用。因為它不需要在探索整個結構。

參數解構

解構還有一個特別有用的場景，即在傳遞函數參數時。當一個js函數接收大量可選參數時，常用的模式是創建一個options對象，其中包含了附加的參數，就像這樣：

function foo(options) {
   var options = options || {}
   var name = options.name,
       tiem = options.time;
   
   //...其他代碼
}

foo({
    name: "tom",
    tiem: "10:00"
})

參數的解構提供了更清楚的地標標明了函數期望輸入的方案。它使用對象或數組解構的模式替代了具體的參數名稱。下面重寫了foo()函數：

function foo({name, time} = {}) {
   //...其他代碼
}

foo({
    name: "tom",
    tiem: "10:00"
})

參數解構擁有以上其它解構方式的所有能力。你可以在其中使用默認參數、混合解構、或使用與屬性不同的其他變量名。

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94808.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的語法已經出了很長的時間了，在使用上也可以通過babel這類的編譯工具轉譯為瀏覽器可以識別的es5的語法，但是依舊有很多開發在寫代碼的時候，...

yeooo 2019-08-23 13:57 評論0 收藏0
ES6學習手稿之基本類型擴展

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

tommego 2019-08-21 18:25 評論0 收藏0
ES6-變量的解構賦值(3)

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

Jason_Geng 2019-08-23 16:46 評論0 收藏0
ES6學習第二章變量的解構賦值

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

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637