es6 學習筆記

李昌杰發布于2019-08-20 16:21 / 1841人閱讀

摘要：塊級作用域只有全局作用域和函數作用域，沒有塊級作用域，這帶來了很多不合理的場景。如聲明變量的方法只有兩種聲明變量的方法命令一共有六種命令變量的解構賦值允許按照一定的模式，從數組和對象中提取，按照位置的對應關系對變量賦值，這被稱為解構。

塊級作用域

es5只有全局作用域和函數作用域，沒有塊級作用域，這帶來了很多不合理的場景。

第一種場景：內層變量可能會覆蓋外層變量

var test = "outside";

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

f(); // undefined

出現這種結果的原因是變量提升，導致內層的test覆蓋了外層的test

第二種場景：用來計數的循環變量泄露為全局變量

var str = "hello";

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

console.log(i);  // 5

let命令

let聲明的變量只在其代碼塊內有效，var沒有塊作用域

不存在變量提升

暫時性死區（TDZ）：es6明確規定，如果區域塊中存在let和const命令，則這個區塊對這些命令聲明的變量從一開始就形成封閉性作用域。只要在聲明之前調用這些變量就會報錯。

{
    //TDZ開始
    test = "test";   //ReferenceError
    console.log(test);   //ReferenceError
    
    let test;    //TDZ結束
    console.log(test);   //undefined
    
    
    //比較隱蔽的TDZ
    function testFn (x=y, y=2) {
        return[x,y];
    }
    
    testFn();   //報錯
}

不允許重復聲明：不允許在同一個作用域內重復聲明同一個變量

//報錯
{
    let test = 1;
    var test = 2;
}

//報錯
{
    let test = 1;
    let test = 2;
}

const

const用來聲明常量

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

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

不存在常量提升，同let一樣存在暫時性死區

同let一樣不可重復聲明

作用域：只在當前代碼塊有效

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

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

全局對象的屬性

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

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命令

變量的解構賦值

es6允許按照一定的模式，從數組和對象中提取，按照位置的對應關系對變量賦值，這被稱為解構。本質上，這種寫法屬于模式匹配。

數組的解構賦值

 //- 解構成功：等號兩邊模式相同
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] 

//- 不完全解構： 等號左邊的模式只匹配等號右邊數組的一部分
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

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

注意，如果等號的右邊不是數組，嚴格來說不是遍歷結構，那么將會報錯

//-報錯
let [a] = 1;
let [b] = false;
let [c] = NaN;
let [d]  =undefined;
let [e] = null;
let [f] = {};

前5種轉為對象后不具備iterator接口，最后一個本身就不具備iterator接口

事實上，只要某種數據接口具備iterator接口，都可以使用數組形式的解構賦值

默認值

明天再寫

對象的解構賦值

字符串的解構賦值

數值和布爾值的解構賦值

函數參數的結構賦值

云服務器 GPU云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

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

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

es6學習筆記-頂層對象_v1.0_byKL

摘要：學習筆記頂層對象雖然是筆記但是基本是抄了一次大師的文章了頂層對象頂層對象，在瀏覽器環境指的是對象，在指的是對象。之中，頂層對象的屬性與全局變量是等價的。的寫法模塊的寫法上面代碼將頂層對象放入變量。參考引用頂層對象實戰 es6學習筆記-頂層對象_v1.0 (雖然是筆記,但是基本是抄了一次ruan大師的文章了) 頂層對象頂層對象，在瀏覽器環境指的是window對象，在Node指的是gl...

Meils 2019-08-21 11:31 評論0 收藏0
ES6學習筆記

摘要：本筆記為閱讀阮老師的文章自己的總結，僅作自用，感謝阮老師的技術分享。字符串的遍歷器接口新增判斷字符串的包含情況返回值，表示是否找到了字符串。返回值表示參數字符串是否在原字符串的頭部。本筆記為閱讀http://es6.ruanyifeng.com/ 阮老師的文章自己的總結，僅作自用，感謝阮老師的技術分享。 1.超過uFFFF的字符ES5無法正確顯示，會顯示成前面的uFFFF的碼點符號加...

zxhaaa 2019-08-26 11:58 評論0 收藏0
《深入理解ES6》筆記——導讀

摘要：最近買了深入理解的書籍來看，為什么學習這么久還要買這本書呢主要是看到核心團隊成員及的創造者為本書做了序，作為一個粉絲，還是挺看好這本書能給我帶來一個新的升華，而且本書的作者也非常厲害。使用ES6開發已經有1年多了，以前看的是阮一峰老師的ES6教程，也看過MDN文檔的ES6語法介紹。最近買了《深入理解ES6》的書籍來看，為什么學習ES6這么久還要買這本書呢？主要是看到Daniel A...

Godtoy 2019-08-20 18:01 評論0 收藏0
React學習筆記3：用es2015（ES6）重寫CommentBox

摘要：新搭建的個人博客，本文地址學習筆記用重寫在一開始的時候配置中我們就加入了的支持，就是下面的配置，但之前的學習筆記都使用的完成，所以專門作一篇筆記，記錄使用完成創建相關文件修改，增加該入口文件修改，引入該文件做個簡單的測試，看下瀏覽器全部用來新搭建的個人博客，本文地址：React學習筆記3：用es2015（ES6）重寫CommentBox在一開始的時候webpack配置中我們就加入了e...

selfimpr 2019-08-19 17:30 評論0 收藏0
ES6零基礎教學_解析彩票項目-學習筆記（一）

摘要：彩票項目實戰學習記錄一完整走了一遍課程，覺得還不錯。支持正版人人有責零基礎教學解析彩票項目下面是項目課程的目錄路線一個項目分為三部分業務邏輯，自動構建系統，模擬數據和真實數據接口處理。彩票項目實戰學習記錄（一）完整走了一遍課程，覺得還不錯。總結: es6的知識點說得還算清楚，主要是為了了解和使用，不是深究，所以淺嘗即止即可，所以覺得還不錯。完整還原了項目開發的代碼設計和開發過...

blastz 2019-08-22 13:52 評論0 收藏0