JavaScript
文章平均质量分 77
叶子yes
前端学习之旅,期待你的加入
展开
-
【vue】实现滚动条滚动到底部时发送请求获取数据
当后端给我们一个分页获取数据的接口时,我们前端可以通过设置分页按钮来获取到所有的数据,也可以通过判断滚动条位置,当滚动条滚动到底部时就发送请求获取下一页的数据,这样我们就可以不设置分页按钮也能获取到所有的数据。原创 2023-01-19 17:17:28 · 2181 阅读 · 0 评论 -
ES6异步编程解决方案——async、Generator、Promise
上述代码有三个状态,一个yield就是一个状态,一个yield就是一个代码运行节点,执行一次迭代器的next方法,到第一个yield,再执行一次,到下一个yield。yield后面是每一种状态的描述。返回值:Promise实例,当p1、p2状态都为fulfilled时候,该实例的状态才为fulfilled,此时p1,p2的返回值组成一个数组,传递给该实例的回调函数;简单来说,async是一个函数,是一个异步编程解决方案,内部封装了generator函数,是一个语法糖,内部自带执行器,与await配合使用;原创 2022-09-19 19:59:23 · 1077 阅读 · 9 评论 -
ES6——Set和Map集合介绍
遍历set.keys()得到set的key值,遍历set.values()得到set的value值,遍历set.entries()得到key和value值组成的数组。遍历map.keys()得到map的key值,遍历map.values()得到map的value值,遍历map.entries()得到key和value值组成的数组。forEach接收一个回调函数作为参数,回调函数有三个参数,分别表示key值,value值以及set集合本身,返回值为undefined。不设置参数,创建一个空的set集合。原创 2022-09-18 10:29:17 · 1881 阅读 · 5 评论 -
ES6迭代器详细介绍
迭代器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。Iterator 的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费。Iterator接口就是对象里面的一个属性,这个属性叫做Symbol.iterator。而原生具备 I原创 2022-09-17 19:24:30 · 1897 阅读 · 3 评论 -
JavaScript的关键字var、let、const三者的区别
1、var声明的变量存在变量声明提升,而let和const声明的变量不存在变量声明提升var声明的变量存在变量声明提升,因此在声明之前访问该变量不会报错,而使用let和const会报错:2、var声明的变量可以重复声明,而let和const声明的变量不可以重复声明var重复声明不报错,而let和const重复声明会报错:3、var声明的变量不存在局部作用域(块级作用域),而let和const声明的变量存在块级作用域var声明的变量不存在块级作用域,因此在外部可以访问到{}里面声明的变量,但是le原创 2022-09-15 20:49:03 · 545 阅读 · 2 评论 -
Symbol基本数据类型
ES6引入的一种新的原始数据类型Symbol,表示独一无二的值。Symbol函数可以接受参数,表示对于这个唯一值的描述,属于基本数据类型,Symbol()函数会返回symbol类型的值。原创 2022-09-15 19:11:52 · 1197 阅读 · 2 评论 -
ES6类和继承
2、constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。constructor里面定义的属性属于实例的私有属性。3、定义在类体的方法称为实例方法,其实是存在于Person.prototype中,可供所有的实例调用。比如上述的sayName方法就属于公共方法,可供所有实例使用。定义在类体的属性:如果是引用数据类型,就属于实例的私有属性,比如上述的test;如果是原创 2022-09-15 17:12:33 · 794 阅读 · 2 评论 -
ES6——对象、数组、字符串、数值新增API
它是 Array.prototype.map() 和Array.prototype.flat()的组合,通过对map调整后的数据尝试展平操作。创建数组实例,参数是数组元素,解决了new Array(10)传递一个整数值,创建的是length为该整数值的数组。注意:将obj的原型对象设置为obj1,obj的构造函数的prototype仍然指向obj原来的原型对象。(2)三个参数时,表示合并对象,把后两个对象合并到第一个对象,并返回第一个对象。指的是被复制的对象里是基本数据类型,实现的就是深拷贝。原创 2022-09-15 15:23:20 · 993 阅读 · 2 评论 -
ES6基本语法之扩展运算符、解构赋值、箭头函数
扩展运算符[...]会把剩余的未被解构赋值的全部获取到,因此d的值为[ 11, 999 ],h的值为{ f: 4, i: 6, j: 7 },e和f1变量名和属性名不同,无法获取到值,因此为undefined。通常情况下,定义了默认值的参数,应该是函数的尾参数,此时函数的length属性将返回没有指定默认值的之前的参数个数。(3)方法中返回一个箭头函数:此时箭头函数的外部作用域是sayName方法,因此箭头函数this的指向就是sayName方法this的指向,sayName方法this指向对象obj。原创 2022-09-14 21:41:23 · 1479 阅读 · 1 评论 -
ES6包管理机制以及模块化
ES6是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等,ES6 的第一个版本,在 2015 年 6 月发布了正式名称就是《ECMAScript 2015 标准》(简称 ES2015)。ES6在ES5的基础上拓展了很多新特性。ES5是2009年发布的,ES6是2015年发布的,ES2015 在ES5基础上拓展了很多新特性。原创 2022-09-13 20:35:19 · 820 阅读 · 2 评论 -
猿创征文 | JavaScript函数柯里化
柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。这里使用到了闭包的原理来实现add函数,这种方法比较简单,很容易就能想到,但是这种方法并不通用,所以我们可以封装一个函数,用于将普通函数转成柯里化函数。柯里化函数执行的过程就是一个收集参数的过程,因此我们只要收集完所有参数,然后把参数传递给普通函数执行即可。那么,此时add函数应该如何写呢?原创 2022-09-03 13:21:45 · 303 阅读 · 8 评论 -
html5新增特性之画布canvas的使用
目录一、基本用法二、canvas的使用1、绘制一个矩形填充矩形轮廓矩形2、清除画布区域 3、绘制一个圆填充圆轮廓圆会移动的圆4、渐变色绘制线性渐变径向渐变5、绘制线段绘制一个三角形6、绘制图片7、绘制视频 8、绘制文本1、获取canvas对象——获取画布 通过document.getElementById()等方法取得canvas对象。2、取得上下文(context)——获取画笔 图形上下文是一个封装了很多绘图功能的对象,参数只能是“2d”3、定义填充样式实心填充样式:轮廓原创 2022-08-30 19:02:47 · 1657 阅读 · 16 评论 -
JS防抖和节流
在进行窗口的操作或者输入框操作时,如果事件处理函数用的频率无限制,会加重浏览器和服务器的负担,此时我们就可以用防抖(debounce)和节流(throttle)的方式来减少调用频率,同时又不影响实际效果。在设定的时间内触发一次事件,会在设定的时间结束之后执行该事件处理程序,如果在设定的时间内多次触发事件,则每次触发事件都会重新计时。(可以将防抖类比成电梯:第一个人进电梯之后,电梯会在5秒之后自动关闭电梯门,如果在这5秒内又有人进来了,那么电梯会重新等待5秒后再关门。)...原创 2022-08-27 22:08:55 · 11111 阅读 · 9 评论 -
jQuery 基础知识
jQuery是一个Javascript库,是对于ECMAScript、dom、bom的一个浅封装,让用户更方便操作。我们通过" jQuery "和" $ "来调用jQuery函数 (选择器) ,然后通过选择器选择到符合条件的Element元素,将其保存到jQuery对象。......原创 2022-08-26 20:12:20 · 435 阅读 · 3 评论 -
BOM介绍
虽然 ECMAScript 把浏览器对象模型(BOM,Browser Object Model)描述为JavaScript 的核心,但实际上 BOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象。多年来,BOM 是在缺乏规范的背景下发展起来的,因此既充满乐趣又问题多多。毕竟,浏览器开发商都按照自己的意愿来为它添砖加瓦。最终,浏览器实现之间共通的部分成为了事实标准,为 Web 开发提供了浏览器间互操作的基础。......原创 2022-08-25 19:45:44 · 257 阅读 · 8 评论 -
什么是重排和重绘?何时会触发?
当dom的变化影响了元素的几何信息(位置),浏览器需要计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排,表现为重新生成布局,重新排列元素。重排和重绘会消耗浏览器的性能(会去计算浏览器的内存空间,占据cpu)会造成页面卡顿,UI展示迟缓。当一个元素(颜色、字体颜色)的外观被改变,但是没有改变布局,重新把元素外观绘制出来的过程叫做重绘,表现为某些元素的外观被改变。1、添加、删除元素(重排)、更新节点(重绘)6、用户行为(重排或者重绘)5、添加一个样式表(重排)4、添加动画(重排)原创 2022-08-25 11:20:40 · 566 阅读 · 3 评论 -
DOM事件机制
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行,比如当用户点击某个 HTML 元素时。JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。原创 2022-08-24 20:27:32 · 991 阅读 · 7 评论 -
DOM节点类型及其属性和方法
DOM是JS操作网页的接口,全称为“文档对象模型它的作用是将网页转为一个JS对象,从而可以用脚本进行各种操作(比如增删内容)。文档——文档表示的就是整个的HTML网页文档对象——对象表示将网页中的每一个部分都转换为了一个对象模型——使用模型来表示对象之间的关系,这样方便我们获取对象文档对象模型(DOM)是网页的编程接口。它给文档(结构树)提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问,以改变文档的结构,样式和内容。原创 2022-08-23 23:50:42 · 5507 阅读 · 4 评论 -
js数组扁平化
数组扁平化就是将多维的数组转换成一维数组,比如将 `[[1,2,3,[4,5,6,[7,8]]],[9,10],[11,12,[13]],5]` 扁平化后就是 `[1,2,3,4,5,6,7,8,9,10,11,12,13,5]`原创 2022-08-23 10:46:49 · 270 阅读 · 6 评论 -
js实现继承的三种方式
1、原型链继承:通过原型继承多个引用类型的属性和方法。2、经典继承(盗用构造函数/对象伪装):在子构造函数中调用父构造函数3、组合继承(伪经典继承):综合了原型链和经典继承函数,将两者的优点集中了起来。原创 2022-08-20 12:34:38 · 949 阅读 · 3 评论 -
js深入理解对象——工厂模式、构造函数模式、原型模式、组合模式
工厂模式是一种众所周知的设计模式,广泛应用于软件工程领域,用于抽象创建特定对象的过程。工厂模式是一种创建型模式,简单来说,工厂模式就是创建对象的一种方式。前面的案例使用构造函数可以这样写// 自定义构造函数 function Person(name , age , gender) {} } var person1 = new Person('叶子yes' , 18 , '女');var person2 = new Person('张三' , 19 , '男');......原创 2022-08-18 20:18:23 · 378 阅读 · 10 评论 -
js数组去重的六种方法
用于查找数组元素,找到了返回元素下标,找不到返回-1,因此我们可以定义一个新的空数组用来存放数组去重后的值,然后利用indexOf()判断数组元素的值是否存在新数组中,如果不存在,则将它添加到新数组中;如果存在,说明是重复的值,不需要理会。思路:filter方法对数组元素进行筛选,找出符合条件的数组元素,并返回一个新数组。方法也是用来查找数组元素的,找到了返回true,没找到返回false,因此思路也是和第二种一样的。思路:将数组元素两两进行比较,如果相等,则删除其中一个,并修正数组下标。...原创 2022-08-18 11:25:46 · 832 阅读 · 3 评论 -
js工具库——Moment.js和lodash
Moment.js是JavaScript日期处理类库。(需要先安装node.js)打开vscode,在当前目录下打开终端,执行命令进行安装:安装完之后,目录如下:moment.js的更多使用可以查看。原创 2022-08-17 20:26:48 · 925 阅读 · 6 评论 -
Math对象和Date对象常用方法
Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,把 Math 作为对象使用就可以调用其所有属性和方法。...原创 2022-08-17 18:49:59 · 260 阅读 · 3 评论 -
js基本包装类型
在 ES 中,数据类型分为基本数据类型和引用数据类型。而基本包装类型,严格来说不属于上面两个中的任意一个,但是又和这两种类型息息相关。基本数据类型和引用类型这两个类型其中一个很明显的区别是,引用类型有自己内置的方法,也可以自定义其他方法用来操作数据,而基本数据类型不能像引用类型那样有自己的内置方法对数据进行更多的操作。但基本数据类型真的没有吗?对于部分基本类型来说确实是这样的。......原创 2022-08-17 11:45:41 · 1899 阅读 · 11 评论 -
【JavaScript】使用js实现冒泡排序
3、这时候最后一个元素是最大的,所以最后一个元素就不需要参与比较大小。1、比较相邻的两个元素,如果前一个比后一个大,则交换位置。2、比较完第一轮的时候,最后一个元素是最大的元素。3、依次类推,每轮冒泡都能得到一个最大值。...原创 2022-08-10 11:25:34 · 983 阅读 · 0 评论 -
JavaScript函数详细介绍
自由变量的值如何得到 —— 要到创建这个函数的那个父级作用域寻找,如果没有就一直向上级祖先元素寻找(这就是所谓的"静态作用域",静态作用域是指函数的作用域在函数定义时就已经确定了)...原创 2022-08-12 23:11:48 · 8394 阅读 · 2 评论 -
JavaScript数组方法
sort() 方法用于对数组的元素进行排序。如果调用该方法时没有使用参数,将按字母顺序(Ascall编码)对数组中的元素进行排序,说得更精确点,是**按照字符编码的顺序进行排序**。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。如果要想进行升序或是降序排序的话,要提供比较函数。...原创 2022-08-13 22:15:20 · 811 阅读 · 0 评论 -
JavaScript对象详细介绍
数据属性、访问器属性。这两种属性用于设置属性的高级属性,例如该属性是否可以配置,是否可以读写,是否可以遍历,并且可以通setter,getter来监听数据的改变。语法1、obj:必需。目标对象2、prop:必需。需定义或修改的属性的名字3、descriptor:必需。目标属性所拥有的特性传入函数的对象。即第一个参数obj;......原创 2022-08-10 22:46:41 · 316 阅读 · 4 评论 -
【javaScript】js基础知识
undefined派生自null,所以undefined == null结果为true,但是null表示空对象,undefined表示未定义;当栈存放引用类型时,值为对象的地址,obj与obj1指向同一个地址,所以当obj的name值变为“lisi”时,obj1也会发生变化。在body部分中的JavaScript会在页面加载的时候被执行,在head部分中的JavaScript会在被调用的时候才执行。指变量,函数,属性的名字或者函数的参数。基本数据类型变量都维护在栈区,基本数据类型的值保存在栈区。...原创 2022-08-08 11:33:52 · 488 阅读 · 3 评论 -
【JavaScript】js隐式类型转换和显式类型转换
● 如果符号两侧都是字符串,不会将其转换为数值进行比较,而会分别比较字符串中字符的Unicode编码,而在比较字符编码时,是一位一位进行比较的,如果符号两侧第一位一样,则比较下一位。2、否则,如果输入的值是一个对象,则调用该对象的valueOf()方法, 如果valueOf()方法的返回值是一个原始值,则返回这个原始值。3、否则,如果输入的值是一个对象,则调用该对象的valueOf()方法, 如果valueOf()方法的返回值是一个原始值,则返回这个原始值。2、如果第一个操作数是真,直接返回第一个操作数。.原创 2022-08-09 23:12:42 · 1110 阅读 · 0 评论 -
【JavaScript】js实现双向数据绑定
我们可以定义一个对象,然后为这个对象设置访问器属性(本身还未在对象中定义),当对象属性被修改时触发set函数,通过这个函数可以进行数据的操作,比如数据的判断赋值等一系列操作,从而实现数据的双向绑定。vue是数据驱动框架,当数据发生改变的时候,视图自动更新。4、由于对象属性值被修改从而触发set函数,然后我们在set函数中把用户输入的值赋值给input输入框下面的div,就可以实现双向数据绑定了。我们需要实现的双向数据绑定是:当在 input 框中输入内容时,input 框下方也能实时显示输入的内容。....原创 2022-08-10 23:30:39 · 4782 阅读 · 5 评论 -
js正则表达式
1、如果正则表达式中有修饰符"g",这时,在正则表达式的实例reg中会维护lastIndex属性,记录下一次开始的位置,当第二次执行exec的时候,从lastIndex开始检索。2、如果正则表达式中没有修饰符"g",不会维护lastIndex属性,每次执行从开始位置检索。...原创 2022-08-16 20:13:49 · 849 阅读 · 3 评论 -
js数组方法重写——pop、push、shift、unshift、every、some、filter、map、forEach
js中给我们提供了很多数组API,比如pop、push、filter、map等,这些都是别人写好的,放在数组的原型对象上,供我们使用。我们也可以对这些方法进行重写,这样可以加深我们对这些数组方法的理解。...原创 2022-08-16 15:56:02 · 1523 阅读 · 2 评论