最适合Java程序员的ES6教程「6000字|大量案例|多练好懂」

最适合Java程序员的ES6教程「6000字|大量案例|多练好懂」

本文为Vue教程前置知识,相关配套视频会在月底儿之前发布,如有需要请持续关注

一、ES6概述

1.1、ES6是什么

ES6,是ECMAScript 6的简称,它是 JavaScript 语言的下一代标准,已经在2015年的6月正式发布。

它的目标是使 JavaScript语言可以用于编写复杂的大型应用程序,成为企业级开发语言。

1.2、ES6为什么要学习

现在使用主流的前端框架中,如ReactJS、Vue.js、Angularjs等,都会使用到ES6的新特性,ES6也就成为了必修课,所以在学习这些前端框架之前,是非常有必要去学习ES6的内容。

1.3、什么是ECMAScript?

web1.0时代:

  • 最初的网页以HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。

web2.0时代:

  • 1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
  • 1996年,微软发布了JScript,其实是JavaScript的逆向工程实现。
  • 1997年,为了统一各种不同script脚本语言,ECMA(欧洲计算机制造商协会)以JavaScript为基础,制定了ECMAscript 标准规范。JavaScript和JScript都是 ECMAScript 的标准实现者,随后各大浏览器厂商纷纷实现了ECMAScript 标准。

所以,ECMAScript是浏览器脚本语言的规范,而各种我们熟知的js语言,如JavaScript则是规范的具体实现。

1.4、ECMAScript的快速发展

而后,ECMAScript就进入了快速发展期。

  • 1998年6月,ECMAScript 2.0 发布。

  • 1999年12月,ECMAScript 3.0 发布。这时,ECMAScript 规范本身也相对比较完善和稳定了,但是接下来的事情,就比较悲剧了。2007年10月,ECMAScript 4.0 草案发布。这次的新规范,历时颇久,规范的新内容也有了很多争议。在制定ES4的时候,是分成了两个工作组同时工作的。

    一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。

    一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。

    ECMAScript 4 的很多主张比较激进,改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会议,决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1,而ES4的内容,则延续到了后来的ECMAScript5和6版本中

  • 2009年12月,ECMAScript 5 发布。

  • 2011年6月,ECMAScript 5.1 发布。

  • 2015年6月,ECMAScript 6,也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始,开始采用年号来做版本。即 ECMAScript 2015,就是ECMAScript6。

  • 2016年 6月,小幅修订的《ECMAScript 2016标准》 (简称 ES2016)如期发布, 这个版本可以看作是 ES6.1版,因为两者的差异非常小(只新增了数组实例的 includes 方法 和指数运算符),基本上可以认为是同 一个标准 。

  • 2017 年 6 月发布了ES2017 标准。

    因此, ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版本以后的 JavaScript 的下一代 标准,涵盖了 ES2015、ES2016、 ES2017 等,而 ES2015 则是正式名称,特指当年发布的正式版本的标准语言。

1.5、ECMAScript和JavaScript的关系

ECMA 是一个组织,由这个组织定义了一套标准,JavaScript 是实现。就等同于,JDBC是一套标准,MySQL驱动、Oracle驱动是具体的实现。由于ECMA的标准目前来说,也就只有JavaScript去实现了,所以可以通俗的理解为,ECMAScript就是JavaScript。

ECMAScript 简称 ECMA 或 ES

二、变量/常量

2.1、var定义变量

之前,我们写js定义变量的时候,只有一个关键字:var。但是通过var定义的变量会有一个问题:就是通过该关键字定义的变量有时候会莫名的变成全局变量 , 也就是说var定义的变量没有块级别的作用域,因为var的作用域是函数 。

2.1.1、案例1

源码test001.html

<script type="text/javascript">
    if("Hello" == "Hello"){
        var x = 12;
    }
    alert(x);
</script>

运行结果

12

可以看到在一对花括号{}定义一个变量,在外部依然可以访问到。

2.1.2、案例2

源码 test001.html

