JS基础
文章平均质量分 82
js基础
前端 贾公子
博主写了对element-plus的表格和表单的封装
[表格]https://gitee.com/childe-jia/table-vue3
[表单] https://gitee.com/childe-jia/form-render
大家支持一下
展开
-
js ---- 排序(1)
找出a[1...5]中的最小值a[3]=10,然后将a[0]和a[3]互换。数组变化:20,40,30,10,60,50 -- > 10,40,30,20,60,50。找出a[2...5]中的最小值a[3]=20,然后将a[1]和a[3]互换。数组变化:10,40,30,20,60,50 -- > 10,20,30,40,60,50。数组变化:10,20,30,40,60,50 -- > 10,20,30,40,50,60。找出a[4...5]中的最小值,由于该最小值大于a[3],该趟不做任何处理。原创 2023-02-06 17:46:52 · 202 阅读 · 0 评论 -
JS设计模式(3)--- 复习
迭代器模式是提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示,迭代器模式可以把迭代的过程从业务逻辑中分析出来,在使用迭代器模式后,即使不关心对象的内部构造,也可以顺序访问其中的每个元素。使多个对象可以处理请求,从而避免了请求的发送者,与多个接收者直接的耦合关系,将这些接收者链接成一条链,顺着这条链传递该请求,直到找到能处理该请求的对象。他在我们树形结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以向简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部解耦。原创 2023-02-03 11:59:56 · 380 阅读 · 0 评论 -
JS 设计模式(2)-- 复习
策略模式定义了一系列算法,并将每个算法封装起来,使他们可以相互替换,且算法的变化不会影响使用算法的用户,策列模式属于对象行为模式,它通过对算法进行封装,把使用算法的责任和算法的实现分割开来,并委托给不同的对象进行算法管理。当一个对象的状态发生改变时,所有依赖它的对象都将得到通知并被自动更新,解决了主体对象与观察者之间功能的耦合,即一个对象状态改变给其他对象通知的问题。代理模式使得代理对象控制具体对象的引用,代理几乎可以是任何对象,文件,资源,内存中的对象,或者是一些难以复杂的东西。观察者和目标要相互知道。原创 2023-02-02 11:25:37 · 139 阅读 · 0 评论 -
JS设计模式(1)----复习
建造者模式将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可以采取不同的表示,工厂模式主要是为了创建对象实例或者类族(抽象工厂),关心的是最终产生(创建)的是什么,而不关心创建过程,而建造者模式关心的是创建这个对象的整个过程甚至创建对象的每个细节。模板方法模式是一种典型的通过封装变化提高系统扩展性的设计模式,运用了模板方法模式的程序中,子类方法种类和执行顺序都是不变的,但是子类的方法具体实现规则是可变的,父类是个模板,子类可以添加,就增加了不同功能。并且可以接受参数用来设定实例对象的属性和方法。原创 2023-02-01 09:28:23 · 203 阅读 · 0 评论 -
[].slice.call(arguments)
这段代码的意思是能够将具有length属性的arguments转换为数组slice方法内部实现,V8源码第587行,其基本原理就类似我们上面开头写的for循环遍历原数组,根据start和end的值再复制一份到新数组并返回。所以当我们使用[].slice.call(arguments),slice方法内部的this就会被替换成arguments,并循环遍历arguments,复制到新数组返回,这样就得到了一个复制arguments类数组的数组对象。原创 2022-11-23 10:12:28 · 1197 阅读 · 0 评论 -
日期处理函数工具库
【代码】日期处理函数工具库。原创 2022-10-23 17:01:57 · 208 阅读 · 0 评论 -
jQuery
params: 想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号, 如果是复合属性则需要采 取驼峰命名法 borderLeft。其余参数都可以省略。speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。...原创 2022-08-28 14:49:06 · 1060 阅读 · 0 评论 -
ES6新特性
name'终极一班',stus['zs','ls','ww','xm'],return{nextfalse}index++}else{true}}}}}}}原创 2022-07-26 15:07:50 · 289 阅读 · 0 评论 -
自定义函数工具库
目录函数相关call函数封装apply函数封装 bind函数封装函数节流函数防抖数组相关map函数封装reduce函数封装filter函数封装find函数封装findIndex函数封装every函数封装some函数封装语法call『 fn:要执行的函数 obj改变的this指向 ...args形参 』功能执行fn,使this为obj,并将后面的n个参数传递给fn『等同于函数对象的call方法』apply函数封装语法apply『 fn:要执行的函数 obj改变的this指向 args形参 』功能执行原创 2022-07-11 19:47:04 · 429 阅读 · 0 评论 -
axios从入门到源码分析
.axios是什么?axios:基于promise封装的ajax库,基于这个类库发送ajax请求,默认就是基于promise管理的,核心还是XMLHttpRequestaxios中文文档|axios中文网 | axiosaxios中GET系列的使用方法?1.首先需要导入axios对应插件: npm i axios <script src="node_modules/axios/dist/axios.min.js"></script>2.GET系列 .原创 2021-11-21 21:32:56 · 209 阅读 · 0 评论 -
对象常用的方法
对象中常用的方法: Object.prototype1. hasOwnProperty方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。检测是否为私有属性 即使属性的值是null或undefined,只要属性存在,hasOwnProperty依旧会返回true。检测的属性的String字符串形式表示的名称,或者Symbol。const object1 = {}; object1.property1 = 42; console.log(obj...原创 2021-11-29 20:17:53 · 6090 阅读 · 0 评论 -
JS-----------Ajax
传统网站存在的问题网速慢点情况下,页面加载时间长,用户只能等待 表单提交后,如果一项内容不合格,需要重新填写所有的表单内容 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间ajax概述 阿贾克斯Ajax 它本身不是一种技术 Ajax是利用JavaScript脚本改变web应用与服务器端之间数据交互的一种方式(异步加载页面)。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用原创 2021-11-18 13:46:35 · 951 阅读 · 1 评论 -
函数的防抖和节流
函数的防抖和节流原创 2022-01-02 16:53:42 · 558 阅读 · 0 评论 -
[面向对象]
自然界中的所有东西都是我们需要研究的对象,分类:大类,小类,按照相似的功能特点,拿出人类中的一个人,去研究分析,人和人之间都有自己独有的特性 公用特征JS是面向对象编程,JS中的每一个东西,都是我们需要研究的"对象"泛指,按照功能特点进行分"类",拿出类中的某个事物,称之为实例原创 2021-12-25 22:57:42 · 348 阅读 · 0 评论 -
类继承的多种方案和原理
概念面向对象中 :类的"继承 封装 和多态"封装:把实现某个功能的代码进行封装处理,后期想实现这个功能 直接调用这个函数即可,低耦合,高内聚 多态:重载:方法名相同,参数类型或者个数不同,这样会认为是多个方法 重写:子类重写父类方法 继承:子类继承父类的方法 ,子类的实例既拥有子类赋予的私有/公有属性方法 也想拥有父类赋予的私有/公有属性方法原型继承和传统后台语言中的继承不一样(后台:子类继承父类,会把父类的方法copy一份给子类)并没有把父类的方法copy一份给子类,而是建立子类和父类之原创 2022-01-10 16:55:51 · 427 阅读 · 0 评论 -
详解Iteritor迭代器&&Generator生成器
前言es6新增内容: let /const /class es6Module模块规范(import export )Symbol /Biginit 箭头函数,解构赋值....数组和对象及正则的一些方法,模板字符串promise proxy Iterator GeneratorIterator 迭代器Iterator只是一种机制,可以为不同的数据结构提供统一的循环和迭代规范, 而for of循环本身就是基于这种机制进行迭代的拥有Iterator机制的对象,必须具备一个next方法:执行这个原创 2022-01-23 20:34:29 · 415 阅读 · 0 评论 -
JS设计模式
前言JS设计模式是一种思想,更规范更合理的管理代码(方便维护,升级,扩展,开发)单例设计模式单例设计模式Singleton && Command 命令模式最早期的编程化思想(同样的还有:AMD/CMD/commoJS/ES6Module) 避免全局变量污染, 实现模块之间的相互调用(提供了模块导出方案) //Object let obj = {} //------高级单例------ //公共模块 utils let utils原创 2022-01-24 23:03:02 · 162 阅读 · 0 评论 -
数组对象的深浅拷贝和深浅合并
对象&&数组的克隆(浅拷贝)浅拷贝:只拷贝第一级内容,拷贝的对象和原始对象共用相同的第二级(及更深级)的内容对象@1展开运算符 @2.循环:把原始对象中的每一项 赋值给新对象数组@1.上述方案都可以,@2.基于slice处理,@3.基于concat处理对象的克隆(深拷贝)深拷贝后,新对象和原始对象不具备任何关系,我对象的一级及更深层级都拷贝一份@1 JSON.stringify / JSON.stringify 来处理,存在局限性先把对象转为字符串,再把字原创 2022-01-26 17:28:57 · 438 阅读 · 0 评论 -
AJAX核心基础知识之倒计时抢购案例
倒计时分析:两个时间 目标时间 ,当前时间目标时间-当前时间(计算时间差中包含多少小时,多少分钟,多少秒)每间隔一秒钟重新获取当前时间(定时器),重算时间核心问题:1当前时间不可以获取客户端本地的(本地的时间客户可以肆意修改,获取服务器的时间 响应头Date)2.获取服务器时间有 时间差问题缩短时间差 :当ajax码为2的时候响应头信息就返回了 head请求:只要请求头在页面不刷新的情况下,每间隔一秒,不是再从服务器获取,而是基于第一次获取的结果之上手动累加1000m..原创 2022-01-17 17:26:00 · 205 阅读 · 0 评论 -
Fetch&Fetch的二次封装
前言客户端服务器端通信方式ajax (ajax JQ的类库 /axios类库) /jsonp / fetchfetch是Es6新提供的API:基于不同于XMLHttpRequest的方式,基于客户端和服务器端的数据通信,而且本身是基于promise管理请求结果的(发送请求返回promi实例)fetch的基础知识和管理语法:Promise<Response> fetch(input[, init]); :返回promise实例 input:URL地址 init:配置项..原创 2022-01-23 01:25:38 · 2106 阅读 · 0 评论 -
JS中的异步编程和EventLoop处理机制
同步和异步+ 同步 sync:事情必须一件一件的去做,上一件事情没有处理完,下一件事情是无法处理的 + 异步 async:同时处理多件事情或者是上一件事情哪怕没有处理完,下一件事情也可以继续处理 进程:一个程序(或者浏览器打开一个页面)是开辟一个进程 线程:线程是进程中具体办事的,想同时办多件事,就需要开辟多个线程(一个进程中包含多个线程) 浏览器是多线程的,可以同时处理很多任务 + GUI渲染线程:渲染HTML...原创 2021-11-04 18:31:24 · 277 阅读 · 0 评论 -
Javascript之DOM讲解
获取元素的方法document.getElementById("id名") context.getElementsByTagName(''标签名') context.getElementsByClassName(") context.getElements.ByName(") document.head document.body document.documentElement context.querySelector("选择器") context.querySelectorAll.原创 2021-10-28 18:17:59 · 809 阅读 · 0 评论 -
js检测数据类型的四种方法
一.typeof返回的结果都是字符串缺点:不能细分对象基本数据类型 :除null以外均可返回正确结果引用数据类型:除function以外一律返回object类型null返回object类型function返回function类型检测未被声明的变量 undefined那么为什么检测null却返回了object类型呢??原理js在底层存储变量的时候会按照计算机存储的二进制进行检测000 对象010浮点数100 字符串110布尔1 整数null 0.原创 2021-10-24 16:33:54 · 1703 阅读 · 0 评论 -
JS-------数据类型
JS中的数据类型原始值类型「基本数据类型、值类型」 number string boolen undefined null symbol bigint对象类型「引用数据类型」 标准普通对象 object {} 标准特殊对象 数组、正则、日期、Error错误对象、Math... 函数对象(可调用可执行对象,内部实现了[[call]]方法) function 非标准特殊对象 原始值类型对应的对象类型实例,例如:new Number(...原创 2021-11-06 13:47:57 · 87 阅读 · 0 评论 -
数组及常用方法
数组的基本概念.什么是数组?数组是存储一个或多个数据的容积,它是一组内存空间,通常用来批量处理数据,这组内存空间的名字叫做数组2.数组的特点对齐自身储存的数据并没有什么要求,无论是数量还是类型, 数组中的每一项可以是任意一种数据类型通,过数组下标来管理数组3.length数组也是对象数据类型,它也是有键值对组成,属性名是数字,并且有一个length属性,数组名.length表示数组的长度,也是数组当前存储元素的个数,因为下标从0开始,所以数组长度-1表示最后一个元素的下标怎么创建一个数组1.原创 2021-10-30 23:11:03 · 239 阅读 · 0 评论 -
DOM元素三大系列
offset元素偏移量获取元素距离带有定位父元素的位置获取元素自身的大小(宽度高度)返回的数组不带单位offset常用属性element.offsetParent 返回作为该元素带有定位的父级元素,如果父级没有定位则返回bodyelement.offsetTop 返回元素相对带有定位父元素上方的偏移element.offsetLeft 返回元素相对带有定位父元素左边框的偏移element.offsetWidth 返回自身包括padding 边框,内容区的宽度,返回值不带单位原创 2021-10-31 11:27:28 · 411 阅读 · 1 评论 -
关于this指向问题及改变this指向的方法
this指向详解this的指向在函数定义的时候是确定不了的,只有函数执行的时候才确定this到底指向谁一般情况下this指向调用它的对象下面我们来看看this被调用时的五种情况思维导图分析1.作为对象方法被调用当函数作为对象方法被调用时this指向该对象 var obj = { age: 18, fn: function () { console.log(this ===..原创 2021-10-24 12:16:04 · 2841 阅读 · 1 评论 -
作用域和作用域链
什么是作用域作用域决定了代码区块中变量和其他资源的可见性,**作用域就是一个独立的独立的地盘,让变量不外泄.暴露出去,作用域最大的用处就是隔离变量,不同作用域下变量名不会冲突作用域可以分为1.全局作用域,2.私有作用域3.es6块级作用域全局作用域当打开页面的时候,会提供一个供js代码执行的环境,全局作用域,会默认提供一个最大的window对象。【全局变量】:在全局作用域中声明的变量就是全局变量,其中下面的a 和fn 就是全局变量【全局变量和window关系】 在全局作..原创 2021-10-28 13:22:37 · 454 阅读 · 0 评论 -
堆栈内存和闭包
堆栈内存小科普1)js中的内存分为:堆内存和栈内存【堆内存】:只要用来存储引用数据类型的值(对象存的是键值对,函数存的是字符串)【栈内存】:供js运行的环境(函数执行),存基本数据类型的值堆栈内存的释放问题我们每次给变量存值或者执行函数的时候都会占用内存空间,如果一直这样下去,日积月累,电脑总会装不下的,所以内存是需要释放的。1)堆内存的释放:常见的浏览器释放方式主要有以下两种:谷歌浏览器是标记方式,每隔一段时间就会检测以下当前作用域中的内存,是否被占用,如果没有被占...原创 2021-11-07 12:03:16 · 329 阅读 · 0 评论 -
Promise
Promise是什么?Promise:承诺者模式,它是ES6新增的一个内置类,基于Promise可以有效管理“异步编程”,避免回调地狱从语法上来说promise是一个构造函数 从功能上来说promise对象来封装一个异步操作,并可获取其成功/失败的结果值什么是回调地狱?JQ中的ajax管理,是基于回调函数的方式管理的「请求成功后,会触发success回调函数执行,result就是本次请求获取的结果」;如果我们想实现ajax串行,需要把下一个请求发送,放在上一个请求成功的回调函数中处理,.原创 2021-11-14 17:57:34 · 5400 阅读 · 0 评论 -
js事件 及 事件对象event
事件类型鼠标事件click 点击 dblclick双击 mouseover||mouseenter鼠标移入 mouseout || mouseleave鼠标离开onmouseover和onmouseenter的区别??onmouseout和onmouseover 存在冒泡onmouseout和onmouseover是忽略元素之间的层级关系,只看鼠标在哪个元素显示的范围上,存在事件冒泡mouseenter和mouseleave会受到元素之间的层级关系,默认阻止了事件冒泡机制...原创 2021-11-04 13:54:59 · 282 阅读 · 1 评论 -
字符串和数学方法
字符串用单引号或双引号包起来字符串也像数组一样,有数字索引,可以通过响应的索引可以通过响应索引对应字符获取字符串的长度str.length获取第一个字符[0]获取最后一个字符:str[str.length-1]字符串常用方法charAt作用:获取相应位置对应的字符 参数:索引 返回值:返回对应的字符charCodeAt:作用获取对应的ascII码值 参数:索引 返回值:对应的ascll码十进制对应值indexOf作用:获取特定字符在字符串中的首次出现的原创 2021-11-05 22:14:55 · 189 阅读 · 0 评论