国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES6指北【6】——詳談解構賦值【附贈練習題】

sorra / 1573人閱讀

摘要：指北詳談解構賦值附贈練習題一何謂解構賦值基本概念首先我們看一下給的定義解構賦值語法是一個表達式，這使得可以將值從數組或屬性從對象提取到不同的變量中從定義中，我們可以發現解構賦值的作用是對變量進行賦值主要通過兩個方面實現這個作用數組將數組中的

ES6指北【6】——詳談解構賦值【附贈練習題】 一、何謂解構賦值？ 1. 基本概念

首先我們看一下MDN給的定義

解構賦值語法是一個 Javascript 表達式，這使得可以將值從數組或屬性從對象提取到不同的變量中

從定義中，我們可以發現：
解構賦值的作用是對變量進行賦值
主要通過兩個方面實現這個作用

數組【將數組中的值賦給變量】

let [a, b, c] = [0, 1, 2]
console.log(a, b, c) // 0 1 2

對象【將對象中屬性的值賦給變量】

let obj = {a: 0, b: 1, c: 2}
// es5我們想把obj的值給取出來非常麻煩，而且obj的屬性過多的話，還要進行遍歷
let a = obj.a
let b = obj.b
let c = obj.c
// es6通過解構賦值就會非常簡單
let {a: a, b: b, c: c} = obj
// 對象鍵值相同，可以只寫一個【ES6提供的語法糖】，所以我們還可以簡寫成下面這個樣子
let {a, b, c} = obj
console.log(a, b, c) // 0 1 2
2. 模式匹配 
很多初學者都很難理解的問題是左邊是數組/對象，右邊也是數組/對象，是怎么進行匹配的呢？

其實這是對解構賦值一個非常大的誤解。解構賦值的本質是模式匹配——只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值
所以表達式的左邊并不是數組/對象，而是變量的集合，只不過它的模式要與數組/對象相對應，這里要特別強調的是對象的模式匹配還要保持鍵名【key】相同

那么現在我們就可以重新定義一下解構賦值了：把一些東西解放出來【解構】，按照模式匹配對應地賦值給其它變量

當然，上述示例適合于普通的變量聲明，工作中我們會遇到許多特殊情況，這就需要解構賦值的特殊用法了

二、解構賦值的常見特殊用法 1. 給部分變量賦值 
// 數組
let [a, , c, , e] = [1, 2, 3, 4, 5]
console.log(a, c, e) // 1 3 5

// 不適用于對象
2. 設置默認值

這里類似于函數默認參數值【ES6指北4有講解，感興趣的朋友可以去看看】，先看個例子

// 數組
let [a, b, c, d] = [1, 2, 3]
console.log(d) // undefined
// 這里的d未被賦值，所以值為undefined
// 在這種情況我們可以像對函數參數設置默認值一樣，對d也設置默認值
let [a, b, c, d = 4] = [1, 2, 3]
console.log(d) // 4

// 對象
let {a = {}, b = 1} = {a: undefined, b: 10}
console.log(a, b) // {} 10
3. 與函數返回值結合 
// 數組
let f = () => [1, 2, 3]
let [a, b] = f()
console.log(a, b)

// 對象
let f = () => {
  return {a: 0, b: 1, c: 2}
}
let {a, b} = f()
console.log(a, b) // 0 1
4. 與rest參數結合 
// 數組
let [a, ...args] = [10, 2, 3, 4, 5]
console.log(args) // [2, 3, 4, 5]
// 對象
let {a, ...args} = {a: 10, b: 5, c: 3}
console.log(args) // {b: 5, c: 3}
5. 與函數參數結合 
// 對象
function test({x: y = 2}) {
  console.log(y)
}
// 等價于下面的形式
function test() {
  let {x: y = 2} = arguments[0]
  console.log(y)
}
// 這個時候你會發現，如果參數與結構賦值結合的話，等于對參數做出了數據類型【對象】的約束
// 比如，如果你傳遞的參數為字符串
test("asdf")
// 那么代碼的邏輯是這樣的
let {x: y = 2} = "asdf" // 模式不匹配，解構失敗
// 那么自然會報錯了

