ES6常用新特新

一、let关键字

let
1.作用：
* 与var类似，用于声明一个变量
2.特点
* 在块作用域有效
* 不能重复声明
* 不会预处理，不存在变量提升
3.应用
* 循环遍历加监听
* 使用let取代var是趋势

二、const关键字

1.作用：
* 定义一个常量
2.特点：
* 不能修改
* 其他特点同let
3.应用：
* 保存不用改变的数据

三、变量的解构赋值

1.理解
*从对象或数组中提取数据，并赋值给多个变量（多个）
2.对象的解构赋值
let{n,a} = {n:'tom',a:12}
3.数组的解构赋值
let[a,b] = [1,'atguigu']
4.用途
* 给多个形参赋值

/*let username = obj.username
let age = obj.age*/

let {username,age} = obj;

四、模板字符串

1.模板字符串：简化字符串的拼接
* 模板字符串必须用``包含
* 变化的部分使用${xxx}定义

<!--let str = '我的名字叫：' + obj.username + '，我今年的年龄是'+ obj.age-->

str = `我的名字叫${obj.username}，我的今年的年龄是${obj.age}`

五、简化的对象写法

简化的对象写法
* 省略同名的属性值
* 省略方法的function

* 例如：
let x = 1
let y = 2
let point = {
//x:x,
//y:y
x,
y,

<!--set:function(x){-->
<!--this.x = x-->
<!--}-->

setX(x){this.x = x}

}

六、箭头函数

作用：定义匿名函数
* 基本语法：
* 没有参数：() = > console.log('xxxx')
* 一个参数：i = > i+2
* 大于一个参数：(i,j) = > i+j
* 函数体不用大括号，默认返回结果
* 函数体如果由多个语句，需要用{}包围，若需要返回的内容，需要手动返回
* 使用场景：多用来定义回调函数

* 箭头函数的特点：
1.简洁
2.箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
3.扩展理解：箭头函数的this看外层的是否有函数
如果有，外层函数的this就是内部箭头函数的this
如果没有，则this是window

七、三点运算符

* 用途
1.rest（可变）参数
* 用来取代arguments但比arguments灵活。最后部分只能是形参参数
function fun(...values){
console.log(arguments);
arguments.forEach(function (item, index) {
console.log(item,index);
}); //arguments 函数中用来放函数参数的伪数组，不能遍历，用三点运算符可以

console.log(value);
value.forEach(function (item,index) {
console.log(item,index)
})
}
2.扩展运算符
let arr1 = [1,3,5];
let arr2 = [2,...arr1,6]
arr2.push(...arr1);

八、形参默认值

* 形参的默认值-----当不传入参数的时候默认使用形参里的默认值
function Point (x = 1,y = 2){
this.x = x
this.y = y
}

九、promise\symbol\Iterator遍历器\Generator\async函数

1.理解：
* Promise对象：代表了未来某个时刻将要发生的事件（通常是一个异步操作）
* 有了promise对象，可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数（俗称“回调地狱”）
* ES6的Promise是一个构造函数，用来生成Promise实例
2.使用Promise基本步骤（2步）
* 创建Promise对象
let promise = new Promise(resolve,reject) => {
//初始化Promise状态为pending
//执行异步操作
if(异步操作成功){
resolve(value);//该参数自动修改Promise的值为fullfilled
}else{
resolve(errMsg);//该参数自动修改Promise的值为rejected
}
}
* 调用promise的then()
promise.then(function(
result => console.log(result)
errorMsg => alert(errorMsg)
))
3.promise对象的3个状态
* pending：初始化对象
* fullfilled：成功状态
* rejected：失败状态
4.应用：
* 使用promise实现超时处理
* 使用promise封装ajax请求
let request = new XMLHttpRequest()
request.onreadystatechange = function(){

}
request.responseType = 'json'
request.open('GET',url)
request.sent()

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

Symbol：
概念：ES6中添加了一种原始数据类型symbol（已有的原始数据类型：String，Number，boolean，null，undefined，对象）
特点：
1.Symbol属性对应的值是唯一的，解决命名冲突问题
2.Symbol的值不能与其他数据进行计算，包括同字符串拼接
3.for in，for of遍历时不会遍历symbol属性
使用：
1.调用Symbol函数得到symbol值
let symbol = Symbol();
let obj = {};
obj[symbol] = 'hello';
2.传参标识
let symbol = Symbol('one');
let symbol2 = Symbol('two')
console.log(symbol); //Symbol('one')
console.log(symbol2); //Symbol('two')
3.内置Symbol值
* 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法
- Symbol.iterator
* 对象的Symbol.iterator属性，指向该对象的默认遍历器方法（后边讲）

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

概念：iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
作用：
1.为各种数据结构，提供一个统一的，简便的访问接口
2.使得数据结构的成员能够按照某种次序排列
3.ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费
工作原理：
- 创建一个指针对象（遍历器对象），提供一个统一的，简便的访问接口
- 第一次调用next方法，指针自动指向数据结构的第一个成员
- 接下来不断调用next方法，指针会一直向后移动，直到指向最后一个成员
- 每调用next方法返回的是一个包含value和done的对象，{value：当前成员的值，done：布尔值}
* value表示当前成员的值，done对应的布尔值表示当前的数据是否遍历结束
* 当遍历结束的时候放回的value值是undefined，done值为false
原生具备iterator接口的数据（可以for of遍历）
扩展理解：
1.当数据结构上部署了Symbol.iterator接口，该数据就是可以用for of遍历
2.当使用for of去遍历目标数据的时候，该数据会自动去找Symbol.iterator属性
//Symbol.iterator属性指向对象的默认遍历器方法。（承接上一章节：iterator接口）
1.Array
2.arguments
3.set容器
4.map容器
5.String
。。。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

Generator函数
概念：
1.ES6提供的解决异步编程的方案之一
2.Generator函数是一个状态机，内部封装了不同状态的数据
3.用来生成遍历器对象
4.可以暂停函数（惰性求值），yield可暂停，next方法可启动。每次返回的是yield后的表达式结果
特点：
1.function与函数名之间有一个星号
2.内部用yield表达式来定义不同的状态
例如：
1.function * generatorExample(){
let result = yield 'hello' //状态值为hello
yield 'generator' //状态值为generator
}
3.generator函数返回的是指针对象（接11章节里iterator），而不会执行函数内部逻辑
4.调用next方法，函数内部逻辑开始执行，遇到yield表达式停止，返回{value:yield 后的表达式结果/undefined,done}
5.再次调用next方法会从上一次停止时的yield开始，直到最后
6.yield语句返回结果通常为undefined，当调用next方法时，传参内容会作为启动时yield语句作为返回值

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

async函数
概念：真正意义上去解决异步回调问题，同步流程表达异步操作
本质：Generator的语法糖
语法：
async function foo(){
await 异步操作
await 异步操作
}

特点：1.不需要像Gennerator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
2.返回总是promise对象，可以用then方法进行下一步操作
3.async取代Generator函数的星号*，await取代Generator的yield
4.语意上更加明确，使用简单，经验证，暂时没有不良效果