关于javascript:最适合Java程序员的ES6教程6000字大量案例多练好懂

29次阅读

共计 16160 个字符，预计需要花费 41 分钟才能阅读完成。

本文为 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>

❤️ 帅气的你又来看了我

如果你感觉这篇内容对你挺有有帮忙的话：

点赞反对下吧，让更多的人也能看到这篇内容（珍藏不点赞，都是耍流氓 -_-）

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

感激大家的激励与反对????????????

正文完
javascript
发表至： javascript
2020-11-16
 0
关于letvar和const
关于javascript:axios拦截器
关于javascript:基于华为云ModelArts和弹性云服务器ECS的AI全流程开发昇腾工业质检应用实战华为云至简致远
关于javascript:面试官说说JS作用域和作用域链我是这样回答的