來自拉鉤教育-JAVA就業(yè)集訓(xùn)營

1侮邀、es6簡介

2白对、搭建es6環(huán)境

3、ES6 的語法使用

1.ECMAScript6 簡介

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標(biāo)準(zhǔn)，已經(jīng)在 2015 年 6 月正式發(fā)布了垢村。
它的目標(biāo)，是使得 JavaScript 語言可以用來編寫復(fù)雜的大型應(yīng)用程序嚎卫，成為企業(yè)級(jí)開發(fā)語言

1.1 ECMAScript 和 JavaScript 的關(guān)系

要講清楚這個(gè)問題嘉栓，需要回顧歷史。
1996 年 11 月拓诸，JavaScript 的創(chuàng)造者 Netscape 公司侵佃，決定將 JavaScript 提交給標(biāo)準(zhǔn)化組織
ECMA，希望這種語言能夠成為國際標(biāo)準(zhǔn)
ECMA 發(fā)布 262 號(hào)標(biāo)準(zhǔn)文件（ECMA-262）的第一版奠支，規(guī)定了瀏覽器腳本語言的標(biāo)準(zhǔn)馋辈，并將這種語言稱為 ECMAScript，這個(gè)版本就是 1.0 版倍谜。
因此迈螟，ECMAScript （憲法）和 JavaScript（律師） 的關(guān)系是，前者是后者的規(guī)格尔崔，后者是前者的一種實(shí)現(xiàn)

1.2 ES6 與 ECMAScript 2015 的關(guān)系

2011 年答毫，ECMAScript 5.1 版發(fā)布后，就開始制定 6.0 版了季春。因此洗搂，ES6 這個(gè)詞的原意，就是指
JavaScript 語言的下一個(gè)版本载弄。
ES6 既是一個(gè)歷史名詞耘拇，也是一個(gè)泛指，含義是 5.1 版以后的 JavaScript 的下一代標(biāo)準(zhǔn)宇攻，涵蓋了ES2015惫叛、ES2016、ES2017 等等

2.搭建前端環(huán)境

2.1 Node 環(huán)境

2.1.1 什么是Node.js

簡單的說 Node.js 就是運(yùn)行在服務(wù)端的 JavaScript逞刷。
JavaScript程序嘉涌，必須要依賴瀏覽器才能運(yùn)行！沒有瀏覽器怎么辦亲桥？OK洛心，nodejs幫你解決
Node.js是脫離瀏覽器環(huán)境運(yùn)行的JavaScript程序，基于Google的V8引擎题篷，V8引擎執(zhí)行Javascript的速度,非炒噬恚快，性能非常好番枚。

2.1.2 Node.js有什么用

如果你是前端程序員法严，你不懂得像PHP损敷、Python或Ruby等動(dòng)態(tài)編程語言，然后你想創(chuàng)建自己的服務(wù)深啤，那Node.js是一個(gè)非常好的選擇拗馒。
Node.js 是運(yùn)行在服務(wù)端的 JavaScript，如果你熟悉Javascript溯街，那么你將會(huì)很容易的學(xué)會(huì)Node.js诱桂。
當(dāng)然，如果你是后端程序員呈昔，想部署一些高性能的服務(wù)挥等，那么學(xué)習(xí)Node.js也是一個(gè)非常好的選擇。

2.1.3 安裝和下載

官網(wǎng)：https://nodejs.org/en/
中文網(wǎng)：http://nodejs.cn/
LTS：長期支持版本
Current：最新版
安裝：Windows下雙擊點(diǎn)擊安裝——>Next——>finish
注意：
node-v14.5.0-x64.msi 最新版本堤尾，如果是win7系統(tǒng)的話肝劲，可能安裝不了。
如果是win7系統(tǒng)郭宝，安裝node-v10.14.2-x64.msi這個(gè)版本

2.1.3.1 查看版本

在dos窗口中執(zhí)行命令查看版本號(hào)
node -v

創(chuàng)建文件夾 lagou-node
用vscode打開目錄,其目錄下創(chuàng)建hello.js
console.log("hello,nodejs");
打開命令行終端:Ctrl + Shift + y
輸入命令
node hello.js

第一次運(yùn)行辞槐，可能會(huì)報(bào)錯(cuò)！

image.png

兼容性的問題粘室，以管理員身份運(yùn)行即可

image.png

這樣榄檬，沒有使用瀏覽器，我們也可以運(yùn)行js程序了

image.png

2.2 NPM環(huán)境

