ES6

作者: osoLife | 来源:发表于2017-06-29 06:55 被阅读0次

    let

    let a="Hello ES6";
    console.log(a);
    // 块级作用域
    {
        let a="Hello osoLife";
        console.log(a);
    }
    
    // 要点:
    1.let是对变量的声明,const是对常量的声明。
    2.let声明的变量只在变量声明时所在的代码块内有效。
    3.let不允许在同一个作用域重复声明变量。
    

    const

    // const声明的变量只可以在声明时赋值,不可随便更改
    

    解构赋值(数组、对象、字符串、函数)

    数组

    let [a,b,c]=['我','爱','你'];
    alert(b);
    
    // 嵌套
    let [a,[b,c]]=['我',['爱','你']];
    alert(b);
    
    // 空缺
    let [a,,d]=['我',['爱','你'],'osoLife'];
    alert(d);
    
    // 多余变量
    let [a,,d,e]=['我',['爱','你'],'osoLife'];
    alert(e); // undefined
    
    // 默认值(如果有以赋值的为准)
    let [a,,d,e='moli']=['我',['爱','你'],'osoLife'];
    alert(e); // moli
    

    对象

    // 方式一:
    let obj=new Object();
    obj.uid=1;
    obj.uname='osoLife';
    let {uname:name,uid:id}=obj; // 顺序改变无影响
    alert(name); // osoLife
    
    // 方式二:
    let obj=new Object();
    obj.uid=1;
    obj.uname='osoLife';
    
    let uid,uname;
    ({uid,uname}=obj)
    alert(uname);
    
    let obj=new Object();
    obj.uid=1;
    obj.uname='osoLife';
    
    let uid,uname;
    // 必须有小括号,两侧{}会被解读为语句块
    ({uname}=obj)
    alert(uname); // osoLife
    
    // 嵌套
    let obj=new Object();
    obj.uid=1;
    obj.uname='osoLife';
    obj.arr=['我','爱','你'];
            
    let uid,uname,arr,a,b,c;
    ({arr:[a,b,c]}=obj);
    alert(c); // 你
    
    // 默认值
    let obj=new Object();
    obj.uid=1;
    obj.uname='osoLife';
    obj.arr=['我','爱','你'];
    
    let uid,uname,arr,a,b,c,d;
    ({arr:[a,b,c,d='haha']}=obj);
    alert(d); // haha
    

    字符串

    let [a,b,c,d,e,f,g]='osolife';
    alert(e); // i
    

    函数的参数

    let obj=new Object();
    obj.uname='osoLife';
    obj.uage=18;
    
    function analysis({uname,uage}) {
        alert(uname);
        alert(uage);
    }
    analysis(obj);
    
    <!--参数中数组、字符串、默认值、缺位均支持-->
    

    Arrow Functions

    var double=(x)=>x*2;
    console.log(double(10));
    
    let fn=function() {
        return 1;
    }
    
    // 使用箭头函数改写上面的代码
    let fn=()=>1;
    
    // 单参数
    // x 默认值是2
    let fn=(x=2)=>x*x;
    alert(fn(3)); // 9
    
    // 多参数
    let fn=(a,b)=>a+b;
    alert(fn(2,3)); // 5
    
    // 无返回值
    let fn=(a,b)=>{console.log(a+b);};
    fn(2,3); // 5
    
    // 多行
    let fn=(a,b)=>{
        console.log(a+b);
        return a*b;
    }
    console.log(fn(2,3));
    
    要点:
    箭头函数内部没有constructor和prototype,不支持new操作,函数中的this始终指向定义时的this,而非执行时。
    

    Promise

    // 传统实现异步操作是采用回调函数
    // Promise对象是一个新的异步操作解决方案。Promise对象具有三种状态:Pending(等待)、Resolved(已完成)和Rejected(未完成)。
    // Promise对象状态的改变只有两种可能:Pending转变为Resolve或者Pending转变为Rejected。
    var p=new Promise(
        function(resolve,reject) {
              setTimeout(resolve("hello Promise"),2000);
        }
    );
            
    p.then(function(msg){
        console.log('after 2 second '+msg);
    });
    

    assign

    // 将原对象的内容拷贝到目标对象中
    var obj={
        key:'val'
    };
    
    var copy=Object.assign({},obj);
    console.log(copy);
    obj.key='new val';
    console.log("===========================");
    console.log(obj);
    console.log(copy);
    

    class

    class Greeter {
        constructor(message) {
            this.message=message;
        }
    
        greet() {
            console.log(this.message);
        }
    
    }
    
    var greeter=new Greeter('Hello');
    greeter.greet();
    
    var Polygon=class {
        constructor(width,height) {
            this.width=width;
            this.height=height;
        }
    
        say() {
            console.log("i am polygon");
        }
    }
    
    var p=new Polygon();
    p.say();
    
    class Point {
        constructor(x,y) {
            this.x=x;
            this.y=y;
        }
    
        static distance(a,b) {
            const dx=a.x-b.x;
            const dy=a.y-b.y;
            return Math.sqrt(dx*dx+dy*dy);
        }
    }
    
    const p1=new Point(2,2);
    const p2=new Point(3,3);
    // 静态方法(可以通过类名调用)
    console.log(Point.distance(p1,p2));
    
    // 继承
    class Animal {
        constructor(name) {
            this.name=name;
        }
    
        speak() {
            console.log(this.name+' animal');
        }
    }
    
    class Dog extends Animal {
        speak() {
            console.log(this.name+' dog');
        }
    }
    
    let dog=new Dog('旺旺');
    dog.speak();
    

    model模块

    // 所谓的模块就是一个独立的文件,文件与文件之间是相互封闭的。
    // import
    // 方法一:
    // ES5
    var name=require('Test.js');
    // ES6
    import {name} from 'Test.js';
    
    // 方法二:整体导入并取别名为xx
    import * as xx from 'Test.js';
    // export
    export var name='osoLife';
    
    // 继承
    
    // 要点:require和import的区别
    1.require相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象、数字、字符串、函数......再把require的结果赋值给某个变量。
    2.require理论上可以用在代码的任何地方,甚至不需要赋值给某个变量之后再使用,比如:
    require('./a')(); // a模块是一个函数,立即执行a模块函数
    var data=require('./a').data; // a模块导出的是一个对象
    var a=require('./a')[0]; // a模块导出的是一个数组
    3.import是编译时的(require是运行时的),它必须放在文件的开头,在性能上比require好。
    
    // Test.js
    var name="osoLife"
    let url="www.osoLife.com";
    const year=2017;
    export {name,url,year}
    export function add(a,b) {return a+b;}
    export class Person {constructor() {console.log('person');}}
    
    // Child.js 
    // 继承
    export(name,url,year,add,Person) from 'Test.js'
    export class Student {constructor(){console.log('student');}}
    

    相关文章

      网友评论

          本文标题:ES6

          本文链接:https://www.haomeiwen.com/subject/keopcxtx.html