前端ES6技术使用汇总

Posted 2022-03-30 mask哥

1.webpack
   webpack 是javascript应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

   webpack核心概念：
        入口 (entry):入口会指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始.

        输出 (output):output 属性会告诉 webpack 在哪里输出它创建的 bundles ，以及如何命名这些文件，默认值为 ./dist:
         const config =
              entry: "./src/main.js",
              output:
                filename: "bundle.js",
                path: path.resolve(__dirname, 'dist')
              
            

        loader:loader 让 webpack 可以去处理那些非 JavaScript 文件（ webpack 自身只理解 JavaScript ).被用于转换某些类型的模块.
              
            const config =
              entry: "./src/main.js",
              output:
                filename: "bundle.js",
                path: path.resolve(__dirname, 'dist')
              ,
              module:
                rules: [
                  
                      test: /\\.js$/,
                      exclude: /node_modules/,
                      loader: "babel-loader",
                      options: [
                        presets: ["env"]
                      ]
                  
                ]
              
            

        插件 (plugins):插件则可以处理包括打包优化、压缩、定义环境变量等。使用一个插件只要 require() ，然后添加到 plugins 数组中。

        // 通过 npm 安装
            const htmlWebpackPlugin = require('html-webpack-plugin');
            // 用于访问内置插件 
            const webpack = require('webpack'); 
             
            const config =
              module:
                rules: [
                  
                      test: /\\.js$/,
                      exclude: /node_modules/,
                      loader: "babel-loader"
                  
                ]
              ,
              plugins: [
                new HtmlWebpackPlugin(template: './src/index.html')
              ]
            ;

         利用 webpack 搭建应用(webpack.config.js):
            const path = require('path');
 
            module.exports =
              mode: "development", // "production" | "development"
              // 选择 development 为开发模式， production 为生产模式
              entry: "./src/main.js",
              output:
                filename: "bundle.js",
                path: path.resolve(__dirname, 'dist')
              ,
              module:
                rules: [
                  
                    test: /\\.js$/,
                    exclude: /node_modules/,
                    loader: "babel-loader",
                    options: [
                      presets: ["env"]
                    ]
                  
                ]
              ,
              plugins: [
                ...
              ]
            
2.es6中js新增关键字：
     let声明的变量只在let 命令所在的代码块内有效。

     const声明一个只读的常量，一旦声明，常量的值就不能改变。

3.赋值解析

4.Symbol:es6一种新的原始数据类型，表示独一无二的值。最大的用法是用来定义对象的唯一属性名。ES6数据类型：Number 、 String 、 Boolean 、 Object、 null 和 undefined ，新增Symbol ;

  用法：Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型。可以接受一个字符串作为参数，为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用。

    let sy=Symbol("kk");
    console.log(sy);
    typeof(sy);//类型为：symbol

    // 相同参数 Symbol() 返回的值不相等,因为引用空间不同
     let sy1 = Symbol("kk"); 
     sy === sy1;       // false

5.Map与set
  Map 对象保存键值对.

     map迭代方式：for... of 与forEach()

     map与数组转换：
         var kvArray = [["key1", "value1"], ["key2", "value2"]];
         
        // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
        var myMap = new Map(kvArray);
         
        // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
        var outArray = Array.from(myMap)

       //Map -> key 是函数
        var myMap=new Map();
        var keyFunc=function();//函数
        myMap.set(keyFunc,"和键 keyFunc关联的值");

        myMap.get(keyFunc);
        myMap.get(function()); undefined, 因为 keyFunc !== function ()

        //Map的迭代
        //1. for...of

        var myMap1=new Map();
        myMap1.set(0,"zero");
        myMap1.set(1,"one");
        for(var [key,value] of myMap1)
         console.log(key+" = " +value);
        

        for(var [key,value]of myMap1.entries())
            console.log(key +" = "+value);
        

        for(var key of myMap1.keys())
            console.log(key);
        
        for (var value of myMap1.values())
            console.log(value);
          

          //2. forEach()
          var myMap2=new Map();
          myMap2.set(0,"zero");
          myMap2.set(1,"one");

          myMap2.forEach(function(v,k)
              console.log(k+" = "+v);

          ,myMap2);

          //3.map与arry的转换

          var kvArray=[["k1","v1"],["k2","v2"]];
          // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
          var mnyMap=new Map(kvArray);
          console.log(mnyMap);

          //4. 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
          var outArray=Array.from(mnyMap);
          console.log(outArray);

          //5.Map 的合并
          var first=new Map([[1,'one'],[2,'two'],[3,'three'],]);
          var second=new Map([[1,'uno'],[2,'dos']]);
          // 合并两个 Map 对象时，如果有重复的键，则后面的会覆盖前面的，对应值即 uno，dos， three
          var merge=new Map([...first,...second]);
          console.log(merge);

  Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用
      Set 中的特殊值
            Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：
            +0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复；
            undefined 与 undefined 是恒等的，所以不重复；
            NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复。
    set作用：1.数组去重；2.并集 3.交集 4.差集

          //set不允许重复值
          let mySet=new Set();
          mySet.add(1);
          mySet.add(5);
          mySet.add(5);
          var o=a:1,b:2;
          mySet.add(o);
          console.log(mySet);
          //类型转换 Array
          var myset1=new Set(["v1","v2","v3"]);
          // 用...操作符，将 Set 转 Array
          var myArray=[...myset1];
          console.log(myArray);
        // String 转 Set
        var mySet2=new Set('hello');
        console.log(mySet2);// 注：Set 中 toString 方法是不能将 Set 转换成 String

        //数组去重
        var mSet=new Set([1,2,3,4,4]);
        console.log([...mSet]);
        //并集
        var a = new Set([1, 2, 3]);
        var b = new Set([4, 3, 2]);
        var union=new Set([...a,...b]);
        console.log(union);

        //交集
        var a1 = new Set([1, 2, 3]);
        var b1 = new Set([4, 3, 2]);
        var intersect=new Set([...a].filter(x=>b.has(x)));
        console.log(intersect);

        //差集
        var a = new Set([1, 2, 3]);
        var b = new Set([4, 3, 2]);
        var diff=new Set([...a].filter(x=>!b.has(x)));
        console.log(diff);

