js高级 面向对象+ES6
文章平均质量分 66
真爱计划
需要源码的(https://github.com/Chicksqace),B站搜索(真爱计划)感谢三连支持!!!
展开
-
ES6模块化与异步编程高级用法: API 接口案例
第三方包 express 和 mysql2。的 API 接口服务。在 package.json 中声明。运行 npm install。① 启用 ES6 模块化支持。① 搭建项目的基本结构。② 创建基本的服务器。② 安装第三方依赖包。原创 2022-12-31 16:07:48 · 141 阅读 · 0 评论 -
ES6模块化与异步编程高级用法: 宏任务和微任务
④ 小云告诉柜员:想要买理财产品、再办个信用卡、最后再兑换点马年纪念币?Promise.then、.catch 和 .finally。如果有,则执行完所有微任务之后,再继续执行下一个宏任务。② 假设当前银行网点只有一个柜员,小云在办理存款业务时,同步--> 宏任务(微任务) --> 宏任务。⑤ 小云离开柜台后,柜员开始为小腾办理业务。正确的输出顺序是:156234789。③ 小云办完存款业务后,柜员询问他。执行第 6 行、第 12 行代码。每一个宏任务执行完之后,都会检查。是否存在待执行的微任务。原创 2022-12-31 10:41:10 · 174 阅读 · 0 评论 -
ES6模块化与异步编程高级用法: EventLoop
JavaScript 主线程从“任务队列”中读取异步 任务的回调函数,放到执行栈中依次执行。因为c的延迟器虽然在b的读文件之后,但是他的定时是0秒肯定先比读文件先完成。它们的回调函数会被加入到任务队列中,等待主线程空闲时再执行。这 个过程是循环不断的,所以整个的这种运行机 制又称为。被清空后,会读取任务队列中的回调函数,次序执行。只有前一个任务执行完毕,才能执行后一个任务。,则后续的任务就不得不一直等待,从而导致。,指的是在主线程上排队执行的那些任务。,会被 加入到任务队列中等待执行。原创 2022-12-31 10:22:02 · 131 阅读 · 0 评论 -
ES6模块化与异步编程高级用法:async/await
① 如果在 function 中使用了 await,则 function。在 async/await 出 现之前,开发者只能通过。(ECMAScript 2017)引入的新语法,用来。的方式处理 Promise 异步操作。如果这个方法用到了await那就要用async修饰。第一个 await 之前的代码会同步执行。: 代码冗余、阅读性差、 不易理解。,await 之后的代码会异步执行。② 在 async 方法中,: 解决了回调地狱的问题。链式 .then().then 链式调用的。.then 链式调用的。原创 2022-12-30 21:40:31 · 106 阅读 · 0 评论 -
ES6模块化与异步编程高级用法:Promise
因 此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数。在 Promise 的链式操作中如果发生了错误,可以使用 Promise.prototype.注意:第 2行代码中的 new Promise() 只是创建了一个形式上的异步操作。调用 .then() 方法时,成功的回调函数是必选的、失败的回调函数是可选的。Promise.all() 方法会发起并行的 Promise 异步操作,等。Promise.race() 方法会发起并行的 Promise 异步操作,原创 2022-12-30 17:32:16 · 117 阅读 · 0 评论 -
ES6模块化与异步编程高级用法:ES6 模块化
通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学 习成本,开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。,并不需要得到模块中向外共享的成员。在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了。但是,这些由社区提出的模块化标准,还是存在一定的。大家都遵守同样的模块化规范写代码,大一统的 ES6 模块化规范诞生了。的 Javascript 模块化。的 Javascript 模块化。太多的模块化规范给开发者增加了。只想单纯地执行某个模块中的代码。原创 2022-12-30 13:42:00 · 113 阅读 · 0 评论 -
ES6:ES6 的内置对象扩展
Array 的扩展方法扩展运算符(展开语法)扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。为什么没有逗号,这个是因为被当做console.log的分割参数 扩展运算符可以应用于合并数组。 将类数组或可遍历对象转换为真正的数组 伪数组,无法使用数组下的方法,可以使用扩展运算符变成真正的数组构造函数方法:Array.from()将类数组或可遍历对象转换为真正的数组方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。 第原创 2022-12-05 19:35:56 · 219 阅读 · 0 评论 -
ES6:ES6 的新增语法
ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。年份版本2015年6月ES20152016年6月ES20162017年6月ES20172018年6月ES2018……ES6 实际上是一个泛指,泛指 ES2015 及后续的版本。为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。 变量提升特性增加了程序运行时的不可预测性语法过于松散,实现相同的功能,不同的人可能会写出不同的代码E原创 2022-12-04 20:48:44 · 369 阅读 · 0 评论 -
JavaScript正则表达式:正则表达式中的替换
replace 替换replace() 方法可以实现替换字符串操作,用来替换的参数可以是一个字符串或是一个正则表达式。1.第一个参数: 被替换的字符串 或者 正则表达式2.第二个参数: 替换为的字符串3.返回值是一个替换完毕的新字符串正则表达式参数switch(也称为修饰符) 按照什么样的模式来匹配. 有三种值:g:全局匹配i:忽略大小写gi:全局匹配 + 忽略大小写案例:敏感词过滤原创 2022-12-03 22:24:29 · 2801 阅读 · 0 评论 -
JavaScript正则表达式:正则表达式中的特殊字符
正则表达式的组成一个正则表达式可以由简单的字符构成,比如 /abc/,也可以是简单和特殊字符的组合,比如 /ab*c/ 。其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号,如 ^ 、$ 、+ 等。特殊字符非常多,可以参考: MDN:正则表达式 - JavaScript | MDN (mozilla.org)jQuery 手册:正则表达式部分正则测试工具: 在线正则表达式测试这里我们把元字符划分几类学习 。边界符正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符。 如果 ^原创 2022-12-03 18:19:48 · 6185 阅读 · 0 评论 -
JavaScript正则表达式:正则表达式在 JavaScript 中的使用
文本是否符合我们写的正则表达式规范。中间放表达式就是正则字面量。,其参数是测试字符串。中,可以通过两种方式。字符串是否符合该规则。原创 2022-12-02 14:17:46 · 155 阅读 · 0 评论 -
JavaScript正则表达式:正则表达式概述
比如: ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$但是要求会使用正则表达式并且根据实际情况修改正则表达式。可以迅速地用极简单的方式达到字符串的复杂控制。用于匹配字符串中字符组合的模式。验证表单:用户名表单只能输入英文字母。对于刚接触的人来说,比较晦涩难懂。一般都是直接复制写好的正则表达式。字符串中获取我们想要的特定部分。灵活性、逻辑性和功能性非常的强。此外,正则表达式还常用于。中,正则表达式也是对象。正则表达式完成表单验证。原创 2022-12-02 14:10:52 · 87 阅读 · 0 评论 -
JavaScript函数进阶:递归及深浅拷贝
浅拷贝,如果拷贝更深层次的只会拷贝它的地址值,当地址值指向的对象发生改变,其他指向的也会改变。语法糖实现浅拷贝 Object.assign(要拷贝的目标,拷贝的对象)由于递归很容易发生“栈溢出”错误(stack overflow),所以。一个函数在内部可以调用其本身。递归函数的作用和循环效果一样。更深层次对象级别的只拷贝引用。深拷贝我理解为双方互不干扰。2. 求斐波那契数列。每一级别的数据都会拷贝。原创 2022-12-01 20:56:42 · 100 阅读 · 0 评论 -
JavaScript函数进阶:闭包
因为立即执行函数,所以start和total都是闭包,可以在函数内部传,因此当console.log(car.yd(true));时原先的total还是23,它是在原有的基础上+10;(一个作用域可以访问另外一个函数的局部变量。1. 点击小li打印出当前小li的索引号。访问另外一个函数内部的局部变量。当我们重新刷新页面,会进入断点调试。2. 3秒之后打印小li的内容。函数外部不可以使用局部变量。当函数执行完毕,本作用域内。参数 ,这就表明产生了闭包。两种:全局变量和局部变量。原创 2022-11-27 17:54:00 · 463 阅读 · 0 评论 -
JavaScript函数进阶:高阶函数
也是一种数据类型,同样可以作为参数,传递给另外一个参数使用。最典型的就是作为回调函数。同理函数也可以作为返回值传递回来。是对其他函数进行操作的函数。原创 2022-11-28 14:03:34 · 130 阅读 · 0 评论 -
JavaScript函数进阶:严格模式
更多严格模式要求参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_严格模式就是严格执行的方式,像以前class是可以作为变量,变量没有声明var在普通模式都是可以执行的,但是用了‘use strict’严格模式,那就是不合法的。在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。消除代码运行的一些不安全之处,保证代码运行的安全。接轨,不允许在非函数的代码块内声明函数。以上版本的浏览器中才会被支持,原创 2022-11-27 10:13:58 · 130 阅读 · 0 评论 -
JavaScript函数进阶:this
JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题,常用的。3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind。简单理解为调用函数的方式,但是它可以改变函数。简单理解为调用函数的方式,但是它可以改变函数。指向,并且不想调用这个函数的时候,可以使用。返回值就是函数的返回值,因为它就是调用。,同时想调用这个函数的时候,可以使用。返回值就是函数的返回值,因为它就是调用。,是当我们调用函数的时候确定的。调用方式的不同决定了。原创 2022-11-26 15:54:55 · 147 阅读 · 0 评论 -
JavaScript函数进阶:函数的定义和调用
这个函数是定时器自动1秒钟调用一次。// 点击了按钮就可以调用这个函数。构造函数和普通函数肯定不一样了,他们的主要区别是构造函数首字母大写,还有就是new关键字调用。console.log('人生的巅峰');console.log('人生的巅峰');第三种方式执行效率低,也不方便书写,因此较少使用。console.log('人生的巅峰');所有函数都是 Function。里面参数都必须是字符串格式。立即执行函数是自动调用。原创 2022-11-22 16:14:09 · 225 阅读 · 0 评论 -
JavaScript构造函数和原型:ES5 中的新增方法
2. some 也是查找满足条件的元素是否存在 返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环。1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来。filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。在some 里面 遇到 return true 就是终止遍历 迭代效率更高。some() 方法用于检测数组中的元素是否满足指定。方法并不影响原字符串本身,它返回的是一个新的字符串。需定义或修改的属性的名字。原创 2022-11-22 16:13:28 · 338 阅读 · 0 评论 -
JavaScript构造函数和原型:继承
本质:子类原型对象等于是实例化父类,因为父类实例化之后另外开辟空间,就不会影响原来父类原型对象。i++就是i = i + 1;的语法唐,因为这样的写法更加简单。意思就是使用父构造函数的方法,并把this指向的是子构造函数。写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。一般情况下,对象的方法都在构造函数的原型对象中设置,通过。,这样就可以实现子类型继承父类型的属性。将子类所共享的方法提取出来,让子类的。有两种方法可以实现同样的功能。从新指向子类的构造函数。的所有方法都定义在类的。原创 2022-11-22 16:13:36 · 212 阅读 · 0 评论 -
JavaScript构造函数和原型:构造函数和原型
查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象。可以通过原型对象,对原来的内置对象进行扩展自定义的方法。对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线。就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。有多个对象的方法,我们可以给原型对象采取对象形式。方式扩展方法,而左边的是可以的,因为这是自定义的。情况下,对象的方法都在构造函数的原型对象中设置。存在类的概念,类就是对象的模板,对象就是类的。原创 2022-11-22 15:58:44 · 83 阅读 · 0 评论 -
JavaScript面向对象:面向对象案例
出现这样的原因是因为,我们后面添加的小li是后添加的,而前面的获取元素是页面加载时,获取已经准备好的。解决方案就是把获取放在一个函数中,加载时调用一次,添加完成后在调动一次init()就可以了。当失去焦点或者按下回车然后把文本框输入的值给原先元素即可。可以直接把字符串格式元素添加到父元素中。把创建的两个元素追加到对应的父元素中。这个索引号正是我们想要的索引号。可以实现添加新的选项卡和内容。号可以删除这个索引号对应的。不支持追加字符串的子元素。元素内部的最后一个子节点。可以修改里面的文字内容。原创 2022-11-22 14:35:56 · 548 阅读 · 0 评论 -
JavaScript面向对象:类的继承
刚刚想到了为什么要用构造函数,就是如果不使用constructor(),就不知道this.x指向的是那个。使用了constructor,把里面的x传给了this.x,这样就可以使用里面的方法。2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的。现实中的继承:子承父业,比如我们都继承了父亲的姓。程序中的继承:子类可以继承父类的一些属性和方法。,也可以调用父类的普通函数。原创 2022-11-21 15:06:53 · 331 阅读 · 0 评论 -
JavaScript面向对象:ES6 中的类和对象
是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象。注意: 方法之间不能加逗号分隔,同时方法不需要。关键字声明一个类,之后以这个类来实例化对象。但是事物分为具体的事物和抽象的事物。,例如字符串、数值、数组、函数等。现实生活中:万物皆对象,对象是。面向对象编程我们考虑的是有。类内部会自动给我们创建一个。,按照面向对象的思维特点。抽象了对象的公共部分,它。某一个,通过类实例化一。原创 2022-11-21 14:07:16 · 134 阅读 · 0 评论 -
JavaScript面向对象:面向过程与面向对象
就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。优点:易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统。用面向过程的方法写出来的程序是一份蛋炒饭,而用面向对象写出来的程序是一份盖浇饭。就是如果开发简单的小程序采用面向过程,因为性能好。如果开发大型程序,面向象好,在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工。缺点:没有面向对象易维护、易复用、易扩展。易维护、易复用、易扩展。原创 2022-11-20 18:11:07 · 336 阅读 · 0 评论