![](https://img-blog.csdnimg.cn/df1e314bc49d48ec9ccbcb6126e347cd.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 74
记录 JS 知识点
CEZLZ
这个作者很懒,什么都没留下…
展开
-
for...in 和 for...of
文章目录for...infor...of区别for…infor...in语句以任意顺序遍历一个对象的除 Symbol 以外的可枚举属性,包括继承的可枚举属性。基本用法:const cat = { name: "Tom", age: 100,};const color = Symbol("color");cat[color] = "pink";console.log(cat); // { name: "Tom", age: 100, Symbol(color): "pink" }原创 2021-11-23 17:42:31 · 857 阅读 · 0 评论 -
JS 实现继承的 5 种方式
文章目录继承原型链继承原型链继承的优缺点继承原型链继承继承作为面向对象语言的三大特性之一(继承、封装和多态),可以在不影响父类对象实现的情况下,使得子类对象具有父类对象的特性,同时还能在不影响父类对象行为的情况下扩展子类对象独有的特性,为编码带来了极大的便利。原型链继承的优缺点...原创 2021-11-19 10:59:21 · 852 阅读 · 0 评论 -
创建对象的 7 种方式
文章目录基于对象字面量基于 Object() 构造函数基于工厂方法模式基于构造函数模式基于原型对象的模式构造函数和原型混合的模式基于动态原型模式参考基于对象字面量对象字面量本身就是一些列键值对的组合,每个属性之间通过逗号分隔。const obj = { name: 'Tom', age: 100, getAge() { return this.age; }}基于 Object() 构造函数通过 Object() 对象的构造函数生成一个实例,然后给他们增加需要的各种属性。// 通原创 2021-11-16 23:43:08 · 2732 阅读 · 0 评论 -
数据结构:栈与队列
文章目录栈队列参考资料栈栈是一种线性的、后进先出的数据结构。进栈:出栈:使用 JS 实现栈:class Stack { /**存储栈中的数据 */ stack = []; /** * 添加一个元素到栈中(进栈) * @param {*} item 数据 */ push(item) { this.stack.push(item); } /** * 获取栈的最后一个元素(出栈) * @returns "栈为空" || 元素原创 2021-11-08 17:52:36 · 263 阅读 · 0 评论 -
JS 中常用判断为空的方法
文章目录1 判断变量为空对象2 判断变量为空数组3 判断变量为空字符串1 判断变量为空对象判断一个变量是否为空对象时,可以通过 for...in 语句遍历变量的属性,然后调用 hasOwnProperty() 函数,判断是否有自身存在的属性,如果存在则不为空对象。function isEmpty(obj) { for (item in obj) { if (obj.hasOwnProperty(item)) { return false; } } return原创 2021-11-04 23:25:27 · 20576 阅读 · 0 评论 -
简单学习常见算法
1 字符串逆序输出算法1.1 使用 reverse() 函数首先将字符串转换为字符数组,然后通过调用原生的reverse()函数进行逆序,得到逆序数组后再通过join()函数得到逆序字符串。function reverseStr(str) { return str .split("") .reverse() .join("");}let str = "abcdefg";console.log(reverseStr(str));1.2 使用栈的先进后出原则栈是原创 2021-11-04 22:52:38 · 471 阅读 · 0 评论 -
数组的浅拷贝与深拷贝
文章目录1 数据类型2 浅拷贝与深拷贝3 实现深拷贝方法3.1 JSON.string() 结合 JSON.parse()3.2 递归4 JS 中的拷贝方法4.1 concat4.2 slice4.3 ...4.4 Object.assign5 以上方法比较6 参考文章1 数据类型在 JavaScript 中,数据被分为基本数据类型和引用数据类型。⏳ 基本数据类型有:StringNumberBooleanUndefinedNullSymbol(ES 6 新增的数据类型)⏳ 引用数据原创 2021-10-20 10:30:42 · 5631 阅读 · 1 评论 -
数组去重方法总结
文章目录1. 双层 for 循环2. for 循环 + indexOf()3. filter() + indexOf()4. for 循环 + includes()5. reduce() + includes()6. sort()ES6 语法去重7. Set()8. Map()特殊类型比较1. 双层 for 循环var array = [1, 1, "1", "1", 1];// 写法一function unique(arr) { let res = [...array]; for (.原创 2021-10-12 16:07:47 · 295 阅读 · 0 评论 -
Ajax 系列:2️⃣ 使用 Promise 封装 Ajax
文章目录Ajax 的 GET 请求封装Ajax 的 POST 请求封装Ajax 的完整封装Ajax 的 GET 请求封装function getPromise(param) { return new Promise((resolve, reject) => { // 0. 将参数转换成字符串格式:xxx?name=cez&age=18 var objStr = objToString(param.data); // 1. 创建一个异步对象 xmlhttp;.原创 2021-10-08 18:20:51 · 154 阅读 · 0 评论 -
Ajax 系列:简单理解 Ajax
文章目录1 概述2 Ajax 的使用2.1 创建对象2.2 指定请求方法和URL2.3 发送请求2.4 服务器响应处理2.5 中断请求3 知识点补充4 参考资料1 概述Ajax 是一种异步请求数据的 Web 开发技术,在无效重新加载整个页面的情况下,通过异步请求加载后台数据,并在网页上呈现出来,提高了用户体验。2 Ajax 的使用2.1 创建对象var ajax = new XMLHttpRequest();XMLHttpRequest 对象的重要属性和事件:readyState:请求.原创 2021-09-30 17:13:40 · 156 阅读 · 0 评论 -
JS 延迟加载方法
文章目录1 JS 延迟加载2 JS 延迟加载方式2.1 defer2.2 async2.3 defer 和 async 异同点2.4 setTimeout2.5 动态创建 DOM 方式2.6 将脚本元素放在文档的底部3 DOMContentLoaded4 load1 JS 延迟加载『什么是 JS 延迟加载』简单来说,JS 延迟加载就是等 HTML 文档解析完成后再执行 JS 脚本。『JS 延迟加载有什么作用』1️⃣ 有助于提高页面加载速度。因为外联普通 JavaScript 脚本的加载和执行都.原创 2021-09-29 16:16:10 · 1016 阅读 · 0 评论 -
图片的懒加载和预加载
文章目录1. 懒加载1.1 懒加载的介绍1.2 懒加载的原理1.3 懒加载的实现2. 预加载2.1 预加载的介绍2.2 预加载的原理2.3 预加载的实现3. 参考资料1. 懒加载1.1 懒加载的介绍1️⃣ 什么是预加载?预加载也叫作延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。当访问一个页面的时候,先把 img 元素或者其它元素的背景图片路径设置成本地默认图片(充当占位图,减少请求次数),可视区域外的图像不会加载,只有当图片出现在浏览器的可视区域内时,才设置图片的真正路.原创 2021-09-10 17:02:12 · 273 阅读 · 0 评论 -
简单了解 this 指向问题
this 关键字1.1 在对象方法中,this 表示该方法所属的对象1.2 如果单独使用,this 表示全局对象在浏览器中,this 表示 Window 对象在 Node 环境,this 表示 Global 对象1.3 在函数中,this 表示全局对象1.4 严格模式下,在函数中,this 是未定义的(undefined)1.5 在事件中,this 表示接收事件的元素1.6 call() 和 apply() 方法可以将 this 引用到任何对象call() 和 apply(原创 2021-06-07 16:14:17 · 111 阅读 · 0 评论 -
第二次简单了解闭包
闭包1. 函数的词法作用域规则基本规则:函数在执行过程中所用到的作用域是在函数定义时的作用域,而不是函数调用时的作用域。如何理解这个规则呢?来看两个例子。例子一:这个例子的执行结果是 小龙。由于函数 fun() 不管是定义还是调用都是在同一个作用域中(如下图)。所以这无法知道函数执行过程中所依赖的作用域是哪一个作用域。例子二:在这个例子中,函数 fun() 定义时的作用域和调用时的作用域并不在同一个作用域中(如下图)。那么执行结果会是什么?答案是 小龙,而不是 小鱼。我们知道 小原创 2021-06-07 11:26:00 · 85 阅读 · 0 评论 -
解决 input:number 还能输入‘+‘,‘-‘,‘.‘,‘e‘ 问题
解决方法<input type="number" id="age" />const age = document.getElementById('age')age.onkeypress = (e) => { if (e.keyCode > 57 || e.keyCode < 48) { if (e.preventDefault()) e.preventDefault(); return false; }}原创 2021-05-24 15:32:14 · 541 阅读 · 0 评论 -
FormData
构造函数 FormData创建一个新的 FormData 对象方法FormData.append()向 FormData 中添加新的属性值。即使对应的属性值已经存在也不会覆盖原值,而是新增一个值。var formData = new FormData()formData.append("name", "cez")formData.append("name", "zlz")formData.getAll("name") // ["cez", "zlz"]可以发现,通过 .appe原创 2020-11-23 18:53:42 · 541 阅读 · 0 评论 -
第18章:04-跨越 HTTP 请求
1. 同源策略概念:同源策略是一个安全策略,它用于限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。它能防止恶意脚本的攻击。同源策略决定了两个资源只有具有同源才能进行交互。1.1 同源的定义如果两个 URL 的协议、主机和端口三者都匹配时,则这两个URL 是同源。同源的例子:http://ex.com/app1/index.htmlhttp://ex.com/app2/index.html源相同,因为有相同的协议和域名http://Example.原创 2020-11-16 21:16:04 · 170 阅读 · 0 评论 -
第18章:03-HTTP 进度事件
HTTP 进度事件HTTP 加载进度事件在 XHR2 规范草案定义了更多有用的事件集,在这个新的事件模型中,XMLHttpRequest 对象在响应的不同阶段触发不同类型的事件。比如过程事件:onloadstart:加载开始onprogress:加载中onloadend:加载结束结果事件:onload:加载完成,但不意味着加载成功ontimeout:加载超时onabort:加载中止(当调用 abort() 来中止请求时触发)onerror:加载错误注意:对于任何原创 2020-11-15 23:04:21 · 443 阅读 · 0 评论 -
第18章:01-使用XMLHttpRequest
1. 脚本话 HTTP超文本传输协议(HTTP)规定了 Web 浏览器如何从 Web 服务器获取文档和向 Web 服务器提交表单内容,以及 Web 服务器如何响应这些请求和提交。通常,HTTP 并不在脚本的控制下,只是当用户单击链接、提交表单和输入 URL 时才会发生。但是,用 JavaScript 脚本操纵 HTTP 是可行的。比如,用脚本设置 window 对象的 location 属性或调用表单对象的 submit() 方法时,都会初始化 HTTP 请求。但在这两种情况下,浏览器会重新加载页面,那原创 2020-11-13 12:32:15 · 419 阅读 · 0 评论 -
第8章:05-函数属性、方法和构造函数
函数属性、方法和构造函数length 属性在函数体里,arguments.length 表示传入函数的实参的个数。而函数本身的 length 属性表示函数形参的个数,该属性是只读属性。function fun(name, age) { console.log(`实参个数:${arguments.length}`); // 1 => 表示实参的个数 console.log(`形参个数:${arguments.callee.length}`); // 2 => 表示形参的个数}原创 2020-11-11 10:59:20 · 135 阅读 · 0 评论 -
第一次简单了解闭包
闭包函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内,这种特性在计算机科学文献中称为“闭包”。var scope = "global scope";function checkScope(name) { var scope = "local scope"; var fun = function () { console.log(`name: ${name}`); console.log(`scope: ${scope}`); } r原创 2020-11-09 11:50:31 · 87 阅读 · 0 评论 -
第8章:03-作为值的函数
作为值的函数函数可以定义,也可以调用,这是函数最重要的特性。在 JS 中,函数不仅是一种语法,也是值。也就是说,可以将函数赋值给变量,存储在对象的属性或数组的元素中,作为参数传入另一个函数等。赋值给变量:function fun(x) { return x * x; }// 调用fun(5)这个定义创建一个新的函数对象,并将其赋值给变量 fun。函数的名字实际上是看不见的。它(fun)仅仅是变量的名字,这个变量指代函数对象。赋值给对象的属性:var obj = {原创 2020-11-05 18:46:08 · 122 阅读 · 0 评论 -
第8章:02-函数的实参和形参
函数的实参和形参+ 实参和形参的区别+ 可选形参+ 可变长的实参列表:实参对象 - callee 和 caller 属性+ 将对象属性用做实参大多数情况下 JS 的默认行为是:省略的实参都将是 undefined,多出的实参会自动省略。实参和形参的区别JavaScript权威指南:实参(parameter):是在运行时的函数调用时传入的参数形参(argument):相当于函数中定义的变量function test(a, b) { // 定义函数时的参数叫做形参,如 a,b原创 2020-11-05 11:16:51 · 693 阅读 · 1 评论 -
第8章:01-函数的定义与调用
函数定义函数使用 function 关键字来定义,有 函数定义表达式 和 函数声明语句 两种方式。函数定义表达式var fun = function () { // some code ...}函数声明语句function fun () { // some code ...}// 本质:声明了一个变量 fun,并把函数对象赋值给 fun。如果函数定义表达式中存在函数名称标识符,那么该标识符只存在于函数体内中,并指代该函数对象本身。var fun = func原创 2020-11-03 23:30:21 · 417 阅读 · 2 评论 -
第5章:02-throw/try/catch/finally 语句
异常:发生了某种异常情况或错误时产生的一个信号。抛出异常:用信号通知发生了错误或异常状况。(使用 throw 语句)捕获异常:采取必要的手段处理这个信号。(使用 catch 语句)throw/try/catch/finally 语句throw 语句作用:显式地抛出异常。throw 语法:throw exception;(exception 的值是任意类型)try/catch/finally 语句是 JS 的异常处理机制。try:定义了需要处理的异常所在的代码块。catch:当 try .原创 2020-10-25 00:06:26 · 168 阅读 · 0 评论 -
input 回车导致页面刷新解决方法
input 回车导致页面刷新解决方法input 的回车事件若 form 里面只有一个 input。当 input 发生回车事件时,会触发 form 自动提交数据事件,并刷新整个页面或跳转到 action 指定的路径。对于一些情况来说,并不需要刷新整个页面,需要的是局部刷新效果。**第一种方法:**取消 form 的默认提交事件<html> <body> <form onsubmit="return false;">原创 2020-09-22 17:54:23 · 3404 阅读 · 1 评论 -
不能发送空白信息
不能发送空白信息方法一:把所有 空白字符 转为 空字符串 。const str = " "const str2 = " cez "const isEmpty = str.replace(/\s/g, "")const isEmpty2 = str2.replace(/\s/g, "") console.log(str.length) // 4 " "console.log(isEmpty.length) // 0 ""console.log(isEmp原创 2020-09-21 14:39:00 · 861 阅读 · 0 评论 -
JS:计算两个日期的差值
计算两个日期的差值const dateTime1 = "2020-09-21 11:40:30"const dateTime2 = "2020-09-22 11:40:30"const dateStamp1 = new Date(dateTime1).getTime() // 1600659630000(时间戳)const dateStamp2 = new Date(dateTime2).getTime() // 1600746030000(时间戳)const dValue = (da原创 2020-09-21 11:59:35 · 370 阅读 · 0 评论 -
浅谈 JS 的静态方法和实例方法
静态方法在函数下定义的方法function A () { }A.a = function () { console.log('a')}const cez = new A()// 调用:通过 A.xx 直接调用A.a() // acez.a() // cez.a is not a function打印详细信息可以看到,定义的静态方法和 A.prototype 同级,而不是存在 A.prototype (原型)下面。所以 new 出来的实例不能访问。实例方法原创 2020-08-21 16:38:04 · 599 阅读 · 0 评论 -
JS 三种截取字符串方法
三种方法分别是:slice( ) substring( ) substr( )slice(start, end) 和 substring(start, end)参数:start:开始截取的索引(包含) end:结束截取的索引(不包含)定义:该两种方法可提取字符串的某个部分,并返回被提取的部分提示:如果参数为负数,则从字符串的尾部开始算起,-1指的是最后一个字符,-2指的是倒数第二个字符,以此类推。substr(start, length)参数:start:开始截取的索..原创 2020-05-29 12:17:41 · 981 阅读 · 0 评论 -
原始值比较、对象比较、空数组与true/false的关系
原始值的比较原始值:undefined、unll、布尔值(boolean)、数字(number)、字符串(string)原始值的比较是值的比较:只有在它们的值想等时它们才想等。如果比较两个单独的字符串,当且仅当它们的长度相等且每个索引的字符都相等,js才认为它们相等。null == undefined //true(不明白,两者转换成数字,一个是0,一个是NaN...原创 2019-12-02 00:16:56 · 611 阅读 · 0 评论 -
JavaScript中对象到字符串、数字的转换过程
JavaScript中对象到字符串的转换经过了如下步骤:如果对象中有toString()方法,则调用这个方法。如果它返回一个原始值,js将这个值转换为字符串(如果本身不是字符串的话),并返回这个字符串结果。如果对象没有toString()方法,或者toString()并不返回一个原始值,那么js会调用valueOf()方法。如果返回值是原始值,js将这个值转换为字符串,并返回字符串结果。否...原创 2019-12-01 20:22:28 · 1128 阅读 · 0 评论 -
js 中实参和形参和区别
@[里写自定义目录标题)欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设...原创 2019-11-30 21:46:29 · 473 阅读 · 0 评论 -
包装对象
JavaScript对象是一种复合值:它是属性或已命名值的集合。通过 “.” 符号来引用属性值。当属性值是一个函数时,称其为方法。通过o.m()来调用对象o中的方法。包装对象概念存取字符串、数字或布尔值的属性时创建的临时对象称做包装对象。创建方法为了便于操作基本类型值,ECMAScript提供了3个特殊的引用类型:Boolean、Number、String。每当读取一个基本类型值...原创 2019-12-01 11:05:29 · 219 阅读 · 0 评论