ES6:
在不改变原理的基础上,纯简化了代码
let: 代替var声明变量:
特点:
1. 不会被声明提前
let会检查在当前作用域内,let之前不允许提前使用该变量
2. 相同作用域内不允许重复let第二个变量
3. 仅在当前块作用域内有效
问题: 块内的变量即使不执行,也会被提前到块外部,污染外部!
解决: 用let代替var,将变量限定在块内
let为js增加了块作用域: if else else if for while do...while switch..case
原理: 匿名函数自调
何时: 只要声明变量,一律用let
用let+for实现闭包结构:
for(let i=0;i<xxx.length;i++){
//(function(i){
循环体
//})(i);
}
参数增强:
1. 默认值:
.indexOf(val, fromi=0){
//fromi=fromi||0;
}
强调: 带默认值的参数必须放结尾
2. rest: 剩余: 代替arguments
arguments的问题:
1. 不是数组,而是类数组对象! 用不了数组API
2. arguments只能获得全部参数! 无法有选择的获得部分参数
3. arguments名字太长!
解决: rest
何时: 今后,只要代替arguments获得不确定个数的参数值时,都用rest
如何: 在定义函数时的参数列表中:
function fun(参数1, 参数2, ...数组名)
兼容:
类数组对象转为数组:
var arr=Array.prototype.slice.call(arguments)
//arguments.slice()//完整复制arguments
强调: rest的参数数组必须放在参数列表结尾
3. spread: 散播: 代替apply 打散数组类型的参数
为什么: apply的主要目的不是打散数组类型参数,而是替换函数中的this。只不过,可以顺便打散数组类型参数
何时: 如果专门只希望打散数组类型参数,不附加其它操作时。
如何: 在调用函数时的参数值()内
函数(...数组)
兼容: 函数.apply(null,数组)
箭头函数: 对一切回调函数和匿名函数的简化
1. 去function换箭头=>
2. 如果只有一个参数,可省略()
3. 如果只有一句话,可省略{}
如果仅有的一句话还是return,则可省略return
特点: 箭头函数内外共用this!
优: 不用bind,也能让内外this统一
问题: 有时,反而希望内外this不通用
比如: btn.onclick=function(){ ... this->btn ... }
()=>{ ... this->window ...} 错误
e=>{ ... e.target->btn ...} 正确
模板字符串: 简化的是大段字符串复杂字符串的拼接
何时: 只要复杂的字符串拼接,都用模板字符串
如何:
整个字符串被` `包裹
在``内支持换行,"",'',而不会发生字符冲突
需要动态拼接表达式的值: ${表达式}
解构: 将一个对象中的属性或数组中的元素,拆解给多个变量
何时: 简化批量赋值!
如何: 3种:
1. 数组解构: 将数组中的元素值,拆解后,赋值给多个变量
/*var*/ [变量1,变量2,...]=[元素1,元素2,...]
执行结果:
变量1=元素1;
变量2=元素2;
匹配: 下标对下标
2. 对象解构: 将对象中的属性值,拆解后,赋值给多个变量
{属性1:变量1,属性2:变量2,...}={ 属性1:值1,属性2:值2,...}
3. 参数结构:
定义函数时:
function fun(...,[参数1,参数2,...])
{属性1:变量1,属性2:变量2,...}
调用函数时:
fun(...,arr)
obj
for of: 简化for循环
for(var elem of arr)
其中of 会依次取出arr中每个元素值,自动保存到变量elem中
缺点: 1. 只能获得元素值,无法获得当前位置i
2. 只能从头到尾逐个完整遍历,不能有选择的遍历
3. 如果数组中是原始类型的值,则elem是按值传递得到的副本。修改副本,无法影响原数组元素
强调: for...of,只能遍历数字下标的数组或类数组对象
for...in,专门遍历自定义下标的关联数组或对象
class: 对OOP
1. class定义:
class 类型名{
constructor(属性参数列表){
this.属性名=属性参数;
}
方法名(){ ... this.属性名 ... }
... ...
}
如何: 3步:
1. 用class封装构造函数和原型对象方法定义
2. 构造函数名提升为class名,构造函数更名为固定的关键词constructor
3. 直接写在class中的方法,默认都保存在原型对象中
2. 继承:
1. setPrototypeOf -> extends father
2. 借用构造函数: super(参数值列表)
不再需要.call(this,...)
强调: class Flyer已经不允许直接调用
3. 访问器属性: 验证, 虚拟/计算属性
class内:
get 访问器属性(){}
set 访问器属性(val){ ... ... }
4. 静态方法:
static 方法名(){}
*****Promise:
什么是: 对传统回调函数的规范写法
为什么: callback hell
何时: 只要定义带回调函数参数的函数时,都要用promise
如何:
1. 定义接收回调函数的主函数
function fun(){
return new Promies(function(callback){
...
callback();
...
})
}
1. 去掉参数中的callback
2. 用return new Promise(function(){
原函数逻辑
})
3. 将callback写在Promise对象的参数函数中的参数列表中
2. 调用主函数执行,并传入下一个要执行的回调函数
fun()//return Promise
.then(callback)
如何:
1. 主函数fun不再接收任何回调函数参数
2. 在主函数调用后用.then(callback),将callback传给fun中的Promies对象的callback参数。
异常处理: .then() .catch(fun)
return new Promise(function(resolve,reject){
//函数体
//如果执行成功
//调用resolve()
//否则
//调用reject()
})
Promise.all
什么是: 等待多个任务都完成后,才开始后续操作
何时: 如果需要等待多个任务时
如何: Promise.all([
支持Promise的函数(),
... ... ,
]).then(function(){ 后续任务 })