6.Reflect 与 Proxy：是ES6操作对象引入的api
   Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

   Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。

   Proxy用法由target和handler组成

    let target=
    name:'tom',
    age:24
    

    let handler=
        get:function(target,key)
            console.log('getting',+key);
            return target[key];
        ,
        set:function(target,key,value)
            console.log('setting '+key);
            target[key]=value;
        
    

    let proxy=new Proxy(target,handler);
    console.log(proxy.name);
    proxy.age=25;
    proxy.name='tim';
    console.log("name="+proxy.name+",age="+proxy.age);

7.数组：
        //1.数组创建：
        //1.1 Array.of()   
        console.log(Array.of(1,2,3,3))
        console.log(Array.of(1, '2', true)); // [1, '2', true]
        // 参数为空时返回空数组
        console.log(Array.of()); // []

        //1.2 Array.from()
        console.log(Array.from([1, 2]));

        //map 函数，用于对每个元素进行处理，放入数组的是处理后的元素。
        console.log(Array.from([1,2,3],(n)=>n*2));

        //转换map
        let map=new Map();
        map.set('ky1','v0');
        map.set('k2','v2');
        console.log(Array.from(map));

        //转换 set

        let arr=[1,2,3];
        let set=new Set(arr);
        console.log(Array.from(set));

        //转换字符串
        let str='abc';
        console.log(Array.from(str));

        //查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。 find()
        let arr2 = Array.of(1, 2, 3, 4);
        console.log(arr.find(item => item > 2)); 

        //查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。findIndex()
        let arr3 = Array.of(1, 2, 1, 3);
        // 参数1：回调函数
        // 参数2(可选)：指定回调函数中的 this 值
        console.log(arr.findIndex(item => item == 2)); // 1
         
        // 数组空位处理为 undefined
        console.log([, 1].findIndex(n => true)); //0

        //遍历键值对: entries()
        for(let[key,value] of ['a','b'].entries())
            console.log(key,value);
        
        //不使用for...of 循环
        let entries=['a','b'].entries();
        console.log(entries.next().value);
        console.log(entries.next().value);

        //遍历key: keys()
        for(let key of ['a', 'b'].keys())
            console.log(key);
        

        //遍历键值:values()
        for(let value of ['a', 'b'].values())
            console.log(value);
        

8.函数
9.es6模块化
 在 ES6 前， 实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库，  和基于 CMD 规范的模块化库）。
 ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。
 ES6 的模块化分为导出（export） @与导入（import）两个模块。

     export 与 import 
     基本用法：模块导入导出各种类型的变量，如字符串，数值，函数，类。

    导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。 
    不仅能导出声明还能导出引用（例如函数）。
    export 命令可以出现在模块的任何位置，但必需处于模块顶层。
    import 命令会提升到整个模块的头部，首先执行。

  ***建议使用大括号指定所要输出的一组变量写在文档尾部，明确导出的接口。***

    export default 命令：
        在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
        export default 中的 default 是对应的导出接口变量。
        通过 export 方式导出，在导入时要加 ，export default 则不需要。
        export default 向外暴露的成员，可以使用任意变量来接收。

10.Promise对象：是异步编程的一种解决方案；从它可以获取异步操作的消息；
       Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）;

                 状态的缺点:
                    无法取消 Promise ，一旦新建它就会立即执行，无法中途取消。

                    如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。

                    当处于 pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
     then 方法:then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。
          then 方法的特点:在 JavaScript 事件队列的当前运行完成之前，回调函数永远不会被调用。通过 .then 形式添加的回调函数，不论什么时候，都会被调用。
          const p = new Promise(function(resolve,reject)
              resolve('success');
            );
             
            p.then(function(value)
              console.log(value);
            );
             
            console.log('first');

        function testAwait()
            return new Promise((resolve)=>
                setTimeout(function()
                    console.log("testAwait");
                    resolve();
                ,1000);
            );
        

        async function helloAsync()
            await testAwait();
            console.log("helloAsync");
        

        console.log(helloAsync());

        // helloAsync().then(v=>
        //     console.log(v);
        // );

11.Generator 函数：通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。
    Generator 函数组成：
     在 function 后面，函数名之前有个 * ；函数内部有 yield 表达式。

     function* func()
         console.log("one");
         yield '1';
         console.log("two");
         yield '2'; 
         console.log("three");
         return '3';
    
    
    执行机制：Generator 函数不会像普通函数一样立即执行，而是返回一个指向内部状态对象的指针，所以要调用遍历器对象Iterator 的 next 方法，指针就会从函数头部或者上一次停下来的地方开始执行。
    f.next();

12.async:是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联. 
          async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数;
          await 关键字仅在 async function 中有效,用于等待一个 Promise 对象;
          async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

      async function helloAsync()
           return "helloAsync";
        
          
        console.log(helloAsync())  // Promise <resolved>: "helloAsync"
         
        helloAsync().then(v=>
           console.log(v);         // helloAsync
        )

       function testAwait()
           return new Promise((resolve) =>
               setTimeout(function()
                  console.log("testAwait");
                  resolve();
               , 1000);
           );
        
         
        async function helloAsync()
           await testAwait();
           console.log("helloAsync");
        
        helloAsync();