<script type="text/javascript">
    for (var i = 1; i <= 6 ; i++) {
        console.info(i);
    }
    console.info("跳出循环后,i的值 = " + i);
</script>

运行结果

1
2
3
4
5
6
跳出循环后,i的值 = 7

结果分析

可以看出,在循环外部也可以获取到变量i的值,显然变量i的作用域范围太大了,在做复杂页面时,会带来很大的问题。

2.2、let定义变量

let 所声明的变量,只在 let 命令所在的代码块内有效。

2.2.1、案例1

源码 test001.html

  <script type="text/javascript">
   for (let i = 1; i <= 6 ; i++) {
       console.info(i);
   }
   console.info("跳出循环后,i的值 = " + i);
  </script>

运行结果

1
2
3
4
5
6
Uncaught ReferenceError: i is not defined

结果分析

这样,就把变量的i的作用域控制在了循环内部。

2.3、const定义常量

在之前ES5中,是没有办法定义常量的,但是到了ES6中,有了对常量的定义,即使用const关键字。

2.3.1、案例1

源码 test001.html

<script type="text/javascript">

    // 定义字符串x
    const x = "HelloWorld";
    console.info(x);

    // 再对x重新赋值
    x = 23;
    console.info(x);

</script>

运行结果

HelloWorld
Uncaught TypeError: Assignment to constant variable. // 不能对常量重新赋值

分析

可以看到,变量x的值是不能修改的。和Java语言中的final关键字类似。

三、字符串扩展

3.1、新的API扩展

3.1.1、新增方法

  • includes() :返回布尔值,表示是否找到了参数字符串。
  • startsWith() :返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith() :返回布尔值,表示参数字符串是否在原字符串的尾部。
  • repeat():返回一个字符串,根据给定的数值对字符串重复指定的次数。

3.1.2、案例

<script type="text/javascript">

    let str = "HelloWorld";

    let b1 = str.includes("Hello");
    console.info("HelloWorld是否包含Hello字符串: " + b1);  // true

    let b2 = str.startsWith("Hello");
    console.info("HelloWorld是否以Hello字符串开头: " + b2);    // true

    let b3 = str.endsWith("World");
    console.info("HelloWorld是否以World字符串结尾: " + b3);    // true

 let value = "Hello".repeat(3);
   console.info(value);         //  HelloHelloHello

</script>

3.2、字符串模板

3.2.1、之前写法

在之前如果要定义很长的字符串,是这样的:

<script type="text/javascript">
    let str = "Hello" +
        "World" +
        "Spring";
</script>
// 虽然开发工具可以自动的帮助我们实现使用“+”号进行拼接,但是看起来总是那么的不舒服。

3.2.2、模板语法

解决这个问题,可以使用ES6提供的字符串模板来去实现,语法:使用【`】作为字符串的模板语法。

3.2.3、案例1:随意折行

<script type="text/javascript">
    let str = `Hello
        World
        Spring
    `;

    console.info(str);
</script>
/**
 在两个`之间的部分都会被作为字符串的值,可以任意换行
*/

3.2.4、案例2:字符串拼接

<script type="text/javascript">

    // 过滤掉不能被3整除的数
    let name = 'HelloWorld';
    let age = 23;
    let address = "河南安阳";

    let str = `姓名是:${name}年龄是:${age}家庭住址是:${address}`

    console.info(str);

</script>

3.2.5、案例3、调用函数

<script type="text/javascript">

    let fn = function () {
        return "HelloWorld";
    }

    let content = `你好, ${fn()}`;

    console.info(content);

</script>

四、解构表达式

4.1、说明

ES6中允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构。

4.2、数组解构

数组解构允许我们按照一一对应的关系从数组中提取值,并且将值一一赋值给对应的变量。

4.2.1、之前写法

<script type="text/javascript">

    let arrs = [1,2,3];

 let x = arrs[0];
 let y = arrs[1];
 let z = arrs[2];

    console.info(x);
 console.info(y);
 console.info(z);

</script>
/*
 之前写法中,如果要获取数组中每个元素的值分别赋值给变量,只能通过下标的方式.
*/

