成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6-解構(gòu)

import. / 1644人閱讀

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

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

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

var  = {
    name: "tom",
    type: "1"
}
var name = node.name,    //tom
    type = node.type;    //1
對象解構(gòu)

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

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

let {name, type} = node;

console.log(name, type)    //tom, 1
默認值

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

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

let {name, type， value} = node;

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

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

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

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

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

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

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

為非同名變量賦值

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

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

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

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

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

嵌套對象的解構(gòu)

對于深層次的解構(gòu)，可以深入到嵌套對象的結(jié)構(gòu)中去提取你想要的數(shù)據(jù)，例：

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

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

數(shù)組解構(gòu)

數(shù)組解構(gòu)和對象解構(gòu)非常相似，只是將對象替換成數(shù)組。數(shù)組解構(gòu)時，解構(gòu)作用在數(shù)組內(nèi)部的位置上，而不是作用在對象的具體的屬性名稱上，例：

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

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

混合解構(gòu)

對象和數(shù)組解構(gòu)能被用在一起，以創(chuàng)建更復(fù)雜的解構(gòu)表達式。在對象和數(shù)組混合解構(gòu)中這么做能更準(zhǔn)確的提取出你想要的數(shù)據(jù)片段。例：

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

這種解構(gòu)對從JOSN配置中抽取數(shù)據(jù)來說尤為有用。因為它不需要在探索整個結(jié)構(gòu)。

參數(shù)解構(gòu)

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

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94808.html

相關(guān)文章

  • ES6 學(xué)習(xí)筆記（一）let，const和解構(gòu)賦值

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

    iOS122 評論0 收藏0

  • es6 - 解構(gòu)賦值

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

    DirtyMind 評論0 收藏0

  • es6之解構(gòu)賦值

    摘要：的語法已經(jīng)出了很長的時間了，在使用上也可以通過這類的編譯工具轉(zhuǎn)譯為瀏覽器可以識別的的語法，但是依舊有很多開發(fā)在寫代碼的時候，依舊沒有用的語法，而是習(xí)慣使用老的語法，這篇文章主要會介紹解構(gòu)賦值基本用法以及在實際使用場景中相比語法的優(yōu)勢，讓大家 es6的語法已經(jīng)出了很長的時間了，在使用上也可以通過babel這類的編譯工具轉(zhuǎn)譯為瀏覽器可以識別的es5的語法，但是依舊有很多開發(fā)在寫代碼的時候，...

    yeooo 評論0 收藏0

  • ES6學(xué)習(xí)手稿之基本類型擴展

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

    tommego 評論0 收藏0

  • ES6-變量的解構(gòu)賦值(3)

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

    Jason_Geng 評論0 收藏0

  • ES6學(xué)習(xí) 第二章 變量的解構(gòu)賦值

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

    番茄西紅柿 評論0 收藏2637

發(fā)表評論

0條評論

import.

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<