ECMAScript 6入門讀書筆記二

wawor4827 發(fā)布于2019-08-23 12:27 / 3272人閱讀

摘要：變量的解構(gòu)賦值更加便利的從匿名對(duì)象或者數(shù)組中，對(duì)變量進(jìn)行賦值數(shù)組的解構(gòu)賦值基本樣式，右邊數(shù)據(jù)類型必須是可迭代的類型。

變量的解構(gòu)賦值

更加便利的從匿名對(duì)象或者數(shù)組中，對(duì)變量進(jìn)行賦值；

數(shù)組的解構(gòu)賦值

基本樣式，右邊數(shù)據(jù)類型必須是可迭代的類型。

let a = 1,
    b = 2,
    c = 3;
//等價(jià)于   
//let [a, b, c] = [1, 2, 3];

對(duì)于let [a, b, c] = [1, 2, 3];就是按照[, , ,]這樣的模式一一對(duì)abc進(jìn)行賦值
對(duì)于數(shù)組類型的模式匹配取值還算簡單的，比較容易

完全解構(gòu)

let [a, [b, [c, d], e]] =[1, [2, [3, 4], 5]];  
let [a, , b] = [1, ,3];
let [,,...c] = [1, 2, 3, 4];  
//...是將數(shù)組解構(gòu)成一串用逗號(hào)分割的參數(shù) ; c = [3, 4]

不完全解構(gòu)

let [c] = [];     //c = undefined
let [a, b] = [1]; //b = undefined

解構(gòu)報(bào)錯(cuò)，要么不能轉(zhuǎn)成對(duì)象，要么轉(zhuǎn)了也不可迭代
原生可迭代的類型有：Array,Map,Set,String,TypedArray,函數(shù)的arguments對(duì)象，NodeList對(duì)象

let [a, b] = "1234"; //a = 1; b = 2

//或者undefined,NaN,false,1,null 這些都不行
let [a] = {a : 2}; //報(bào)錯(cuò) {a : 2}is not iterable

設(shè)置默認(rèn)值
用來對(duì)不匹配成功的變量賦初始值

let [a = 123] = [];      //a = 123
let [c, d = 123] = [1]   //d = 123
let [b = 123] = [1];     //a = 1

上面例子說明一點(diǎn)：匹配成功時(shí)，不使用默認(rèn)值，不成功或者值為undefined時(shí)使用默認(rèn)值

let [d = c] = [1];      //d = 1
let [d = c] = [];       //報(bào)錯(cuò)

上面例子說明兩點(diǎn)：1.不能使用未聲明的變量進(jìn)行默認(rèn)值設(shè)定，2.在匹配成功時(shí)，引擎是不管它的，要不然就報(bào)錯(cuò)了

對(duì)象的解構(gòu)賦值

個(gè)人理解認(rèn)為，對(duì)象解構(gòu)賦值時(shí)，key的模式匹配，對(duì)value變量的賦值，其右邊對(duì)象，可以不是迭代類型（個(gè)人猜測(cè)，有待商榷）
基本樣式：

let {a} = {a : 1};   //a = 1;
let {a : c} = {a : 1};   //c = 1;

實(shí)際上它是let {a : a} = {a : 1};key的a是模式匹配，value的a是變量，用于成功后的賦值{a : 1, c : {d : 1}};對(duì)于這樣想要分別取1，{d:1},1這3個(gè)值，怎么寫匹配模式

let {a:a,c:c,c:{d:d}} = {a : 1, c : {d : 1}}; //最簡單繁瑣的

可以簡化一下let {a,c,c:gm2yuyg} = {a : 1, c : {d : 1}};,
同理let {p, p : [h, ay], p : [, {y}]} = {p: ["Hello",{ y: "World" }]};
規(guī)則允許左邊不存放任何變量名，也就是為空對(duì)象，沒有意義但又是合法的表達(dá)式

({} = [true, false]);
({} = "abc");
({} = []);

非變量聲明的解構(gòu)必需用括號(hào)括起來，不然會(huì)報(bào)錯(cuò)，如上是表達(dá)式，括起來就不會(huì)報(bào)錯(cuò)

包裝類對(duì)象的解構(gòu)

let {1:a} = "zxc";
let {toString: b} = "qwe";
console.log(b === String.prototype.toString);

將"zxc" => new String("zxc")，再將其解構(gòu)

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

function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x:3});  //[3, 0]
move();       //[0, 0]

這個(gè)參數(shù)解構(gòu)有兩個(gè)作用：1.x,y的默認(rèn)值為0,0；2.move()參數(shù)默認(rèn)值為{},所以當(dāng)未輸入時(shí)傳入的實(shí)參為{}
不用于下面的

function move({x, y} = {x: 0，y: 0}) {
  return [x, y];
}
move({x:3})  //[3, undefined]
move();      //[0, 0]

上面例子并沒有對(duì)x,y進(jìn)行默認(rèn)值的設(shè)定，只是對(duì)move(),傳入實(shí)參進(jìn)行了{(lán)x: 0，y: 0}的默認(rèn)值設(shè)定

用途

個(gè)人理解：從類似數(shù)組或者對(duì)象的數(shù)值集合中快速提取自己想要的值
有趣的應(yīng)用就是數(shù)值之間的交換

let a = 1,
    b = 2;
[a, b] = [b, a];
console.log(a,b);

因?yàn)閿?shù)組的解構(gòu)必須按順序來，不像對(duì)象的解構(gòu)，按key模式匹配
其他應(yīng)用有待自己對(duì)解構(gòu)更加靈活的應(yīng)用

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/98530.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wawor4827

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 511·2023-04-26 00:33
Maven項(xiàng)目自動(dòng)修改JDK版本解決方案 #yyds干貨盤點(diǎn)#

閱讀 3538·2021-11-24 09:39
域名如何綁定自己主機(jī)-家用電腦如何綁定域名？

閱讀 2899·2021-09-22 15:34
vue微信網(wǎng)頁授權(quán)最終解決方案

閱讀 2316·2019-08-23 18:07
模擬 vue3.0 rfcs `createComponent` api 中的`props`類型推導(dǎo)

閱讀 2912·2019-08-23 18:04
11 個(gè)最好的 JavaScript 動(dòng)態(tài)效果庫

閱讀 3694·2019-08-23 16:06
《劍指offer》分解讓復(fù)雜問題更簡單

閱讀 2893·2019-08-23 15:27
【劍指offer】1.二維數(shù)組查找

閱讀 1614·2019-08-23 14:32

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

ECMAScript 6入門讀書筆記二

相關(guān)文章