ES6基本语法

目录

1. 常量
2. 作用域
3. 箭头函数
4. 默认参数
5. 对象代理

定义常量

//ES5常量
Object.defineProperty(window,"PI2",{
    value: 3.1415926,
    writable: false
});
console.log(window.PI2);
//ES6常量
const PI=3.1415926;
console.log(PI);

//ES5
const callback=[];
for (var i = 0; i <= 2; i++){
    callback[i] = function () {
        return i*2;
    }//此函数在外部循环结束后才执行，故变量i最后值为3
}
console.table([
    callback[0](),
    callback[1](),
    callback[2]()
])

//ES6
const  callback2=[];
for (let j = 0; j <= 2; j++) {
    callback2[j] = function () {
        return j*2;
    }
}
console.table([
    callback2[0](),
    callback2[1](),
    callback2[2]()
])

作用域

//ES6
{
    function f1() {
        return 1;
    }
    console.log("f1===1",f1()===1);
    {
        function f1() {
            return 2;
        }
        console.log("f1===2",f1()===2);
    }
}

//ES5
((function () {
    function f1(){
        return 1;
    }
    console.log("f1===1",f1()===1);
    ((function () {
        function f1() {
            return 2;
        }
        console.log("f1===2",f1()===2);
    })())
})())

箭头函数：确定this指向的对象，即定义此对象的对象，不是调用此对象的对象。

{
    //ES5
    const odd=[1,3,5,7,9];
    const even=odd.map(function (p) {
        return p-1;
    });
    console.log(odd,even);
}

{
    //ES6
    const odd=[1,3,5,7,9];
    const even=odd.map( p => p-1);
    console.log(odd,even);
}

{
    //ES5
    var factory=function () {
        this.a='a';
        this.b='b';
        this.c={
            a:'a+',
            b: function() {
                return this.a;
            }
        }
    }
    console.log(new factory().c.b());
}

{
    let factory=function () {
        this.a='a';
        this.b='b';
        this.c={
            a:'a+',
            b: ()=>{
                return this.a;
            }
        }
    }
    console.log(new factory().c.b());
}

默认参数：可变参数

{
    //ES5
    function f(a,b,c) {
        b= (b===undefined) ? 2 : b;
        c= (c===undefined) ? 3 : c;
        return a+b+c;
    }
    console.log(f(1));
}

{
    //ES6
    function checkParameter() {
        throw new Error("can't be empty");
    }
    function f(a=checkParameter(),b=2,c=3){
        return a+b+c;
    }
    try {
        console.log(f())
    }catch (e) {
        console.log(e)
    }finally {

    }
}

{
    //ES5
    function f() {
        var a=Array.prototype.slice.call(arguments);
        var sum=0;
        a.forEach(function (item) {
            sum+=item;
        })
        return sum;
    }
    console.log(f(1,2,3))
}

{
    //ES6
    function f2(...a){
        let sum=0;
        a.forEach( item=>sum+=item );
        return sum;
    }
    console.log(f2(1,2,3,4,5));
}

{
    //ES5
    let a=['a','b','c'];
    let b=[1,2,3];
    b=b.concat(a);
    console.log(b);
}
{
    //ES6
    let a=['a','b','c'];
    let b=[1,2,3,...a];
    console.log(b);
}

对象代理

{
    //ES3
    /* eslint-disable */
    var Person=function () {
        var data={
            name:'mike',
            sex:'male',
            age:21
        }
        this.get=function (key) {
            return data[key];
        }
        this.set=function (key, value) {
            if(key!=='sex'){
                data[key]=value;
            }
        }
    }
    var person=new Person();
    console.table({
        name:person.get('name'),
        sex:person.get('sex'),
        age:person.get('age')
    });
    person.set('sex','female');
    console.table({
        name:person.get('name'),
        sex:person.get('sex'),
        age:person.get('age')
    });
}
{
    //ES5
    var Person={
        name:'mike',
        age:21
    }
    Object.defineProperty(Person,'sex',{
        writable:false,
        value:'male'
    });
    console.table({
        name:Person.name,
        sex:Person.sex,
        age:Person.age
    });
}
{
    //ES6
    let Person={
        name:'mike',
        sex:'male',
        age:21
    }
    let person=new Proxy(Person,{
        get(target,key){
            return target[key];
        },
        set(target,key,value){
          if(key !== 'sex'){
              target[key]=value;
          }
        }
    });
    console.table({
        name:person.name,
        sex:person.sex,
        age:person.age
    })
    try{
        person.sex='female'
    }catch (e) {
        console.log(e);
    }
    console.table({
        name:person.name,
        sex:person.sex,
        age:person.age
    })
}