一、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}定义
str = `我的名字叫${obj.username},我的今年的年龄是${obj.age}`
五、简化的对象写法
简化的对象写法
* 省略同名的属性值
* 省略方法的function
* 例如:
let x = 1
let y = 2
let point = {
//x:x,
//y:y
x,
y,
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.语意上更加明确,使用简单,经验证,暂时没有不良效果