ES6小記

王晗發布于2019-08-22 15:37 / 1390人閱讀

摘要：命令改變了這個行為，必須要在聲明后使用，否則報錯。值為臨時鎖區保證了命令不會受到外部影響?；臼褂寐暶饕粋€只讀的常量。默認值解構允許指定默認值內部嚴格使用來判斷是否有值，所以只有當一個數組成員嚴格等于，默認值才會生效。

ES6

ES6 就是ECMAScript 6是新版本JavaScript語言的標準。

1. let 和 const

ES6 新增了 let 和 const 來聲明變量和常量，它們的用法類似var, 但只在代碼塊中有效。

1.1 let 的基本使用

    {
        var a = "hello";
        let b = "world";
    }
    
    a // hello
    b // Uncaught ReferenceError: a is not defined

上述代碼表明，let只在他所在的代碼塊中有效。

1.2 不能重復定義

let不允許在相同作用域內，重復聲明同一個變量。

    let a = "hello";
    let a = "world"; // Uncaught SyntaxError: Identifier "a" has already been declared
    
    function s1(arg){
        let arg;  // Uncaught SyntaxError: Identifier "arg" has already been declared
    }

1.3 不存在變量提升

var 命令會存在變量提升的問題，在定義之前使用，值為 undefined。
let 命令改變了這個行為，必須要在聲明后使用，否則報錯。

    console.log(a); // Uncaught ReferenceError: a is not defined
    let a = "hello world"; 
    
    console.log(b); // 值為 undefined
    var b = "hello kitty"

1.4 臨時鎖區（Temporal Distonrtion Zone）

保證了let 命令不會受到外部影響。

    var a = 123;
    function s1(){
        a = "hello world";  // Uncaught ReferenceError: a is not defined
        let a = "hello kitty";
    }

1.5 const 基本使用

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。

    const a = "hello world!";
    console.log(a) // hello world!
    
    a = "hello kitty"; // Uncaught SyntaxError: Identifier "a" has already been declared

const實際上并不是保證變量的值不能變，而是變量指向的那個內存地址不得改動。

    const arr = [];
    arr[0] = "hello";
    arr[1] = "world";
    console.log(arr); // ["hello", "world"]
    
    arr = []; // Uncaught SyntaxError: Identifier "arr" has already been declared
    
    const json = {};
    json.name = "LiMing";
    console.log(json.name)  // LiMing
    
    json = {} Uncaught SyntaxError: Identifier "json" has already been declared

常量 arr, json 儲存的是一個地址，只是保證了地址不可變，但數組和對象本身是可變的，所以依然可以為其添加新屬性。

2 解構 2.1 數組解構賦值

    var name = "LiMing";
    var age = 12;
    // ES5 變量賦值
    
    let [name, age] = ["LiMing", 12];
    // 解構賦值

以前為變量賦值，只能直接指定值。ES6中可以按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。

    let a = ["LiMing", 12];
    let [name, age] = a;
    console.log(name, age) // LiMing 12
    
    let [,,b] = ["hello", "world", "hello kitty"];
    console.log(b) // hello kitty
    
    let [one, , two] = [1, 2, 3];
    console.log(one, two) // 1 3
    
    let [s1, ...s2] = [1, 2, 3, 4, 5];
    console.log(s1, s2)  // 1  [2, 3, 4, 5]
    
    let b = [];
    console.log(b) // undefined
    
    let [a1, a2 ,a3] = [1];
    console.log(a1, a2)  // 1 undefined

如果解構不成功，變量的值就等于undefined。
如果右邊的數據不是數組將會報錯。

    let [a] = true; // TypeError: true is not iterable
    
    let [a] = NaN; // TypeError: NaN is not iterable
    
    let [a] = 1; // TypeError: 1 is not iterable
    
    let [a] = null; // TypeError: null is not iterable
    
    let [a] = undefined; // TypeError: undefined is not iterable
    
    let [a] = {}; // TypeError: {} is not iterable

2.2 默認值

解構允許指定默認值

    let [a = "hello"] = [];
    console.log(a) // hello