2.2.1 什么是NPM

NPM全稱Node Package Manager育特，是Node.js包管理工具
是全球最大的模塊生態(tài)系統(tǒng)丙号，里面所有的模塊都是開源免費(fèi)的先朦，也是Node.js的包管理工具缰冤，相當(dāng)于前端的Maven

如果一個(gè)項(xiàng)目需要引用很多第三方的js文件，比如地圖喳魏，報(bào)表等棉浸，文件雜而亂，自己去網(wǎng)上下載刺彩，到處是廣告和病毒
那么迷郑，我們就想辦法，把這些js文件統(tǒng)一放在一個(gè)倉庫里创倔，大家誰需要嗡害，誰就去倉庫中拿過來，方便多了

npm就是這個(gè)倉庫系統(tǒng)畦攘，如果你需要某個(gè)js文件霸妹，那就去遠(yuǎn)程倉庫中下載，放在本地磁盤中知押，進(jìn)而引用
到我們的項(xiàng)目中

2.2.2 NPM工具的安裝位置

node的環(huán)境在安裝的過程中叹螟，npm工具就已經(jīng)安裝好了鹃骂。
Node.js默認(rèn)安裝的npm包和工具的位置：Node.js目錄\node_modules
在這個(gè)目錄下你可以看見 npm目錄，npm本身就是被NPM包管理器管理的一個(gè)工具罢绽，說明 Node.js已經(jīng)集成了npm工具

#在命令提示符輸入 npm -v 可查看當(dāng)前npm版本
npm -v

2.2.3 使用npm管理項(xiàng)目

2.2.3.1 項(xiàng)目初始化

全新創(chuàng)建一個(gè)目錄畏线，作為項(xiàng)目目錄，使用dos命令進(jìn)入此目錄良价，輸入命令

npm init
# 接下來是一堆項(xiàng)目信息等待著你輸入寝殴，如果使用默認(rèn)值或你不知道怎么填寫，則直接回車即可明垢。
# package name: 你的項(xiàng)目名字叫啥
# version: 版本號(hào)
# description: 對(duì)項(xiàng)目的描述
# entry point: 項(xiàng)目的入口文件（一般你要用那個(gè)js文件作為node服務(wù)杯矩，就填寫那個(gè)文件）
# test command: 項(xiàng)目啟動(dòng)的時(shí)候要用什么命令來執(zhí)行腳本文件（默認(rèn)為node app.js）
# git repository: 如果你要將項(xiàng)目上傳到git中的話，那么就需要填寫git的倉庫地址（這里就不寫地址了）
# keywirds： 項(xiàng)目關(guān)鍵字（我也不知道有啥用袖外，所以我就不寫了）
# author: 作者的名字（也就是你叫啥名字）
# license: 發(fā)行項(xiàng)目需要的證書（這里也就自己玩玩史隆，就不寫了）

最后會(huì)生成package.json文件，這個(gè)是包的配置文件曼验，相當(dāng)于maven的pom.xml
我們之后也可以根據(jù)需要進(jìn)行修改泌射。
上述初始化一個(gè)項(xiàng)目也太麻煩了，要那么多輸入和回車鬓照。想簡單點(diǎn)熔酷，一切都按照默認(rèn)值初始化即可，
ok豺裆，安排
npm init -y

2.2.4 修改npm鏡像 和 存儲(chǔ)地址

NPM官方的管理的包都是從 http://npmjs.com下載的拒秘，但是這個(gè)網(wǎng)站在國內(nèi)速度很慢。
這里推薦使用淘寶 NPM 鏡像 http://npm.taobao.org/ 臭猜，淘寶 NPM 鏡像是一個(gè)完整npmjs.com 鏡像躺酒，同步頻率目前為 10分鐘一次，以保證盡量與官方服務(wù)同步蔑歌。

設(shè)置鏡像和存儲(chǔ)地址：

#經(jīng)過下面的配置羹应，以后所有的 npm install 都會(huì)經(jīng)過淘寶的鏡像地址下載
npm config set registry https://registry.npm.taobao.org
#設(shè)置npm下載包時(shí)保存在本地的地址（建議英文目錄）
npm config set prefix "E:\\repo_npm"
#查看npm配置信息
npm config list

2.2.5 npm install命令的使用

npm install jquery

