ES6簡(jiǎn)單了解

K_B_Z 發(fā)布于2019-08-20 15:08 / 1736人閱讀

摘要：報(bào)錯(cuò)塊級(jí)作用域明確允許在塊級(jí)作用域中聲明函數(shù)。但其值是固定的，不可更改，只讀。一旦聲明變量，就必須立即初始化，不能留到以后賦值。調(diào)用函數(shù)會(huì)返回一個(gè)內(nèi)部指針，執(zhí)行它不會(huì)返回結(jié)果返回的是指針對(duì)象。

ES6初步學(xué)習(xí) let和const let

用來(lái)聲明變量，但是所聲明的變量只在let命令所在的代碼塊內(nèi)有效

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

console.log(foo); //undefined
console.log(bar); //報(bào)錯(cuò)ReferenceError
var foo = 2;
let bar = 3;

塊級(jí)作用域

ES6明確允許在塊級(jí)作用域中聲明函數(shù)。但是盡量避免在塊級(jí)作用域內(nèi)聲明函數(shù)，如果需要也要寫(xiě)成函數(shù)表達(dá)式，而不是函數(shù)聲明語(yǔ)句。
在ES6中，塊級(jí)作用域之中，函數(shù)聲明的語(yǔ)句的行為類似let，在塊級(jí)作用域之外不能被引用。

let實(shí)際上為javascript新增了塊級(jí)作用域

外層作用域無(wú)法讀取內(nèi)層作用域的變量

內(nèi)層作用域可以定義外層作用域的同名變量

塊級(jí)作用域?qū)嶋H上使得廣泛運(yùn)用的立即執(zhí)行函數(shù)變得不再必要了。

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

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

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

不太明顯的“死區(qū)”

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

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

bar(); //報(bào)錯(cuò)，此時(shí)相當(dāng)于y未聲明的情況下

let不允許在相同作用域內(nèi)重復(fù)聲明同一個(gè)變量，不能在函數(shù)內(nèi)部重新聲明參數(shù)。const也是這樣。

