ES6簡單了解

K_B_Z 發布于2019-08-20 15:08 / 1733人閱讀

摘要：報錯塊級作用域明確允許在塊級作用域中聲明函數。但其值是固定的，不可更改，只讀。一旦聲明變量，就必須立即初始化，不能留到以后賦值。調用函數會返回一個內部指針，執行它不會返回結果返回的是指針對象。

ES6初步學習 let和const let

用來聲明變量，但是所聲明的變量只在let命令所在的代碼塊內有效

let不像var那樣會發生變量提升，所以一定要先聲明后使用。

console.log(foo); //undefined
console.log(bar); //報錯ReferenceError
var foo = 2;
let bar = 3;

塊級作用域

ES6明確允許在塊級作用域中聲明函數。但是盡量避免在塊級作用域內聲明函數，如果需要也要寫成函數表達式，而不是函數聲明語句。

在ES6中，塊級作用域之中，函數聲明的語句的行為類似let，在塊級作用域之外不能被引用。

let實際上為javascript新增了塊級作用域

外層作用域無法讀取內層作用域的變量

內層作用域可以定義外層作用域的同名變量

塊級作用域實際上使得廣泛運用的立即執行函數變得不再必要了。

function f1() {
    let n =5;
    if(rue) {let n = 10;}
    console.log(n); //5，注意只能在f1這個作用域使用
}

javascript沒有塊級作用域，但是用let聲明的變量可以綁定到所在的任意作用域中，換句話說let為其聲明的變量隱式的劫持了所在的塊作用域{...}

var foo = true;
if(foo) {
    let bar = foo * 2;
    bar = something(bar);
    console.log(bar); //bar只在foo作用域中有效
}
console.log(bar); //ReferenceError

不太明顯的“死區”

有興趣的可以自行搜索了解一下TDZ（暫存死區），記得當時還是看到阮大神的微博知道的~~

function bar(x = y; y = 2) {
    return [x, y];
}

bar(); //報錯，此時相當于y未聲明的情況下

let不允許在相同作用域內重復聲明同一個變量，不能在函數內部重新聲明參數。const也是這樣。