4.2.2、案例1

<script type="text/javascript">

    let arrs = [1,2,3];

    let [x,y,z] = arrs; // x,y,z将与arrs中的每个位置对应来取值。

    console.info(x,y,z);

</script>
// let [x,y,z] = arrs 注意:等号左边的[]不是数组,表示的解构,表示的从等号右边的数组中提取值。

4.2.3、案例2

<script type="text/javascript">

   let [ [num1,num2,num3] , num , value ] = [ [1,2,3] , 34 , 'HelloWorld' ];

   console.info(num1,num2,num3,num,value);
</script>

4.3、对象解构

对象解构允许我们使用变量的名字匹配对象的属性,匹配成功,则会将对象属性的值赋值给变量。

4.3.1、之前写法

<script type="text/javascript">

   let person = {
       name: "Hello",
       age: 12,
       address: ["河南","山东"]
   };

   console.info(person.name);
   console.info(person.age);
   console.info(person.address);

</script>
/*
 之前写法中,如果要获取对象中的属性,需要通过【对象名.属性】的方式实现 
*/

4.3.2、案例1

<script type="text/javascript">

   let person = {
       name: "Hello",
       age: 12,
       address: ["河南","山东"]
   };

   let {name,age,address} = person; // {}中的name、age和address需要和person中的属性一致

   console.info(name);
   console.info(age);
   console.info(address);

</script>

4.3.3、案例2

<script type="text/javascript">

   let person = {
       name: "Hello",
       age: 12,
       address: ["河南","山东"]
   };

   // 当然也可以不一致,如果想要用其它变量接收,需要额外指定别名,需要用【:】指定
   // name是person中的属性名,冒号后面的myName是解构后要赋值给的变量。
   let {name:myName,age:myAge,address} = person; 

   console.info(myName);
   console.info(myAge);
   console.info(address);

</script>

五、函数优化

5.1、参数展开/rest参数/剩余参数/可变参数

剩余参数是将剩下的参数收集起来放在一个数组中。

5.1.1、案例1:rest参数

<script type="text/javascript">

    // 函数展开/可变参数
    function info(num1,num2,...args){
        alert(num1);
        alert(num2);
        alert(args);  // 30,40,50,args是一个数组,以数组的方式接收函数中剩余的参数
    }

    info(10,20,30,40,50);

</script>

作用:收集函数参数中剩余的参数,必须作为最后一个参数位置。

5.1.2、案例2:展开数组

<script type="text/javascript">

    let arr1 = [1,2,3];
    let arr2 = [4,5,6];

    let arr3 = [...arr1 , ...arr2];
    alert(arr3);

</script>

5.2、函数参数默认值

5.2.1、之前如何实现

在ES6之前是不提供函数默认参数值的实现,只能通过变通写法。

<script type="text/javascript">

    // 假设num2的默认值是2
    function add(num1, num2){
        if (!num2){
            num2 = 2;
        }
        return num1 + num2;
    }

    console.info(add(10)); // 12
    console.info(add(10 , 8)); // 18

</script>

5.2.2、案例

<script type="text/javascript">

    // 假设num2的默认值是2
    function add(num1, num2 = 2){ // 直接在参数上直接赋值即可
        return num1 + num2;
    }

    console.info(add(20)); // 22
    console.info(add(20 , 8)); // 28

</script>

5.3、箭头函数

5.3.1、之前定义函数

<script type="text/javascript">

    // 使用function关键字定义函数.
    function show(username){ 
        console.info("Hello:" + username);
    }

    show("张三");

</script>

5.3.2、案例1:单个参数

<script type="text/javascript">

    let show = username => console.info("Hello:" + username);

    show("李四");

</script>
/**
 语法:
  let 函数名 = 参数名 => 函数体
*/

5.3.3、案例2:多个参数

<script type="text/javascript">

    let add = (num1,num2) => console.info(num1 + num2);

    add(10,20);

</script>
/*
 多个参数需要使用【()】小括号给括起来.
*/

5.3.4、案例3:没有参数

