对比复习ES6基础

常量定义

//touch src/const.js  创建文件

//ES5 中常亮的写法
 Object.defineProperty(window,"PI2",{
     value:3.14159,
     writable:false,
 })
 // window.PI2 = 3; //不会报错
 console.log(window.PI2)

 //ES6 常量写法
 const PI = 3.1415926;
 // PI = 3; 会报错

作用域（块作用域）

几种面试常考

    // es5 写法
    var arr = [];
    for (var i = 0; i <=2; i++) {
        arr[i] = function () {
            return i*2
        }
    }
    console.table([
        arr[0](),arr[1](),arr[2]()
        ])
    //输出 全是6

    var arr = [];
    for (var i = 0; i<=2;i++) {
        arr[i] = i*2;
    }
    console.table([
        arr[0],arr[1],arr[2]
        ])
    //输出 0 2 4

    var arr = [];
    for (var i = 0; i<=2;i++) {
        console.log(arr[i] = i*2);
    }
//输出 0 2 4

    var arr = [];
    for (var i = 0; i<=2;i++) {
        arr[i] = function () {
            return i*2;
        }()
    }
//输出 0 2 4

    var arr = [];
    for (var i = 0; i<=2;i++) {
        arr[i] = (function (j) {
            return j*2;
        })(i)
    }
//输出 0 2 4

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

 

//箭头函数

{
    //ES5 写法
    var f = function () {
        this.a = "a";
        this.b = 'b';
        this.c = {
            a:'aa',
            b:function () {
                return this.a
                //
            }
        }
    }
    console.log(new f().c.b()) //返回aa ES5中 this指向是调用时this的指向
}
{
    //ES6写法
    var f = function () {
        this.a = 'a';
        this.b = 'b';
        this.c = {
            a:"aa",
            b:()=>{
                return this.a;
            }
        }
    }
    console.log(new f().c.b())//返回a ES6中箭头函数中 this指向是定义时的指向
}

默认参数

//默认参数
{
    //ES3/5写法
    function add(x,y,z) {
        
        x = x||7;
        y = y||5;
        z = z||3;
        return x+y+z;
    }
    var a,b,c
    console.log(add(a,3,4)) //输出14
}

{
    //ES6写法
    function add(x = 7,y = 5, z = 3) {
        return x+y+z;
    }
    console.log(add(3,2))
}

设置参数不能为空

    function check() {
        throw new Error('can\'t be empty');
    }
    function add(x=check(),y=5,z=3) {
        return x+y+z;
    }
    console.log(add(1)) //9
    try{
        add();
    } catch(e){
        console.log(e);//抛出异常
    }finally{

    }

 

可变参数

// 可变参数
{
    //ES3/5写法
    function add() {
        var a = Array.prototype.slice.call(arguments);
        var sum = 0;
        a.forEach(function (item) {
            sum+=item*1;
        })
        return sum;
    }

    console.log(add(1,2,3,4))//返回10
}

{
    //ES6写法
    function add(...a) {
        var sum = 0;
        a.forEach(item=>{
            sum+=item*1;
        })
        return sum;
    }
    console.log(add(1,2,3,4))//返回10
}

拓展运算符合并数组

//拓展运算符合并数组
{
    var a = ["hhh",true,7];
    var b = [1,3].concat(a)
    console.log(b) //[1,3,"hhh",true,7]
}
{
    var a = ["hhh",true,7];
    var b = [1,3,...a];
    console.log(b)//[1,3,"hhh",true,7]
}

对象代理

{
    //ES3 写法
    var Person = function () {
        var data = {
            name : 'name1',
            sex : 'male',
            age :17
        }
        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('name','new_name');
    console.table({
        name:person.get('name'),
        sex:person.get('sex'),
        age:person.get('age')
    })
    //尝试修改sex
    person.set('sex','female');
    console.table({
        name:person.get('name'),
        sex:person.get('sex'),
        age:person.get('age')
    })
}

运行结果

{
    //ES5写法
    var Person = {
        name:'name',
        age:15
    }
    Object.definePerproty(Person,'sex',{
        writable:false, //通过属性不可写保护数据
        value:'male'
    });
}

{
    //ES6写法
    let Person = {
        name : 'name1',
        sex : 'male',
        age :17
    }
    let person = new Proxy(Person,{
        get(target,key){
            return target[key];
        },
        set(target,key,value){
            if(key !== 'sex'){ 
                target[key] = value;
            }
        }
    });
}