ES6总结

Posted 2020-11-25 fujuan

一、let和const

概念：

let和var的区别？

（1）let是块作用域，var是函数作用域

（2）let在同一块作用域内不能重复声明

(3) let存在暂时性死区，也就是说要先声明后使用

(4) let不存在变量声明提升

const:用于声明常量，就是声明后不能赋值修改（注意对象或数组的属性除外）;声明的时候必须赋值，否则报错

重点：理解let在for中的作用

当let声明出现在循环体里时拥有完全不同的行为。 不仅是在循环里引入了一个新的变量环境，而是针对 每次迭代都会创建这样一个新作用域。

 

二、解构赋值

概念：按照一定的模式，将数组或对象中的数据解构出来赋值给变量

1、模式的理解

模式在声明变量的时候出现在赋值运算符左边，表现形式为[]或{}；关键字：声明变量、左边

2、数组解构赋值

var arr = [1,2,3];

let [a,b,c] = arr;

let [x,,y] = arr

let [,,z] = arr

3、对象解构赋值

理解对象解构一定要注意：对象的key也是模式；还要注意对象解构赋值的简写问题

let obj = {name:‘zhangsan‘,age:22}

let {name,age} = obj;

4、函数形参解构赋值

function fn({type=‘GET‘,url=‘‘,data={}}={}){}//理解里面的形参解构赋值形式

5、解构赋值默认值

默认值生效的前提：解构的内容严格等于undefined

 

三、ES6扩展

1、字符串扩展

模板字符串,特征：使用反引号包裹，里面可以回车换行，也可以使用${变量}嵌入变量；解决拼串烦恼

2、对象扩展

对象属性名简写：

let title = ‘标题‘;

let obj = {

title,

sayHi(){

console.log(this.title)

}

}

//template(‘tmp‘,{citys})

 

对象属性名表达式：

let obj = {};

for(let i=0;i<26;i++){

let char = String.fromCharCode(65+i)

obj[char] = [];//对象属性名表达式

}

 

对象的属性名可以允许：字符串，symbol，表达式

obj.name//字符串

obj[‘name‘]//字符串

obj[Symbol()]//Symbol

obj[name]//表达式

 

3、数组扩展

includes方法

4、函数扩展

函数形参默认值（默认值一般是出现在形参列表尾部）

函数剩余参数运算符(...)，剩余参数也出现在形参列表尾部（最后一个）

箭头函数，理解this；箭头函数内部的this，不绑定当前调用者，只与箭头函数定义的作用域有关系，作用域内容的this如果是window则箭头函数this绑定window，其他情况雷同

5、try...catch

异常捕获，把可能出异常的代码写到try的代码块中，把错误处理写到catch代码块中；需要注意的是，不要依赖try...catch捕获错误，应该从程序设计逻辑上和语法上纠正错误.

async..await await只等待resolve的结果reject的结果则不处理，需要使用try...catch

 

四、Symbol类型

symbol是ES6新增的全新数据类型，它的作用是产生一个独一无二的值，常用来给对象属性名和模拟私有;symbol的表现形式不是字符串或加密字符串或数字

 

五、Set和Map

set相比array来说，不接受重复值，常用来过滤array重复数据,let set = new Set([1,1,2,3])

map相比object来说就是key的变化，key允许对象存在，但是object里面的key常常为字符串（symbol）

set和map遍历：forEach,for...of

 

六、promise

理解promise的三个状态：pending，fulfilled，rejected；

调用resolve方法则状态从pending => fulfilled状态，同时then中的onfulfilled回调函数会执行

调用rject方法则状态从pending => rejected状态，同时catch中的onrejected回调函数会执行

平时用的时候promise的定义在请求文件中；promise的调用在渲染文件中；例如：

http.js

function get(){

var p = new Promise((resolve,reject)=>{

settimeout(()=>{

resolve(‘参数‘);

},1000)

})

return p;

}

 

index.html

 

get().then(rst=>{

//TODO

}).catch(err=>{

//TODO

})

 3

理解promise的then链式调用

Promise.all([p1,p2]).then(rst=>{

}).catch(err=>{

})

 

七、async...await

async修饰的函数是一个异步函数：

有效果await必须要出现在async修饰的函数内，否则报错；await一般用来等待promise的异步执行结果，如果等待的是同步函数，则没

async function fn(){

await ajax()

}

 

八、iterator（迭代器）

它的作用：为不同的数据结构提供统一的访问接口（for...of）；为数据结构部署默认接口Symbol.iterator;

function iterator(){

return {

next : function(){

return {value : ‘‘,done : true}

}

}

}

 

九、generator（生成器）

function * fn(){

yield ‘hello‘

yield ‘world‘

return;

}

let i = fn()//得到一个迭代器

i.next();//hello

i.next();//world

i.next();//undefined

next携带参数的情况：因为yield表达式是没有返回值的（严格说是undefined），所以可以在next中携带参数，下次的yield表达式返回值就是这个参数

 

十、class语法

class Animal{

static type = ‘类型‘;//静态变量

title = ‘标题‘//成员变量

constructor(){

this.age = 20;//成员变量

}

sayHi(){

console.log(this.title)

}

static sayHello(){

console.log(this.type)

}

}

Animal.tt = ‘t‘//静态变量