本文为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>运行后果
123456跳出循环后，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>运行后果
123456Uncaught 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>运行后果
HelloWorldUncaught 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>❤️ 帅气的你又来看了我
如果你感觉这篇内容对你挺有有帮忙的话：
点赞反对下吧，让更多的人也能看到这篇内容（珍藏不点赞，都是耍流氓 -_-）
欢送在留言区与我分享你的想法，也欢送你在留言区记录你的思考过程。
感激大家的激励与反对????????????