欢迎光临散文网 会员登陆 & 注册

es6入门到进阶

2022-10-08 11:43 作者:濑柊三七  | 我要投稿

es6=语法+API(方法和函数)

ES与JS的关系:

JS(浏览器端)=ES+DOM+BOM

声明变量let和常量const

let const var的区别

var允许重复声明 let const不允许

Var允许变量提升 let const不允许

console.log(a) var a = 1(运行成功)

console.log(a) let a = 1(运行失败)先声明后使用


var没有块级作用域 let const有

块级作用域:{},for(){} do{}while() while(){} if(){} switch(){}

块级作用域 函数作用域 全局作用域

模板字符串

1 是什么:反引号 ``

2 与一般字符串的区别:

一般字符串要用+拼接 模板字符串用${}

只要最终可以得出一个值的都可以写入${}中

箭头函数

是什么(参数)=>{函数}

箭头函数是匿名函数 需要赋值

const add =(x,y)=>{return x+y};

注意事项:单个参数可以省略圆括号

单行函数体可以省略花括号和return不过要同时省略

const add =(x,y)=>x+y;

单行对象

对象:{键值对}

全局作用域 一般函数作用域

this指向:只有在函数调用的时候this指向才能确定,不调用的时候不知道指向谁

没有具体调用对象的在非严格模式下是window 严格模式下是undefined

this指向和函数在哪调用没关系,只和谁在调用有关

箭头函数的this指向:

箭头函数没有自己的this 通过作用域链向外寻找

不适用箭头函数的场景:

不能作为构造函数 因为箭头函数没有this

需要this指向调用对象的时候

需要使用arguments的时候(箭头函数中没有arguments)

箭头函数的应用

解构赋值是什么:

数组的解构赋值

原理:

1 模式匹配:对象配对象 数组配数组

2 索引值相同的完成赋值

默认值:

const [a,b]=[] 等价于const [a,b]=[undefined,udefined]

const [a=1,b=2]=[] 输出的结果是 1 2

默认值的生效条件:只有当一个数组成员严格等于===undefined时 对应的默认值才会生效

const [a=1,b=2]=[3,0] 输出结果为 3 0

const [a=1,b=2]=[3,null] 输出结果为 3 null

const [a=1,b=2]=[3] 输出结果为 3 2

默认值表达式:

惰性求值:不用就不执行

应用:函数参数的解构赋值

交换变量的值

对象的解构赋值:

原理:模式匹配{}={}

属性名相同的完成赋值


注意事项:

可以取到继承的属性

应用:

其他数据类型的解构赋值

剩余参数:永远是数组

剩余参数代替arguments 获取实际参数 在箭头函数里面也能使用

剩余参数只能放在最后面

剩余参数和展开运算符的根本区别

剩余参数:3,2,1 转换为[3,2,1] 剩余参数永远是数组

输出的结果为[1,2,3]是剩余参数

展开运算符:[3,2,1]转换为3,2,1

输出的结果为1,2,3 是展开运算符

数组展开运算符的应用:

复制数组

合并数组

字符串转为数组

类数组转化为数组

对象展开运算符的基本用法:{...{}}

空对象展开没有任何效果{}

没有属性也就为{}

属性就是其索引值

对象展开运算符的应用:复制对象

用户参数和默认参数

Set是什么

Set是无序的 没有重复值的一系列数据

数组是有序的(通过下标寻找对应的值) 可以有重复值的一系列数据集合

Set实例的方法和属性

使用时实例化

const s = new Set()

方法:add() has()是否有 delete()删除不存在的成员 什么也不会发生和报错 clear()清除

forEach()遍历Set用来访问Set的成员

size()获取Set的长度


Set构造函数的参数

数组:const s = new Set([1,2,1]) 输出结果:Set(2) {1,2}

字符串,arguments NodeList,Set(实例化的Set)相当于复制一个Set

Set的注意事项

1 判断重复的方式

2 什么时候使用Set

数组或字符串去重

不需要通过下标访问只需要遍历时

为了使用Set提供的方法和属性时

Set的应用

1 数组去重

2 字符串去重

存放Dom元素

Map是什么

Map和对象都是键值对的集合

Map需要实例化 添加一个对象的方法是set()

Map与对象的区别是:对象的键是字符串


Map实例的方法和属性

set()添加新成员 键存在后添加的会覆盖

get()获取指定成员 通过键获取 获取不存在的成员 结果为undefined

has()true false

delete()通过键删除

clear()清除

map指的是m 第二个参数document用来改变this的指向

size属性是获取成员的长度

Map构造函数的参数

数组(二维 体现出键和值)

Set和Map等

Set需要体现键和值

Map用来复制Map

Map的注意事项

判断键名是否相同的方式:

遵循严格相等=== 相同即会覆盖

例外是NaN是相等的NaN===NaN


Map的应用

操作Dom元素


Map的应用 P57 - 06:33


Babel编译ES6代码

对象展开运算符的应用:复制对象

用户参数和默认参数

Es6的新增方法


padStart 填充头部 padEnd 填充尾部字符串


数组的新增方法




Promise:解决过多回调函数嵌套问题

是什么:构造函数

1 实例化构造函数生成实例对象

Promise状态:pending(等待)执行resolve,变成fulfilled(resolved),已成功 执行reject,变成rejected,已失败

Promise的状态一旦变化就不会再改变了,只能是未完成转换为成功或者失败

resolve()和reject()函数的参数

实例方法

then()


catch()

finally()

构造函数方法

注意事项和应用



使用Babel编译ES6代码 P109 - 11:53



es6入门到进阶的评论 (共 条)

分享到微博请遵守国家法律