<script type="text/javascript">

   let info = () => console.info("打印信息");

   info();

</script>
/*
 即使函数没有参数,也需要使用【()】小括号来去表示,来去代表参数部分
*/

5.3.5、案例4:函数体有多条语句

<script type="text/javascript">

    let length = (str) => {
        if(str){
            return str.length;
        }
        return 0;
    }

    console.info(length("123"));

</script>
/*
 函数体有多条语句时候,需要使用【{}】花括号包裹起来
*/

5.3.6、案例5:关于函数体的其他说明

如果函数中有单个表达式或语句:那么1、函数体外部的{}是可以省略的;2、使用return可以省略。

5.3.6.1、细节1:如果是单个表达式,则自带return

<script type="text/javascript">

    // 求两个数的和
    let sum = (num1 , num2) => {
        return num1 + num2;
    }

    alert(sum(10,30));

</script>
<script type="text/javascript">

    // 求两个数的和
    let sum = (num1 , num2) => num1 + num2;  // 自带return

    alert(sum(10,30));

</script>

5.3.6.2、细节2:如果是单条语句,花括号可以省略

<script type="text/javascript">

    // 求两个数的和
    let sum = (num1 , num2) => {
        alert(num1 + num2);
    }

    sum(10,25);

</script>
<script type="text/javascript">

    // 求两个数的和
    let sum = (num1 , num2) => alert(num1 + num2);

    sum(10,25);

</script>

5.3.7、箭头函数中的this

在普通函数中的this指向的是谁调用了这个函数,那么这个函数中的this就是谁。

箭头函数不绑定this,换句话说,箭头函数是没有自己的this,如果在箭头函数中使用this,那么this指向的是箭头函数所在定义位置中的this,也就是说箭头函数定义在哪里,箭头函数中的this就指向谁。通俗一点说,箭头函数里的this指的是定义这个箭头函数时外层代码的this。

5.3.7.1、案例1

ES5代码

<script type="text/javascript">

    function Person(){
        this.username = "HelloWorld";
        this.run = function(){
            console.info(this.username + "在跑步");
        }
    }

    var p1 = new Person();
 // HelloWorld在跑步,原因是run方法是p1对象调用者,那么run方法中的this指向的就是p1这个实例对象,而p1的实例对象中有username属性是HelloWorld.
    p1.run();    

    var p2 = p1.run;
 // undefined在跑步 , 原因是run方法是window对象直接调用的,那么run方法中的this指向的就是window,而window是没有username属性的,所以是undefined。
    p2();

</script>

ES6代码

<script type="text/javascript">

    function Person(){
        this.username = "HelloWorld";
        this.run = () => {
            console.info(this.username + "在跑步");
        }
    }

    var p1 = new Person();
 // HelloWorld在跑步
    p1.run();

    var p2 = p1.run;
 // HelloWorld在跑步,可以看到,更改了run方法的调用,但是依然没有影响到run方法中的this的指向
    p2();

</script>
<script type="text/javascript">

    function Person(){
        this.username = "HelloWorld";
        this.run = () => {
            console.info(this.username + "在跑步");
        }
    }

 // 先调用一下
    Person();

    var p2 = run;
 // HelloWorld在跑步
    p2();

</script>

可以发现:箭头函数中的this的指向就是:箭头函数定义在哪里,那么箭头函数中的this指向就是哪里,箭头函数中的this就是外层代码this的引用。本例:箭头函数中的this就是Person函数中的this。

5.3.7.2、案例2

ES5代码

<script type="text/javascript">

    var person = {username: "HelloWorld"};

    function fn1(){
        return function(){
            console.info(this.username);
        }
    }

    var fn = fn1.call(person);
    fn(); // undefined
</script>

ES6代码

<script type="text/javascript">

    var person = {username: "HelloWorld"};

    function fn1(){
        return ()=> {
            console.info(this.username);
        }
    }

    var fn = fn1.call(person);
    fn(); // HelloWorld
</script>

5.3.7.3、案例3

ES5代码

