ES6初步了解

浅浅的花香味﹌ 2022-04-08 11:55 281阅读 0赞

慕课网视频课程：[https://www.imooc.com/learn/955][https_www.imooc.com_learn_955]

ES6可以参考资料：  
[http://es6.ruanyifeng.com/][http_es6.ruanyifeng.com]  
[https://segmentfault.com/a/1190000004365693?utm\_source=tag-newest\#articleHeader7][https_segmentfault.com_a_1190000004365693_utm_source_tag-newest_articleHeader7]  
[https://www.jianshu.com/p/287e0bb867ae][https_www.jianshu.com_p_287e0bb867ae]

前端技术教程及文档：[https://github.com/cucygh/fe-material][https_github.com_cucygh_fe-material]  
包括Git、Webpack、Paracle、Gulp、Grunt、Rollup、Browserify、Lerna、Eslint、http-server、ast、自动化测试、Vue、React、Angular、Riot、Koala、Express、Mobx、E下JS、Three.js、d3.js、HTML5动画库、视频播放器、CSS教程、JavaScript教程、服务端教程、开源图标、视频技术、动画技术和游戏方向等等。

**1.前言**

jquery是es3

angular 、vue、react是es6

IE8不支持ES6，但是可以引入es5-sham.js和es5-shim.js就可以了

**环境搭建：**

安装git

安装完Git后，应该在Git Bash里执行如下语句：

`git clone https://www.github.com/cucygh/es6-webpack.git`

克隆完后 cd es6-webpack

执行：`npm install / npm i`

等待安装完成

npm i webpack -g
    npm i webpack-dev-sever -g

执行：`npm start`

浏览器输入localhost:9000就可以了。

**2.常量**

// ES5 中常量的写法(通过设置writable属性为false，不可写来声明常量)
    
    Object.defineProperty(window, "PI2", {
        value: 3.1415926,
        writable: false,
    })
    
    console.log(window.PI2)
    
    // ES6 的常量写法（const）
    
    const PI = 3.1415926
    console.log(PI)

**3.作用域**

// ES5 中作用域
    const callbacks = []
    for (var i = 0; i <= 2; i++) {
        callbacks[i] = function() {
            return i * 2
        }
    }
    
    console.table([
        callbacks[0](),
        callbacks[1](),
        callbacks[2](),
    ])

输出结果：  
![在这里插入图片描述][20181213201029606.jpg]  
因为变量提升，var i声明放在前面，所以是全局变量，函数体内i是变量，返回的是变量i与2的乘积，i\*2，最后()调用时候，i都是为3，所以最后输出都是6.

或者这样理解：第一个for循环的i,不要先去理解闭包,因为i是var定义,var没有块级作用域的改变,所以在for之前还能被访问,而且for之外访问的i肯定是for循环中最大的值,所以在for之后执行的那几个callback函数,其实用的都是那个最大的i值  
而let有块级作用域,在for之外,根本就没有let的存在

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

![在这里插入图片描述][20181213202244896.jpg]

用let声明的变量有块作用域的概念。他会把当前块作用域的变量的值保存下来供后面闭包使用，每循环一次生成一次新的作用域，闭包就倒向闭包作用域里面的变量。

--------------------

声明一个函数，这个函数只能在这个代码块中运行，ES5中可以用**立即执行函数**解决：

((function() {
        const foo = function() {
            return 1
        }
        console.log("foo()===1", foo() === 1);
    
    ((function() {
            const foo = function() {
                return 2
            }
            console.log("foo()===2", foo() === 2)
        })())
    })())

![在这里插入图片描述][20181213203020456.jpg]

ES6中比较简单，可以用\{\}就能指定一个作用域。

{
        function foo() {
            return 1
        }
    
        console.log("foo()===1", foo() === 1)
        {
            function foo() {
                return 2
            }
    
            console.log("foo()===2", foo() === 2)
        }
        console.log("foo()===1", foo() === 1)
    }

![在这里插入图片描述][2018121320331620.jpg]

**4.箭头函数**

箭头函数：

function a(){
    
    }
    
    变成了：
    //参数只有一个时候()可以省略，{}中的表达式直接作为返回值，也可以省略{}
    ()=>{
    
    }

/* eslint-disable */
    
    {
      // 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); // (v)=>{return v+1}
      console.log(evens, odds);
    } 
    
    //箭头函数this指向问题
    {
      // 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());
    };
    
    {
      //ES6
      var factory = function() {
        this.a = 'a';
        this.b = 'b';
        this.c = {
          a: 'a+',
          b: () => {
            return this.a
          }
        }
      }
      console.log(new factory().c.b());
    }

![在这里插入图片描述][20181213205734426.jpg]

ES3、ES5中this是谁调用指向谁，ES6是定义时this的指向，指向new factory()的实例，所以是a。

**5.默认参数/可变参数**

{
      // 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));
    }
    
    //类似下面也可以
    function a(x,y){
    	x = x||1;
    	y = y||2;
    }
    
    {
      // 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) { //没有x时，通过执行默认参数执行checkParameter函数
        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, 6));
    } 
    
    {
      // ES6 可变参数
      function f(...a) {
        var sum = 0;
        a.forEach(item => {
          sum += item * 1
        });
        return sum
      }
      console.log(f(1, 2, 3, 6));
    }
    
     {
      // ES5 合并数组
      var params = ['hello', true, 7];
      var other = [1, 2].concat(params);
      console.log(other);
    } 
    
    {
      // ES6 利用扩展运算符合并数组
      var params = ['hello', true, 7];
      var other = [
        1, 2, ...params
      ];
      console.log(other);
    }

**6.对象代理**

/* eslint-disable */
    // es3通过构造函数/this.get/this.set来数据保护
    {
      // ES3,ES5 数据保护
      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-cname');
      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通过Object.defineProperty定义来保护数据（只读不写就可以保护了）
    {
      // ES5
      var Person = {
        name: 'es5',
        age: 15
      };
    
      Object.defineProperty(Person, 'sex', {
        writable: false,
        value: 'male'
      });
    
      console.table({name: Person.name, age: Person.age, sex: Person.sex});
      Person.name = 'es5-cname';
      console.table({name: Person.name, age: Person.age, sex: Person.sex});
      try {
        Person.sex = 'female';
        console.table({name: Person.name, age: Person.age, sex: Person.sex});
      } catch (e) {
        console.log(e);
      }
    } 
    
    //ES6通过 Proxy/set/get来数据保护
    {
      // ES6
      let Person = {
        name: 'es6',
        sex: 'male',
        age: 15
      };
    
      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 {
    
      }
    
    }

**ES6进阶**：解构赋值、模板字符串、正则扩展、数字扩展、函数扩展、Class、Module、Symbol、对象扩展、Iterator、Set和Map、Generator等等。

[https_www.imooc.com_learn_955]: https://www.imooc.com/learn/955
[http_es6.ruanyifeng.com]: http://es6.ruanyifeng.com/
[https_segmentfault.com_a_1190000004365693_utm_source_tag-newest_articleHeader7]: https://segmentfault.com/a/1190000004365693?utm_source=tag-newest#articleHeader7
[https_www.jianshu.com_p_287e0bb867ae]: https://www.jianshu.com/p/287e0bb867ae
[https_github.com_cucygh_fe-material]: https://github.com/cucygh/fe-material
[20181213201029606.jpg]: /images/20220405/e3fca373fad04b5ea4f326bd1f678bb5.png
[20181213202244896.jpg]: /images/20220405/94f96f53b88e48269ed5e0e4b4c0e9c7.png
[20181213203020456.jpg]: /images/20220405/cfeca6749fea4497bd0ca72b018f4daa.png
[2018121320331620.jpg]: /images/20220405/2e43f06c13ab4fb4802f9c5b6b77e945.png
[20181213205734426.jpg]: /images/20220405/ab081189e18c41c0a98af9315f825c4f.png