function(arg) {let arg; //報(bào)錯(cuò)}

const

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

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

//只聲明不賦值就會(huì)報(bào)錯(cuò)
const foo; //SyntaxError:

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

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

對(duì)于復(fù)合類型的變量，變量名不指向數(shù)據(jù)，而是指向數(shù)據(jù)所在的地址。const只保證變量名指向的地址不變，不保證該地址的數(shù)據(jù)保持不變。不能把foo指向另一個(gè)地址。

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

頂層對(duì)象的屬性

瀏覽器環(huán)境指的是window對(duì)象 Node中指的是global對(duì)象

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

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

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

異常

嚴(yán)格模式下LHS查詢失敗時(shí)，并不會(huì)創(chuàng)建并返回一個(gè)全局變量，引擎會(huì)拋出同RHS查詢失敗時(shí)類似的ReferenceError異常
如果RHS查詢到一個(gè)變量，嘗試對(duì)這個(gè)變量的值進(jìn)行不合理的操作時(shí)，比如對(duì)一個(gè)非函數(shù)類型的值進(jìn)行函數(shù)調(diào)用，或者引用null或undefined類型的值中的屬性，引擎會(huì)拋出另外一中的異常TypeError

ReferenceError同作用域的判別失敗有關(guān)，TypeError則表示作用域判別成功了，但是對(duì)結(jié)果的操作是非法的或者不合理的。

查找的目的是對(duì)變量進(jìn)行賦值，那么就會(huì)使用LHS查詢，如果目的是獲取變量的值，那么就會(huì)使用RHS查詢。

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

閉包

循環(huán)和閉包

每次迭代都生成一個(gè)新的作用域，使得延遲函數(shù)的回調(diào)可以將新的作用域封閉在每個(gè)迭代內(nèi)部。

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

var的循環(huán)，每一次循環(huán)都是新的i值覆蓋舊的i值，只有一個(gè)i，所以只輸出最后一個(gè)。
let的循環(huán) 每次循環(huán)都是一個(gè)新的變量i，多個(gè)i，所以會(huì)每個(gè)都輸出，每次迭代都進(jìn)行重新綁定，與閉包有關(guān)

Generator函數(shù)

異步
最大的特點(diǎn)就是可以交出函數(shù)的執(zhí)行權(quán)（即暫停執(zhí)行）
函數(shù)名之前加星號(hào).yield表示執(zhí)行到此處，執(zhí)行權(quán)將交給其他協(xié)程。

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

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

調(diào)用generator函數(shù)會(huì)返回一個(gè)內(nèi)部指針g，執(zhí)行它不會(huì)返回結(jié)果返回的是指針對(duì)象。調(diào)用指針的g的next方法，會(huì)移動(dòng)內(nèi)部指針，指向第一個(gè)遇到的yield語(yǔ)句即x+2處。

Set數(shù)據(jù)結(jié)構(gòu)

類似于數(shù)組但是成員的值都是唯一的，沒(méi)有重復(fù)的值。

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

Set實(shí)例的方法
操作方法和遍歷方法

操作數(shù)據(jù)

（1）操作方法

add:添加某個(gè)值，放回set結(jié)構(gòu)本身

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

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

clear:清除所有成員，沒(méi)有返回值

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數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組

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

（3）擴(kuò)展運(yùn)算符...也可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換一個(gè)數(shù)組

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

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

（4）數(shù)組去重的另一種方法

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

遍歷操作

keys:返回鍵名的遍歷器

values:返回鍵值的遍歷器

entries:返回鍵值對(duì)的遍歷器

forEach:使用回掉函數(shù)遍歷每個(gè)成員

附錄（易錯(cuò)點(diǎn)）：

隱式的強(qiáng)制轉(zhuǎn)換

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

浮點(diǎn)數(shù)

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

數(shù)據(jù)類型

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云服務(wù)器云服務(wù)器 ES6 es6-系列 ES6入門(mén) es6 js

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

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

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

登陸后可評(píng)論

0條評(píng)論

K_B_Z

男|高級(jí)講師

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

TA的文章

心血來(lái)潮，總結(jié)技術(shù)框架

閱讀 2553·2021-10-11 10:58
Parcel 打包示例 - React HelloWorld

閱讀 1038·2019-08-29 13:58
2019前端面試題（持續(xù)更新）

閱讀 1673·2019-08-26 13:32
css頁(yè)面布局技巧

閱讀 838·2019-08-26 10:40
一個(gè)基于 Vue 的地區(qū)選擇器v-distpicker

閱讀 3265·2019-08-26 10:18
require.js學(xué)習(xí)筆記。

閱讀 1764·2019-08-23 14:18
原生Js-msi系統(tǒng)

閱讀 1113·2019-08-23 10:54
小程序授權(quán)功能（廢）

閱讀 442·2019-08-22 18:39

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

ES6簡(jiǎn)單了解

相關(guān)文章

**你需要了解的ES6的新特性（前沿技術(shù)）**

ES6-7

簡(jiǎn)單了解一下ES6的修飾器

ES6 箭頭函數(shù) 從了解到深入

**webpack 項(xiàng)目構(gòu)建：（二）ES6 編譯環(huán)境搭建**

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

0條評(píng)論

K_B_Z

男|高級(jí)講師

TA的文章

心血來(lái)潮，總結(jié)技術(shù)框架

Parcel 打包示例 - React HelloWorld

2019前端面試題（持續(xù)更新）

css頁(yè)面布局技巧

一個(gè)基于 Vue 的地區(qū)選擇器v-distpicker

require.js學(xué)習(xí)筆記。

原生Js-msi系統(tǒng)

小程序授權(quán)功能（廢）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

ES6簡(jiǎn)單了解

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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