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
});

感谢：小火柴的蓝色理想