ES6和常用特性归纳

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。

　　ECMAScript和JavaScript到底是什么关系？很多初学者会感到困惑，简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。

　　1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。

　　ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。

　　作为新一代标准ES6将为我们带来很多令人欣喜的功能特性，本课程将着重带领大家领略ES6的风采，因此在学习本课程前需要具备JavaScript的基础知识，如果你并不了解JavaScript是什么，可以先学习一下JavaScript的入门课程。

支持 虽说ES6已经作为新一代标准发布了，但是各大浏览器对新功能实现支持的还需要一段时间，那么我们怎么知道自己使用的浏览器是否支持ES6的相应功能呢？

　　不用紧张，对ES6的支持可以查看kangax.github.io/es5-compat-table/es6/，在这里可以清晰的了解到不同版本的浏览器对ES6功能的支持情况。随着时间的推移，支持度已经越来越高了，ES6的大部分特性都实现了

ECMAScript 6

参考：

http://es6.ruanyifeng.com/#docs/intro

https://www.cnblogs.com/vvic/p/7127638.html

1，申明变量let和const：

　　js由于没有块级作用域，变量在申明他们的函数体内以及这个函数体内嵌套的任何函数体内都是有定义的（申明提前），例如：

function test(){
　　console.log(i);  //undefined
　　for(var i=0;i<10;i++){}
　　console.log(i);   //10
}

　　es6通常用let和const申明变量，const是申明常亮（申明后值不可修改，修改会报错），let是变量，都是块级作用域，在{}内有效：

function test(){
　　console.log(i);  //报错
　　for(let i=0;i<10;i++){}
　　console.log(i);
}

　　这样代码更加严谨，不用担心内部变量被外面修改用了，更加安全。

2，函数

　　函数参数默认值：

　　es5给函数参数指定默认值的时候如下：

//es5
function aa(num){
    num=num||100;
    return num;
}
console.log(aa(0));  //如果没有传入参数或者传入0的话，结果就变成了100，不是我们指定的值

　　这样就会带来以上问题，结果跟我们设定的不一样，es6新特性解决了这个问题

//es6
function aa1(num=100){
    return num;
}
console.log(aa1());   //没传入参数100
console.log(aa1(0));    //0
console.log(aa1(200));    //200

　　箭头函数：

　　箭头函数写法更加简洁，省略了function关键字申明，省略return，例如

[1,2,3].map( x => x + 1 )

//相当于：
[1,2,3].map(function(x){
        return x + 1
})

 　　注意，箭头函数的this是定义时的this，不是运行时的，比如在vue中method找this.data的时候找不到，原因是this指向的不是运行时vue的实例，而是定义时的windos，例如

 $.each(['a','b','c'],function(i,n){
            console.log(this);  //n
       });

       $.each(['a','b','c'],(i,n)=>{
        console.log(this);  //window
       });

3，模板字符串：

　　第一：es5在字符串拼接的时候，常常会用+号把值和字符拼接起来，如果要拼接dom元素的话，会很麻烦，es6很好的解决了这个问题

//es5
const name='han meimei';
console.log('hellow '+name);

//es6
const name1='han meimei';
console.log(`hellow ${name1}`);   //注意，是键盘1左边那个字符符号，不是普通的单引号哦！

