es6 學(xué)習(xí)筆記

李昌杰發(fā)布于2019-08-20 16:21 / 1886人閱讀

摘要：塊級(jí)作用域只有全局作用域和函數(shù)作用域，沒(méi)有塊級(jí)作用域，這帶來(lái)了很多不合理的場(chǎng)景。如聲明變量的方法只有兩種聲明變量的方法命令一共有六種命令變量的解構(gòu)賦值允許按照一定的模式，從數(shù)組和對(duì)象中提取，按照位置的對(duì)應(yīng)關(guān)系對(duì)變量賦值，這被稱為解構(gòu)。

塊級(jí)作用域

es5只有全局作用域和函數(shù)作用域，沒(méi)有塊級(jí)作用域，這帶來(lái)了很多不合理的場(chǎng)景。

第一種場(chǎng)景：內(nèi)層變量可能會(huì)覆蓋外層變量

var test = "outside";

function f () {
    console.log(test);
    if (false) {
        var test = "inside";
    }
}

f(); // undefined

出現(xiàn)這種結(jié)果的原因是變量提升，導(dǎo)致內(nèi)層的test覆蓋了外層的test

第二種場(chǎng)景：用來(lái)計(jì)數(shù)的循環(huán)變量泄露為全局變量

var str = "hello";

for(var i = 0; i < str.length; i++){
    console.log(s[i]);
}

console.log(i);  // 5

let命令

let聲明的變量只在其代碼塊內(nèi)有效，var沒(méi)有塊作用域

不存在變量提升

暫時(shí)性死區(qū)（TDZ）：es6明確規(guī)定，如果區(qū)域塊中存在let和const命令，則這個(gè)區(qū)塊對(duì)這些命令聲明的變量從一開(kāi)始就形成封閉性作用域。只要在聲明之前調(diào)用這些變量就會(huì)報(bào)錯(cuò)。

{
    //TDZ開(kāi)始
    test = "test";   //ReferenceError
    console.log(test);   //ReferenceError
    
    let test;    //TDZ結(jié)束
    console.log(test);   //undefined
    
    
    //比較隱蔽的TDZ
    function testFn (x=y, y=2) {
        return[x,y];
    }
    
    testFn();   //報(bào)錯(cuò)
}

不允許重復(fù)聲明：不允許在同一個(gè)作用域內(nèi)重復(fù)聲明同一個(gè)變量

//報(bào)錯(cuò)
{
    let test = 1;
    var test = 2;
}

//報(bào)錯(cuò)
{
    let test = 1;
    let test = 2;
}

const

const用來(lái)聲明常量

一旦聲明，其值就不能改變

必須立即初始化，即立即賦值

不存在常量提升，同let一樣存在暫時(shí)性死區(qū)

同let一樣不可重復(fù)聲明

作用域：只在當(dāng)前代碼塊有效

const命令只能保證常量名指向數(shù)據(jù)的地址不變，但是不能保證該地址的數(shù)據(jù)不變，如

const obj = {};
obj.prop = "test";

console.log(obj.prop);   //"test"

obj = {};   //typeError: "obj" is read-only

跨模塊常量

可使用export使常量跨模塊

//constant.js
export const A = 1;
export const A = 2;
export const A = 3;

//test1模塊
import * as constants from "./constans";
console.log(constants.A); // 1
console.log(constants.B); // 2

//test1模塊
import {A, B} from "./constans";
console.log(constants.A); // 1
console.log(constants.B); // 2

全局對(duì)象的屬性

在es5中，全局對(duì)象（window/global）的屬性與全局變量是等價(jià)，在es6中規(guī)定，let、const、class命令生聲明的全局變量不屬于全局對(duì)象的屬性。如

var a = 1;
b = 2;

console.log(window.a);  // 1
console.log(window.b);  // 2

let c = 3;
console.log(window.c); // undefined

es6聲明變量的方法

es5只有兩種聲明變量的方法：var、function命令

es6一共有六種：var、function、let、const、import、class命令

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

es6允許按照一定的模式，從數(shù)組和對(duì)象中提取，按照位置的對(duì)應(yīng)關(guān)系對(duì)變量賦值，這被稱為解構(gòu)。本質(zhì)上，這種寫法屬于模式匹配。

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

 //- 解構(gòu)成功：等號(hào)兩邊模式相同
var [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3

let [l, [[m], n]] = [1, [[2], 3]];
console.log(l, m, n); // 1 2 3

let [x, , y] = [1, 2, 3];
console.log(x, y); // 1 3

let [o, ...p] = [1, 2, 3, 4];
console.log(o); // 1 
console.log(p); // [2, 3, 4] 

//- 不完全解構(gòu)： 等號(hào)左邊的模式只匹配等號(hào)右邊數(shù)組的一部分
let [x, y] = [1, 2, 3]; 
console.log(x); //1
console.log(y); //2

let [x, [y], z] = [1, [2, 3], 4]; 
console.log(x); //1
console.log(y); //2
console.log(z); //4

//-解構(gòu)不成功。如果解構(gòu)不成功，變量的值就等于undefined
let [a, b, c] = [1];
console.log(a); //1
console.log(y); //undefined
console.log(z); //undefined

注意，如果等號(hào)的右邊不是數(shù)組，嚴(yán)格來(lái)說(shuō)不是遍歷結(jié)構(gòu)，那么將會(huì)報(bào)錯(cuò)

//-報(bào)錯(cuò)
let [a] = 1;
let [b] = false;
let [c] = NaN;
let [d]  =undefined;
let [e] = null;
let [f] = {};

前5種轉(zhuǎn)為對(duì)象后不具備iterator接口，最后一個(gè)本身就不具備iterator接口

事實(shí)上，只要某種數(shù)據(jù)接口具備iterator接口，都可以使用數(shù)組形式的解構(gòu)賦值

默認(rèn)值

明天再寫

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

字符串的解構(gòu)賦值

數(shù)值和布爾值的解構(gòu)賦值

函數(shù)參數(shù)的結(jié)構(gòu)賦值

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

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

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

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

登陸后可評(píng)論

0條評(píng)論

李昌杰

男|高級(jí)講師

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

TA的文章

RAKsmart：美國(guó)獨(dú)立服務(wù)器秒殺$30/月，云服務(wù)器全場(chǎng)7折，站群服務(wù)器/大帶寬服務(wù)器持續(xù)熱賣

閱讀 2141·2021-11-15 17:57
使用IoT Studio搭建氣象監(jiān)測(cè)屏

閱讀 837·2021-11-11 16:54
Pacificrack：美國(guó)多IP便宜VPS，站群VPS，1核2G 30G SSD，5-253個(gè)IP

閱讀 2681·2021-09-27 13:58
U8g2圖形庫(kù)使用技巧記錄（1）

閱讀 4517·2021-09-06 15:00
2021-09-03-接口自動(dòng)化-python+requests+pytest+csv+yaml+a

閱讀 1039·2021-09-04 16:45
開(kāi)發(fā)一個(gè)psotcss插件

閱讀 3574·2019-08-30 15:56
iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享

閱讀 1835·2019-08-30 15:53
在vue中使用jointjs

閱讀 1763·2019-08-30 14:12

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

es6 學(xué)習(xí)筆記

相關(guān)文章