<script type="text/javascript">

   var obj = {
       age: 20,
       run: function(){
           console.info(this.age);
       }
   };

   obj.run(); // 20
</script>

ES6代码

<script type="text/javascript">

   var obj = {
       age: 20,
       run: ()=>{
           console.info(this.age);
       }
   };

   obj.run();  // undefined
</script>

5.4、对象的函数属性简写

5.4.1、之前写法

<script type="text/javascript">

    let person = {
        username : "张三",
        run: function(address){  // 属性:function函数
            console.info(this.username + "在" + address + "跑步");
        }
    };

    person.run("操场");

</script>

5.4.2、箭头函数写法

<script type="text/javascript">

    let person = {
        username : "张三",
        run: (address) => {
          console.info(person.username + "在" + address + "跑步")// 注意这里不能用this.username
        }
    };

    person.run("操场");

</script>

5.4.3、对象的函数属性写法

<script type="text/javascript">

    let person = {
        username : "张三",
        run(address){    // 在对象中直接定义函数。
            console.info(this.username + "在" + address + "跑步");
        }
    };

    person.run("操场");

</script>

5.4.4、对象的其他简单写法

以前写法

<script type="text/javascript">

    let name = "HelloWorld";
    let age = 23;

    let person = {name:name , age:age};

    console.info(person.name + "," + person.age);

</script>

ES6新写法

键值对出现了重复,ES6 中,如果属性名和和所分配的变量名一样,就可以从对象属性中删掉这些重复的变量名称。

<script type="text/javascript">

    let name = "HelloWorld";
    let age = 23;

    let person = {name, age};

    console.info(person.name + "," + person.age);
</script>

5.5、箭头函数结合解构表达式

5.5.1、之前写法

<script type="text/javascript">

    let person = {
        username: "张三",
        age: 12
    }

 // 打印对象
    function info(obj){
        console.info("姓名是:" + obj.username);
    }

    info(person);

</script>

5.5.2、改进1:使用箭头函数

<script type="text/javascript">

    let person = {
        username: "李四",
        age: 12
    }

    let info = (obj) => console.info("姓名是:" + obj.username);

    info(person);

</script>

5.5.3、改进2:使用箭头函数+解构表达式

<script type="text/javascript">

    let person = {
        username: "王五",
        age: 12
    }

    let info = ({username:name}) => console.info("姓名是:" + name);

    info(person);

</script>

5.6、map和reduce

5.6.1、map:映射

5.6.1.1、说明

map():该函数的参数接收一个函数fn,将原数组中的所有元素用这个fn函数处理后放入新数组返回。

5.6.1.2、案例1

给定一个数组,将数组中的每个元素求平方然后组成一个新的数组

<script type="text/javascript">
    let arrs = [1,2,3,4,5,6];

    let arrsNew = arrs.map(item => {
        return item * item;
    });
    console.info(arrsNew);
</script>
<script type="text/javascript">

    let arrs = [1,2,3,4,5,6];

    let arrsNew = arrs.map(item => item * item); // 使用箭头函数改造一下
    console.info(arrsNew);

</script>

5.6.2、reduce:合并/汇总

5.6.2.1、说明

reduce():该函数的参数接收一个函数fn(必须)和一个初始值value(可选),fn函数接收两个参数:

  • 第一个参数是上一次reduce处理的结果
  • 第二个参数是数组中要处理的下一个元素

reduce() 会从左到右依次把数组中的元素用reduce处理,并把处理的结果作为下次reduce的第一个参数。如果是第一次,会把前两个元素作为计算参数,或者把用户指定的初始值作为起始参数。

5.6.2.2、案例1:没有初始值

给定一个数组,求数组中所有元素的和

<script type="text/javascript">

    let arrs = [1,2,3,4,5,6];

    let result = arrs.reduce((a,b) => {
        return a + b;
    });

    console.info(result); // 21
</script>

5.6.2.3、案例2:有初始值

给定一个数组,求数组中所有元素的和,指定一个初始值10