　　第二：es5常用反斜杠（\）来做多行字符串的拼接，es6只需要用（`）就可以了，这样以后拼接dom串的时候就方便多啦！

//es5
var wrap="<div>  \
     <span>AAA</span>\
     </div>  \
";
 console.log(wrap);

 //es6
 var wrap1=`
     <div>
         <span>AAA</span>
      </div>
     `;
  console.log(wrap1);

4，Promise

　　Promise的出现是为了防止异步调用出现很多层回调函数，显得代码臃肿，可以通过链式调用的方式书写异步代码，保证了代码的线性逻辑，跟Jquery的Deferred用法类似，es7还推出了更加简洁的写法Async/await，关于es6 Promise用法，我之前一篇文章写过了，可以查阅

　　ES6 Promise

5，Class 类

　　es6新增加了class关键字来定义声明一个类，还多了extends继承关键字，使得类的声明的继承更加方便，像极了java语言，在es5中我们一般这样写:

       //es5
        function Person(name){
            this.name=name;
        }
        Person.prototype.sayName=function(){
            console.log('name: '+this.name);
        }
        function Student(name,age){
            Person.call(this,name);  //调用父类构造函数
            this.age=age;
        }
        Student.prototype.sayAge=function(){
            console.log('age: '+this.age);
        }

        Student.prototype=new Person();  //Student.prototype.constructor就是构造对象Person
        Student.prototype.constructor=Student;  //之前的构造器指向了Person,现在要重新指回来
        //从而Student.prototype===stu.constructor.prototype，很多人忽略了这点
        Student.prototype.sayAll=function(){
            console.log('name: '+this.name);
            console.log('age: '+this.age);
        }

        var stu=new Student('tom',19);
        console.log(Student.prototype===stu.constructor.prototype);  //true
        stu.sayName();
        stu.sayAll();
        //stu.sayAge();  //报错，因为Student.prototype=new Person();对原型重新赋了值

　　es6更加简洁：

//定义类
       class Person{
            constructor(name){  //构造函数
                this.name=name;
            }
            sayName(){
                console.log('name: '+this.name);
            }
       }
       //继承
       class Student extends Person{   //这点和java语言很像，都是通过关键字extends
            constructor(name,age){
                super(name); //调用父类构造函数,这点跟java又一样
                this.age=age;
            }
            sayAge() {
                console.log('age: '+this.age);
            }
            sayAll() {
                console.log('sayAll:');
                console.log('name: '+this.name);
                console.log('age: '+this.age);
            }
       }
       var stu=new Student('jack',20);
       console.log(Student.prototype===stu.constructor.prototype);  //true
       stu.sayName();
       stu.sayAge();
       stu.sayAll();

　　es6用更加简洁的方式完美的实现了类的继承，特别好用!!!

6，export和import

　　es6之前，都是用requireJS进行模块化开发，es6export导出模块、import导入模块，可以直接支持module了，现在的vue和react，都是用es6开发了，对于组件的引入就用到这个知识点了

        //全部导入
        import people from './person'

        //整个模块导入并且使用as关键字重命名
        //该模块的所有导出都会作为对象的属性存在
        import * as person "./person.js"
        console.log(person.sex)
        console.log(person.num)
        console.log(person.getNum())

        //导入部分
        import {name, age} from './person'

        // 导出默认, 有且只有一个默认
        export default App

        //1.当用export default people导出时，就用 import people 导入（不带大括号）

        //2.一个文件里，有且只能有一个export default。但可以有多个export。

        //3.当用export name 时，就用import { name }导入（记得带上大括号）

        //4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age } 

        //5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

7，Spread operator 展开运算符 

　　Spread operator也是es6一个新特性，写法是...，也就是三个点

　　用来组装数组

        //数组组装
        const arr1=[1,2,3];
        const arr2=[...arr1,4,5,6];
        console.log(arr2);   //[1, 2, 3, 4, 5, 6]

        //函数调用
        function print(a,b,c){
            console.log(a,b,c);
        }
        var arr=[1,2,3];
        //es5
        print.apply(null,arr);
        //es6
        print(...arr);  //1 2 3

        //替换push方法
        //es5
        var a1=[1,2,3];
        var a2=[4,5,6];
        Array.prototype.push.apply(a1,a2);  //[1, 2, 3, 4, 5, 6]
        //es6
        a1.push(...a2);  //[1, 2, 3, 4, 5, 6]        

　

8，对象的扩展：

　　初始化简写，键值对重名的情况：

           //es5
           var a=1,b=2;
           var obj={
               a:a,
               b:b
           }
           console.log(obj);  //{a: 1, b: 2}

           //es6
           let a=1,b=2;
           let obj={
               a,
               b
           }
           console.log(obj);    //{a: 1, b: 2}

　　对象方法简写：

           //es5
           var person={
               run:function(){
                   console.log('run');
               }
           }
           person.run();

           //es6
           let person={
               run(){
                   console.log('run');
               }
           }
           person.run();            

　　es6的Object.assign()这个方法来实现浅复制，类似于Jquery的$.extend，第一个参数是目标对象，后面的是被合并的源对象，然后返回目标对象，注意如果出现同名属性，会被最后一个值覆盖

        let obj = {
            name1: 'foo'
        };
        let obj1 = {
            name2: 'bar'
        };
        let obj2 = {
            name3: 'baz'
        };
        Object.assign(obj,obj1,obj2);
        console.log(obj);

        //为了不改变源对象本身，通常会把目标对象传为{}，返回值作为新目标对象
        var obj1={
            name1: 'foo'
        };
        var obj2={
            name2: 'bar'
        };
        var obj3={
            name3: 'baz'
        }
        var obj=Object.assign({},obj1,obj2,obj3);
        console.log(obj);   //{name1: "foo", name2: "bar", name3: "baz"}

9，解构赋值

　　为了简化提取数组或对象中的值，es6新加了解构的特性

　　es5中提取对象信息方法常用如下：

        var people={
            name:'Li Lei',
            age:19
        }
        var name=people.name;
        var age=people.age;
        console.log('name:'+name);
        console.log('age:'+age);

　　es6简化的这个步骤，如下：

        //对象
        const people={
            name:'luo',
            age:19
        }
        const {name,age}=people;
        console.log(`${name}------${age}`);

        //数组
        const color=['red','blue'];
        const [first,second]=color;
        console.log(first);
        console.log(second);