使用 npm install 安裝依賴包的最新版
模塊安裝的位置：項(xiàng)目目錄\node_modules
安裝會(huì)自動(dòng)在項(xiàng)目目錄下添加 package-lock.json文件，這個(gè)文件幫助鎖定安裝包的版本
同時(shí)package.json 文件中次屠，依賴包會(huì)被添加到dependencies節(jié)點(diǎn)下园匹，類似maven中的
<dependencies>

image.png

3. ES6基本語法

ES標(biāo)準(zhǔn)中不包含 DOM 和 BOM的定義，只涵蓋基本數(shù)據(jù)類型、關(guān)鍵字紊馏、語句料饥、運(yùn)算符、內(nèi)建對(duì)象朱监、內(nèi)建函數(shù)等通用語法岸啡。
本部分只學(xué)習(xí)前端開發(fā)中ES6的必要知識(shí)，方便后面項(xiàng)目開發(fā)中對(duì)代碼的理解赫编。
3.1 let聲明變量
與我們的JavaScript中var聲明變量有什么區(qū)別巡蘸？
1、作用域不同

{
var a = 0; // var聲明的變量是全局變量
let b = 0; // let聲明的變量是局部變量
}
console.log(a);
console.log(b); //b is not defined：b沒有定義

2擂送、聲明次數(shù)不同

// var可以聲明多次
// let只能聲明一次
var m = 1;
var m = 2;
let n = 3;
let n = 4; //SyntaxError: Identifier 'n' has already been declared（語法錯(cuò)誤：n已
經(jīng)聲明過了）
console.log(m);
console.log(n);

3悦荒、聲明與使用順序不同

// var 聲明的變量會(huì)全局存儲(chǔ)
// let 聲明的變量只能在執(zhí)行后才存儲(chǔ)
console.log( x ); //沒有報(bào)錯(cuò)，輸出：undefined
var x = "蘋果";
console.log(y); //y is not defined（y沒有定義）
let y = "香蕉";

3.2 const聲明常量

const 聲明常量,為只讀變量

1. 一旦聲明之后嘹吨，其值是不允許改變的
2. 一但聲明必須初始化搬味，否則會(huì)報(bào)錯(cuò) SyntaxError: Missing initializer in const declaration（語法錯(cuò)誤，聲明常量丟失了初始化）

const PI = 3.14;
PI = 3.1415; //Assignment to constant variable.（聲明的是常量）
console.log( PI );

3.3 解構(gòu)賦值

解構(gòu)賦值是對(duì)賦值運(yùn)算符的擴(kuò)展
它是一種針對(duì)數(shù)組或者對(duì)象進(jìn)行模式匹配蟀拷，然后對(duì)其中的變量進(jìn)行賦值碰纬。
解構(gòu)，顧名思義，就是將集合型數(shù)據(jù)進(jìn)行分解，拆分炼绘，把里面的值逐一遍歷獲取
在代碼書寫上簡潔且易讀，語義更加清晰明了谨娜；也方便了復(fù)雜對(duì)象中數(shù)據(jù)字段獲取。

3.3.1 數(shù)組解構(gòu)

var arr = [1,2,3];
// 傳統(tǒng)的js
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);
//es6的解構(gòu)
var [x,y,z] = arr;
console.log(x,y,z);

3.3.2 對(duì)象解構(gòu)

var user = {
username : "呂布",
weapon:"方天畫戟",
horse:"赤兔馬"
};
// 傳統(tǒng)的js
let mingzi = user.username;
let wuqi = user.weapon;
let zuoji = user.horse;
console.log("姓名:"+mingzi+",武器:"+wuqi+",坐騎:"+zuoji);
//es6的解構(gòu)
let {username,weapon,horse} = user; // 注意：解構(gòu)的變量名必須是對(duì)象中的屬性
console.log("姓名:"+username+",武器:"+weapon+",坐騎:"+horse);

3.4 模板字符串

