常学常新之es6

左手的ㄟ右手 2023-01-07 07:06 181阅读 0赞

补充了一些之前不太注意到的知识点。参考阮一峰的文章：[https://es6.ruanyifeng.com/\#docs/module][https_es6.ruanyifeng.com_docs_module]

**目录**

属性表达式

跨模块常量

import()函数和import命令不同

import()的一些适用场合

模块化思想

Promise

async

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

**属性表达式**

let propKey = 'foo';
    let obj = {
        [propKey] : true,
        ["a" + "bc"] : 123,
     }
    console.log(obj);       //{foo : true , abc : 123}
    console.log(obj.foo);   //true
    console.log(obj['foo']) //true
    console.log(obj[propKey])   //true

方法简写

const obj = {
         method(){
             return "Hello!";
         }
    }
    console.log(obj.method());  //Hello
    //等同于
    const obj = {
         method : function(){
             return "Hello!"
         }
    }

**跨模块常量**

const声明的常量只在当前代码块有效。如果想设置跨模块的常量（即跨多个文件），或者说一个值要被多个模块共享，可以采用下面的写法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

**import()函数和import命令不同**

**import()函数类似于require()，动态加载，运行时加载，**也就是说，什么时候运行到这一句，就会加载指定的模块。import()返回一个 Promise 对象。

===》运用：vue路由的路由懒加载，**const** course = () **=>** import(*/\* webpackChunkName: "academy" \*/* "@/views/academy/course");

**import命令和export命令都是编译时加载，**ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。效率高。

es6模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的。

**import()的一些适用场合**

**（1）按需加载。**

**import()可以在需要的时候，再加载某个模块。**

button.addEventListener('click', event => {
    
      import('./dialogBox.js')
    
      .then(dialogBox => {
    
        dialogBox.open();
    
      })
    
      .catch(error => {
    
        /* Error handling */
    
      })
    
    });

**上面代码中，import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块。**

**（2）条件加载**

import()可以放在if代码块，根据不同的情况，加载不同的模块。
    
    if (condition) {
    
      import('moduleA').then(...);
    
    } else {
    
      import('moduleB').then(...);
    
    }

**上面代码中，如果满足条件，就加载模块** **A****，否则加载模块** **B****。**

模块化思想

ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。

**Promise**

Promise对象在创建之后会立刻执行，因此一般的做法是使用一个函数进行包装，然后return一个promise对象

function betray(){
    	return new Promise(function(resolve,reject){
    		...//异步操作
    	})
    }

async

**如果在****async****函数中抛出了错误，则终止错误结果，不会继续向下执行。**

[https_es6.ruanyifeng.com_docs_module]: https://es6.ruanyifeng.com/#docs/module
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20221119/a54f9fff693742feb09f00509aea44cc.png