JavaScript简记续

事件代理（事件委托）

由于事件会在冒泡阶段向上传播给父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（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方法

合并数组

image.png

数组扩展——新增方法

Array.from()
arguments：默认情况下是可以在无参函数中传递参数的，使用arguments读取。

元素集合

类似数组的对象

Array.of()

对象的扩展

属性的简洁表示法

属性名表达式

对象的扩展运算符

函数的扩展——箭头函数

箭头函数的一个作用就是简化回调函数（匿名函数）

注意：对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域的this

Set

size

add()

delete()

has()

image.png

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>