function(arg) {let arg; //報錯}

const

const同樣可以創建塊作用域變量，同樣只在聲明所在的塊級作用域中有效。但其值是固定的，不可更改，只讀。

一旦聲明變量，就必須立即初始化，不能留到以后賦值。

//只聲明不賦值就會報錯
const foo; //SyntaxError:

const聲明的變量也是不提升，同樣存在暫時性死區，只能在聲明的位置后面使用。

if(true) {
    console.log(MAX); //ReferenceError
    const MAX = 5;
}

對于復合類型的變量，變量名不指向數據，而是指向數據所在的地址。const只保證變量名指向的地址不變，不保證該地址的數據保持不變。不能把foo指向另一個地址。

const foo = {};
foo.prop = 123;
foo.prop; //123
foo = {}; //TypeError:"foo" is read-only

頂層對象的屬性

瀏覽器環境指的是window對象 Node中指的是global對象

ES6中，var命令和function命令聲明的全局變量依舊是頂層對象的屬性，但是let和const以及class聲明的全局變量不屬于頂層對象的屬性。

var a = 1; 
window.a; //1

let b = 1;
window.b; //undefined

異常

嚴格模式下LHS查詢失敗時，并不會創建并返回一個全局變量，引擎會拋出同RHS查詢失敗時類似的ReferenceError異常

如果RHS查詢到一個變量，嘗試對這個變量的值進行不合理的操作時，比如對一個非函數類型的值進行函數調用，或者引用null或undefined類型的值中的屬性，引擎會拋出另外一中的異常TypeError

ReferenceError同作用域的判別失敗有關，TypeError則表示作用域判別成功了，但是對結果的操作是非法的或者不合理的。

查找的目的是對變量進行賦值，那么就會使用LHS查詢，如果目的是獲取變量的值，那么就會使用RHS查詢。

像var a = 2這樣的會被分解兩個步驟：（1）var a 會在作用域中聲明新變量，代碼執行前進行（2）a = 2 會查詢(LHS)變量a并對其進行賦值。

閉包

循環和閉包

每次迭代都生成一個新的作用域，使得延遲函數的回調可以將新的作用域封閉在每個迭代內部。

for(var i = 0; i <= 5; i++) {
    (functiong(j) {
        setTimeout(function timer() {
            console.log(a);
        }, 1000);
    })(i);
}

var的循環，每一次循環都是新的i值覆蓋舊的i值，只有一個i，所以只輸出最后一個。

let的循環每次循環都是一個新的變量i，多個i，所以會每個都輸出，每次迭代都進行重新綁定，與閉包有關

Generator函數

異步
最大的特點就是可以交出函數的執行權（即暫停執行）
函數名之前加星號.yield表示執行到此處，執行權將交給其他協程。

function* gen(x) {
    var y = yield x + 2;
    return y;
}

var g = gen(1);
g.next() //{value:3,done:false}
//value是yield語句后面表達式的值，表示當前階段的值，done表示函數是否執行完畢，是否還有下一個階段。
g.next() //{value:undefined,done:true}

調用generator函數會返回一個內部指針g，執行它不會返回結果返回的是指針對象。調用指針的g的next方法，會移動內部指針，指向第一個遇到的yield語句即x+2處。

Set數據結構

類似于數組但是成員的值都是唯一的，沒有重復的值。

var s = new Set([1,2,3,4,4]);
[...s] //[1,2,3,4]

Set實例的方法
操作方法和遍歷方法

操作數據

（1）操作方法

add:添加某個值，放回set結構本身

delete:刪除某個值返回一個布爾值，表示刪除是否成功

has(value):返回一個布爾值，表示該值是否為set的成員

clear:清除所有成員，沒有返回值

s.add(2).add(3).add(2);
s.size //2
s.has(1) //false
s.has(2) //true
s.has(3) //true
s.delete(2);
s.has(2) //false

（2） Array.from方法可以將set數據結構轉為數組

var items = new Set([1,2,3,4,5]);
var array = Array.from(items);

（3）擴展運算符...也可以將某些數據結構轉換一個數組

function foo() {
    var args = [...arguments];
}

[...document.querySelectorAll("div")]

（4）數組去重的另一種方法

function dedupe(array) {
    return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]

遍歷操作

keys:返回鍵名的遍歷器

values:返回鍵值的遍歷器

entries:返回鍵值對的遍歷器

forEach:使用回掉函數遍歷每個成員

附錄（易錯點）：

隱式的強制轉換

3 + true; //4
NaN !== NaN; //true
Null == undefined; //true

浮點數

0.1 + 0.2; //0.300000004
(8).toString(2); //"1000"
parseInt("1001", 2); //9

數據類型

typeof null; //"object"

typeof "hello"; //"string"

var s = new String("hello");
typeof s; //"object"

var s1 = new String("hello");
var s2 = new String("hello");
s1 === s2; //false
s1 == s2; //false

NaN !==NaN

GPU云服務器云服務器 ES6 es6-系列 ES6入門 es6 js

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

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

你需要了解的ES6的新特性（前沿技術）

摘要：年月，的創造者公司，決定將提交給國際標準化組織，希望這種語言能夠成為國際標準。這表示外層代碼塊不受內層代碼塊的影響。也可以運用于函數及其他文中就簡單介紹這么多，想更加了解新特性的可以自尋查看一下阮一峰的一本入門 ES6新特性最近在項目中遇到了很多ES6的語法，遇到了不少坑坑洼洼，因此，在這里就簡單介紹一下ES6中的一些新特性如果想真正的了解ES6和ES5有什么不同，這里推薦看一下...

Nino 2019-08-20 18:19 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
簡單了解一下ES6的修飾器

摘要：額，經歷過上面的知識了解，應該能大概夠理解這段代碼了吧小結修飾器允許你在類和方法定義的時候去注釋或者修改它。閑言一切都要從公司里的一位老哥給我看的一段代碼說起。。。 @controller(/user) @auth @post(/login) async userLogin = (name, pass) => { @required // ... } 以下為對話：...

LancerComet 2019-08-22 16:25 評論0 收藏0
ES6 箭頭函數從了解到深入

摘要：有傳聞說，箭頭函數的語法，是受到了的影響，并且它與中的語法一樣，共享上下文。箭頭函數是新增加的一個特性。箭頭函數沒有自己的值，其值是通過繼承其它傳入對象而獲得的通常來說是上一級外部函數的的指向。箭頭函數 1. 簡單的定義：胖箭頭函數 Fat arrow functions，又稱箭頭函數，是一個來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞說，箭頭函數的語法=>，...

Eminjannn 2019-08-20 16:37 評論0 收藏0
webpack 項目構建：（二）ES6 編譯環境搭建

摘要：本質就是一個編譯器，通過將源代碼解析成抽象語法樹將源代碼的結果一系列轉換生成目標代碼的將目標代碼的轉換成代碼。項目構建三開發環境本地服務器搭建源碼下載地址參考資料入門阮一峰中文文檔中文網注：以下教程均在 windows 環境實現，使用其他操作系統的同學實踐過程可能會有些出入。 ??在上一章 webpack 項目構建：（一）基本架構搭建我們搭建了一個最基本的 webpack 項目，現...

marser 2019-08-22 15:08 評論0 收藏0