ES6新增语法

一、定义变量

1.1 新增变量关键字

let 变量
const 常量

1.2 let/const 与var 的区别？

1.2.1 预解析

var会进行与解析

let/const没有与解析，必须先声明后使用

1.2.2重复变量名

var定义的变量可以崇明
let/const 不允许定义重名变量

1.2.3 块级作用域

var没有块级作用域，只有函数能限制变量的使用范围
let/const 有块级作用域，任何一个可执行代码的{}都会限制该变量的适用范围

1.3 let和const的区别

1.3.1 变量值可以变

let定义的变量可以修改值
const定义的变量不可以修改值

1.3.2 初始化赋值

let 可以定义的时候不赋值
const定义的时候必须赋值，而且一经赋值不允许修改

二、 ES6的箭头函数

2.1 定义

是ES6语法内退出的一种新的书写函数的方式
是对于函数表达式的简写形式
- 事件源.on事件类型 = function(){ }
- xxx.forEach(function(){ })
- var obj = {fn:function(){ }}

2.2 语法

() => {}
（）书写形参的位置
=> 箭头函数的标志
{}书写代码段位置

2.3 特点

可以省略小括号不写
- 当你的形参只有一个的时候，可以省略小括号
- 没有形参或者两个及以上的时候，必须写小括号
可以省略大括号不写
- 当你的函数体内只有一句话的时候，可以不写的大括号
- 并且会把这一句的结果当做该函数的返回值
箭头函数内没有 arguments
- 箭头函数内没有
- arguments就是形参的合集
箭头函数内没有this
- 箭头函数内的this就是该作用域外部作用域的this
- 箭头函数外面的函数this是什么，箭头函数内的this就是什么
  - 箭头函数自己没有this，使用的是其父级函数的this
箭头函数不能当做构造函数使用
- 不能和 new 关键字连用

三、ES6 模板字符串

ES6模板字符串
- ES6内新增的一种定义字符串的方法
- 使用反引号（``）定义字符串
特点：
- 可以换行书写
- 可以直接解析变量，当你需要解析变量的时候，使用${变量}

四、ES6 函数形参默认值

给函数的形参设置一个默认值，当你没有传递实参的时候，使用默认值
直接只用赋值符号（=）给形参赋值即可

五、 ES6 解构赋值

作用：快速从对象或者数组内获取数据
解构数组
- 作用：快速从数组内获取数据
- 注意：解构数组使用[]
- 解构：var[变量] = 数组
  - 按照索引顺序，依次赋值
- 多维解构
  - 数组怎么写，解构怎么写，数据换成变量
解构对象
- 作用：快速从对象内获取数据
- 注意：解构数组使用{}
- 解构：var{key} = 对象
  - 定义一个变量，获取的是该对象内同名key的数据
- 起一个别名
  - 获取的是对象内的name属性，但是定义的变量名需要叫做n
  - var{key：别名} = 对象 ============== var{name:n} = 对象
- 多维解构
  - 对象怎么写，解构怎么写，数据换成变量

javascript">var arr = [100, 200, 300, 400, 500]//普通写法// var a = arr[0]// var b = arr[1]// var c = arr[2]// var d = arr[3]// var e = arr[4]// console.log(a, b, c, d, e)//结构数组使用// var [a, b, c, d, e] = arr// console.log(a, b, c, d, e)// var arr2 = [[1, 2, 3, 4], 5, 6, 7, [8, 9]]// var [[a, b, c, d], e, f, g, [h, i]] = arr2// console.log(a, b, c, d, e, f, g, h, i)var obj = { name: 'jack', age: 18, gender: '男' }// var name = obj.name// var age = obj.age// var gender = obj.gendervar { name: a, gender: b, age: c } = objconsole.log(a, b, c)

六、ES6 扩展运算符

扩展符：...
- 展开运算符：数组，对象，实参
- 合并运算符：解构，形参
展开功能
- 作用：展开数据合集（数组，对象，Set，Map,......）使用
- 意义：就是把数据最外层的符号（包裹）去掉

javascript">// 1. 展开功能// var arr = [100,200,300,400,[10,20,30]] // console.log(arr)// console.log(...arr)// var arr2 = [...arr,[1,2,3]]// var arr2 = [arr,[1,2,3]]// console.log(arr2) // var obj1 = {name : 'jack' , age : 18 ,gender : '男'}// var obj2 = {...obj1,100:'abc'}// var obj3 = {obj1,100:'abc'}// console.log(obj2)// console.log(obj3)// 2. 合并功能// 解构的时候使用，形参的时候使用// 注意 ：只要使用到合并功能，这个运算符只能书写一个，并且需要写在最后// var arr = [100,200,300,400,500] // var [a,...b] = arr// console.log(a,b)// function fn(a,...b){// 第一个实参赋值给 a ，第二个到最后一个实参，放在数组内 赋值给 b// console.log(a,b)// }

七、对象简写语法

当你的key和value一模一样的时候
- value的是一个变量
- 可以省略一个不写
当你的对象内的key对应的值是一个函数
- 并且，不是箭头函数的时候
- 可以省略function关键字和冒号（：）不写

javascript">var day = 3var houer = 12var minutes = 13var seconds = 22var obj = {day,houer,minutes,seconds}console.log(obj)var obj = {f1 : function() { console.log(this) },f2 : () => { console.log(this) },f3 () { console.log(this) }}obj.f1()   //  this  =>  objobj.f2()   //  this  =>  windowobj.f3()   //  this  =>  obj

八、ES6 的模块化开发（重点）

把我们的完整功能，拆开称为一个一个的独立功能（模块）
- 一个js文件就是一个独立模块
根据业务需求，来进行模块整合
当模块化开发的时候
- 我们需要把多个逻辑书写在多个js文件内
- 此时，每一个文件都是一个独立的文件，都是一个独立的模块作用域（文件作用域）
- 该文件内，只能使用自己文件内的变量，不能使用其他文件内的变量
导出/导入
- 导出：在一个文件内，向外暴露一些内容
- 导入：导入该文件的同时，拿到他向外暴露的内容
浏览器使用ES6模块化语法的要求
- script标签必须要有一个type = "module" 的属性
- 页面必须要在服务器上打开（借助 live server）
导出语法
- 语法1：export default 你要导出的数据
  - 一个文件只能导出一个default数据
- 语法2：export 定义变量= 值
  - 一个文件可以导出多个新定义的变量
- 导入语法
  - 语法1：import 变量 from '文件'
    - 这个语法必须对应导出语法1
  - 语法2：import{导入的内容} from ‘文件’
    - 这个语法必须对应导出语法2

javascript"><script type="module" src="./index.js"></script>export const a = 100
export const b = 200unction isPrime() { console.log('isPrime') }
function randomNum() { console.log('randomNum') }
function randomColor() { console.log('randomColor') }
export default { isPrime: isPrime, randomNum: randomNum, randomColor: randomColor }import { a, b, c, d, e } from './comment.js'
import headerModer from './header.js'