es6學習筆記整理（一）變數宣告、解構賦值

一、 let const

let
1、除了es5的全域性作用域和函式作用域外，es6出現塊級作用域{}。
2、let宣告的變數只在自己的塊級作用域裡有效，在外面使用報錯（es6 強制開啟嚴格模式“use strict”），和var不同。
3、let變數重複宣告會報錯。

const
1、 常量，數值和字串不能直接修改，但是是物件的時候可以修改物件，因為只是儲存的指標，指標不變，物件內容可以修改。
2、也有塊級作用域的概念。
3、必須有初始值，否則會報錯。

二、解構賦值

概念： 左右解構一一對應，進行賦值
分類：陣列解構賦值、物件解構賦值、字串結構賦值、布林值解構賦值、函式引數解構賦值、數值結構賦值
1、*陣列解構賦值：
基本使用：

{
        let a,b,rest;
        [a,b] = [1,2];
        console.log(a);//1
        console.log(b);//2
    }

    {
        let a,b,rest;
        [a,b,...rest] = [1,2,3,4,5,6];
        console.log(a);//1
        console.log(b);//2
        console.log(rest);//3,4,5,6 陣列中的三個點的作用是將剩餘的值都付給rest陣列
    }

    {
        //基本使用
        let a,b,c,rest;
        [a,b,c=3] = [1,2];
        console.log(a,b,c);//1,2,3
//        [a,b,c] = [1,2];//沒有一一對應的情況下，c為undefined，只宣告瞭，沒有賦值
//        console.log(a,b,c);

    }

    {
        //怎麼用，什麼場景下使用
        //關於變數的交換
        let a=1;
        let b=2;
        [a,b]=[b,a];
        console.log(a,b);//2,1
        /*如果不用es6的結構賦值，變數交換就需要用到一箇中間變數*/

    }

    {
        function f() {
            return [1,2];
        }
        let a,b;
        [a,b]=f();
        console.log(a,b);//1,2
        /*如果不用es6的結構賦值，需要使用兩個變數去接收函式的返回值*/
    }

    {
        function f(){
            return [1,2,3,4,5];
        }
        let a,b,c;
        [a,,,b]=f();//1,4
//        [a,...b] = f();//1,[2,3,4,5]

        /*當陣列返回值不確定的情況下，
        只關心第一個返回值，其餘返回值不是很重要或者需要使用的時候去遍歷*/
//        [a,,...b] = f();//可以上面的方法混合使用1,[3,4,5]
        console.log(a,b);
        /*選擇性的接受某幾個變數，只關心自己想要的值*/
    }

2、*物件解構賦值：

    {
        //物件解構
        let a,b;
        ({a,b} = {a:1, b:2})
        console.log(a);//1
        console.log(b);//2
    }

    /*物件解構賦值*/
    {
        let o={p:42,q:true};
        let {p,q}=o;
        /*
        * 根據key，value的方式去配的*/
        console.log(p,q);//42,true
    }

    {
        let {a=10,b=5}={a:3};//預設值
        console.log(a,b);//3,10
    }

    //場景一
    {
        let metaData = {
            title: 'abc',
            test: [{
                title: 'test',
                desc: 'description'
            }]
        };
        let {title:esTitle,test:[{title:cnTitle}]} = metaData;
        console.log(esTitle, cnTitle);//abc, test
    }

//混合使用
let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    },
    range: [0, 3]
};
let {
    loc: { start },
    range: [ startIndex ]
} = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0

3、字串解構賦值：

const [a, b, c, d, e] = 'hello';
console.log(a);//"h"
console.log(b);//"e"
console.log(c);//"l"
console.log(d);//"l"
console.log(e);//"o"

//類似陣列的物件都有一個`length`屬性，因此還可以對這個屬性解構賦值
const {length} = 'hello';
console.log(length);//5

4、數值和布林值解構賦值：
解構賦值時，如果等號右邊是數值和布林值，則會先轉為物件

let {toString:s1} = 123;
console.log(s1 === Number.prototype.toString);//true
let {toString:s2} = true;
console.log(s2 === Boolean.prototype.toString);//true

5、函式引數解構賦值：
解構可以用在函式引數的傳遞過程中，這種使用方式更特別。當定義一個接受大量可選引數的JS函式時，通常會建立一個可選物件，將額外的引數定義為這個物件的屬性

// options 上的屬性表示附加引數
function setCookie(name, value, options) {
    options = options || {};
    let secure = options.secure,
        path = options.path,
        domain = options.domain,
        expires = options.expires;
        // 設定 cookie 的程式碼
}
// 第三個引數對映到 options
setCookie("type", "js", {
    secure: true,
    expires: 60000
});

感謝：小火柴的藍色理想