<script type="text/javascript">

    let arrs = [1,2,3,4,5,6];

    let result = arrs.reduce((a,b) => {
        return a + b;
    },10);

    console.info(result);
</script>

5.7、filter:过滤

5.7.1、说明

用于把数组中的某些元素过滤掉,返回剩下的符合条件的元素。实现方式是:filter函数的参数接收一个函数,然后把传入的函数作用于每一个元素,然后根据返回值是true和false决定保留还是丢掉该元素。

5.7.2、案例

给定一个数组,过滤掉不能被3整除的数,然后返回新数组。

<script type="text/javascript">

    // 过滤掉不能被3整除的数
    let arrs = [12,34,56,41,24];

    let result = arrs.filter(function(item){
        return item % 3 == 0;
    });

    console.info(result);

</script>
<script type="text/javascript">

    // 过滤掉不能被3整除的数
    let arrs = [12,34,56,41,24];

    let result = arrs.filter(item => item % 3 == 0); // 使用箭头函数实现

    console.info(result);

</script>

5.8、forEach:迭代

5.8.1、说明

用来遍历数组

5.8.2、案例

<script type="text/javascript">

    // 过滤掉不能被3整除的数
    let arrs = [12,34,56,41,24];

    arrs.forEach(function(item,index){
        alert(index + ", " + item);
    })

</script>
<script type="text/javascript">

    // 过滤掉不能被3整除的数
    let arrs = [12,34,56,41,24];

    arrs.forEach((item,index) => {alert(index + ":" + item)});

</script>

六、模块化

6.1、说明

模块化就是把代码进行拆分,方便重复利用。类似java中的导包:要使用一个包,必须先导包。而JS中没有包的概念,换来的是模块。模块就是一个js文件。

模块功能主要由两个命令构成:export和import。

  • export:命令用于规定模块的对外接口,
  • import:命令用于导入其他模块提供的功能,import去导入模块只会导入一次。

6.2、导出变量/常量

6.2.1、方式1

步骤一:定义Utils.js文件定义要导出的变量/常量

export let num1 = 12;
export let value = "Hello";
export const num3 = 78;

步骤二:新建test.html文件导入

<script type="module">

    import {num1,value,num3} from "./Utils.js"

    console.info(num1);
    console.info(value);
    console.info(num3);

</script>

6.2.2、方式2

定义Utils.js文件定义要导出的变量/常量

let num1 = 12;
let value = "Hello";
const num3 = 78;

export {
    num1,value,num3
}

新建test.html文件导入

<script type="module">

    import {num1,value,num3} from "./Utils.js"

    console.info(num1);
    console.info(value);
    console.info(num3);

</script>

6.2.3、方式3:export导出时定义别名

定义Utils.js文件定义要导出的变量/常量

let num1 = 12;
let value = "Hello";
const num3 = 78;

export {
    num1 as a,
    value as b,
    num3 as c
}

新建test.html文件导入

<script type="module">

    import {a,b,c} from "./Utils.js"

    console.info(a);
    console.info(b);
    console.info(c);

</script>

6.2.4、方式4:import导入时也可以起别名

定义Utils.js文件定义要导出的变量/常量

let num1 = 12;
let value = "Hello";
const num3 = 780;

export {
    num1,
    value,
    num3
}

新建test.html文件导入

<script type="module">

    import {num1 as aa,value as bb,num3 as cc} from "./Utils.js"

    console.info(aa);
    console.info(bb);
    console.info(cc);

</script>

6.2.5、方式5:支持星号方式

定义Utils.js文件定义要导出的变量/常量

let num1 = 12;
let value = "Hello";
const num3 = 780;

export {
    num1,
    value,
    num3
}

新建test.html文件导入

<script type="module">

    import * as obj from "./Utils.js"

    console.info(obj.num1);
    console.info(obj.value);
    console.info(obj.num3);

</script>

6.3、导出类

定义Utils.js文件定义要导出的类

class Person {
    constructor(username,age){
        this.username = username;
        this.age = age;
    }

    info(){
        console.info(this.username + "," + this.age);
    }
}