• 模板字符串相當(dāng)于加強(qiáng)版的字符串
• 用反引號(hào) `,除了作為普通字符串，還可以用來定義多行字符串
• 還可以在字符串中加入變量和表達(dá)式。

3.4.1 定義多行字符串

再見了骑歹，\n

let str = `hello,
你倆在哪呢？
心情不好匕累，出來喝點(diǎn)傲晟病默伍！`;
console.log(str);

3.4.2 字符串插入變量和表達(dá)式

再見了欢嘿，字符串的拼接用 +

let name = `呂布`;
let age = 24;
// 傳統(tǒng)的拼接字符串
var info1 = "我叫:"+ name +",我今年"+age+"歲！";
console.log(info1);
// es6的拼接字符串
var info2 = `我叫:${name},我明年${age+1}歲也糊！`;
console.log(info2);

3.4.3 字符串中調(diào)用函數(shù)

還能這么玩

function test(){
return "吃喝玩樂";
}
let str = `悲催的人生炼蹦，從${test()}開始`;
console.log( str );

3.5 聲明對(duì)象簡寫

定義對(duì)象的時(shí)候，可以用變量名作為屬性名

let name = `呂布`;
let age = 28;
//傳統(tǒng)
let user1 = {
name : name,
age : age
};
console.log(user1);
//es6新語法中的簡寫
let user2 = {name,age};
console.log(user2);

3.6 定義方法簡寫

// 傳統(tǒng)
let user1 = {
  say : function(){
    console.log("大家好狸剃！");
  }
};
user1.say();
//es6
let user2 = {
  say(){
    console.log("大家好捌！");
  }
};
user2.say();

3.7 對(duì)象拓展運(yùn)算符

拓展運(yùn)算符 {...} 將參數(shù)對(duì)象中所有可以遍歷的屬性拿出來，然后拷貝給新對(duì)象

3.7.1 拷貝對(duì)象(深拷貝)

科幻電影中的一滴血虑省，就可以制作出一個(gè)完全一模一樣的克隆人

let user1 = {
name:"項(xiàng)羽",
age:34
};
let user2 = {...user1}; // 深拷貝（克履涔巍）
console.log(user1);
console.log(user2);

3.7.2 合并對(duì)象

吞噬合并（兩個(gè)對(duì)象合并成一個(gè)對(duì)象）

let user1 = {
name:"項(xiàng)羽",
age:34
};
let user2 = {head:"諸葛亮"};
let user = {...user1,...user2};
console.log( user );

3.8 函數(shù)的默認(rèn)參數(shù)

形參處已聲明，但不傳入實(shí)參會(huì)怎樣探颈？

function test(name , age = 18){
console.log(`我叫${name}熟丸，我今年${age}歲`);
}
test("呂布",33); //我叫呂布，我今年33歲
test("貂蟬"); //我叫貂蟬伪节，我今年18歲
test("關(guān)羽",null); //我叫關(guān)羽光羞，我今年null歲
test("馬超",""); //我叫馬超，我今年歲
test("張飛",undefined); //我叫張飛怀大，我今年18歲

3.9 函數(shù)的不定參數(shù)

定義方法時(shí)纱兑，不確定有幾個(gè)參數(shù)？

function test( ...arg ){
  console.log(`傳入了${arg.length}個(gè)參數(shù)`);
  for(var i = 0 ;i<arg.length;i++){
    console.log(arg[i]);
  }
}
test(1);
test(1,2);
test(1,2,3,4,5,6);
test();
test("郭","嘉",28);

3.10 箭頭函數(shù)

箭頭函數(shù)提供了一種更加簡潔的函數(shù)書寫方式化借∏鄙鳎基本語法是：參數(shù) => 函數(shù)體

// 傳統(tǒng)
var f1 = function(a){
  return a*10;
}
console.log( f1(10) );
// es6
var f2 = a=>a*10;
console.log( f2(20) );
// 當(dāng)箭頭函數(shù)一個(gè)參數(shù)時(shí)，（）可以省略
// 當(dāng)箭頭函數(shù)沒有參數(shù)或者有多個(gè)參數(shù)蓖康，要用（）括起來
// 當(dāng)箭頭函數(shù)的函數(shù)體有多行語句勘纯，用｛｝括起來，表示代碼塊
// 當(dāng)只有一條語句钓瞭，并且需要返回時(shí)驳遵，可以省略｛｝，結(jié)果會(huì)自動(dòng)返回
var f3 = (a,b) => {
  let sum = a+b;
  return sum;
}
console.log( f3(3,7) );
// 可以將f3進(jìn)行簡化
var f4 = (a,b) => a + b;
console.log( f3(11,22) );

3.11 Promise（了解）

用來解決回調(diào)函數(shù)的嵌套噩夢 （后面學(xué)習(xí)ajax才能更好的理解）
我們回顧一下嵌套噩夢：
你和我打架山涡，我打不過你堤结，我說：你在這等著，我找我哥來揍你鸭丛！
“哥竞穷，我被老王打了，你幫我揍他鳞溉！”瘾带，“行，我先把飯做完熟菲，你先去找劉備看政，把劉備找來，我
和劉備再一起幫你報(bào)仇抄罕！”
“劉備允蚣，我被老王打了，我哥叫我來找你呆贿，一起幫我報(bào)仇嚷兔！”森渐，“沒問題，兄弟冒晰，我去交電話
費(fèi)同衣，你去找我二弟關(guān)羽，他打架厲害壶运，把他叫來乳怎，我們一起更有把握！”
“關(guān)羽前弯，我被人打了蚪缀，我哥叫我找劉備，劉備讓我來找你恕出，一起幫我報(bào)仇询枚！”，“沒問題浙巫，兄
弟金蜀，我有點(diǎn)事，你先去找我三弟張飛的畴，把張飛找來渊抄，我這邊就辦完事了，我們一起幫你報(bào)仇
去丧裁！”
“張飛护桦，我讓老王打了，誰誰誰煎娇，哎二庵，反正關(guān)羽讓我找你，你跟我走缓呛，一起幫我報(bào)仇去催享！”，
“行啊哟绊，老鐵因妙，我一會(huì)從老丈人回來就去找你，你去把我二哥的兒子關(guān)平找來票髓，正好打一架讓
這小子練練膽攀涵。找到了我們一起幫你報(bào)仇！”
炬称。汁果。。
滿嘴的兄弟情深玲躯，一個(gè)拖一個(gè)，就是不想幫我報(bào)仇
使用promise解決掐架找人的噩夢
“哥，老王打我跷车！”棘利，“走，但老王厲害朽缴，我們?nèi)フ覄湟黄饚湍銏?bào)仇善玫！”
“劉備，走著密强，我們一起揍老王去”茅郎，“沒問題！”或渤，“二弟系冗，過來，有人欺負(fù)我們薪鹦，去揍他掌敬！”
。池磁。奔害。找人過程中，都是立刻跟著走地熄，沒人拖华临！
最終，我們108人一起找到了老王６丝肌Ｒ铡！跛梗！
找到一個(gè)人成功后寻馏，再繼續(xù)找下一個(gè)人。逐漸形成了“隊(duì)伍”
組建隊(duì)伍的過程中核偿，如果找某個(gè)人失敗了诚欠，則“隊(duì)伍”失敗
其實(shí)有點(diǎn)類似“擊鼓傳花”的游戲，一個(gè)成功拿到花之后漾岳，才能傳遞給下一個(gè)人轰绵。依次類推！

setTimeout(()=>{
  console.log(1);
    setTimeout(()=>{
      console.log(2);
        setTimeout(()=>{
          console.log(3);
            setTimeout(()=>{
              console.log(4);
        },1000);
      },1000);
    },1000);
  },1000);

//某個(gè)輸出可能是遠(yuǎn)程去查數(shù)據(jù) 如果出現(xiàn)錯(cuò)誤可能會(huì)產(chǎn)生死鎖

使用promise

next = n =>
//Promise的構(gòu)造函數(shù)接收一個(gè)參數(shù)尼荆，是函數(shù)左腔，
//并且傳入兩個(gè)參數(shù)：resolve(異步操作執(zhí)行成功后的回調(diào)函數(shù))，reject(異步操作執(zhí)行失敗后的回調(diào)函數(shù))
new Promise(function(resolve, reject) {
  setTimeout(function() {
  resolve(n);
  }, 1000);
});

next(1)
  .then(res => { // 成功
    console.log(res);
      return next(2); //在then方法中調(diào)用的next方法捅儒，一定要用return 液样，否則不會(huì)通過resolve把數(shù)據(jù)往下傳遞
})
  .then(res => {
    console.log(res);
      return next(3);
})
  .then(res => {
    console.log(res);
})
  .catch(() => { //處理失斦窳痢：catch方法的第二個(gè)參數(shù)是失敗的回調(diào)
   console.log("出錯(cuò)啦！");
});

3.12 模塊化

• 如果在a.js文件中定義了5個(gè)方法鞭莽，現(xiàn)在b.js文件中想使用a中的5個(gè)方法坊秸，怎么辦？
• java語言的做法是import引入之后澎怒，就能使用了褒搔。es6的模塊化，就是這個(gè)過程
• 將一個(gè)js文件聲明成一個(gè)模塊導(dǎo)出之后喷面，另一個(gè)js文件才能引入這個(gè)模塊
• 每一個(gè)模塊只加載一次（是單例的）星瘾， 若再去加載同目錄下同文件，直接從內(nèi)存中讀取惧辈。

3.12.1 傳統(tǒng)的模塊化

創(chuàng)建user.js文件

function addUser(name){
  return `保存${name}成功琳状！`;
}
function removeUser(id){
  return `刪除${id}號(hào)用戶！`;
}
// 聲明模塊并導(dǎo)出
// module.exports={
// save:addUser,
// delete:removeUser
// }
// 聲明模塊導(dǎo)出的簡寫
module.exports={
  addUser,
  removeUser
}

test.js

let user = require("./user.js"); //引入user模塊
console.log( user );
let result1 = user.addUser("呂布");
let result2 = user.removeUser(101);
console.log(result1);
console.log(result2);

3.12.2 ES6的模塊化

user.js

let name = "老孫";
let age = 66;
let fn = function(){
return `我是${name}!我今年${age}歲了咬像！`;
}
// 聲明模塊并導(dǎo)出
export{
name,
age,
fn
}

test.js

import {name,age,fn} from "./user.js"
console.log(name);
console.log(age);
console.log(fn);

運(yùn)行test.js算撮，報(bào)錯(cuò)：SyntaxError: Unexpected token { （語法錯(cuò)誤，在標(biāo)記{的位置 ）
原因是node.js并不支持es6的import語法县昂，我們需要將es6轉(zhuǎn)換降級(jí)為es5肮柜！

3.13 babel環(huán)境

babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼倒彰，從而在現(xiàn)有的環(huán)境中執(zhí)行审洞。
這意味著，你可以現(xiàn)在就用 ES6 編寫程序待讳，而不用擔(dān)心現(xiàn)有環(huán)境是否支持

3.13.1 安裝babel客戶端環(huán)境

創(chuàng)建新目錄 lagou-babel芒澜，在終端中打開，運(yùn)行命令：
npm install --global babel-cli

查看版本
babel --version

如果報(bào)錯(cuò)2：（win10系統(tǒng)中）

image.png

image.png

現(xiàn)在，就可以看版本號(hào)了琳彩。

3.13.2 安裝轉(zhuǎn)碼器

1. 創(chuàng)建lagou-babel專屬目錄誊酌，在其中初始化項(xiàng)目
   npm init -y

2. 創(chuàng)建babel配置文件 .babelrc ，并輸入代碼配置：

{
"presets": ["es2015"],
"plugins": []
}

3. 安裝轉(zhuǎn)碼器
   npm install --save-dev babel-preset-es2015

4. 轉(zhuǎn)碼
   創(chuàng)建dist目錄露乏，用來存放轉(zhuǎn)碼后的文件

babel user.js --out-file .\dist\user.js
或
babel user.js -o .\dist\user.js

5. 運(yùn)行轉(zhuǎn)碼后的文件
   node .\dist\test.js

3.14 ES6模塊化的另一種寫法

3.14.1 as的用法

user.js：如果你不想暴露模塊當(dāng)中的變量名字碧浊，可以通過as來進(jìn)行操作:

let name = "老孫";
let age = 66;
let fn = function(){
return `我是${name}!我今年${age}歲了！`;
}
// 聲明模塊并導(dǎo)出
export{
  name as a,
  age as b,
  fn as c
}

test.js

import {a,b,c} from "./user.js";
console.log(a);
console.log(b);
console.log( c() );

也可以接收整個(gè)模塊
test.js

import * as info from "./user.js"; // 通過*來批量接收瘟仿，as來指定接收的名字
console.log(info.a);
console.log(into.b);
console.log( into.c() );

3.14.2 默認(rèn)導(dǎo)出

可以將所有需要導(dǎo)出的變量放入一個(gè)對(duì)象中箱锐，然后通過default export進(jìn)行導(dǎo)出

/*****************導(dǎo)出****************************/
export default{
name:"老孫",
eat(){
return "吃點(diǎn)啥！";
}
}
/*****************導(dǎo)入****************************/
import p from "./person.js";
console.log( p.name, p.eat() );

3.14.3 重命名export和import

如果導(dǎo)入的多個(gè)文件中劳较，變量名字相同驹止，即會(huì)產(chǎn)生命名沖突的問題浩聋，
為了解決該問題，ES6為提供了重命名的方法幢哨，當(dāng)你在導(dǎo)入名稱時(shí)可以這樣做：

/*******************student1.js**************************/
export let name = "我是來自student1.js";
/*******************student2.js************************/
export let name = "我是來自student2.js";
/*******************test_student.js************************/
import {name as name1} from './student1.js';
import {name as name2} from './student2.js';
console.log( name1 ); // 我是來自student1.js
console.log( name2 ); // 我是來自student2.js