ES6基础知识01(let,const,解构赋值)

ES6 新增特性整理讲解

新增命令

1.let命令

ES6新增了let命令，用来声明变量。它的用法类似于var，但是也存在新的特性。

 - **let所声明的变量，只在let命令所在的代码块内有效。适用于for循环**
 

            var a = 3;
            var a = 4;
            
            let b = 4;
            
            {
                var a = 5;
                let b = 5;    //作用域仅在代码块内部
                let c = "this is inner c";
                var d = "this is inner d";
                console.log(b);    //b = 5
            }
          
            console.log(a);    //a = 5
            console.log(b);    //b = 4
            console.log(d);    //this is inner d
            console.log(c);    //c is not defined

for循环

    按理说，在执行完for循环后，应该释放变量的值，否则可能会对全局变量造成影响，因此，声明为let，会更好。

            //使用var 声明
            var result  = 0;
            for(var i = 0;i<100;i++){
                result += i;
            };
            console.log(result);    //5050
            console.log(i);    //101

            //使用let 声明
            var result  = 0;
            for(let i = 0;i<100;i++){
                result += i;
            };
            console.log(result);    //5050
            console.log(i);    // i is not defined

 - **不存在变量提升**

            //先操作
            console.log('var变量提升',a);    //undefined
            console.log('let没有变量提升',b);    //报错：b is not defined
            //再声明
            var a = 3;
            let b = 4;
           

 - **暂时性死区**

            var tmp = 123; 
            if (true) {
                tmp = 'abc'; // ReferenceError 
                let tmp; 
            } 

 - **不允许重复声明**
    ```
        var a = 3;
        var a = 4;
        
        let b = 4;
        let b = 5;     //TypeError:Duplicate declaration "b"
        console.log(a);//a = 4
        console.log(b);
    ```
    

2.const命令

基本用法：const声明一个只读常量。一旦声明，常量的值就不能改变。类似于Java中的final关键字。

      const PI = 3.1415; PI = 3; // TypeError: Assignment to constant variable

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

      const foo; // SyntaxError: Missing initializer in const declaration

其余特点与let一样，具有不能重复声明，具有块级作用域，暂时性死区。

---

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。例如：

let [a, b, c] = [1, 2, 3];

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

1.对象的解构赋值

a>对象的属性没有次序，变量必须与属性同名。

在ES5中

var obj ={
    name = "tom,
    age = 12,
};
var name = obj.name;
var age = obj.age;

在ES6中

let {name:name,age:age} = obj;
let{name,age} = obj;
console.log(name,age);

b>如果变量名与属性名不一致，必须写成下面这样。

    var { foo: baz } = { foo: 'aaa', bar: 'bbb' };     //baz = "aaa”

c>嵌套解构

let obj = { p: [ 'Hello', { y: 'World' } ] }; 
let { p: [x, { y }] } = obj;     //x = "Hello”; y = "World”

d>默认值（默认值生效的条件是，对象的属性值严格等于undefined）

var {x: y = 3} = {}; y // 3

2.数组的解构赋值

let [a, b, c] = [1, 2, 3];

a>不完全解构

let [a, [b], d] = [1, [2, 3], 4];    //a = 1; b = 2; d = 4 

b>集合解构

let [head, ...tail] = [1, 2, 3, 4];     //head = 1; tail = [2, 3, 4]

c>默认值（当匹配值严格等于undefined时，默认值生效）

let [x, y = 'b'] = ['a'];     // x='a', y='b’

d>默认值也可以为函数

function f() { console.log('aaa'); } 
let [x = f()] = [1]; 



let [a,b,...c] = ["terry","lerry","tom","jack"];
console.log(a);    //terry;
console.log(b);    //lerry;
console.log(c);    //["tom","jack"]

3.字符串的解构赋值
a>解构时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = ‘hello’;    //a=h;b=e;c=l;d=l;e=o

b>也可以对数组的属性解构

let {length : len} = ‘hello’;     //len = 5

c> 数值和布尔值解构赋值

解构时，如果等号右边是数值和布尔值，则会先转为对象
let {toString: s} = 123;     //s === Number.prototype.toString true
let {toString: s} = true;     //s === Boolean.prototype.toString true

4.函数参数的解构赋值
基本语法：

function add([x, y]){ return x + y; } 
add([1, 2]);

默认值：

function move({x = 0, y = 0} = {}) {
     return [x, y]; 
} 
move({x: 3, y: 8}); // [3, 8] 
move({x: 3}); // [3, 0] 
move({});     // [0, 0]
move();     // [0, 0]
    

解构赋值的常见用途

1.交换变量的值

let x = 1; let y = 2; [x, y] = [y, x];

2.从函数返回多个值

function example() { return [1, 2, 3]; } 
let [a, b, c] = example();

3.函数参数的定义

function f([x, y, z]) { ... } 
f([1, 2, 3]);

4.提取JSON数据

let jsonData = { id: 42, status: "OK", data: [867, 5309] }; 
let { id, status, data: number } = jsonData;

5.输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

6.函数参数的默认值

jQuery.ajax = function (url, { 
    async = true, cache = true, global = true, 
    beforeSend = function () {}, 
    complete = function () {},     
    // ... more config 
}) { // ... do stuff };

7..指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句
遍历map结构

var map = new Map(); 
map.set('first', 'hello'); 
map.set('second', 'world'); 
for (let [key, value] of map) { 
    console.log(key + " is " + value); 
}

--------------------------------------------------------------------本次结束-------------------------