入门ES6基础内容二

下面带大家继续介绍ES6的新特性

开启ES6的入门学习

简写模式

现在很多的框架多使用了ES6的简写特性（小程序，react，vueJS...），所以给大家介绍下
A.

               var foo = 'bar';
 //ES6的简写
            var baz = {foo}; // {foo: "bar"}
            console.log(baz);
  // 等同于ES5的写法，直接用foo等同于foo=foo
            var baz = {foo: foo};
                    console.log(baz);

B.

//ES6简写
            function f(x, y) {
              return {x, y};
            }
// 等同于ES5
            function f(x, y) {
              return {x: x, y: y};
            }
            f(1, 2) // Object {x: 1, y: 2}

C.对象内的简写

         let name='张三';
        let age=30;
//ES5方法
        var data={
            'name':name,
            'age':age，
            getUser：function（）{
              console.log("这个是ES5的方法")
        }
        }
        console.log(data);
//ES6简写（等同）
        var data={
            name,
            age,
            getUser（）{
             console.log("这个是ES6的方法")
             }
}

class

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。
A.创建类

class Data{
            constructor(){  /*构造函数*/
                console.log('初始化的时候执行的方法');
                this._a='';
                this._b='';
            }
            setData(a,b){  
                this._a=a;
                this._b=b;
            }
            getData(){
                return this._a+this._b;
            }
        }
          var d=new Data();
        d.setData(123,6);//129

B.继承

    class A{
        constructor(x,y){
            this._x=x;
            this._y=y;
        }
        getData(){
            return this._x+this._y;
        }
    }
    class B extends A{//extends实现继承
        constructor(x,y){
            super(x,y);  //子类里面调用 父类的构造方法的时候 就要用到super
        }
    }
    var b=new B(12,10);
    alert(b.getData());

import和export

ES6之前以前出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs前者主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。
ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。
ES6模块主要有两个功能：export和import
export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export
命令定义了模块的对外接口以后，其他JS文件就可以通过import
命令加载这个模块（文件）。

如下图(假设a和b文件在同一目录下)

这个是 a.js

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}  
//通过向大括号中添加sex，echo变量并且export输出，就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式，如果这样就相当于export "boy",外部文件就
获取不到该文件的内部变量sex的值，因为没有对外输出变量接口,只是输出的字符串。
var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}  
//通过向大括号中添加sex，echo变量并且export输出，
就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式，如果这样就相当于export "boy",
外部文件就获取不到该文件的内部变量sex的值，因为没有对外输出变量接口,只是输出的字符串。

这个是b.js

// b.js通过import获取a.js文件的内部变量，
{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js"
console.log(sex) // boy
echo(sex) // boy

基本上常用的ES6属性大概都介绍了，如果有兴趣的小伙伴可以留言，后期会继续更新ES6的内容。