ES6快速入门

￡神魔★判官ぃ 2022-03-28 09:50 167阅读 0赞

这篇博客是根据慕课网上的ES6快速入门教程的视频总结的，有兴趣的可以去看下视频（免费）

三种语法实现同一个功能，从而加深对三种语法的运用，最后了解ES6的优势

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70][]

知识点：常量、作用域、箭头函数、默认代理、对象代理

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2][]

### 常量： ###

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

### 作用域： ###

// ES5 中的作用域
    var callbacks = [];
    for(var i = 0;i <= 2; i++) {
      callbacks[i] = function() {
        // 因为函数体内是一个表达式，这里就会保留这个情况，这个表达式用到i变量，所有形成了一个闭包
        // 当callbacks执行的时候，i已经变成3了，所有执行callbacks返回都是6
        return i * 2 
      }
    }
    
    console.table([
      callbacks[0](),
      callbacks[1](),
      callbacks[2]()
    ])
    
    // ES6 中的作用域
    const callbacks2 = []
    for (let j = 0; j <= 2; j++) {
      // let 定义好就会生成一个块作用域，当前作用域会把当前作用域下的值保存下来给后面的闭包使用，循环的时候，
      // 每循环一次就生成新的作用域，闭包就把变量导向闭包作用域的变量，然后输出的就是0，2，4
      callbacks2[j] = function() {
        return j * 2
      }
    }
    
    console.table([
      callbacks2[0](),
      callbacks2[1](),
      callbacks2[2]()
    ]);
    
    // ES5 中的作用域函数
    ((function ()  {
      const foo = function () {
        return 1
      }
      console.log("foo()===1", foo() === 1);
      ((function(){
        var foo = function () {
          return 2
        }
        console.log('foo() ===2', foo() === 2)
      })())
    })())
    
    // ES6 中的作用域函数
    {
      function foo() {
        return 1
      }
      console.log('foo()===1',foo() ===1);
      {
        function foo() {
          return 2
        }
        console.log('foo()===2',foo() ===2);
      }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3][]

注意：ES3和ES5中需要使用立即执行函数才可以把作用域进行隔离，ES6则是\{\}就可以实现了

### 箭头函数： ###

{
      // ES3,ES5
      var evens = [1,2,3,4,5];
      var odds = evens.map(function(v) {
        return v + 1
      })
      console.log(evens,odds);
    }
    
    {
      // ES6
      let evens = [1,2,3,4,5]
      let odds = evens.map(v=> v + 1); // ()在只有一个参数的时候，可以省略(),当箭头函数后面直接是返回值的时候，可以省略{}
      console.log(evens,odds);
    }
    
    {
      // ES3,ES5中的this=> this的指向是该函数被调用的对象
      var factory = function () {
        this.a = 'a',
        this.b = 'b'
        this.c = {
          a: 'a+',
          b: function () {
            return this.a
          }
        }
      }
    
      console.log(new factory().c.b());
    };
    
    {
      // ES6,箭头函数中的this的指向是定义时this的指向(这里b定义的this就是继承父执行上下文里面的this===<注意：简单对象（非函数）是没有执行上下文的！> ))
      var factory = function () {
        this.a = 'a',
        this.b = 'b'
        this.c = {
          a: 'a+',
          b: () =>  this.a
        }
      }
      console.log(new factory().c.b());
    }

> 注意：简单对象（非函数）是没有执行上下文的！

### 默认参数： ###

{
      // ES5/ES3 默认参数的写法
      function f(x,y,z) {
        if(y === undefined) {
          y = 7;
        }
        if(z === undefined) {
          z = 42
        }
        return x + y + z
      }
      console.log(f(1,3))
    }
    
    {
      // ES6 默认参数
      function f(x,y=7,z =42) {
        return x + y + z
      }
      console.log(f(1,3))
    }
    
    {
      // 必选参数的验证
      function checkParameter () {
        throw new Error('can\'t be empty')
      }
      function f(x = checkParameter(), y =7, z = 42) {
        return x + y + z
      }
      console.log(f(1))
      try {
        f()
      } catch (e) {
        console.log(e);
      } finally {
    
      }
    }
    
    {
      // ES3, ES5 可变参数
      function f() {
        var a = Array.prototype.slice.call(arguments);
        var sum = 0;
        a.forEach(function(item){
          sum+= item*1
        })
        return sum
      }
      console.log(f(1,2,3))
    }
    
    {
      // ES6 可变参数
      function f(...a) {
        var sum = 0;
        a.forEach(item =>{
          sum += item*1
        });
        return sum
      }
      console.log(f(1,2,3,6))
    }

### 对象代理： ###

{
      // ES3 数据保护（闭包）
      var Person = function () {
        var data = {
          name: 'ES3',
          sex: 'male',
          age: 15
        }
        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','es3-name');
      console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
    
      try {
        person.set('sex','female')
        console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')}); 
      } catch(e) {
        console.log(e)
      }
      
    }
    
    {
      // ES5 (vue2的实现数据监听的原理)
      var Person = {
        name: 'es5',
        age: 15
      }
    
      Object.defineProperty(Person,'sex',{
        writable: false,
        value: 'male'
      })
      console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
      Person.name = 'es5-cname';
      console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
     
      try {
        Person.sex = 'female';
        console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
      } catch(e) {
        console.log(e)
      }
    }
    
    {
      // ES6
      let Person = {
        name: 'es6',
        sex: 'male',
        age: 15
      }
      // person是将来暴露给用户操作的对象，把这个Person保护起来，person通过Proxy和Person的数据挂钩的
      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);
      } finally {
    
      }
    }

通过代理来进行各种逻辑的操作

更多知识点：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70]: /images/20220328/da3b2d4d674441acadace0743ba42fd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1]: /images/20220328/c4523c648fe14196a87e0d79280d474d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2]: /images/20220328/a65195712e804506b9285cb1a9286c63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3]: /images/20220328/8372ad9807bc44edaca1c1d6718d9df2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4]: /images/20220328/2e177d5e6feb499dbed56992519a954a.png