一、ECMAScript6 简介
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言
1.ECMAScript 和 JavaScript 的关系
● 1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织ECMA，希望这种语言能够成为国际标准
● ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
● 因此，ECMAScript （宪法）和 JavaScript（律师） 的关系是，前者是后者的规格，后者是前者的一种实现
2.ES6 与 ECMAScript 2015 的关系
● 2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指JavaScript 语言的下一个版本。
● ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017 等等
二、搭建前端环境
1.Node 环境
①什么是Node.js
● 简单的说 Node.js 就是运行在服务端的 JavaScript。
● JavaScript程序，必须要依赖浏览器才能运行！没有浏览器怎么办？OK，nodejs帮你解决
● Node.js是脱离浏览器环境运行的JavaScript程序，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
②Node.js有什么用
● 如果你是前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那Node.js是一个非常好的选择。
● Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。
● 当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。
ps：如果说PHP是世界上最好的语言的话，那么Java是全世界最好的服务器语言，后端程序员做服务器端的高性能还是使用Java！！！
③安装
下载
官网：https://nodejs.org/en/
中文网：http://nodejs.cn/
LTS：长期支持版本
Current：最新版
注意：
node-v14.5.0-x64.msi 最新版本，如果是win7系统的话，可能安装不了
如果是win7系统，安装node-v10.14.2-x64.msi这个版本
查看版本
在dos窗口中执行命令查看版本号
node -v
使用
创建文件夹 es-node
用vscode打开目录，其目录下创建 hello.js
打开命令行终端：Ctrl + Shift + y
输入命令
node hello.js
注意：如果报错，将VS Code以管理员方式运行应该就可以了
④服务器端应用开发
● 创建 node-server.js
const http = require("http"); // node中自带的require引入方法，http也是node中自带的服务对象
http.createServer( function(request,response){
// 发出http请求的头部信息
// http的状态码：200；OK
// 请求的内容类型：text/plain
response.writeHead(200,{"Content-Type": "text/plain"});
//响应的数据 "hello,welcome！" ,此时，并不支持中文（以后一定会解决！）
response.end("hello,welcome!");
} ).listen(8888); // 监听端口
console.log("服务器已启动，请访问 http://127.0.0.1:8888");
● 服务器启动成功后，在浏览器中输入：http://localhost:8888/ 查看webserver成功运行，并输出html页面
● 停止服务：ctrl + c
2.NPM环境
①什么是NPM
NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的，也是Node.js的包管理工具，相当于前端的Maven。如果一个项目需要引用很多第三方的js文件，比如地图，报表等，文件杂而乱，自己去网上下载，到处是广告和病毒。那么，我们就想办法，把这些js文件统一放在一个仓库里，大家谁需要，谁就去仓库中拿过来，方便多了。npm就是这个仓库系统，如果你需要某个js文件，那就去远程仓库中下载，放在本地磁盘中，进而引用到我们的项目中。管理前端工程 so easy！
②NPM工具的安装位置
node的环境在安装的过程中，npm工具就已经安装好了。
Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules
在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明 Node.js已经集成了npm工具
#在命令提示符输入 npm -v 可查看当前npm版本
npm -v
③使用npm管理项目
● 项目初始化
全新创建一个目录，作为项目目录，使用dos命令进入此目录，输入命令
npm init
# 接下来是一堆项目信息等待着你输入，如果使用默认值或你不知道怎么填写，则直接回车即可。
# package name: 你的项目名字叫啥
# version: 版本号
# description: 对项目的描述
# entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
# test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
# git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址
# keywirds： 项目关键字
# author: 作者的名字
# license: 发行项目需要的证书
最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
我们之后也可以根据需要进行修改。
上述初始化一个项目也太麻烦了，要那么多输入和回车。想简单点，一切都按照默认值初始化即可
npm init -y
④修改npm镜像 和 存储地址
NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。
设置镜像和存储地址：
#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#设置npm下载包时保存在本地的地址（建议英文目录）
npm config set prefix "D:\\repo_npm"
#查看npm配置信息
npm config list
⑤npm install命令的使用
npm install jquery
● 使用 npm install 安装依赖包的最新版
● 模块安装的位置：项目目录\node_modules
● 安装会自动在项目目录下添加 package-lock.json(锁定版本的配置文件)文件，这个文件帮助锁定安装包的版本
● 同时package.json(项目配置文件)文件中，依赖包会被添加到dependencies节点下，类似maven中的< dependencies >
● 安装指定版本jquery
注意:如果下载失败可能因为网速原因，可以多尝试几次
三、ES6基本语法
● ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
1.let声明变量
● 与我们的JavaScript中var声明变量有什么区别？
1.作用域不同
{
var a = 0; // var声明的变量是全局变量
let b = 0; // let声明的变量是局部变量
}
console.log(a);
console.log(b); //报错b is not defined：b没有定义
2.声明次数不同
// var可以声明多次
// let只能声明一次
var m = 1;
var m = 2;
let n = 3;
let n = 4; //报错SyntaxError: Identifier 'n' has already been declared（语法错误：n已经声明过了）
console.log(m);
console.log(n);
3.声明与使用顺序不同
// var 声明的变量会全局存储
// let 声明的变量只能在执行后才存储
console.log( x ); //没有报错，输出：undefined
var x = "奥迪";
console.log(y); //报错y is not defined（y没有定义）
let y = "奔驰";
2.const声明常量
const 声明常量,为只读变量
- 一旦声明之后，其值是不允许改变的
- 一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错误，声明常量丢失了初始化）
const PI = 3.1415926535;
PI = 3.14; //Assignment to constant variable.（声明的是常量）
console.log( PI );
3.解构赋值
● 解构赋值是对赋值运算符的扩展
● 它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
● 解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取
● 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
①数组解构
var arr = [1,2,3];
// 传统的js
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);
//es6的解构
var [x,y,z] = arr;
console.log(x,y,z);
②对象解构
var user = {
username : "吕布",
weapon:"方天画戟",
horse:"赤兔马"
};
// 传统的js
let mingzi = user.username;
let wuqi = user.weapon;
let zuoji = user.horse;
console.log("姓名:" + mingzi + ",武器:" + wuqi + ",坐骑:" + zuoji);
//es6的解构
let {username,weapon,horse} = user; // 注意：解构的变量名必须是对象中的属性
console.log("姓名:" + username + ",武器:" + weapon + ",坐骑:" + horse);
4.模板字符串
● 模板字符串相当于加强版的字符串
● 用反引号 `,除了作为普通字符串，还可以用来定义多行字符串
● 还可以在字符串中加入变量和表达式。
① 定义多行字符串
再见了，\n
let str1 = "1/n2";
let str2 = `hello,
welcome
to
china`;
console.log(str1)
console.log(str2);
②字符串插入变量和表达式
再见了，字符串的拼接用 +
let name = `吕布`;
let age = 24;
// 传统的拼接字符串
var info1 = "我叫:"+ name +",我今年"+age+"岁！";
console.log(info1);
// es6的拼接字符串
var info2 = `我叫:${name},我明年${age+1}岁！`;
console.log(info2);
③字符串中调用函数
function test(){
return "吃喝玩乐";
}
let str = `悲催的人生，从${test()}开始`;
console.log( str );
5.声明对象简写
定义对象的时候，可以用变量名作为属性名
let name = `吕布`;
let age = 28;
//传统
let user1 = {
name : name,
age : age
};
console.log(user1);
//es6新语法中的简写
let user2 = {name,age};
console.log(user2);
6.定义方法简写
// 传统
let user1 = {
say : function(){
console.log("大家好！");
}
};
user1.say();
//es6
let user2 = {
say(){
console.log("大家好啊！");
}
};
user2.say();
7.对象拓展运算符
拓展运算符 {…} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象
①拷贝对象(深拷贝)
科幻电影中的一滴血，就可以制作出一个完全一模一样的克隆人
let user1 = {
name:"项羽",
age:34
};
let user2 = {...user1}; // 深拷贝（克隆）
console.log(user1);
console.log(user2);
②合并对象
吞噬合并（两个对象合并成一个对象）
let user1 = {
name:"项羽",
age:34
};
let user2 = {head:"诸葛亮"};
let user = {...user1,...user2};
console.log( user );
8.函数的默认参数
形参处已声明，但不传入实参会怎样？
function test(name , age = 18){
console.log(`我叫${name}，我今年${age}岁`);
}
test("吕布",33); //我叫吕布，我今年33岁
test("貂蝉"); //我叫貂蝉，我今年18岁
test("关羽",null); //我叫关羽，我今年null岁
test("马超",""); //我叫马超，我今年岁
test("张飞",undefined); //我叫张飞，我今年18岁
9.函数的不定参数
定义方法时，不确定有几个参数？
function test( ...arg ){
console.log(`传入了${arg.length}个参数`);
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);
10.箭头函数
箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体
// 传统
var f1 = function(a){
return a*10;
}
console.log( f1(10) );
// es6
var f2 = a=>a*10;
console.log( f2(20) );
// 当箭头函数一个参数时，（）可以省略
// 当箭头函数没有参数或者有多个参数，要用（）括起来
// 当箭头函数的函数体有多行语句，用｛｝括起来，表示代码块
// 当只有一条语句，并且需要返回时，可以省略｛｝，结果会自动返回
var f3 = (a,b) => {
let sum = a+b;
return sum;
}
console.log( f3(3,7) );
// 可以将f3进行简化
var f4 = (a,b) => a + b;
console.log( f3(11,22) );
11.Promise
● 用来解决回调函数的嵌套噩梦 （学习ajax之后能更好的理解）
setTimeout(()=>{
console.log(1);
setTimeout(()=>{
console.log(2);
setTimeout(()=>{
console.log(3);
setTimeout(()=>{
console.log(4);
},1000);
},1000);
},1000);
},1000);
使用promise
next = n =>
//Promise的构造函数接收一个参数，是函数，
//并且传入两个参数：resolve(异步操作执行成功后的回调函数)，reject(异步操作执行失败后的回
调函数)
new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(n);
}, 1000);
});
next(1)
.then(res => { // 成功
console.log(res);
return next(2); //在then方法中调用的next方法，一定要用return ，否则不会通过resolve把数据往下传递
})
.then(res => {
console.log(res);
return next(3);
})
.then(res => {
console.log(res);
})
.catch(() => { //处理失败：catch方法的第二个参数是失败的回调
console.log("出错啦！");
});
12. 模块化
● 如果在a.js文件中定义了5个方法，现在b.js文件中想使用a中的5个方法，怎么办？
● java语言的做法是import引入之后，就能使用了。es6的模块化，就是这个过程
● 将一个js文件声明成一个模块导出之后，另一个js文件才能引入这个模块
● 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取
①传统的模块化
创建user.js文件
function addUser(name){
return `保存${name}成功！`;
}
function removeUser(id){
return `删除${id}号用户！`;
}
// 声明模块并导出
// module.exports={
// save:addUser,
// delete:removeUser
// }
// 声明模块导出的简写
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);
② ES6的模块化
user.js
let name = "James";
let age = 22;
let fn = function(){
return `我是${name}!我今年${age}岁了！`;
}
// 声明模块并导出
export{
name,
age,
fn
}
test.js
import {name,age,fn} from "./user.js"
console.log(name);
console.log(age);
console.log(fn);
运行test.js，报错：SyntaxError: Unexpected token { （语法错误，在标记{的位置 ）
原因是node.js并不支持es6的import语法，我们需要将es6转换降级为es5！
13.babel环境
babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有的环境中执行。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。
①安装babel客户端环境
创建新目录 lagou-babel，在终端中打开，运行命令：
npm install --global babel-cli
查看版本
babel --version
● 报错1：（win7系统中）
‘babel’ 不是内部或外部命令，也不是可运行的程序或批处理文件。（babel命令在当前系统中不被认可）
○ 由于babel是通过npm安装，所以babel会默认安装到 E:\repo_npm
○ 在 D:\repo_npm 这个目录下，进入dos命令，执行 babel --version， 如果是成功的，说明babel已经安装成功
○ 但是在vscode的终端中打不开，那么只可能是两个原因：
环境变量没有配置
系统环境变量中 path中加入 ;D:\repo_npm;
在任意位置进入dos窗口，babel --version可以了，说明环境变量配置成功
vscode关掉，重新以“管理员身份运行 ”
● 报错2：（win10系统中）
windows10默认禁止运行有危险的脚本，修改一下系统策略就好了
开始菜单-> Windows PowerShell (切记要以管理员身份运行)，输入代码
set-ExecutionPolicy RemoteSigned
再选择y
②安装转码器
1.创建lagou-babel专属目录，在其中初始化项目
npm init -y
2.创建babel配置文件 .babelrc ，并输入代码配置：
{
“presets”: [“es2015”],
“plugins”: []
}
3.安装转码器
npm install --save-dev babel-preset-es2015
4.转码
创建dist目录，用来存放转码后的文件
babel user.js --out-file .\dist\user.js
或
babel user.js -o .\dist\user.js
5.运行转码后的文件
node .\dist\test.js
14.ES6模块化的另一种写法
①as的用法
user.js：如果你不想暴露模块当中的变量名字，可以通过as来进行操作:
let name = "James";
let age = 22;
let fn = function(){
return `我是${name}!我今年${age}岁了！`;
}
// 声明模块并导出
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() );
也可以接收整个模块
test.js
import * as info from "./user.js"; // 通过*来批量接收，as来指定接收的名字
console.log(info.a);
console.log(into.b);
console.log( into.c() ); //c是函数需要加()
②默认导出
可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出
/*****************导出****************************/
export default{
name:"James",
eat(){
return "暴扣！";
}
}
/*****************导入****************************/
import p from "./person.js";
console.log( p.name, p.eat() );
③重命名export和import
如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，
为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做
/*******************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