目录
一、介绍
1、概述
2、ECMAScript 和 JavaScript 的关系
3、ES6 与 ECMAScript 2015 的关系
二、变量与常量
1、let声明局部变量
var声明的是全局变量，let声明的是局部变量：
var可以声明多次，let只能声明一次：
2、const声明常量（只读变量）
初始化之后无法改变：
一旦声明必须立即初始化：
三、解构赋值
1、概述
2、数组解构
3、对象解构
四、模板字符串
1、概述
2、基本使用
五、声明对象简写
六、定义方法简写
七、对象拓展运算符
1、概述
2、拷贝对象与合并对象
八、箭头函数
1、概述
2、语法格式
3、代码演示
一、介绍
1、概述
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言；
2、ECMAScript 和 JavaScript 的关系
1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript方言还有 Jscript 和 ActionScript）；
3、ES6 与 ECMAScript 2015 的关系
2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。ES6 的第一个版本，在 2015 年 6 月发布，正式名称是《ECMAScript 2015 标准》（简称 ES2015）。2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1版，因为两者的差异非常小，基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”；
二、变量与常量
参考我之前的笔记：JS中var、let和const的区别详解
1、let声明局部变量
var声明的是全局变量，let声明的是局部变量：
<script>
{
var a = 0;//全局变量，代码块外有效
let b = 1;//局部变量，代码块外无效
}
//在代码块之外进行输出
console.log(a); // 0
console.log(b); // ReferenceError: b is not defined
</script>
var可以声明多次，let只能声明一次：
<script>
var m = 1;
var m = 2;
let n = 3;
let n = 4;
console.log(m); // 2
console.log(n); // Identifier 'n' has already been declared
</script>
2、const声明常量（只读变量）
初始化之后无法改变：
<script>
// 1、声明之后不允许改变
const PI = "3.1415926"
PI = 3 // TypeError: Assignment to constant variable.
</script>
一旦声明必须立即初始化：
<script>
// 2、一但声明必须初始化，否则会报错
const MY_AGE // SyntaxError: Missing initializer in const declaration
</script>
三、解构赋值
1、概述
①解构赋值是对赋值运算符的扩展；
②是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值；
③在代码书写上简洁且易读，语义更加清晰明了；
④也方便了复杂对象中数据字段获取；
2、数组解构
<script>
//1、数组解构
// 传统写法
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6写法
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)
</script>
3、对象解构
<script>
//2、对象解构
let user = {name: 'Helen', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } = user//注意：结构的变量必须是user中的属性
console.log(name, age)
</script>
四、模板字符串
1、概述
模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式；
2、基本使用
①多行字符串；
②字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式；
③字符串中调用函数；
<script>
// 1、多行字符串
let string1 = `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?
// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.
// 3、字符串中调用函数
function f(){
return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2); // Game start,have fun!
</script>
五、声明对象简写
<script>
const age = 12
const name = "Amy"
// 传统
const person1 = {age: age, name: name}
console.log(person1)
// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: "Amy"}
</script>
六、定义方法简写
<script>
// 传统
const person1 = {
sayHi:function(){
console.log("Hi")
}
}
person1.sayHi();//"Hi"
// ES6
const person2 = {
sayHi(){
console.log("Hi")
}
}
person2.sayHi() //"Hi"
</script>
七、对象拓展运算符
1、概述
拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象；
2、拷贝对象与合并对象
<script>
// 1、拷贝对象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2) //{age: 15, name: "Amy"}
</script>
八、箭头函数
1、概述
箭头函数提供了一种更加简洁的函数书写方式；
箭头函数多用于匿名函数的定义；
2、语法格式
参数 => 函数体
3、代码演示
<script>
// 传统
var f1 = function(a){
return a
}
console.log(f1(1))//1
// ES6
var f2 = a => a//很像Java的lamda表达式啊
console.log(f2(1))//1
// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {//抄的Java吧！
let result = a+b
return result
}
console.log(f3(6,2)) // 8
// 前面代码相当于：
var f4 = (a,b) => a+b
</script>