ES6內部嚴格使用 === 來判斷是否有值，所以只有當一個數組成員嚴格等于undefined，默認值才會生效。

    let [a = "hello world"] = [undefined];
    console.log(a) // hello world
    
    let [a = "hello world"] = [null];
    let [b = "hello kitty"] = [""];
    console.log(a, b)  // null ""

2.3 對象解構

解構當然也可以用于對象

    let {name, age} = {name: "LiMing", age: 12}
    console.log(name, age)  // LiMing 12

對象解構與數組解構不同。數組是有順序的，變量值有位置決定，而對象是無序的，所以變量名必須為對象的屬性名

    let json = {name: "zero"}
    let {name} = json
    let {a} = json
    console.log(name, a) // zero undefined

如果變量名與屬性名不一致，則需要：

    let {a: name} = {name: "zero"}
    console.log(a)  // zero

2.4 函數參數解構

函數的參數當然也可以解構

    function s1([a, b]){
        return a + b
    }
    console.log(s1([1, 5])) // 6
    
    
    function add({a = 0, b = 0} = {}) {
      return a + b;
    }
    add({a: 3, b: 8}); // 11
    add({a: 3}); // 3
    add({}); // 0
    add(); // 0

GPU云服務器云服務器 thinking-in小記 thinking-in-小記 ES6 es6-系列

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

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

【小記】ES6

摘要：前言來自閱讀阮老師的入門的小結疑問先開個坑，慢慢填問題和循環先看書中的一段代碼這個我們知道，是因為每個都被賦予了一個函數，輸出作用域的，而是在全局作用域下調用的，所以輸出的是全局變量，因為循環沒有塊作用域，所以輸出。前言來自閱讀阮老師的《ES6入門》的小結+疑問~先開個坑，慢慢填問題 Q：let和for循環？先看書中的一段代碼： var a = []; for (var i = ...

amuqiao 2019-08-22 15:31 評論0 收藏0
javascript小記

摘要：模板字面量相當于格式化字符串字符串用兩個包含起來并且內部的占位符用標識一般用于標識多行文本或者配合函數使用與箭頭函數用于數組是用于讓數組每一個元素都調用函數的語法基本格式為其中為數組元素下標為當前元素所屬的數組對象在實際調用時只需要箭頭函數 1.模板字面量相當于格式化字符串,字符串用兩個``包含起來,并且內部的占位符用${variable}標識.一般用于標識多行文本或者配合函數使用. ...

waltr 2019-08-23 16:23 評論0 收藏0
前端小白的面經小記

摘要：前端小白最近面試幾家公司，寫點面經分享給大家，同時記錄下自己的缺點以供后期補足，各個公司的開發方向不同，請各位理性看待。直接現場手敲觸發的樣式。數組去重如何實現如果用的話，里面如何寫排序算法。對象何時被修改心態需要調整好，不緊張不匆忙。前端小白最近面試幾家公司，寫點面經分享給大家，同時記錄下自己的缺點以供后期補足，各個公司的開發方向不同，請各位理性看待。問題相關 Css 布局方式有...

FuisonDesign 2019-08-23 15:35 評論0 收藏0
前端小白的面經小記

摘要：前端小白最近面試幾家公司，寫點面經分享給大家，同時記錄下自己的缺點以供后期補足，各個公司的開發方向不同，請各位理性看待。直接現場手敲觸發的樣式。數組去重如何實現如果用的話，里面如何寫排序算法。對象何時被修改心態需要調整好，不緊張不匆忙。前端小白最近面試幾家公司，寫點面經分享給大家，同時記錄下自己的缺點以供后期補足，各個公司的開發方向不同，請各位理性看待。問題相關 Css 布局方式有...

MSchumi 2019-08-30 15:55 評論0 收藏0
知識點小記

摘要：箭頭函數我們來看一下箭頭函數的效果箭頭函數是無法通過來修改作用域的這個需要切記。所以切記在需要的時候使用箭頭函數。這是一些小問題的記錄和總結： 1. vue serve和build 在vue-cli3.0中可以快速的開發原型。通過全局安全@vue/cli-service-global npm i -g @vue/cli-service-global 那么就可以使用vue serve ...

shery 2019-08-23 16:49 評論0 收藏0