JavaScript
文章平均质量分 94
MagnumHou
精通HTML5,CSS3,JavaScript,JQuery,Node,Vue,React等单词的拼写
展开
-
【TS篇一】TypeScript介绍、使用场景、环境搭建、类和接口
TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并不依赖于浏览器的支持,也并不会带来兼容性问题。TypeScript 是 JavaScript 的超集,这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展,如 class / interface / module 等。原创 2023-11-03 20:06:10 · 502 阅读 · 0 评论 -
【ES6知识】async 函数与代码优雅写法
async 函数与代码优雅写法原创 2023-10-07 14:07:06 · 279 阅读 · 0 评论 -
【ElementUI】el-table中复选框禁用处理
el-table中复选框禁用处理原创 2023-09-20 17:00:32 · 4982 阅读 · 0 评论 -
【ES6知识】Iterator迭代器与 class类
Iterator迭代器与 class类原创 2023-09-19 09:09:24 · 335 阅读 · 0 评论 -
【ES6知识】 Reflect 与 Proxy
Reflect 与 Proxy原创 2023-09-19 09:02:33 · 360 阅读 · 0 评论 -
【ES6知识】ESModule 模块化
ESModule 模块化原创 2023-09-14 14:20:39 · 622 阅读 · 0 评论 -
Array.apply(null,{length: 99}) 逻辑解析
本文的主要目的源于Vue中一个很有意思的案例:就是通过 lodash-es 打乱下图中文字的顺序,并让其变化过程中呈现动画效果。里面涉及到了 vue3 的 move 动画,shuffle 打乱数组数据的函数、页面的 grid 布局,而本文的主要目的是讲解快速生成所需数组的方式,里面涉及到一些 ES6 的数组知识,如果不够了解,最好去看一下。这里简单列举一下相关的知识:原创 2023-02-23 15:08:45 · 365 阅读 · 0 评论 -
【ES6知识】简介、语法变化、解构赋值
【ES6知识】简介、语法变化、解构赋值原创 2023-09-12 10:03:42 · 662 阅读 · 0 评论 -
【HTML5高级第一篇】Web存储 - cookie、localStorage、sessionStorage
Web存储 - cookie、localStorage、sessionStorage原创 2023-09-04 10:35:20 · 1706 阅读 · 0 评论 -
【ES5新特性四】数组新增方法
ES5新增数组方法原创 2023-08-30 09:39:24 · 160 阅读 · 0 评论 -
【ES新特性三】Object 原型、原型链相关方法
此方法为 Object.prototype 原型方法,Object.prototype 作为任意对象在原型链上的顶级原型对象,在 JS 中定义的任意一个对象(自定义对象、数组对象等都可以调用子方法)。**Object.getOwnPropertyNames()**方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括 Symbol 值作为名称的属性)组成的数组。方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。原创 2023-08-30 09:35:41 · 1276 阅读 · 0 评论 -
【ES5新特性二】新增对象属性特性
方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)ES5中定义了一个属性描述符对象(property descriptor),这个对象属性和他们所描述的属性特性是同名的。方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象。方法用来获取一个对象的所有自身属性的描述符。原创 2023-08-30 09:30:38 · 253 阅读 · 0 评论 -
【ES5新特性一】 严格模式语法变化、全局的JSON对象、编码和解码的方法
严格模式语法变化、全局的JSON对象、编码和解码的方法原创 2023-08-30 09:16:19 · 481 阅读 · 0 评论 -
【JavaScript高级】继承
传统JS中提供了几种继承的方式:类式继承(原型继承)、构造函数式继承(apply和call方法)、组合式继承(前面两种组合)、寄生式继承(类式继承的优化)、寄生组合式继承(寄生继承和组合继承的结合)它是从已有的类中派生出新的类,新的类能吸收已有类(基类、父类)的数据(特征和行为),并拓展属于自己的新的能力。因为对象属于复杂数据类型,而复杂数据类型的赋值是引用的赋值,跟简单数据类型的赋值是不一样的。在传统的JS中不存在类的概念,我们使用构造函数模拟类,并通过一些方式实现类与类之间的继承。原创 2023-08-25 08:53:35 · 229 阅读 · 0 评论 -
【JavaScript高级】面向对象编程
要理解面向对象,就要理解什么是 面向过程。原生JavaScipt案例合集JavaScript +DOM基础JavaScript 基础到高级Canvas游戏开发面向过程注重的是解决问题的步骤,利用函数去实现每一步过程,没有类和对象的概念,常见的面向过程的语言 C 语言。面向对象注重使用对象去解决某一个问题,具有类和对象的概念。类是抽象的,注重的是一类的东西,比如说人类、鸟类、猫科等等,从这些类中拿到具体的对象,对象就是一个比较明确的个体,利用这个对象去解决针对性的问题。原创 2023-08-24 10:35:40 · 604 阅读 · 0 评论 -
【JS交互基础】几个特殊的对象 Global、Window、Arguments、this
每个函数都有一个arguments属性,表示函数的实参集合,这里的实参是重点,就是执行函数时实际传入的参数的集合。浏览器把Global对象作为window对象的一部分实现了,因此,所有的全局属性和函数都是window对象的属性和方法。第三点:在严格的模式下,arguments对象在运行的时候不可以修改,修改arguments对象不会影响到实际的函数参数。第六点:arguments的callee属性可以返回对应的原函数,达到调用自身函数的效果,但是在严格模式中是不适用的。原创 2023-08-23 09:06:00 · 449 阅读 · 0 评论 -
【JS深层解析】内存
接触过 C 语言的小伙伴应该了解:C语言拥有底层最原始的内存管理办法,例如:malloc() 和 free()方法,它们被开发者用来从操作系统中分配和释放内存。然而在JavaScript这门语言中,当我们创建了一个东西(可以被读写、传递的数据),浏览器中的 js 引擎会根据创建这个东西的数据类型进行内存的分配:基本数据类型在栈区分配内存,引用数据类型在堆区分配内存。当创建的这个东西不再使用时,浏览器会将其“自动”释放,这个过程被称作“垃圾回收”。原创 2023-08-18 14:43:43 · 161 阅读 · 0 评论 -
【JS交互埋坑】事件函数自动将数字字符串String转为数值Number
1. 事件函数自动将数字字符串String转为数值Number 2.批量定义元素事件不生效问题原创 2023-08-10 09:37:45 · 226 阅读 · 0 评论 -
【JS交互篇】事件和元素操作
每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,自然性能就越差了(内存不够用,是硬伤,哈哈)比如上面的100个li,就要占用100个内存空间,如果是1000个,10000个呢,那只能说呵呵了,如果用事件委托,那么我们就可以只对它的父级(如果只有一个父级)这一个对象进行操作,这样我们就需要一个内存空间就够了,是不是省了很多,自然性能就会更好。与DOM2级方法一样,可以为同一个按钮添加两个不同事件处理程序,但是IE事件处理程序的执行顺序是以相反的顺序触发,即先触发的是后面添加的事件。原创 2023-08-10 08:49:14 · 271 阅读 · 0 评论 -
【JS交互篇】DOM操作基础
DOM(Document Object Model)文档对象模型,用来表示和操作html或xml文档内容的基础API;当网页被加载时,浏览器会创建页面的文档对象模型DOM,而DOM模型被构造为对象的树(Dom Html Tree);DOM包含了所有的html标签元素、文本字符串、甚至是html注释;利用DOM中的属性和方法,使程序有能力动态的访问和更新文档中的内容、结构以及样式,这样就使得页面的交互性大大增强;原生JavaScipt案例合集JavaScript +DOM基础。原创 2023-08-08 09:00:36 · 222 阅读 · 0 评论 -
【JS交互篇】BOM基础、Window、Location、Navagator、Screen、History对象
在 JavaScript 语言中有三种对象:内置对象、宿主对象、自定义对象。宿主对象就是执行 JavaScript 脚本的环境所提供的对象。对于网页编程来说,js是运行在浏览器上的,所以对于网页编程来说,宿主对象就是浏览器对象,而学习浏览器对象,就要学习浏览器对象模型,即BOM。JavaScript 基础到高级Canvas游戏开发原生JavaScipt案例合集JavaScript +DOM基础BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window ( 即:窗口对象 );原创 2023-08-04 08:57:03 · 158 阅读 · 0 评论 -
【前端JS交互篇】数组对象、字符串对象、正则表达式、Date日期对象
【前端JS交互篇】数组对象、字符串对象、正则表达式、Date日期对象原创 2023-08-01 09:08:50 · 201 阅读 · 0 评论 -
【前端JS交互篇】函数、参数、返回值、闭包函数、递归函数、内存、模块化编程
当声明函数后,在函数的内部(大括号函数体位置)形成自己一个独立的内部区域,这个内部区域就叫做函数作用域。函数作用域相对于整个脚本区域来讲,只是一个很小的独立区域,这个很小的区域我们通常叫它局部作用域。而整个脚本区域,我们通常叫它全局作用域。全局作用域:函数外的区域叫做全局作用域;在全局作用域中声明的变量,可以在脚本的任何位置(包裹函数内)都可以对其进行调用,这个变量我们称为全局变量。全局变量的生命周期:从文件被执行时创建(当前就是页面被加载),页面关闭后销毁。局部作用域。原创 2023-07-27 13:40:05 · 627 阅读 · 0 评论 -
【前后端数据交互】原生JS的Fetch请求封装
AJAX 是最早出现请求数据的方式,它不需要不需要刷新整个页面即可更新部分数据。属于原生 JS 范畴 ,技术核心是 XMLHttpRequest 对象。fetch() 方法用于发起获取资源的请求。它返回一个 promise,这个 promise 会在请求响应后被 resolve,并传回 Response 对象。原创 2023-07-24 15:42:29 · 842 阅读 · 0 评论 -
【原生基础篇】JavaScript中常用的数据输出方式解析
JavaScript中常用的数据输出方式解析原创 2023-07-14 10:20:47 · 323 阅读 · 0 评论 -
【前端JS交互基础】运算符、流程语句
算术运算符用来执行数学运算。流程语句用于控制语句的执行顺序原创 2023-06-25 08:48:12 · 689 阅读 · 0 评论 -
【前端JS交互篇】ECMA核心语法 ——常量、变量、数据类型、各种弹框
常量:又称字面量,字面的意思就是你看到什么就是什么。在程序执行过程中不会发生改变原创 2023-06-22 12:37:36 · 466 阅读 · 0 评论 -
【数据请求篇】Fetch 包装器 Mande
Fetch 是 ES6 提出的一套用于进行前后端交互的工具,被称为下一代 Ajax 技术,是 XMLHttpRequest 的升级版,用于在 JavaScript 脚本里面发出 HTTP 请求,采用 Promise 方式来处理数据。API 简洁明了,并且提供了比 XMLHttpRequest 更强大和灵活的功能集。一个简单、轻巧、易于使用的 fetch 包装器。原创 2023-06-16 17:16:29 · 500 阅读 · 0 评论 -
【JavaScript高级】Intl.DateTimeFormat、Navigator.sendBeacon埋点等冷门但好用的API方法
Intl.DateTimeFormat、Navigator.sendBeacon埋点\SVG等冷门但好用的API方法原创 2023-05-12 14:08:19 · 2369 阅读 · 0 评论 -
ES5 新特性一览表
除了正常的运行模式(混杂模式),ES5中添加了第二种运行模式:“严格模式”(strict mode)顾名思义,这种模式,使得JavaScript在更严格的语法下运行"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。另一方面,同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下将不能运行。原创 2023-05-04 09:16:31 · 934 阅读 · 0 评论 -
lodash-es 工具库常用工具函数和案例详解
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库,算是从分离出来的超集。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。lodash为了良好的浏览器兼容性,它使用了旧版 es5 的模块语法;而lodash-es则使用了 es6 的模块语法,这让 webpack 之类的打包工具可以对其进行tree shake。原创 2023-04-04 13:47:23 · 11776 阅读 · 2 评论 -
【高频触发事件优化】封装节流和防抖
最近项目有一个数据导出功能,之前后端都是同步处理,前端做防抖处理,数据量特别大的时候,造成响应时间特别长。这次后端做了优化处理,将后端做了异步处理,响应特别快,但是需要再额外的下载页面去处理导出,这样造成用户下载后直接进入下载页面需要等待一段时间才能看到下载文件,而且对于后端来讲,防抖虽然可以控制频率(默认1s),但是他想要把时间控制在 10s 左右,才能实现二次下载。如果继续使用防抖,如果直接定 10s ,就会造成第一次点击无效的点击,当然这个可以通过一个变量动态控制这个时间,但是稍显麻烦。原创 2023-03-30 14:18:18 · 703 阅读 · 0 评论 -
【项目数据优化一】敏感数据脱敏处理
随着信息化发展与数字转型,企业有大量的数据二次利用(secondaryuse)与挖掘需求,为了平衡数据利用与隐私保护(敏感数据保护)问题,数据脱敏——作为一种成熟且应用灵活的数据安全技术,成为当前绝大数企业在数据安全治理与建设过程中的必选技术与措施。原创 2023-03-12 17:25:34 · 1659 阅读 · 0 评论 -
【JS代码优化二】ES6 数组和对象篇
ES6 数组和对象新增方法原创 2023-03-07 09:54:54 · 489 阅读 · 0 评论 -
【JS 经典面试题】全局变量和局部变量
JS中最经典的全局变量和局部变量问题1 var a = 10;2 function test(){3 a = 100;4 console.log(a);5 console.log(this.a);6 var a;7 console.log(a);8 }9 test();解析:Javascript在执行前会...原创 2023-03-06 17:00:44 · 192 阅读 · 0 评论 -
【JS代码优化一】分支优化篇
序:如何让代码看起来更优雅?代码是由文字堆叠起来的可以被机器执行的程序。它记载着相关信息(状态)、表达相关的情绪(函数),所以如何能够写出简洁、优雅、健壮、可维护性强的程序至关重要。本系列笔记的目的,就是带着大家如何实现更有效、更优雅的编程。笔记涵盖:运算符、流程语句、设计模式、ES6 新增方法等多个方面。原创 2023-03-06 12:48:24 · 505 阅读 · 0 评论