ES6基础教程，常见特性随笔

      自从2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015发布以来，ES6获得越来越多JS开发者的喜爱，方便简洁。添加了更多的功能，js前景一片大好。下面简单的介绍一下ES6的基础特性，希望可以帮助大家简单的了解ES6。也顺便加固下我的基础。

正文：
1.let

语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。

let 于 var 区别：

主要区别在于 let块级作用域， var却是在整个函数都是可见的。

            var vararr=[],letarr=[];
            for(var i = 0; i < 10; i++) {
                var a={
                    testFun:function(){
                        alert(i);
                    }
                }
                vararr.push(a);
            }
            vararr[6].testFun();//10
            for(let i = 0; i < 10; i++) {
                var a={
                    testFun:function(){
                        alert(i);
                    }
                }
                letarr.push(a);
            }
            letarr[6].testFun();//6

这个例子用var的话需要用闭包实现，具体就不写了。

2.const

用法：定义常量；一旦定义，你只能去读取它，不要进行其他操作。

这个就很简单了，常量声明之后必须初始化不允许修改值。

3.箭头函数

语法：(这里写参数列表)=>{这里写函数返回值}，这个函数永远是匿名的。this 指向函数所在的上下文环境没有 arguments 对象。

首先减少了匿名函数代码量，锁定了this（js里面很容易跑偏的this）

var obj = {
    test: function () {
      setTimeout(function () {
        console.log(this)
      });
    }
  }
  obj.test();//window
var obj2 = {
    func: function() {},
    test: function () {
      var that = this;   //此时的this就是obj对象
      setTimeout(function () {
        console.log(that)
      });
    }
  }
 obj2.test();//Object(obj2)
 //es6
 var obj3 = {
    func: function() {},
    test: function () {
       setTimeout(() => {console.log(this)});
    }
  }
 obj3.test();//Object(obj3)

4.解构赋值

1.数组得解构赋值

“模式匹配”为变量赋值；var [a, b, c] = [1, 2, 3];

不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。

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

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

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

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

//也可以显示的转换
var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
//也可以分解字符串（数组）
var [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
//提取json数据，解构赋值对提取json对象中的数据，尤其有用。

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

let { id, status, data: number } = jsonData;

console.log(id, status, number[1]);

5.函数参数的默认值

不再需要我们在函数里面进行判断复制初始值。减少代码量提高了代码的可读性,增加了代码的可控性。

function test(a,b,c,d){
    a=a||1; b=b||false; c=c||"" ;d={};
}
function test(a=1){
    a;
}

6.rest&spread 函数自动匹配参数

rest表述性状态传递，感觉用语言不好概括，看下栗子吧。

function fn(...re){
    console.log(re);
}

fn(1,2,3,4);//[1,2,3,4]


function fn(normal,...re){
    console.log(re);
}

fn(1,2,3,4);//[2,3,4]

spread能把数组展开

function fn(...re){
    //这里 spread 就把一个数组展开了
    ott(...re);
}

fn(1,2,3,4);//10

function ott(a,b,c,d){
    console.log(a+b+c+d);
}

7.模板字符串

模板字符串是一种新的用来拼接字符串的方式，只是用来拼接字符串。

let firstname = 'lao',lastname = 'wang';

let str = `my mane is ${firstname} ${lastname}`;

console.log(str);// my name is lao wang

8.类

用法 class ClassName{ constructor(){ //当我们在实例化一个对象的时候，首先会执行这个构造函数，这意味 //着，刚你在 new 一个类的时候，你可以在 constructor 里面做 //一些初始化的事情 } }

class Animal {
    constructor(a,b,c){
        this.a = a;
        this.b = b;
        this.c = c;
    }

    move(){
        console.log('i can move');
    }
}

//实例化一个类
let dog = new Animal(1,2,3);

console.log(dog.a,dog.b,dog.c);// 1 2 3 

class Human extends Animal{
    constructor(age){

//super 的意思是它会执行一个父类的构造函数，然后你可以在这里
//面给父类的构造函数赋值。你可以给它三个参数，你也可以什么都不
//给，但是你要执行一下 super 这个函数让父类的构造函数执行一下
//就可以了

        super(1,2,3);
        this.age= age;
    }

    //你可以覆盖掉父类的方法
    move(){
        console.log('i can run');
    }
}

let jim = new Human('18');
console.log(jim.age);//18
console.log(jim.a);//1
jim.move();// i can run

jim:

9.模块化

js 模块化，类似于后台的借口

a.js

//import 后面的这个变量是用来接受你导入的模块的默认导出值的，你可以自定义不同的名字,花括号就是用来拿到 export 里面导出的内容的，花括号里面名字必须和 export 里面的名字一样
import fnnn,{fn1,fn2} from './b.js';

fnnn()//fn
fn1();//fn1 
fn2();//fn2

b.js

function fn1(){
    consolo.log('fn1');
}`

function fn2(){
    console.log('fn2');
}

//export 这是 ES6 的模块化规范里面用来暴露出口的关键字
export {
    fn1,
    fn2
}

export default function fn(){
    console.log('fn');
}

 commonJS 的模块化规范

a.js

const fnnn = require('./b.js');

fnnn.fn1();//fn1
fnnn.fn2();//fn2

b.js

function fn1(){
    consolo.log('fn1');
}`

function fn2(){
    console.log('fn2');
}

module.exports = {
    fn1,
    fn2
}