JavaScript
文章平均质量分 75
JavaScript汇总
xiangxiongfly915
Android & Flutter & H5
https://github.com/xiangxiongfly
展开
-
JavaScript async和await总结
async/await 是在ES8(也称为ES2017)中引入的。它是一种用于处理异步操作的语法糖,可让异步代码更容易编写和阅读。async/await 是以更舒适的方式使用 promise 的一种特殊语法,同时它也非常易于理解和使用原创 2023-07-06 16:32:16 · 246 阅读 · 0 评论 -
JavaScript 原型和原型链
任何函数都有prototype属性,prototype是原型的意思。prototype的属性值是个对象,它默认拥有constructor属性指回函数。构造函数的prototype属性是它的实例的原型。原创 2023-05-26 15:42:15 · 1099 阅读 · 0 评论 -
JavaScript 上下文对象
函数中可以使用this关键字,表示函数的上下文。判断上下文常用规则:规则一:函数的上下文(this)由调用函数的方式决定。规则二:圆括号直接调用函数,则函数的上下文是window对象。规则三:数组或类数组对象枚举出函数进行调用,上下文是这个数组或类数组对象。规则四:IIFE函数(立即可执行函数),上下文是window对象。规则五:定时器、延时器调用函数,上下文是window对象。规则六:事件处理函数的上下文是绑定事件的DOM元素。原创 2023-05-19 15:38:37 · 707 阅读 · 1 评论 -
图片预加载和懒加载
图片预加载和懒加载原创 2023-05-04 17:14:56 · 592 阅读 · 0 评论 -
JavaScript var & let区别
变量作用域变量提升变量重复声明全局对象属性for循环中的作用域原创 2023-03-31 16:56:41 · 285 阅读 · 0 评论 -
JavaScript 逻辑或(||) 和 逻辑与(&&)
||(逻辑或):当两个操作数都为false时返回false,否则返回true。如果第一个操作数为true,则不会执行第二个操作数。&&(逻辑与):当两个操作数都为true时返回true,否则返回false。如果第一个操作数为false,则不会执行第二个操作数。原创 2023-03-22 16:09:15 · 235 阅读 · 0 评论 -
JavaScript 浅拷贝和深拷贝
在JavaScript中,浅拷贝和深拷贝是常用的两种对象复制方式。浅拷贝是新建一个对象,浅拷贝只能复制对象的一层属性,对于嵌套的引用类型属性,只会复制其引用地址而不是真正的值。浅拷贝可以使用Object.assign()方法或展开运算符(...)来实现。深拷贝是新建一个对象,将原始对象的所有属性值都复制到新对象中,包括引用类型的属性值。因此,即使修改了原始对象中的引用类型属性的值,新对象中的属性值也不会受到影响。深拷贝通常使用递归函数或JSON对象来实现。原创 2023-03-22 15:20:10 · 161 阅读 · 0 评论 -
JavaScript 隐式转换原理
JavaScript 中的隐式数据转换是指在表达式中使用不同类型的值时,JavaScript 引擎自动将其中一个或多个值转换为另一种类型。在JavaScript中,ToPrimitive方法是一个抽象操作,每个值隐含的自带的方法,用于将值(基本数据类型和引用类型)转换为其基本数据类型值。如果值为基本类型,则直接返回值本身。如果值为引用类型则会自动调用ToPrimitive方法。原创 2023-03-22 11:00:10 · 527 阅读 · 0 评论 -
JavaScript == & === & Object.is()
== 相等运算符=== 全等运算符Object.is() 值比较原创 2023-03-21 16:56:06 · 278 阅读 · 0 评论 -
JavaScript 什么是NaN
在JavaScript中,NaN(Not a Number,即不是一个数字),属于number类型的一种特殊状态,用于表示无法确定的值。原创 2023-03-21 14:21:53 · 394 阅读 · 0 评论 -
JavaScript 检测数据类型方式
检测数据类型方式:typeofinstanceofconstructorObject.prototype.toString原创 2023-03-21 11:31:44 · 257 阅读 · 0 评论 -
JS 防抖和节流
防抖(debounce)和节流(throttle)都是用来控制函数执行频率的技术。原创 2023-03-10 10:36:59 · 85 阅读 · 0 评论 -
CSS 搜索框
CSS 搜索框原创 2023-01-20 15:22:37 · 3602 阅读 · 1 评论 -
JavaScript 判断元素是否包含指定class
JavaScript 判断元素是否包含指定class原创 2023-01-20 11:12:04 · 4040 阅读 · 0 评论 -
JavaScript JSON序列化和反序列化
JSON序列化指将JSON对象转换为JSON字符串。J实现方式有两种:一种是调用JSON对象内置的`stringify()`函数,一种是为对象自定义`toJSON()`函数。JSON反序列化指将JSON字符串转换为JSON对象。实现方式有两种:一种是使用JSON对象内置的`parse()`函数,一种是使用`eval()`函数。原创 2023-01-18 17:58:58 · 6755 阅读 · 0 评论 -
ES6 Iterrator和Generator
Iterator称为遍历器,是ES6为不同数据结构遍历所新增的统一访问接口。Generator()函数是ES6提供的一种异步编程解决方案。原创 2023-01-18 14:10:48 · 1530 阅读 · 0 评论 -
ES6 Proxy和Reflect
Proxy简介简单使用Proxy函数说明场景一:私有化场景二:增加日志记录场景三:特定操作Reflect简介Reflect函数说明Reflect.has()Reflect.defineProperty()Reflect.deleteProperty()Proxy配合Reflect原创 2023-01-17 15:08:04 · 677 阅读 · 0 评论 -
JavaScript 浏览器的重排和重绘
虽然可以通过JavaScript操作DOM元素,但是代价却是高昂的。我们可以将DOM和JavaScript想象成两个岛,它们之间的连接需要通过一座桥,而JavaScript对DOM的访问就需要通过这座桥,并收取“过桥费”,随着对DOM访问次数的增加,费用也就越高,因此我们需要尽量减少“过桥”的次数,也就是减少对DOM的访问和修改,而这也是优化DOM性能的手段之一。对DOM的修改相比于对DOM的访问,在性能上的影响会更大,这是因为它会带来浏览器的重排或重绘。原创 2023-01-16 11:39:57 · 1989 阅读 · 0 评论 -
JavaScript 变量提升和函数提升
在JavaScript中,一个变量的定义与调用都是会在一个固定的范围中的,这个范围我们称之为作用域。通过var关键字定义的变量会发生变量提升,变量提升是将变量的声明提升到函数顶部的位置,而变量的赋值并不会被提升。不仅通过var定义的变量会出现提升的情况,使用函数声明方式定义的函数也会出现提升。函数提升会将整个函数体一起进行提升,包括里面的执行逻辑。函数表达式,是不会进行函数提升的。原创 2023-01-16 10:51:52 · 461 阅读 · 0 评论 -
JavaScript 事件案例
统计输入字符数量验证输入内容搜索框复选框的全选和反选下拉列表自定义鼠标右键菜单ctrl+enter发送消息规定范围内拖拽元素两元素碰撞切换图片内容滚动条鼠标滚动缩放图片原创 2023-01-13 13:55:02 · 502 阅读 · 0 评论 -
JavaScript Event对象
事件在浏览器中是以Event对象的形式存在的,每触发一个事件,就会产生一个Event对象。该对象包含所有与事件相关的信息,包括事件的元素、事件的类型及其他与特定事件相关的信息。原创 2023-01-13 13:50:28 · 415 阅读 · 1 评论 -
JavaScript 事件委托
事件委托是利用事件冒泡原理,管理某一类型的所有事件,利用父元素来代表子元素的某一类型事件的处理方式。原创 2023-01-13 13:44:18 · 395 阅读 · 0 评论 -
JavaScript instanceof原理
在使用typeof运算符时,存在一个比较大的问题,即对于任何引用数据类型的值都会返回“object”,从而无法判断对象的具体类型。因此,在JavaScript中,可以使用instanceof运算符判断一个对象是否属于某个构造函数的实例。其原理是通过检查对象的原型链来确定对象是否是指定构造函数的实例。原创 2023-01-12 14:10:32 · 563 阅读 · 0 评论 -
JavaScript call() apply() bind()
在JavaScript中,call() apply() bind() 这3个函数都是用于改变函数执行时的上下文,也就this的指向。call()和apply()的作用相同,都是立即调用一个函数并且可以指定函数内部的this指向。它们的区别在于传递参数的方式不同:call()接受一系列参数列表,而apply()接受一个数组作为参数。bind()方法返回一个新的函数,将原函数中的this绑定到指定的对象,并且可以预先设置部分参数。与call()和apply()不同,bind()不会立即执行函数,而是返回原创 2023-01-11 15:06:34 · 323 阅读 · 0 评论 -
JavaScript 事件流
JavaScript事件流指一个事件在HTML文档中传播和被处理的全过程。事件流有三个阶段:捕获阶段(Capturing Phase):从最外层的祖先元素开始,逐级往下,直到事件触发元素(目标元素)所在的元素。目标阶段(Target Phase):事件到达目标元素。冒泡阶段(Bubbling Phase):从目标元素开始往上冒泡,逐级往上,直到最外层的祖先元素。js中只可以执行捕获或冒泡阶段。原创 2023-01-10 15:37:26 · 548 阅读 · 0 评论 -
JavaScript 尺寸和坐标
JavaScript client screen offset scroll原创 2023-01-09 10:57:31 · 775 阅读 · 1 评论 -
JavaScript Math对象
常用属性和方法案例获取指定范围内的随机数获取指定范围内的整数生成随机数验证码生成随机颜色值原创 2022-12-16 09:25:00 · 258 阅读 · 0 评论 -
JavaScript 日期对象
创建日期对象常用方法格式化日期时间格式化使用moment.js格式化验证日期是否合法日期计算比较两日期大小计算日期前后N天的日期计算两日期的时间差倒计时功能原创 2022-12-15 17:22:05 · 325 阅读 · 0 评论 -
JavaScript 字符串对象
概述常用属性和方法案例统计字符个数统计字符串有多少个数字原创 2022-12-15 16:27:02 · 261 阅读 · 0 评论 -
JavaScript Ajax
Ajax(Asynchronous JavaScript and XML)是一种用于在不刷新整个页面的情况下向服务器发送请求并接收响应的技术。它利用了浏览器提供的 XMLHttpRequest 对象,使得 JavaScript 能够在后台与服务器进行通信。原创 2021-06-27 16:38:55 · 135 阅读 · 0 评论 -
JavaScript Cookie & localStorage
文章目录Cookie概述操作Cookie查询设置encodeURIComponent & decodeURIComponentexpires & max-agedomainpathHttpOnlysecure封装CookieLocalStorage概述使用设置查询删除Cookie概述Cookie全称HTTP Cookie,是浏览器存储数据的一种方式一般会自动随着浏览器每次请求发送到服务器可以利用Cookie跟踪统计用户访问该网站的习惯,如:访问时间、访问页面、停留时间不要在Co原创 2021-06-20 22:34:24 · 297 阅读 · 2 评论 -
ES6 Module 模块
ES6中的module指的是JavaScript模块化规范中的一种。它通过export和import语法来导出和导入模块中的变量、函数、类等内容。使用ES6模块化的好处包括:解决了模块化的问题。消除了全局变量。管理加载顺序。原创 2021-06-17 17:29:27 · 909 阅读 · 0 评论 -
ES6 对象和类
对象是JavaScript中重要的数据结构,而ES6对它进行了重大的升级,包括数据结构本身和对象新增的函数,为开发带来了极大的便利。在JS中,生成实例对象是通过构造函数ES6则提供了Class概念,通过class定义类一个类必须有方法,new对象时会自动调用//实例属性 name;age;//构造函数 constructor(name , age) {} //实例方法 getName = function() {} show() {原创 2021-06-16 17:15:57 · 93 阅读 · 0 评论 -
ES6 Promise
Promise是在ES6中新增的一种用于解决异步编程的方案。Promise可以用来解决层层嵌套的回调函数问题(回调地狱)。原创 2021-06-15 15:24:32 · 283 阅读 · 1 评论 -
ES6 Set和Map
ES6中新增了一种数据结构Set,表示的是一组数据的集合,Set集合具有无序、没有重复值的特性。ES6增加了另一种数据结构Map。本质是一种键值对的组合。与对象字面量不同的是,对象字面量的键只能是字符串,对于非字符串类型的值会采用强制类型转换成字符串,而Map的键却可以由各种类型的值组成。原创 2021-06-14 00:30:11 · 153 阅读 · 2 评论 -
ES6 特性
ES与JS关系:JavaScript(浏览器端)= ECMAScript(语法 API)+ DOM +BOMES6兼容性:主流浏览器的最新版本基本都支持ES6规范IE等老版本浏览,可以通过Babel转码兼容原创 2021-06-13 20:44:10 · 177 阅读 · 0 评论 -
JavaScript RegExp正则类型
正则表达式(regular expression)用于描述字符串的构成模式,经常用于检查字符串是否符合预定的格式要求ECMAScript通过RegExp类型支持正则表达式。原创 2021-06-13 13:30:22 · 173 阅读 · 0 评论 -
JavaScript 内置对象
文章目录内置对象概述MathDate倒计时功能MapSet内置对象概述JavaScript提供了一些预先定义好的对象可以直接使用,我们称这种对象为内置对象。Math//幂Math.pow(4, 2) //16//开方Math.sqrt(16) //4//获取最小值Math.min(1, 3, 4, 5) //1//获取最大值Math.max(1, 3, 4, 5) //5//向上取整Math.ceil(1.5) //2//向下取整Math.floor(1.5)原创 2021-06-11 17:53:33 · 102 阅读 · 0 评论 -
JavaScript 对象
对象(object)是JavaScript的核心概念,也是最重要的数据类型。JavaScript的所有数据都可以被视为对象。JavaScript是一门面向对象的语言,但JavaScript没有类的概念,一切都是对象。任意一个对象都是某种引用类型的实例,都是通过已有的引用类型创建。引用类型可以是原生的,也可以是自定义的。原创 2021-06-11 16:58:12 · 305 阅读 · 0 评论 -
JavaScript BOM
浏览器每次打开一个窗口,就会为这个窗口生成一个window对象,并且为这个窗口内部的页面即HTML文档,生成一个document对象,这样可以通过document对象操作页面里的元素。在JavaScript中,一个浏览器窗口就是一个window对象,窗口里的HTML文档就是一个document对象,document对象就是window对象的子对象。window对象的所有属性和方法都是全局性的。而且JavaScript中的所有全局变量都是window对象的属性,所有全局函数都是window对象的方法。原创 2021-06-10 13:40:11 · 145 阅读 · 0 评论