export {
    Person
}

新建test.html文件导入

<script type="module">

    import {Person} from "./Utils.js"

    let p1 = new Person("HelloWorld",12);
    p1.info();

</script>

6.4、导出函数

定义Utils.js文件定义要导出的函数

const fn = ()=>{
    console.info("这个是函数")
}

export{
 fn
}

新建test.html文件导入

  <script type="module">

     import {fn} from "./Utils.js"

     fn();

  </script>

6.5、default的用法

使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。这就产生一个问题,使用模块者不愿阅读文档,不想知道变量名。此时就要用到export default命令,为模块指定默认输出。

6.5.1、导出具体的值

定义Utils.js文件

export default 23;

新建test.html文件导入

<script type="module">
        import b from "./Utils.js";
        console.info(b);
</script>

6.5.2、导出函数

定义Utils.js文件

export default function fn(){
    console.log("Hello");
};

新建test.html文件

<script type="module">
        import func from "./Utils.js";
        func();
</script>

6.5.3、导出类

定义Utils.js文件

class Person {
    info(){
        console.log("info");
    }
}

export default Person;

新建test.html文件

<script type="module">
    import Person from "./Utils.js";
    new Person().info();
</script>

6.5.4、混合使用

Utils.js

export default 23;
export let a = 12;

test.html

<script type="module">
     import num1,{a} from "./Utils.js";
     console.info(num1,a);
</script>

6.5.5、总结

  • export default 向外暴露的成员,可以使用任意变量名来import
  • 在一个模块中,export default 只允许向外暴露一次。
  • 在一个模块中,可以同时使用export default 和export 向外暴露成员
  • export可以向外暴露多个成员,同时,如果某些成员,在import导入时不需要,可以在import时不写。
  • 使用export导出的成员,必须严格按照导出时候的名称,来使用{ }按需接收

6.6、多次引入模块只会被引入一次

utils.js

console.log("HelloWorld");

export let a = 12;
export let b = 23;

test.html

<script type="module">
    import {a} from "./Utils.js";
    import {b} from "./Utils.js";

    console.log(a);
    console.log(b);
</script>

6.7、模块与模块也可以import

A.js

export let x = 12;
export let y = "Hello"

B.js

import {x,y} from "./A.js";

export let info = ()=> {
    console.log(x);
    console.log(y);
}

test.html

<script type="module">
    import {info} from "./B.js";

    info();
</script>

6.8、import导入有提升效果

Utils.js

export let a = 12;
export let b = 23;

test.html

<script type="module">

    console.log(a);
    console.log(b);

    import {a,b} from "./Utils.js";
</script>

6.9、动态引入模块

6.9.1、需求

根据不同的条件引入不同的模块。

A.js

export let x = 12;

B.js

export let y = 'Spring'

test.html

<script type="module">
    let a = 1;
    if (a == 1){
        import {x}  from './A.js';
    }else {
        import {y} from './B.js';
    }
</script>

// 报错

6.9.2、import()解决

A.js

export let x = 12;

B.js

export let y = 'Spring'

test.html

<script type="module">
    let a = 2;
    if (a == 1){
        import("./A.js").then(function(respData){
            console.info(respData.x);
        })
    }else {
        import("./B.js").then(function(respData){
            console.info(respData.y);
        })
    }
</script>

6.9.3、优化

A.js

export let x = 12;

B.js

export let y = 'Spring'

test.html

<script type="module">

    let param = 11;
    const config = () => {
        if (param == 1){
            return "./A.js";
        }else{
            return "./B.js";
        }
    }

    import(config()).then(function(respData){
        console.log(respData);
    });
</script>

❤️ 帅气的你又来看了我

如果你觉得这篇内容对你挺有有帮助的话:

点赞支持下吧,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)

欢迎在留言区与我分享你的想法,也欢迎你在留言区记录你的思考过程。

感谢大家的鼓励与支持

上一篇:易参保|退休金计算,15年和20年工龄差距多大?


下一篇:阿里云轻量应用服务器与云服务器ECS服务器对比优势