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>

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,651评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,468评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,931评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,218评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,234评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,198评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,084评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,926评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,341评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,430评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,036评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2 354

推荐阅读更多精彩内容

  • JavaScript,通常缩写为 JS,是一种解释执行的编程语言。它是现在最流行的脚本语言之一。 JavaScri...
    神齐阅读 4,868评论 1 32
  • 原型链的理解 看一个实例 原型和原型链首先要知道几个概念:在js里,继承机制是原型继承。继承的起点是 对象的原型(...
    __bomb__阅读 138评论 0 0
  • 前言: 2020年是多灾多难的一年,疫情持续至今,到目前,全世界的经济都受到不同程序的影响,各大公司裁员,在这样一...
    西巴撸阅读 682评论 0 10
  • 1. 基础类型和类型检测 简单类型:Undefined, Null, boolean, number, strin...
    anearseeyou阅读 273评论 0 0
  • 1、js数据类型 基本数据类型:Number、String、Boolean、Null、Undefined、Symb...
    前端小仙女阅读 543评论 0 0