es6 + next 系列

1、let、const 有块级代码作用域

没有预解析，不存在变量提升@H_404_10@ 不能重复定义@H_404_10@ 特殊的for循环，for循环()里面定义的let变量，只在循环体内有效@H_404_10@ const和let差不多，只不过人家是常量，不能改变@H_404_10@ 2、解构赋值@H_404_10@ a). 数据解构赋值:@H_404_10@ let [a=‘abc’]=[] 解构默认值(里面填写undefined和null的区别)@H_404_10@ let [a, b=‘banana’] = [‘aaa’, undefined]; 和 let [a, b=‘banana’] = [‘aaa’, null]@H_404_10@ b). 对象解构赋值:@H_404_10@ let {a,b} = {a:‘apple’, b:‘banana’}@H_404_10@ 一个小坑:@H_404_10@ let a;@H_404_10@ {a} = {a:‘apple’} 需要写成这种 ({a} = {a:‘apple’} )

例子: 函数传参解构

let json={a:'111', b:'222'}
function fn({a, b='Strive'}){
console.log(a,b)
}
fn(json);

封装运动函数: 参数默认值

function doMove({x=0, y=0}={}){
console.log(x, y)
}

doMove({x:0, y:0})
doMove({x:10})

c). 字符串解构赋值:@H_404_10@ const [a,b,c] = ‘wel’; 平时工作用的不多@H_404_10@ 解构赋值的用途:@H_404_10@ 交换两个数的位置@H_404_10@ 函数返回多个值@H_404_10@ 提取 JSON 数据@H_404_10@ import 模块的时候解构@H_404_10@ 封装框架的默认参数@H_404_10@ 3、字符串模板@H_404_10@ ``：字符串@H_404_10@ ${}：引用变量

var message = SaferHTML`<p>${bonk.sender} 向你示好。</p>`;

好处支持换行@H_404_10@ 字符串查找:@H_404_10@ ES5 -> str.indexOf()@H_404_10@ ES6 -> str.includes(xx)@H_404_10@ str.startsWith(xx) 判断字符串开头@H_404_10@ str.endsWith(xx) 判断字符串结尾@H_404_10@ str.repeat(3) 字符串的复制@H_404_10@ 字符串填充（补全）：padStart（头部）和padEnd（尾部）@H_404_10@ 4、函数的变化扩展运算符和rest运算符@H_404_10@ 函数参数的默认值

function fn(a='欢迎',b='mmr'){
console.log(a, b);
}

函数参数变量默认是声明的，不能再用let或者const声明

function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}

配合对象解构，如果不默认赋值会报错

function foo({x, y = 5} = {}) {
console.log(x, y);
}
foo() // undefined 5
reset参数, (剩余参数)， 必须放到最后

