ES6知识点

128 阅读 0 评论 85 点赞

我是靠谱客的博主发嗲火，这篇文章主要介绍ES6知识点，现在分享给大家，希望可以做个参考。

1.作用域隔离：es6作用域隔离采用一对花括号{}来隔离，而es3/es5采用立即执行函数((function(){})())进行作用域隔离;

2.this的指向：es6中的this是定义时this的指向，而es3/es5中this指向的是被调用者的对象，如下例子：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//ES6
{
    var factory = function(){
        this.a = 'a';
        this.b = 'b';
        this.c = {
            a:'A+',
            b:()=>{
                return this.a;
            }
        };
    }
    console.log(new factory().c.b());//打印出 a。因为调用的b()函数里的this指向的是函数b定义时的factory函数体中的this,即factory本身
}

//ES3/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());//打印出 A+。因为调用的b()函数里的this指向的是b()函数被调用的对象c,所以b()函数的this.a返回的是c对象里的a

}

3.默认参数、必填参数的写法：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//ES3/ES5 默认参数的写法，另外必选参数也是采用这种方式，if判断然后提示必填的信息
{
    function f(x,y,z){
        if(y===undefined){
            y=7;
        }
        if(z===undefined){
            z=42;
        }
        return x+y+z;
    }
    console.log(f(1,3));//46   1+3+42=46
}
//ES6 默认参数的写法
{
    function f(x,y=7,z=42){
        return x+y+z;return x+y+z;
    }
    console.log(f(1,3));//46   1+3+42=46
};
//ES6必选参数写法
{
    function checkParameter(){
        throw new Error('can't be empty!');
    };
    function fn(x=checkParameter(),y=7,x=42){
        return x+y+z;
    };
    console.log(fn(1));//50  1+7+42
    // fn();
    //捕获异常处理
    try {
        fn();//参数为空时，会报异常
    } catch (error) {
        console.log(error);
    }
}

4.可变参数，ES6使用...扩展运算符，而ES3/ES5使用arguments

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//ES3/ES5 传递可变参数的写法
{
    // function fn(x){
    //     console.log(x);
    // }
    // console.log(fn(1,2,3));//1
    function fn(){
        var a = Array.prototype.slice.call(arguments);//arguments是伪数组
        var sum=0;
        a.forEach(function(item){
            sum += sum*1;
        });
        return sum;
    }
    console.log(fn(1,2,3));//6
}
//ES6 传递可变参数的写法
{
    function fn(...a){
        var sum=0;
        a.forEach(item=>{
            sum += sum*1;
        });
        return sum;
    }
    console.log(fn(1,2,3));//6
}

5.合并数组：ES6使用...扩展运算符，ES3/ES5使用concat():

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
//ES5合并数组写法
{
    var arr = ['hello',3,true];
    var other = [1,2].concat(arr);
    console.log(other);//[1,2,'hello',3,true]
}
//ES6合并数组写法
{
    var arr = ['hello',3,true];
    var other = [1,2,...arr];
    console.log(other);//[1,2,'hello',3,true]
}

6.对象代理，对对象数据的保护

复制代码

//数据保护，对象代理
//ES3对象数据保护的写法
var Person = function(){
    var data={
        name:'Jom',
        age:19,
        sex:'male'
    }
    this.get=function(key){
        return data[key];
    }
    this.set=function(key,value){
        if(key!=='sex'){
            data[key] = value;
        }
    }
}
var person = new Person();
console.log("ES3：",person.get('name'));//Jom
person.set('name','张三')
person.set('sex','female')
console.log(person.get('name'));//张三
console.log(person.get('sex'));//male  此修改无效，因为sex受保护不可修改
//ES5对象数据保护的写法
var Person = {
    name:'Rose',
    age:19
}
Object.defineProperty(Person,'sex',{
    value:'male',
    writable:false
});
console.log("ES5：",Person.name);
try {
    Person.sex='female';
    console.log(Person.sex);//male 此修改无效
} catch (error) {
    console.log(error);
}
//ES6对象数据保护的写法
let Person1 = {
    name:'Baby',
    age:30,
    sex:'female'
}
let Per = new Proxy(Person1,{
    get(target,key){
        return target[key]
    },
    set(target,key,value){
        target[key] = value
    }
});
console.log("ES6：",Per.name);//Baby
try {
    Per.sex='female';
    console.log(Per.sex);//male 此修改无效
} catch (error) {
    console.log(error);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
//数据保护，对象代理
//ES3对象数据保护的写法
var Person = function(){
    var data={
        name:'Jom',
        age:19,
        sex:'male'
    }
    this.get=function(key){
        return data[key];
    }
    this.set=function(key,value){
        if(key!=='sex'){
            data[key] = value;
        }
    }
}
var person = new Person();
console.log("ES3：",person.get('name'));//Jom
person.set('name','张三')
person.set('sex','female')
console.log(person.get('name'));//张三
console.log(person.get('sex'));//male  此修改无效，因为sex受保护不可修改
//ES5对象数据保护的写法
var Person = {
    name:'Rose',
    age:19
}
Object.defineProperty(Person,'sex',{
    value:'male',
    writable:false
});
console.log("ES5：",Person.name);
try {
    Person.sex='female';
    console.log(Person.sex);//male 此修改无效
} catch (error) {
    console.log(error);
}
//ES6对象数据保护的写法
let Person1 = {
    name:'Baby',
    age:30,
    sex:'female'
}
let Per = new Proxy(Person1,{
    get(target,key){
        return target[key]
    },
    set(target,key,value){
        target[key] = value
    }
});
console.log("ES6：",Per.name);//Baby
try {
    Per.sex='female';
    console.log(Per.sex);//male 此修改无效
} catch (error) {
    console.log(error);
}