ECMAScript 6入門讀書筆記二

wawor4827 發布于2019-08-23 12:27 / 3279人閱讀

摘要：變量的解構賦值更加便利的從匿名對象或者數組中，對變量進行賦值數組的解構賦值基本樣式，右邊數據類型必須是可迭代的類型。

變量的解構賦值

更加便利的從匿名對象或者數組中，對變量進行賦值；

數組的解構賦值

基本樣式，右邊數據類型必須是可迭代的類型。

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

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

完全解構

let [a, [b, [c, d], e]] =[1, [2, [3, 4], 5]];  
let [a, , b] = [1, ,3];
let [,,...c] = [1, 2, 3, 4];  
//...是將數組解構成一串用逗號分割的參數 ; c = [3, 4]

不完全解構

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

解構報錯，要么不能轉成對象，要么轉了也不可迭代
原生可迭代的類型有：Array,Map,Set,String,TypedArray,函數的arguments對象，NodeList對象

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

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

設置默認值
用來對不匹配成功的變量賦初始值

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

上面例子說明一點：匹配成功時，不使用默認值，不成功或者值為undefined時使用默認值

let [d = c] = [1];      //d = 1
let [d = c] = [];       //報錯

上面例子說明兩點：1.不能使用未聲明的變量進行默認值設定，2.在匹配成功時，引擎是不管它的，要不然就報錯了

對象的解構賦值

個人理解認為，對象解構賦值時，key的模式匹配，對value變量的賦值，其右邊對象，可以不是迭代類型（個人猜測，有待商榷）
基本樣式：

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

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

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

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

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

非變量聲明的解構必需用括號括起來，不然會報錯，如上是表達式，括起來就不會報錯

包裝類對象的解構

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

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

函數參數的解構

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

這個參數解構有兩個作用：1.x,y的默認值為0,0；2.move()參數默認值為{},所以當未輸入時傳入的實參為{}
不用于下面的

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

上面例子并沒有對x,y進行默認值的設定，只是對move(),傳入實參進行了{x: 0，y: 0}的默認值設定

用途

個人理解：從類似數組或者對象的數值集合中快速提取自己想要的值
有趣的應用就是數值之間的交換

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

因為數組的解構必須按順序來，不像對象的解構，按key模式匹配
其他應用有待自己對解構更加靈活的應用

GPU云服務器云服務器 ECMAScript 6 讀書筆記編程思想讀書筆記大數據時代讀書筆記

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

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

《ECMAScript 6 入門》讀書筆記

摘要：阮一峰老師開源作品。書上的示例代碼可以通過在線網站代碼調試工具調試。阮一峰老師開源作品。書上的示例代碼可以通過在線網站代碼調試工具 JS Bin 調試。作用域作用域鏈每個變量或函數通過執行環境 (execution context) 定義了其有權訪問的其他數據，決定了他們各自的行為；全局執行環境是最頂層的執行環境，根據宿主環境的不同，表示全局執行環境的對象也不同：在瀏覽...

qieangel2013 2019-08-20 15:21 評論0 收藏0
ECMAScript 6入門讀書筆記一

摘要：與也是用來聲明變量，但是不同于，個人理解是它是用來修復的一些神奇效果，似的變量更加規范，簡單來說定義的變量就是私有變量，有以下幾點作用聲明的變量只在它所在的代碼塊中生效即它的塊級作用域中生效對于循環的塊級作用域，當聲明循環體時，有兩個特點聲 let與const let 也是用來聲明變量，但是不同于var，個人理解是它是用來修復var的一些神奇效果，似的變量更加規范，簡單來說let定義的...

ShowerSun 2019-08-23 12:27 評論0 收藏0
python基礎（《Python編程：從入門到實踐》讀書筆記）

摘要：注本文的大部分代碼示例來自書籍編程從入門到實踐。一變量命名變量名只能包含字母數字和下劃線。要在遍歷列表的同時對其進行修改，可使用循環。四用戶輸入函數讓程序暫停運行，等待用戶輸入一些文本。注：本文的大部分代碼示例來自書籍《Python編程：從入門到實踐》。一、變量：命名：（1）變量名只能包含字母、數字和下劃線。變量名可以字母或下劃線打頭，但不能以數字打頭（2）變量名不能包含空格，...

springDevBird 2019-07-30 16:29 評論0 收藏0
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發布《80% 應聘者都不及格的 JS 面試題》之后，全網閱讀量超過 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 評論0 收藏0
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發布《80% 應聘者都不及格的 JS 面試題》之后，全網閱讀量超過 6W，在知乎、掘金、cnodejs ...

AbnerMing 2019-08-20 16:57 評論0 收藏0