事件代理(事件委托)
由于事件会在冒泡阶段向上传播给父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)。比如ul与li
定时器之setTimeout()
- clearTimeout():取消定时器
定时器之setInterval()
- clearInterval():取消定时器
闭包
- 特点:
1、 函数嵌套函数
2、 内层函数可以访问外层函数的变量和参数 - 作用:
1、 防止变量和参数被垃圾回收机制回收
2、 防止变量和参数被外部污染(变量只在闭包内部可访问) - 风险:
滥用可能会造成内存泄漏
防抖(debounce)
对于短时间内连续触发的事件(比如下面提到的滚动事件),防抖的含义就是让某个时间期限内,事件处理函数只执行一次
200ms时间未到的情况下,timer会重置定时。
节流
- 场景:
1、 搜索框input事件,例如要支持输入实时搜索可以使用节流方案(间隔一段时间就必须查询相关内容),或者实现输入间隔大于某个值(如500ms),就当作用户输入完成,然后开始搜索,具体使用哪种方案要看业务需求。
2、 页面resize事件,常见于需要做页面适配时。需要根据最终呈现的页面情况进行dom渲染(这种情况一般是使用防抖,因为只需要判断最后一次的变化情况)
命令行工具
1、 CMD
- 选择盘符:如E:
- 查看盘符及目录下文件与文件夹:dir
- 清空命令行信息:cls
- 进入文件夹或目录:cd 文件夹名
- 返回上一级目录:cd ../或cd ..
- 快速补全目录或文件夹名:tab
- 创建文件夹:mkdir 文件夹名称
- 查看历史输入过的命令:上下按钮
2、 PowerShell
一样
Let命令
es6新增命令,用来声明变量。它的用法类似于var,但是所声明的变量只在let命令所在的代码块内有效。
- let块级作用域(花括号级别的)
- 对比var和let在循环中的应用
每次循环都是新的i,所以能的到想要的效果
- let不存在变量提升
“var”命令会发生变量提升现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一定的逻辑,变量应该在声明语句之后才可以使用。
为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。
- let不允许重复声明
Const命令
- 一旦声明,不可改变。
- 必须初始化,不能留到以后赋值。
- const与let作用域一样,块级作用域
- 不存在变量提升
- 不能重复声明
对象解构赋值
简化上述user.name……的方式,利用解构赋值
注意:对象的属性没有次序,变量必须与属性同名才能取到正确的值。
方法也适用
字符串扩展
- 字符串遍历器接口
for...of循环遍历
- 模板字符串
字符串新增方法
- include()、startsWith()、endsWith()
- repeat()
- padStart()、padEnd()
- trimStart()、trimEnd()
- at()
数组扩展——扩展运算符
- 替代函数的apply方法
- 合并数组
数组扩展——新增方法
- Array.from()
arguments:默认情况下是可以在无参函数中传递参数的,使用arguments读取。
元素集合
类似数组的对象
- Array.of()
对象的扩展
-
属性的简洁表示法
- 属性名表达式
- 对象的扩展运算符
函数的扩展——箭头函数
- 箭头函数的一个作用就是简化回调函数(匿名函数)
注意:对于普通函数来说,内部的this指向函数运行时所在的对象,但是这一点对箭头函数不成立。它没有自己的this对象,内部的this就是定义时上层作用域的this
Set
- size
- add()
- delete()
- has()
- clear()
Promise
Promise是异步编程的一种解决方案。
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的信息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。
有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。
- 基本用法
<script>
var box = document.getElementById("box")
function loadImageAsync(url){
const promise = new Promise(function(resolve,reject){
//异步处理
const image = new Image()//创建Image对象
image.src = url
image.onload = function(){
resolve(image)
}
image.onerror = function(){
reject(new Error('Could not load image at'+ url))
}
})
return promise
}
const promise = loadImageAsync("https://img0.baidu.com/it/u=3233991184,2570354199&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500")
promise.then(function(data){
//成功
box.appendChild(data)
},function(error){
//失败
box.innerHTML = "图片加载失败"
})
</script>
Async函数
使得异步操作更加方便
可以将异步操作变为同步操作,也就是不管前面或中间是否有异步耗时操作,都会按顺序执行。
await还会直接将promise中的而结果提取出来,不用再调用then方法。
Class的基本语法
- ES5中类的写法
- ES6中类的写法
- constructor方法
constructor()
方法是类的默认方法,通过new
命令生成对象实例,自动调用该方法。一个类必须有constructor()
方法,如果没有显式定义,一个空的constructor()
方法会被默认添加。
- 实例对象、实例属性与实例方法
- 静态方法
- 静态属性
Class的继承
Module的语法
历史上,JavaScript一直没有模块(Module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,如Java的import。但JavaScript却没有这方面的支持。
- export命令
- import命令
除了指定加在某个输出值,还可以使用整体加载,即用*
指定一个对象,所有输出值都加载在这个对象上面
- export default命令
一个文件默认只能存在一个export default