![](https://img-blog.csdnimg.cn/56d624a81a664015be54037b2c1327a1.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 69
分章节的介绍javaScript的学习笔记,短小精悍,方便阅读
燕穗子博客
成长就是一个不优秀的人带着一群不优秀的人一起走在变优秀的路上
展开
-
URL介绍
前言Internet上的每一个网页都具有一个唯一的名称标识,通常称之为URL(Uniform Resource Locator, 统一资源定位器)。它是www的统一资源定位标志,简单地说URL就是web地址,俗称“网址”。原创 2023-02-25 15:04:21 · 2012 阅读 · 1 评论 -
JS 执行机制 详解(附图)
一、JS是单线程JS语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是JS这门脚本语言诞生的使命所致——用来处理页面中用户的交互,以及操作DOM而诞生的。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS执行的时间过长,这样会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。原创 2023-02-25 14:49:53 · 2712 阅读 · 1 评论 -
JavaScript 常用事件大全
事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。注意:事件名称大小写敏感。若是事件监听方式,则在事件名的前面取消on。原创 2022-11-11 11:59:44 · 905 阅读 · 1 评论 -
JS中Class类的静态属性和静态方法
一、类的两个概念:1、类自身;2、类的实例对象;总的来说:静态的是指向类自身,而不是指向实例对象,主要是归属不同,这是静态属性,静态方法的核心。二、对象的两个部分1、属性分为:实例属性、静态属性(类属性)、只读属性2、方法分为:实例方法、静态方法(类方法)...原创 2022-07-15 11:58:54 · 5665 阅读 · 2 评论 -
JavaScript 的发展历史
JavaScript 无处不在,多年来,JavaScript 已成为最流行和最通用的编程语言。支持超过 97% 的Web。作为一名 Web 开发人员,了解最流行和最受欢迎的编程语言的历史是一个加分项,将有助于增强您对该语言的理解。1、1995 年:JavaScript 的诞生2、1996 年:JavaScript 与 Java3、1997 年:ECMAScript 作为 JavaScript 标准诞生4、2009 年:ES56、2015: 年度预期更新 ~ ES6/ES2015...原创 2022-07-02 15:37:12 · 3700 阅读 · 0 评论 -
web网页版苹果计算器(HTML、CSS、JavaScript实现)
注意事项1、html结构上,分为三个部分:显示区、按钮区、底部白条2、css样式上 需要解决外边距重叠的问题,可用overflow: hidden; 点击高亮效果,可用 filter: brightness(160%)3、js 绑定点击事件的时候,用事件委托,提高整体性能,如果点击的不是按钮,则return(具体看代码)用switch···case···处理功能按钮处理方法flag表示输入是否输入首次输入转化位百分比的按钮因为需要涉及到小数,所以要用parseFloat方法来将...原创 2022-06-29 17:32:50 · 2038 阅读 · 1 评论 -
数组怎么转对象,对象怎么转数组
数组转对象思路一:使用数组的forEach方法遍历数组定义一个空对象将遍历得到的每一个对象中的value值当做新对象的key,label的值当做新对象的值循环结束后将obj的值返回给调用者即可思路二:对象转数组思路一:...原创 2022-06-20 08:45:00 · 12308 阅读 · 0 评论 -
splice()方法的使用介绍
1.删除任意数量的项只需要传入两个参数即可。要删除的第一项的位置和要删除的项数2.添加:可以向指定位置添加任意的项只需要提供三个参数即可:起始位置,0(要删除的项数)和要添加的项。如果要添加多项可以继续在后面写参数用逗号分隔。3.替换(删除再添加):可以向指定位置添加任意的项,同时删除任意数量的项。需要指定三个参数:起始位置,删除的项数和要添加的项数,添加的项数不用和删除的项数保持一致。4.不接收返回值也是可以的...原创 2022-06-20 08:30:00 · 808 阅读 · 1 评论 -
js中对象合并的4种方式,数组合并的4种方法
一、对象合并1、拓展运算符(...)2、Object.assign()3、递归赋值4、jquery中的extend()二、数组合并1、扩展操作符2、使用array.concat()方法进行合并3、关于Apply4、array.push()方法进行合并原创 2022-06-19 10:50:05 · 47812 阅读 · 0 评论 -
JS的节流与防抖的目的,区别以及实现方式 (关注收藏,持续更新)
一、节流和防抖的目的:都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,防止在短时间内频繁触发同一事件而出现延迟,假死或卡顿的现象二、节流和防抖的区别:防抖:如果不断在delay之前重新触发,那么定时器会不断重新计时,最终会在最后一次完后才执行,对于需要实时响应的,应该用节流。节流:目前有一事件A设置了定时器,那么在delay之前触发,都只会触发一次三、节流和防抖的详解防抖 debounce(设置1分钟只会执行一次,如果1分钟内又多次触发,会从再次触发开原创 2022-04-20 11:56:09 · 6798 阅读 · 2 评论 -
常见web安全及防护原理
一、SQL注入二、xss 跨站脚本(Cross-site Scripting)三、 CSRF四、上传漏洞五、文件解析漏洞六、 DDos攻击 分布式拒绝服务(Distributed Denial of service Attack)七、目录遍历漏洞原创 2022-06-05 21:30:10 · 1012 阅读 · 0 评论 -
JS中栈和堆的区别?
栈(stack):由操作系统自动分配内存空间,自动释放,存储的是基础变量以及一些对象的引用变量,占据固定大小的空间。堆(heap):由操作系统动态分配的内存,大小不定也不会自动释放,一般由程序员分配释放,也可由垃圾回收机制回收。...原创 2022-06-05 21:10:06 · 3008 阅读 · 0 评论 -
JS 哪些操作会造成内存泄露,对应的解决方法
一、内存泄漏二、哪些操作会造成内存泄漏1.意外的全局变量2、未清理的DOM元素引用3、被遗忘的定时器或者回调4、闭包5.、console.log三、怎样避免内存泄露原创 2022-06-05 20:57:51 · 1711 阅读 · 0 评论 -
JS为什么要延迟加载,有哪些方法可以实现延迟加载?
对于js的优化(关于js的延迟加载)的好处是有助于提高页面加载速度,js延迟加载就是等页面加载完成之后在加载js文件.HTML元素是按其在页面中出现的次序调用的,如果用javascript来管理页面上的元素(使用文档对象模型dom),并且js加载于欲操作的HTML元素之前,则代码将出错。也就是说,我们写了js语句来获取DOM对象,但由于DOM结构还没有加载完成,因此获取到的是空对象。...原创 2022-06-05 14:04:05 · 3384 阅读 · 1 评论 -
JSON是什么?对JSON的简单理解
1.json是一种轻量级的数据交换格式,在与后端的数据交互中具有较为广泛的应用。2.在javaScript中,我们可以直接使用json,因为JavaScript中内置了json的解析,把任何的JavaScript对象变成json,就是把这个对象序列化成一个json格式的字符串,这样才能通过网络传递给其他计算机。如果我们收到json格式的字符串,只需要把它反序列化为一个JavaScript对象,就可以在JavaScript中直接使用这个对象了。3.JSON 是适用于 Ajax 应用程序的一种有效格式,原因原创 2022-06-04 20:52:25 · 14448 阅读 · 4 评论 -
document.write、innerHTML、innerText的区别
innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器(现在也适应chrome浏览器),因此,尽可能地去使用 innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签。.........原创 2022-06-04 20:23:28 · 570 阅读 · 0 评论 -
js中时间和时间戳的相互转换
Date() 返回当日的日期和时间。getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。getMonth() 从 Date 对象返回月份 (0 ~ 11)。getFullYear() 从 Date 对象以四位数字返回年份。getYear() 请使用 getFullYear() 方法代替。getHours() 返回 Date 对象的小时 (0 ~ 23)。getMinut原创 2022-06-02 15:26:06 · 58009 阅读 · 0 评论 -
JS字符串反转的2种方式
JS字符串反转的2种方式原创 2022-06-02 14:08:19 · 2235 阅读 · 4 评论 -
JS中绑定事件的5种方式——以按钮绑定点击事件为例
第一种和第二种的效果是一样,可以附加多个事件处理函数,并不是只有使用jquery才能做到。第三种方法不推荐使用,原则上HTML代码只能体现网页的结构,具体的行为应该使用javascript代码进行绑定。除非页面上绑定事件的元素超过上万个,否则响应速度的时候就不必纠结了,只做个事件绑定还是很快的。我测试了一下,使用addEventListener绑定3000次,耗时3-4毫秒。如果项目中统一使用jQuery的话,建议使用第一种做法,顺便还解决了IE的不兼容问题。......原创 2022-06-02 13:54:15 · 15835 阅读 · 3 评论 -
js中window.onload和jq中read函数区别
1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。2.编写个数window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个。$(documrnt).ready()可以同时编写多个,并且都可以得到执行。3.多个的执行结果window.onload不能同时写多个,但是有多个时会执行,只是后执行的会将前一次执行的结果覆盖。原创 2022-06-01 15:03:24 · 378 阅读 · 0 评论 -
JS中检测数据类型的7种方法
目录一.JS中的数据类型:二、检测数据类型的方法:1、typeof 检测一些基本的数据类型2、A instanceof B检测当前实例是否隶属于某各类3、constructor构造函数4、hasOwnporperty检测当前属性是否为对象的私有属性5、is Array判断是否为数组6、valueOf7、Object.portotype.toString(最好的)一.JS中的数据类型:1) 简单类型:String、Number、Boolean...原创 2022-05-30 14:17:15 · 24223 阅读 · 1 评论 -
8种this指向问题汇总
目录1.作为对象方法被调用2. 作为普通函数被调用时3.作为构造函数被调用时4.箭头函数里面的this5.call&& apply&&bindcall或apply调用总结补充this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个最后调用它的对象1.作为对象方法被调用当函数作为对象方法被调用时this指向该对象 var obj = {原创 2022-05-29 11:39:04 · 407 阅读 · 0 评论 -
Js获取页面的各种宽高与距离
1、screen系列screen.width: 屏幕的宽度screen.height: 屏幕的高度2、style系列(必须是行内设置的样式才有效)element.style.width: 当前对象的宽度element.style.height: 当前对象的高度 ==》 jQ: $(obj).height(); 不包含补白和边框element.style.left: 当前对象的leftelement.style.right: 当前对象......原创 2022-05-23 17:03:18 · 3062 阅读 · 0 评论 -
js跨域相关面试题
一、什么是跨域广义的跨域包括:资源跳转:超链接跳转、重定向、表单提交 资源嵌入:link、ifram、script、img,以及css样式中的background:url()、@font-face()等外链接 脚本请求:js的ajax请求、js或DOM 中的跨域操作狭义的跨域:指浏览器同源策略限制的请求同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。当协议、子域...原创 2022-05-23 15:55:23 · 624 阅读 · 1 评论 -
【经典面试题】js深拷贝浅拷贝区别,怎么实现深拷贝
目录一、区别浅拷贝(shallow copy):深拷贝(deep copy)二、实现方法:浅拷贝1、直接赋值法深拷贝1、Object.assign()2、转成JSON3、递归4. 通过jQuery的extend方法实现深拷贝5. lodash函数库实现深拷贝一、区别浅拷贝(shallow copy):复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存;浅拷贝就是只拷贝一层,更深层次对象级别只拷贝引用(地址)当拷贝...原创 2022-05-19 11:20:43 · 594 阅读 · 0 评论 -
【经典面试题】伪数组是什么?伪数组与数组的区别,将伪数组变成真数组
了解伪数组之前先了解下普通的数组1、普通数组数组是用来存储一系列值的一个集合,而每个值在数组里面都有一个对应的索引,也可以叫做下标,索引是从0开始的,依次递增。比如:let arr = ['a','b','c'];// 字符串a,b,c对应的下标分别为0, 1, 2,使用 数组名字[索引] 的方法即可取到对应的值。2、什么是伪数组像数组一样有 length 属性,也有 0、1、2、3 等属性的对象,看起来就像数组一样,但不是数组, 不具有数组所具有的方法3、常...原创 2022-05-18 21:23:23 · 448 阅读 · 0 评论 -
前端代码规范--- html、css、less、js
程序员写好看的代码,不亚于写一行好看的字好看的代码总是让人心旷神怡,不好,不规范的代码,让人看了只想摇头,那我们就来学习一下规范的代码怎么写的吧一、命名规范(一) 项目命名全部采用小写的方式 以中划线分割正确命名:mall-management-system(商城管理系统)错误命名:mall-management-system或mallManagementSystem(二) 目录命名全部采用小写的方式 以中划线命名 复数时,要采用复数结构正确命名:sctipts...原创 2022-05-18 20:31:39 · 593 阅读 · 2 评论 -
【经典面试题】如何使用js实现省市区三级联动
目录一、省市区数据获取二、遍历省级数据三、二级联动的实现四、三级联动的实现一、省市区数据获取链接: https://pan.baidu.com/s/1AqXINno57a3og0oVYZCn0g?pwd=6beh 提取码: 6beh效果展示二、遍历省级数据 1.导入数据 2.在body标签创建三个下拉框 3.分别获取这三个下拉框 4.遍历数据 5.添加到省级下拉框中代码实现二级联动在遍历省级基础上又多了些步骤具体实现步骤...原创 2022-05-17 11:04:01 · 1311 阅读 · 0 评论 -
【经典面试题】js防止重复点击、防止点击过快的方法
若用户疯狂点击提交按钮,请求很多次,生成好多条数据,为了解决这种问题,通常采用以下两种简单两种方法1.可以添加一个开关,让这个开关默认为true,第一次点击将其变为false,点击事件的执行需要判断这个开关是否为true(例如有了请求结果然后在设置为true),为true执行,false不执行 var isclick = true; function fn(){ if(isclick){ isclick = false;原创 2022-05-17 10:44:04 · 8944 阅读 · 1 评论 -
「经典题」JavaScript中的预加载—概念、作用、以及代码实现方式
1.什么是预加载资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。2.为什么要用预加载在网页全部加载之前,对一些主要内容进行加载,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,直到所有内容加载完毕。3.实现预加载的方法有哪些?方法一:用CSS和JavaScri原创 2022-04-22 21:33:02 · 2489 阅读 · 0 评论 -
「经典题」JS中map()和forEach()有什么区别?
一、map()和forEach()定义1、forEach()针对每一个元素执行提供的函数,除了抛出异常以外,没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环,forEach() 方法不是应当使用的工具。2、map()创建一个新的数组,其中每一个元素由调用数组中的每一个元素执行提供的函数得来,map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。callb原创 2022-05-09 16:47:01 · 261 阅读 · 0 评论 -
「经典题」原生js的11种循环遍历,你掌握了几种?
1.while 循环:While语句包括一个循环条件和一段代码块,只要条件为真,就不断循环执行代码块。while (条件) 语句; // 或者 while (条件) 语句; //举例:var i = 0; while (i < 100) { console.log('i 当前为:' + i); i = i + 1; } 2. do……while循环do...while循环与while循环类似,唯一的区别就是先运行一次循环体,然后判断循环条件。do原创 2022-05-09 19:50:17 · 938 阅读 · 0 评论 -
「经典题」什么是闭包?闭包的工作原理?闭包的优缺点?
一、变量作用域要理解闭包,首先要理解javascript的特殊的变量作用域。变量的作用域无非就两种:全局变量和局部变量。javascript语言的特别之处就在于:函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。注意点:在函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明的是一个全局变量! function f1(){ var n=999; function f2(){ alert(n); // 999 .原创 2022-05-11 08:00:00 · 503 阅读 · 0 评论 -
「经典题」JS中==和===的区别
使用JS书写判断表达式的时候通常会遇到==和===,它们相差了一个“=”,意义上有什么样的区别呢?==表示等同,===表示恒等。==只比较内容,而===既比较内容也比较数据类型==比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 。100 == "100" // true1 == true // truenull == null // trueundefined == undefined // t原创 2022-05-11 08:00:00 · 222 阅读 · 0 评论 -
「经典题」JavaScript数据类型有哪些?
一、JS数据类型有哪些:JS数据中一共有8种ES5中有6种:Number、String、Boolean、Undefined、Null、ObjectES6新增了Symbol:这种类型的对象永不相等,即始创建的时候传入相同的值,可以解决属性名冲突的问题,做为标记谷歌6版本bigInt:是指安全存储、操作大整数二、JS中基本数据类型和引用数据类型有哪些?基本数据类型(值类型):Number、String、Boolean、Undefined、Null引用数据类型:Object。里面包含functio原创 2022-05-11 08:15:00 · 3098 阅读 · 1 评论 -
「经典题」原生js数组去重的10种方法
1: 思路:定义一个新数组,并存放原数组的第一个元素,然后将元素组一一和新数组的元素对比,若不同则存放在新数组中。 function unique(arr) { let newArr = [arr[0]]; for (let i = 1; i < arr.length; i++) { let repeat = false; for (let j = 0; j < n转载 2022-05-11 09:42:16 · 698 阅读 · 0 评论 -
【经典面试题】JS实现七种排序(冒泡、快排、归并、选择、插入、希尔、堆)
目录一、冒泡排序(稳定)二、快速排序(不稳定)三、归并排序(稳定)四、插入排序(稳定 )五、希尔排序(不稳定)六、直接选择排序(不稳定)七、堆排序 (不稳定 )一、冒泡排序(稳定)通过相邻元素之间的比较和交换,将排序码小的元素逐渐从底部移向顶部。 // 冒泡,相邻元素之间比较 function fn(arr){ for(let i=0;i<arr.length-1;i++){ for(let j=..原创 2022-05-15 22:50:46 · 437 阅读 · 0 评论 -
【经典面试题】JS作用域、作用域链、预解析
目录一、作用域1. 全局作用域(Global Scope)2. 局部作用域(Local Scope) 3. 块级作用域二、作用域链三、预解析一、作用域作用域是可访问的变量的集合。在JavaScript中,作用域为可访问变量,对象,函数的集合,它分为局部作用域和全局作用域。作用域决定了这些变量的可访问性(可见性)。1. 全局作用域(Global Scope)在代码中任何地方都能访问到的对象拥有全局作用域,一般来说以下几种情形拥有全局作用域:(1)最外层函......原创 2022-05-16 23:22:17 · 4033 阅读 · 1 评论 -
JavaScript 20题简单小例子练习,锻炼代码逻辑思维,不看后悔系列(二)
1.有一个从小到大排好序的数组。现输入一个数,要求按原来的规律将它插入数组中: // 定义一个数组 var arr = [1,2,3,4,5,6,7,8,9]; // 输入一个数 var num = 6; // 数组末端添加 num arr.push(num); // 升序 arr.sort(function(a,b){return a-b})2.定义一个含有30个整型元素的数组,按顺序分别赋予从2开始的偶数;然后按顺序每5个数求出原创 2022-05-04 10:45:16 · 2499 阅读 · 1 评论 -
JavaScript 25题简单小例子练习,锻炼代码逻辑思维,不看后悔系列(一)
1.计算10的阶乘:// 计算10的阶乘// 声明阶乘,赋值var jc = 1;// 创建循环语句for(i = 1;i <= 10;i++){ jc *= i;}// 打印结果console.log(jc); // 36288002.计算圆的周长、半径:// 假设半径为80var r = 80;// 周长公式var h = 2*Math.PI*r;// 结果保留3位小数var h = h.toFixed(3);// 面积公式var s =原创 2022-05-03 22:26:51 · 2203 阅读 · 0 评论