第十九章 ES6语法
一、ESC6语法
含义：是在2015年更新的ECMAscript标准
二、ESC6中新增语法
1、定义变量
2、模板字符串：是es6中定义字符串的一种方式，有字符串该有的属性和方法
3、解构赋值
4、展开合并运算符
5、对象的简写
6、函数的默认值
7、模块化开发
三、定义变量
1、之前我们在定义变量的时候使用的关键字==var，在es6中出现了两个关键字：let 、 const
2、let：我们把使用let定义的变量称之为变量
3、const：我们把const定义的变量称之为常量
4、var 和let /const 的区别
=>预解析。var定义的变量有预解析，let/const定义的变量没有预解析；
=>变量的重复定义。var 可以定义多个同名变量，let/const不能同时定义多个同名变量；
=>块级作用域。var 定义的变量不能形成块级作用域，let/const可以形成块级作用域；
延伸：块级作用域: 任何一个可以书写代码段的 {} 都会限制变量的使用范围
5、let 和const 的区别
=>语法不同。let定义的变量称之为变量,const定义的变量称之为常量;
=>声明时赋值。let在定义的时候可以不赋值，但是const必须要在声明的时候赋值；
=>值的修改。let定义的变量可以修改值，const定义的变量不能修改值,但是用const声明的对象，对象里面的属性的值是可以修改的 ；
四、函数的默认值
含义：就是在我们es6中可以给函数的参数定义默认值，如果在函数调用的时候传递了参数，就使用传递进来的参数，如果在函数调用的时候没有传递参数，就使用我们的默认值代替；
function fn(a, b = 100) {
console.log(a, b)
}
fn()
fn(10)
fn(10, 20)五、对象的简写
1、含义：在es6中，对象内的键值对可以简写，前提是：
=>如果对象中的键和值一样，并且值是一个变量，这时可以只写一个
=>如果在对象中值是一个函数，并且不是箭头函数，这时function 和 ：（冒号）可以省略不写
// 第一种情况 键和值一样，值是一个变量
// 假设这个是计算得出的
var day = 12,hours = 13,minutes = 25
// 定义了一个对象
let obj = {
day:day,
hours:hours,
minutes:minutes
}
// 可简写为
let obj2 = {
day,
hours,
minutes
}
console.log(obj2.day); //12
// 第二种 函数
const obj3 = {
fn1:function(){console.log(111);},
fn2:function(){console.log(222);}
}
// 可简写为
const obj4 = {
fn1(){console.log(111);},
fn2(){console.log(222);}
}2、箭头函数
（1）含义：箭头函数也是函数，是es6中定义的一种函数，也是一个匿名函数；
注意：凡事可以使用匿名函数的地方，都可以使用匿名函数
（2）语法：（形参） => {代码段}
（3）使用
+赋值式
+定时器中的函数
+方法中的函数
+事件处理程序（函数）
// 赋值式
let fun = () =>{
console.log(666);
}
fun() //666
// 定时器中的函数
setTimeout(() => {
console.log(111);
},1000)//111
// 方法中的函数
const arr = [1,2,3]
arr.forEach((item) => {
console.log(item);
})//1 2 3
// 时间处理中的函数
btns.onclick = () => {
console.log(222);
}//222（4）箭头函数的特点
- 在箭头函数中，如果形参只有一个，（）可以省略不写
- 没有参数或者是参数多余一个，（）必须要写
- 如果大括号中，只有一句话，大括号可以省略不写，会自动返回结果
const arr = [3,1,2]
arr.sort((a,b) => a-b) //[1,2,3]（5）箭头函数的特点2
- 在箭头函数中没有arguments
- 箭头函数中没有this,箭头函数中的this指向上下文，即指向箭头函数外面，就是外面的this指向哪里，箭头函数就指向哪里
六、解构赋值
1、含义：是es6的语法，就是允许我们按照一个方式从对象或者数组中获取值
2、分类：解构对象和解构数组
3、解构对象
（1）普通解构
语法：let{键名1，键名2，...} = 你要解构的对象
let{键名1：别名，键名2：别名，...} = 你要解构的对象
注意：如果起了别名，键名就不能使用了，只能使用别名
// 解构数组
const arr = [100, 200, 300, 400, 500]
//需求: 单独定义五个变量获取五个数据
const [a, b, c, d, e] = arr
console.log(a, b, c, d, e) // 100 200 300 400 500（2）解构多维对象
=>原则：就是之前的对象如何书写，我们在解构的时候把值去掉就可以了
->如果想要起别名，我们就把之前的值改为别名
const obj = {
name:'Tom',
age:18,
love:{
eat:{
fruit:'苹果',
food:'面包'
},
drink:{
water:'白开水'
}
}
}
// 解构普通对象
//第一种语法
let {name,age} = obj
console.log(name);//Tom
//第二种语法
let {name:a,age:b} = obj
console.log(a);//Tom
//解构多维对象
// 解构的方式获取值
let{
name,
age,
love:{
eat:{
fruit,
food:b
},
drink:{
water
}
}
} = obj
console.log(water);//白开水
console.log(b);//面包4、解构数组
（1）普通解构
=>语法： let[变量1，变量2...] = 要解构的数组
（2）多维解构
=>原则：之前的数组如何书写，解构的时候就如何书写，把之前的值改成变量
let arr = [1,2,3]
let[a,b,c] = arr
console.log(b); //2
console.log(a,b);//1,2
//多维数组
let arr1 = [1,2,[3,[4]]]
// 获取到4
let [a,b,[c,[d]]] = arr1
console.log(d);//4七、展开合并运算符
1、含义：是在我们es6中的一个新的符号
2、书写：... 这个符号就是三个点
3、...有两层含义：展开和合并
4、展开
=>展开对象：就是在一个对象中展开另一个对象，就是把两个对象合并成一个对象。
注意：由于在我们对象中键名不能重复的特点，如果展开的对象中有与上一个对象中一样的键名，后面的会把前面的进行覆盖；
=>展开数组：就是把一个数组在另一个数组中展开，两个合并了
=>就是在函数调用传递实参
function fun(){
console.log(arguments);// 0:1 1:2 2:3
}
let arr = [1,2,3]
fun(...arr)5、合并
=>当这个符号书写在函数的形参位置的时候, 叫做合并运算
=>从当前形参位置开始获取实参, 直到末尾
注意: 合并运算符一定要写在最后一位，否则会报错
=>就是在数组解构的时候
八、es6的模块化开发
1、模块：就是一个单独的JS文件就是一个模块
=>特点：每一个JS文件中的内容（变量、函数..）都只能在当前的模块中被使用
2、为什么需要模块化开发？
在网页中有的内容是一样，就不需要重复的编写，我们只需要书写一次 ，哪里需要引入到那个文件中使用就可以了
3、模块开发的核心：导入和导出
=>导入：你需要那个文件（.js），就需要导入那个文件
->语法：import 变量 from '你要导入的文件路径'
=>导出：你要让别的文件使用你里面的内容，就需要导出
->语法： exports default你要导出的内容
+特点：只能导出一个，多个导出后面的会覆盖前面的
->语法： exports default{你要导出的内容}
4、使用
=>es6的模块化开发不能直接在本地打开，需要在服务端打开，liv server
=>同时需要在script标签上书写一个属性 type = 'module'
九、Map和Set数据结构
1、es6新增了两种数据结构：Map和Set。共同点：不接受重复数据；
2、Set数据结构
（1）是一个 类似于 数组的数据结构，按照索引排列的数据结构
（2）语法：var s = new Set([ 数据1, 数据2, 数据3, ... ])
（3）Set的属性和方法
=>size 属性
- 语法: 数据结构.size
- 返回值：该数据结构内有多少个数据
=>add() 方法
- 语法: 数据结构.add(数据)
- 作用: 向该数据结构内添加数据
- 返回值：就是添加后的数据结构
=>has() 方法
- 语法: 数据结构.has(数据)
- 作用：检测这个数据结构中有没有这个数据的
- 返回值: 一个布尔值
- true, 表示该数据结构内有该数据
- false, 表示该数据结构内没有该数据
=>delete() 方法
- 语法: 数据结构.delete(数据)
- 作用: 删除该数据结构内的某一个数据
=>clear() 方法
- 语法: 数据结构.clear()
- 作用: 清除该数据结构内所有数据
=>forEach() 方法
- 语法: 数据结构.forEach(function (value, key, origin) {})
- 作用：用来循环遍历数据结构的
// 创建 Set 数据结构
var s = new Set([ 100, 200, 300 ])
console.log(s)
// Set 的属性和方法
// 1. size
console.log(s.size)
// 2. add()
var o = { name: 'Jack' }
s.add({ name: 'Jack' })
s.add(o)
console.log(s)
// 3. has()
console.log(s.has(200))
console.log(s.has(o))
// 4. delete()
s.delete(300)
s.delete(o)
console.log(s)
// 5. clear()
s.clear()
console.log(s)
// 6. forEach()
s.forEach(function (item, value, origin) {
console.log('我执行了', item, value, origin)
})（4）Map数据结构
=>是一个类似于对象的数据结构, 但是他的 key 可以是任何数据类型
=>可以被叫做一个 值=值 的数据结构
=>语法：var m = new Map([ [ key, value ], [ key, value ] ])
（5）Map的属性和方法
=>set() 方法
- 语法: 数据结构.set(key, value)
- 作用: 向该数据结构内添加数据
=>get() 方法
- 语法: 数据结构.get(key)
- 返回值: 数据结构内该 key 对应的 value
注意：Map()方法没有add（），多了set()、get()两个方法，其余的和其他的一样；