ECMAScript6

---

前言

文章内容输出来源：拉勾教育JAVA就业训练营

---

1.ECMAScript6 简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准.它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

1.1 ECMAScript 和 JavaScript 的关系

• 1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将JavaScript 提交给标准化组织ECMA，希望这种语言能够成为国际标准
• ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
• 因此，ECMAScript （宪法）和 JavaScript（律师） 的关系是，前者是后者的规格，后者是前者的一种实现

1.2 ES6 与 ECMAScript 2015 的关系

• 2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指JavaScript 语言的下一个版本。
• ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017 等等

2.搭建前端环境

2.1 Node 环境

2.1.1 什么是Node.js

• 简单的说 Node.js 就是运行在服务端的 JavaScript。
• JavaScript程序，必须要依赖浏览器才能运行！没有浏览器怎么办？OK，nodejs帮你解决
• Node.js是脱离浏览器环境运行的JavaScript程序，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好
• Node.js 是运行在服务端的 JavaScript

2.2 NPM环境

2.2.1 什么是NPM

• NPM全称Node Package Manager，是Node.js包管理工具是全球最大的模块生态系统，里面所有的模块都是开源免费的，也是Node.js的包管理工具，相当于前端的Maven
• 如果一个项目需要引用很多第三方的js文件，比如地图，报表等，文件杂而乱，自己去网上下载，到处是广告和病毒
• 那么，我们就想办法，把这些js文件统一放在一个仓库里，大家谁需要，谁就去仓库中拿过来，方便多了
• npm就是这个仓库系统，如果你需要某个js文件，那就去远程仓库中下载，放在本地磁盘中，进而引用到我们的项目中

3. ES6基本语法

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

3.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 = "香蕉";

3.2 const声明常量

const 声明常量,为只读变量

1. 一旦声明之后，其值是不允许改变的
2. 一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错误，声明常量丢失了初始化）

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

3.3 解构赋值

• 解构赋值是对赋值运算符的扩展
• 它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
• 解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取
• 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

3.3.1 数组解构

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)

3.3.2 对象解构

ar 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);

3.4 模板字符串

• 模板字符串相当于加强版的字符串
• 用反引号 `,除了作为普通字符串，还可以用来定义多行字符串
• 还可以在字符串中加入变量和表达式。

3.4.1 定义多行字符串

let str = `hello,
你俩在哪呢？
心情不好，出来喝点啊！`;
console.log(str);

3.4.2 字符串插入变量和表达式

let name = `吕布`;
let age = 24;
// 传统的拼接字符串
var info1 = "我叫:"+ name +",我今年"+age+"岁！";
console.log(info1);
// es6的拼接字符串
var info2 = `我叫:${name},我明年${age+1}岁！`;
console.log(info2);

3.4.3 字符串中调用函数

function test(){
  return "吃喝玩乐";
}
let str = `悲催的人生，从${test()}开始`;
console.log( str );

3.5 声明对象简写

let name = `吕布`;
let age = 28;
//传统
let user1 = {
  name : name,
  age : age
};
console.log(user1);
//es6新语法中的简写
let user2 = {name,age};
console.log(user2);

3.6 定义方法简写

// 传统
let user1 = {
  say : function(){
    console.log("大家好！");
 }
};
user1.say();
//es6
let user2 = {
	say(){
	    console.log("大家好啊！");
	 }
};
user2.say();

3.7 对象拓展运算符

拓展运算符 {…} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象

3.7.1 拷贝对象(深拷贝)

let user1 = {
  name:"项羽",
  age:34
};
let user2 = {...user1}; // 深拷贝（克隆）
console.log(user1);
console.log(user2);

3.7.2 合并对象

吞噬合并（两个对象合并成一个对象）

let user1 = {
  name:"项羽",
  age:34
};
let user2 = {head:"诸葛亮"};
let user = {...user1,...user2};
console.log( user );

3.8 函数的默认参数

function test(name , age = 18){
  console.log(`我叫${name}，我今年${age}岁`);
}
test("吕布",33); //我叫吕布，我今年33岁
test("貂蝉"); //我叫貂蝉，我今年18岁
test("关羽",null); //我叫关羽，我今年null岁
test("马超",""); //我叫马超，我今年岁
test("张飞",undefined); //我叫张飞，我今年18岁

3.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) );
}

3.11 模块化

• 如果在a.js文件中定义了5个方法，现在b.js文件中想使用a中的5个方法，怎么办？
• java语言的做法是import引入之后，就能使用了。es6的模块化，就是这个过程
• 将一个js文件声明成一个模块导出之后，另一个js文件才能引入这个模块
• 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

3.12.1 传统的模块化

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);

3.12.2 ES6的模块化

user.js

let name = "老孙";
let age = 66;
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);

3.13 babel环境

babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有的环境中执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持
** 转码**

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

3.14 ES6模块化的另一种写法

3.14.1 as的用法

user.js：如果你不想暴露模块当中的变量名字，可以通过as来进行重命名的操作:

let name = "老孙";
let age = 66;
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());
//或者
mport * as info from "./user.js"; // 通过*来批量接收，用as来指定接收的对象名字
console.log(info.a);
console.log(info.b);
console.log(info.c());

3.14.2 默认导出

可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出

/*****************导出****************************/
export default{
  name:"老孙",
  eat(){
    return "吃点啥！";
 }
}
/*****************导入****************************/
import p from "./person.js";
console.log( p.name, p.eat() );

3.14.3 重命名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