// 如果你希望傳遞其它數據類型不報錯的話，也很簡單，為參數添加默認值就行【默認值為對象】
function test({x: y = 2} = {}) {
  console.log(y)
}

// 數組
function test([a = 1, b = 2]) {
  console.log(a, b)
}
三、練習題 練習一 
let obj = {a: 1, b: 2, c: {d: {e: 5}}}
let {a, b, c: qkcakqw} = obj
console.log(d) // ?
練習二 
function drawES2015Chart({size = "big", cords = {x: 0, y: 0}, radius = 25} = {}) {
  console.log(size, cords, radius);
}

drawES2015Chart() // ?
drawES2015Chart({size: "small", cords: {a: 1}, radius: {b: 1}}) // ?

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

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

相關文章

  • ES6指北【1】——let、const

    摘要：如何學習的學習順序以此類推沒學好就別想學好邊學邊用學了就要用變量聲明的方式上面兩個是的語法，下面兩個是的語法塊級作用域看會聲明一個全局變量嗎顯然當聲明了全局變量后，是無法再聲明全局變量的，只能對其賦值結論含義不明的問題下面的代碼不會執 1.如何學習ES6 1.1 js的學習順序 ES5 -> ES6 -> ES7 -> ES8 以此類推 ES5沒學好就別想學好ES6 1.2 邊學邊用 ...

    張春雷 評論0 收藏0

  • ES6指北【1】——let、const

    摘要：如何學習的學習順序以此類推沒學好就別想學好邊學邊用學了就要用變量聲明的方式上面兩個是的語法，下面兩個是的語法塊級作用域看會聲明一個全局變量嗎顯然當聲明了全局變量后，是無法再聲明全局變量的，只能對其賦值結論含義不明的問題下面的代碼不會執 1.如何學習ES6 1.1 js的學習順序 ES5 -> ES6 -> ES7 -> ES8 以此類推 ES5沒學好就別想學好ES6 1.2 邊學邊用 ...

    tain335 評論0 收藏0

  • ES6指北【2】—— 箭頭函數

    摘要：箭頭函數基本語法函數語法具名函數匿名函數三句話第一句話聲明第二句話聲明匿名函數第三句話把匿名函數賦值給箭頭函數語法特點只能做賦值，不能做聲明第一種寫法完全寫法不省略參數個數，不省略函數體花括號參數個數函數體內語句個數第二種寫法省略參數括號參 1.箭頭函數基本語法 1.1 ES3 函數語法 // 具名函數 function xxx(arg1, arg2) { console.lo...

    DobbyKim 評論0 收藏0

  • ES6，你不得不學！

    摘要：但是，的本質仍然是函數，是構造函數的另外一種寫法。報錯原生構造函數的繼承對于一些原生的構造函數，比如，，，等，在是無法通過方法實現原生函數的內部屬性，原生函數內部的無法綁定，內部屬性獲得不了。 在沒有學習 ES6 之前，學習 React，真的是一件非常痛苦的事情。即使之前你對 ES5 有著很好的基礎，包括閉包、函數、原型鏈和繼承，但是 React 中已經普遍使用 ES6 的語法，包括 ...

    CKJOKER 評論0 收藏0

  • ES6常用知識點概述

    摘要：那之前的例子來使用一下的話，你會發現瀏覽器報錯了，如圖定義的變量不允許二次修改。如圖箭頭函數沒有它自己的值，箭頭函數內的值繼承自外圍作用域。如圖這里兩邊的結構沒有一致，如果是的話，是可以正常解構的。 前言 國慶假期已過一半，來篇干貨壓壓驚。 ES6，并不是一個新鮮的東西，ES7、ES8已經趕腳了。但是，東西不在于新，而在于總結。每個學前端的人，身邊也必定有本阮老師的《ES6標準入門》或...

    keithyau 評論0 收藏0

發表評論

0條評論

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