例子1: function fn(…args){ //求和，不用arguments了，为何，因为有箭头函数}@H_404_10@ fn(1,2,3,4,5)@H_404_10@ 例子2: 排序

function fn(...numbers){
return numbers.sort();
}
fn(3,2,-10,90,100);

箭头函数:=>@H_404_10@ 注意:@H_404_10@ this问题，就是定义时所在的对象，而不是使用时所在的对象，之前有过开发js的经验，都知道this简直令人丧心病狂@H_404_10@ 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误@H_404_10@ 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。@H_404_10@ //函数传入数组

function fn(a,b,c){
console.log(a,b,c);
}
fn(...[1,2,3])

例子: 复制数组@H_404_10@ 循环@H_404_10@ Array.from(）@H_404_10@ […arr1]@H_404_10@ rest运算符:@H_404_10@ function fn(arg1,…args){}

5、数组

.forEarch((cur,index,arr)=>{})
.map(()=>{return ...}) 
以上可接受两个参数（循环函数，this指向谁）

.filter(()=>{return ...}) 返回为true则留下，过滤
.some(()=>{return ...}) 类似查找，数组里面某个元素符合条件，返回true
.every(()=>{return ...})类似查找，数组里面所有元素符合条件，返回true

.reduce((prev,cur,index,arr)=>{})从左往右，求数组和\阶乘
.reduceRight(()=>{})从右往左

for...of...循环
for(let val of arr)
for(let index of arr.keys())
for(let val of arr.entries())
for(let [key,val] of arr.entries())

ES2017新增运算符：幂@H_404_10@ 老：Math.pow(x*y)@H_404_10@ 新：x**y

扩展运算符@H_404_10@ let a = [1,2,3]@H_404_10@ let b= […a]

Array.from(类数组):把类数组，对象转化成数组

Array.of()把一组值转化为数组@H_404_10@ Array.find(()=>{return …}) 查找，返回第一个符合条件的数组成员，如无返回undefined

Array.findindex(()=>{return …})查找，返回第一个符合条件的数组成员的位置，如无返回-1

Array.fill(填充,开始,结束)填充

ES2016新增

Array.indexOf()
Array.includes(xx)

6、对象简洁语法json

对象简洁语法

Object.is() 比较两个值是否相等

Object.assign(目标对象{},source1,source2) 合并对象,克隆对象（复制）

Object.keys()
Object.values()

Object.entries()

ES2018 对象支持…

7、Promise承诺@H_404_10@ 作用：解决异步问题

传统方式：回调函数，事件

语法：

let promise = new Promise(function(resolve,reject){
//resolve成功
//reject失败
})
promise.then(success,fail)

promise.catch(err=>{//发生错误的别名
    console.log(err)
})

promise.resolve(resolve=>{//成功
    console.log(resolve)
})

promise.reject(reject=>{//失败
    console.log(reject)
})


promise.all(...).then()   all必须确保所有的promise对象都是resolve状态

promise.race(...).then()  race只要有一个成功即可

8、模块化@H_404_10@ export:负责模块化输出@H_404_10@ import:负责模块话引入

export和export default@H_404_10@ 输出单个值，使用export default@H_404_10@ 输出多个值，使用export@H_404_10@ export default与普通的export不要同时使用

模块输出一个函数，首字母应该小写；模块输出一个对象，首字母应该大写

9、类@H_404_10@ 面向对象，类@H_404_10@ 属性@H_404_10@ 方法

函数模拟

人：Person

Person.prototype.showName

ES5之前

function Person(){

}
Person.prototype.showName=function(){}

ES6中的变形

let aaa='haha'
class Person{
  constructor(name,age){//构造函数方法，调用new自动执行
    console.log("asdas",${name},${age})
 }//无逗号
  showName(){
   return '年龄：${this.age}'
 }

[aaa](){//函数名可以为变量，json也可
     return '哈哈哈...' 
}

}
let p1 =new Person('xx',18)
console.log(p1.showName(),p1.haha(),p1[aaa])

注意：@H_404_10@ 1、ES6无提升（预解析），ES5@H_404_10@ 2、this

this矫正方法@H_404_10@ fn.call@H_404_10@ fn.apply@H_404_10@ fn.bind

class里面取值函数（getter）,存值函数（setter）@H_404_10@ 静态方法（static），就是类身上的方法@H_404_10@ 子类extends继承父类方法

super@H_404_10@ 第一种情况，super作为函数调用时，代表父类的构造函数。@H_404_10@ 第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

10、symbol & generator@H_404_10@ symbol:新的原始数据类型，Undefined、Null、Boolean、String、Number、对象（Obiect）、function@H_404_10@ let syml= Symbol(‘aaa’)//不用new，返回是唯一值（做key，定义唯一或者私有的）@H_404_10@ Object.getownPropertySymbols(a)：取一个对象上的Symbol属性名@H_404_10@ Reflect.ownKeys(a)：返回所有类型的属性名@H_404_10@ generator函数

生成器@H_404_10@ 解决异步，深度嵌套，async,可以保存状态@H_404_10@ 语法：

function *show(){
    yield
    //产出
}//加*号区分是generator函数

let g1=show()
g1.next().value.then(res=>{})

11、async 与 await@H_404_10@ async function fn(){//表示异步，这个函数里面有异步任务@H_404_10@ let f1= await readFile(‘data/a.txt’)//表示后面结果要等待@H_404_10@ …@H_404_10@ …@H_404_10@ …@H_404_10@ }@H_404_10@ fn()

async 特点：@H_404_10@ 1、await只能放到async函数中@H_404_10@ 2、更加语义化@H_404_10@ 3、await后面可以是promise对象，可以是数字，字符串，布尔@H_404_10@ 4、async函数返回的是一个promise对象@H_404_10@ 5、只要await语句后面Promise状态变成reject，那么整个async函数会终端执行

如何解决async抛出异常影响后续代码@H_404_10@ try{}catch(e){}@H_404_10@ promise本身的catch

12、set与map@H_404_10@ set

数组结构@H_404_10@ 数组@H_404_10@ json，交叉树

set 新的数据结构

类似数组，值不能重复常用数组去重复

用法：var set = new Set([1, 2, 3, 4, 4]);@H_404_10@ […set]// 返回数组，不加…返回set结构本身

四个操作方法@H_404_10@ add(value)：添加某个值，返回set结构本身@H_404_10@ delete(value)：删除某个值，返回一个布尔值@H_404_10@ has(value)：返回布尔值@H_404_10@ clear()：删除所以成员，无返回值@H_404_10@ size：属性，返回个数@H_404_10@ set内部的元素可以遍历for…of…与forEarch

weakset，new WeakSet({})存储json@H_404_10@ .add();初始通过add添加@H_404_10@ .delete();@H_404_10@ .has();

map:对象保存键值对@H_404_10@ new Map()@H_404_10@ .set(key,value)设置一个值@H_404_10@ .get(key) 获取一个值@H_404_10@ .delete(key)@H_404_10@ .has(key)@H_404_10@ .size@H_404_10@ .clear()@H_404_10@ for…of…方法与 forEach()方法

WeakMap():key只能是对象

总结：@H_404_10@ set里面是数组，不重复，没有key，没有get方法@H_404_10@ map对JSON功能增强，key可以是任意值

13、数字（数值）变化与Math

二进制：(binary)@H_404_10@ let a=0b01@H_404_10@ 八进制：(Octal)@H_404_10@ let a=0o666@H_404_10@ 十六进制 #ccc@H_404_10@ Number()、parseInt()、parseFloat()

Number对象下的方法：@H_404_10@ .isNaN()@H_404_10@ .isFinite() 判读是不是数字@H_404_10@ .isInteger() 判断数字书是不是整数@H_404_10@ .isSafeInteger() 判断数字是不是安全整数@H_404_10@ .MAX_SAFE_INTEGER 最大安全整数@H_404_10@ .MIN_SAFE_INTEGER 最小安全整数@H_404_10@ 安全整数：-（253-1）~(253-1)

Math：@H_404_10@ .abs()绝对值@H_404_10@ .sqrt()平方根@H_404_10@ .random()返回0~1随机数@H_404_10@ .trunc(number)截断@H_404_10@ .sign()判断一个数到底是正数，负数，还是0@H_404_10@ .cbrt()计算一个数的立方根，等同于Math.pow(n,1/3)方法@H_404_10@ .hypot()计算所有参数平方和的平方根

14、ES2018（ES9）新增

15、Proxy的使用(代理）@H_404_10@ 用于修改某些操作的默认行为@H_404_10@ new Proxy(targer,handler)@H_404_10@ targer：用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。@H_404_10@ handler：一个对象，其属性是当执行一个操作时定义代理的行为的函数

**16、什么是回调 **@H_404_10@ 软件模块之间总是存在着一定的接口，从调用方式上，可以把他们分为三类：同步调用、回调和异步调用。

同步调用, 是一种阻塞式调用，调用方要等待对方执行完毕才返回，它是一种单向调用；@H_404_10@ 回调, 是一种双向调用模式，也就是说，被调用方在接口被调用时也会调用对方的接口；@H_404_10@ 异步调用, 是一种类似消息或事件的机制，不过它的调用方向刚好相反，接口的服务在收到某种讯息或发生某种事件时，会主动通知客户端（即调用客户端的接口）。

相关推荐