ES6學習之一

MartinDai 發布于2019-08-20 13:35 / 2101人閱讀

摘要：現在幫我們解決這個問題了，使用和大括號定義局部變量，上段代碼可以改寫如下聲明的局部變量帶來的一個附加改變是無法進行變量提升。從局部作用域開始到局部變量聲明之前這段被稱為暫時性死區，是針對某特定局部變量而言的。

周末兩天學習了ES6基礎內容，包括作用域、變量賦值、字符串、數值、數組、函數、對象這幾項的擴展。整體感覺，ES6就是對ES5進行bug修復和功能補充。

作用域

- 局部作用域與let

ES5不存在傳統意義上的塊級作用域，如果一定要說有，那就是利用函數來模擬塊級作用域，如：

    // code 1
    (function(){
    //這里是塊級作用域
    //作用：限制向全局作用域中添加過多的變量和函數，即避免內部臨時變量影響全局空間
    })();

有些fresh meat ( like me, haha )可能會在使用for循環時忽略i是全局變量而導致循環無法終止,直至頁面崩潰，如下場景

// code 2
var arr1 = [1, 2, 3, 4];
var arr2 = [1, 2];
for (var i = 0; i < arr1.length; i++){
   blablabla...
   for (var i = 0; i < arr2.length; i++){
      blablabla...
   }
}

上面這段代碼中，someone可能認為循環最多執行4*2=8次，實際上這里會無限循環：每次內層循環執行完畢，i都等于2，從而導致外層循環的循環條件永遠為true。究其原因，在于內外層是在同一個作用域，內外層的i是同一個變量，而不是內層自成作用域。
現在ES6幫我們解決這個問題了，使用let和大括號定義局部變量，上段代碼可以改寫如下：

// code 3
var arr1 = [1, 2, 3, 4];
var arr2 = [1, 2];
for (var i = 0; i < arr1.length; i++){
   blablabla...
   for (let i = 0; i < arr2.length; i++){
      blablabla...
   }
}

let聲明的局部變量帶來的一個附加改變是：無法進行變量提升。在局部作用域內，使用let聲明變量之前，該變量都不可用。從局部作用域開始到局部變量聲明之前這段被稱為暫時性死區TDZ，TDZ是針對某特定局部變量而言的。

- const

js也有常量啦！這個不得不讓人感嘆js真的越來越像java了。const聲明的常量只在當前作用域有效。另外，對于復合類型的變量，如對象，const變量存儲的是地址，這時不可修改的是地址，但地址中存儲的內容是可變的。

變量賦值

- 默認值
ES5中我們是不是經常有這種寫法：

// code 4
var polySay = function(name, age) {
    name = sayWhat || "Poly";
    age = sayWhat || "forever 18";
    console.log("My nane is " + name + "and I"m " + age);
};

為了兼容不傳參數的情形，我們可能寫了N多類似以上的代碼。現在ES6給我們提供了一項新功能：給變量設置默認值。在聲明變量時可以設置一個默認值，以備使用時發現改變量沒有賦值。
上面代碼可以改寫為：

// code 5
var polySay = function({name:"Poly", age: "forever 18"}) {
    console.log("My nane is " + name + "and I"m " + age);
};

- 解構賦值
前面函數參數設置默認值中，你可能注意到設置默認值的方式有點陌生，這涉及到ES6為我們提供的另一個新功能：解構賦值。解構賦值是指按照一定模式，從數組和對象中提取值為變量進行賦值。比如：

// code 6
let [a, [b], c] = [1, [2, 3]];
// a被賦值為1，b被賦值為2
// c沒有解析到相應的解構，因此c被賦值為udefined

又比如：

// code 7
let {name: who, age} = {name: "Poly", age: "forever 18"};
// who被賦值為"Poly"

解構賦值主要針對數組和對象，順帶捎上字符串、數值和布爾值。因為字符串會被自動轉換為字符數組，而后兩者會被轉換為對象。

// code 8
let [a, b, c] = "Hello";
// a被賦值為“H”，b 被賦值為“e”,c被賦值為“l”
// 因為等號右側的"Hello"被自動轉化為［"H", "e", "l", "l", "o" ］
let (toString:s) = 123;
// 數值123被轉化為對象，而Number對象有toString屬性
let (toString s) = true
// 布爾值true被轉化為對象，而Boolean對象有toString屬性

解構賦值的應用還包括：函數返回多個值、提取JSON數據。

// code 9
function polySay(){
   return [1, 2, 3];
}
// 再也不用拼數組拼對象（是拼湊，不是拼爹）
let [a, b, c] = polySay();
let json = {
   id: 111,
   name: "Poly",
};
let {id, name} = json;
//再也不用一個個取

很好用，有木有，有木有？

字符串

to do

數值

to do

數組

to do

函數

to do

對象

to do

時間所限，剩下幾個部分沒有寫完，后續補上，頂鍋遁走。

GPU云服務器云服務器 webrtc學習之一開篇數據分析之一 ES6 es6-系列

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

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

【譯】前端練級攻略

摘要：由于系統變得越來越復雜，人們提出了稱為預處理器和后處理器的工具來管理復雜性。后處理器在由預處理器手寫或編譯后對應用更改。我之前建議的文章，，也涵蓋了預處理器相關的知識。譯者：前端小智原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我記得我剛開始學習前端開發的時候。我看到了很多文章及...

wuyumin 2019-05-22 16:41 評論0 收藏0
【譯】國外優秀JavaScript資源推薦

摘要：原文去年，我寫了一篇關于優秀資源之獲取優秀資源的博文。在谷歌瀏覽器的團隊中，每天的工作是整天修補并了解哪些是可行的，哪些是沒有用的。你需要真正利用在中的特性，不用想就知道你將得到很多來源于各種寫作者，包括谷歌瀏覽器團隊在內的資源。原文：http://code.tutsplus.com/articles/resources-for-staying-on-top-of-javascrip...

?xiaoxiao, 2019-08-21 10:25 評論0 收藏0
前端練級攻略(第二部分)

摘要：是文檔的一種表示結構。這些任務大部分都是基于它。這個實踐的重點是把你在前端練級攻略第部分中學到的一些東西和結合起來。一旦你進入框架部分，你將更好地理解并使用它們。到目前為止，你一直在使用進行操作。它是在前端系統像今天這樣復雜之前編寫的。本文是前端練級攻略第二部分，第一部分請看下面：前端練級攻略(第一部分) 在第二部分，我們將重點學習 JavaScript 作為一種獨立的語言，如...

BWrong 2019-08-23 16:49 評論0 收藏0
ES6學習總結（一）

摘要：可以通過調用方法將創建一個新的類型的值，這個值獨一無二，不與任何值相等。還可以使可擴展，在中，表達式被標準化為構造函數的一個方法，這意味著它是可擴展的。前端發展的太快了，快到ES6,ES7出來之后，今年已經是ES8了，但是縱然前端發展很快，我們除了馬不停蹄的學習新的技術之外，也要沉下心來，好好的潛心磨礪自己，本文是整理了自己學習ES6之后相關的知識要點，寄希望于書之于筆，一來自己可以...

_ipo 2019-08-21 11:54 評論0 收藏0