JavaScript
文章平均质量分 75
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式
猫老板的豆
旁观自己 善待朝夕
展开
-
通俗讲解 发布-订阅模式
发布-订阅模式是一种消息传递模式,它允许发送者(发布者)发送消息而不关心谁将接收这些消息,同样地,接收者(订阅者)可以监听他们感兴趣的消息,而不需要知道这些消息来自哪里。这种模式在JavaScript中常用于实现事件处理系统,如DOM事件监听或自定义事件系统。原创 2024-06-24 19:05:29 · 850 阅读 · 0 评论 -
前端常见的加密方式
Base64btoa()atob()MD5sha.jsAESCryptoJS“是否可逆” 表示加密后是否可以解密回原始数据。“安全性” 是指算法抵抗攻击的能力。Base64不是加密算法,因此安全性低。MD5已被证明存在碰撞,因此安全性中等。SHA系列和AES、HMAC则具有更高的安全性。评分为综合安全性评分(0-10分)只有AES(称加密)和RSA(非称加密)属于加密算法,可逆,可加密可解密Base64是编码,可逆,可编码可解码MD5和SHA属于哈希算法,HMAC。原创 2024-06-05 12:02:10 · 988 阅读 · 0 评论 -
函数柯里化
柯里化(Currying)是一个在函数式编程中常见的概念,它指的是将一个接受多个参数的函数转换成一系列使用一个参数的函数。柯里化的主要优势在于它可以增加函数的复用性,并使得函数的组合更加灵活。举例来说,一个接收3个参数的普通函数,在进行柯里化后, 柯里化版本的函数接收一个参数并返回接收下一个参数的函数, 该函数返回一个接收第三个参数的函数。最后一个函数在接收第三个参数后, 将之前接收到的三个参数应用于原普通函数中,并返回最终结果。Javascript实际应用中的柯里化函数,可以传递一个或多个参数。原创 2024-04-26 18:36:39 · 510 阅读 · 0 评论 -
axios详解
Axios 是一个功能强大且易于使用的基于 Promise 的 HTTP 客户端库。可以用在浏览器和 node.js 中。这意味着它结合了 Promise 的特性和 HTTP 客户端的功能,为用户提供了一个强大且灵活的工具来发送 HTTP 请求和处理响应。原创 2024-03-29 17:19:15 · 2357 阅读 · 1 评论 -
js构造函数
通过new 函数名来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。之所以有构造函数与普通函数之分,主要从功能上进行区别的,构造函数的主要 功能为 初始化对象,特点是和new 一起使用。new就是在创建对象,从无到有,构造函数就是在为初始化的对象添加属性和方法。构造函数定义时首字母大写(规范)。此时,p1就是一个新对象。原创 2023-10-16 17:44:38 · 283 阅读 · 0 评论 -
js实现日期天数、时分秒的倒计时
在用js实现倒计时的时候,可以先算出截止日期和今天之间相差的毫秒数,然后进行相应的比例进行day、month、hour、minute、second的计算,便可以准确的计算出相差的时间。原创 2022-12-13 09:15:31 · 695 阅读 · 0 评论 -
H5一键复制 兼容iOS
H5一键复制 兼容iOS原创 2022-10-24 09:23:10 · 1266 阅读 · 0 评论 -
消灭异步回调,还得是async-await
现在知道了,async-await是promise的语法糖了吧,不仅让我们书写代码时更加流畅,而且增强了代码的可读性。特别注意的是虽然async-await是建立在Promise机制之上的,但是并不能取代其地位,他们两者相辅相成,息息相关。其实async-await不止是Promise的语法糖,还是Generator的语法糖,Generator是什么?我们下篇见分晓。作者来碗盐焗星球链接https来源稀土掘金。...转载 2022-07-28 11:44:24 · 269 阅读 · 0 评论 -
js 截取字符串中url地址
function getUrl (str) { var reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g; str = str.match(reg); if (str && str.length > 0) { return str[0]; } return null;}// 例:获取抖原创 2021-12-20 11:59:42 · 1559 阅读 · 0 评论 -
JS设备判断
判断是移动还是PC设备export const isMobile = () => { if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) { return 'mobile'; } return 'desktop';}判断是否是苹果还是安卓移动设备export const isAppleMobileDe原创 2021-10-24 12:12:10 · 497 阅读 · 0 评论 -
整理大厂高频核心前端面试题,五万多字,面试必考
如果 Vue 组件中的 data 是个对象,那么所有复用这个组件的地方,都在使用这个组件里面唯一的一个 data,所有使用组件的地方的 data 都会指向栈内这一个 data 的地址,那么会造成。等待执行栈和微任务队列都执行完毕才会执行,并且在执行完每一个宏任务之后,会去看看微任务队列有没有新添加的任务,如果有,会先将微任务队列中的任务清空,才会继续执行下一个宏任务。异步:是指不进入主线程,而进入任务队列的任务,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程。原创 2021-09-13 11:07:08 · 2482 阅读 · 2 评论 -
JS实现数组扁平化的几种常见方式
1. 利用es6新方法2. 利用递归2.1 利用 some 递归2.2 利用 map 递归2.3 利用 reduce 递归3. 利用 toString4. 利用 join原创 2021-09-13 10:57:22 · 774 阅读 · 0 评论 -
手写常见JS方法
手写判断数据类型手写深拷贝手写对象是否全等手写防抖手写节流手写数组扁平化手写数组去重手写new函数手写ajax原创 2021-08-17 11:57:04 · 673 阅读 · 0 评论 -
全相等函数 isEqual
手写全相等函数 isEqual , 限制:{} ,[]// 判断obj是否为对象function isObject(obj) { return (typeof obj === 'object' && obj !== null);}//全相等函数function isEqual(obj1, obj2) { //如果其中一个不为对象,则判断两个是否严格相等 if (!isObject(obj1) || !isObject(obj2)) { re原创 2021-08-12 17:06:38 · 1009 阅读 · 0 评论 -
细说 async/await
async/await 是 JavaScript 中用于处理异步操作的一对关键字。它们提供了一种更直观、更易于理解的方式来编写异步代码,使异步代码看起来更像同步代码。原创 2021-08-02 17:16:20 · 846 阅读 · 0 评论 -
DOM 对象和 BOM 对象
BOM对象BOM(Browser Object Model)是指浏览器对象模型,可以对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 JavaScript 有能力与浏览器"对话"。1. window对象window对象是客户端JavaScript最高层对象之一,由于window对象是其它大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用。例如:window.document.write原创 2021-07-29 14:47:36 · 687 阅读 · 0 评论 -
彻底掌握 Promise
一、Promise 出现的原因在 Promise 出现以前,我们处理一个异步网络请求,大概是这样:// 请求 代表 一个异步网络调用。// 请求结果 代表网络请求的响应。请求1(function(请求结果1){ 处理请求结果1})看起来还不错。但是,需求变化了,我们需要根据第一个网络请求的结果,再去执行第二个网络请求,代码大概如下:请求1(function(请求结果1){ 请求2(function(请求结果2){ 处理请求结果2 })})看起来原创 2021-06-15 14:48:03 · 2752 阅读 · 3 评论 -
common.js
function isEmpty(v) { switch (typeof v) { case 'undefined': return true; case 'string': if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true; break; case 'boolean': if (!v) return true;原创 2020-08-10 10:54:29 · 273 阅读 · 0 评论 -
js 监听返回键
jswindow.onload = function(){ window.addEventListener('popstate', function (e) { alert('监听到了返回'); }); window.history.pushState('forward', null, '#'); //在IE中必须得有这两行 window.history.forward(1);}jq$(document).ready(function(e) {原创 2020-07-10 11:04:18 · 638 阅读 · 0 评论 -
JS数据结构简介
数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装:一个数据结构可被视为两个函数之间的接口,或者是由数据类型联合组成的存储内容的访问方法封装常见的数据结构:数组(Array)需要一块连续的内存空间来存储,对内存的要求比较高栈(Stack)先进后出堆(Heap)"无序"的key-value"键值对"存储方式。存取方式跟顺序没有关系,不局限出入口队列(Queue)先进先出 - 队列在尾部添加新元素,并从顶部移除元素链表(Linked List)不需要一块连续原创 2020-06-05 16:26:55 · 396 阅读 · 0 评论 -
JS 跨域与同源
jsonp跨域jsonp是一种跨域通信的手段,它的原理其实很简单:利用<script>标签的src属性跨域由于使用script标签的src属性,因此只支持get方法function jsonp(req){ // 动态创建script标签 var script = document.createElement('script'); var url = req.url + '?callback=' + req.callback.name; script.src =原创 2020-06-05 13:19:04 · 1071 阅读 · 1 评论 -
CORS 跨域资源共享
简介CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。是目前主流的跨域解决方案。CORS需要浏览器和服务器同时支持。目前,所有现代浏览器都支持该功能(IE浏览器不能低于IE10。IE8+:IE8/9需要使用XDomainRequest对象来支持CORS)。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。原创 2020-06-05 12:44:54 · 891 阅读 · 1 评论 -
手写一个Promise
什么是promisePromise异步操作详解Promise详细用法1. Promise代码基本结构实例化Promise对象时传入一个函数作为执行器,有两个参数(resolve和reject)分别将结果变为成功态和失败态。当实例化Promise时,构造函数中就要马上调用传入的executor函数执行。我们可以写出基本结构:function Promise(executor) { this.state = 'pending'; //状态 this.value = undefined原创 2020-05-29 15:45:06 · 517 阅读 · 0 评论 -
js检测数据类型的几种方法总结
当我们把Array自身的toString()方法删除之后,再次使用它时,由原型链它会向上查找这个方法,即Object的toString(),也便将Object上的toString()方法作用在数组上,得出其数据类型[object Array]这里声明了一个Fn的构造函数,并且把他的原型指向了Array的原型,所以这种情况下,constructor也显得力不从心了。因此,在想要得到对象的具体类型时,应该调用。方法(返回对象的具体类型),所以采用。来判断类型看起来是完美的,然而,方法时,根据原型链的知识,原创 2020-05-25 16:44:25 · 1985 阅读 · 1 评论 -
Javascript 本地存储:cookie、sessionStorage、localStorage、indexedDB
同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的(不同浏览器、同一个页面也是不共享的)。虽然 Web Storage对于存储较少量的数据很有用,但对于存储更大量的结构化数据来说,这种方法不太有用。的小型文本数据,它由一个名称(Name)、一个值(Value)和其它几个用于控制 cookie有效期、安全性、使用范围的可选属性组成。存储在硬盘上的cookie可以在不同的浏览器进程间共享,比如两个IE窗口。而对于保存在内存的cookie,不同的浏览器有不同的处理方式。原创 2020-05-20 15:36:03 · 646 阅读 · 1 评论 -
ES6之 Generator 函数
generator(生成器)是ES6标准引入的新的数据类型。一个generator看上去像一个函数,但可以返回多次。Generator函数有两个特征:function命令与函数名 之间有一个星号*函数体内部使用 yield吾句定义不同的内部状态function* hello () { yield "hello"; yield "world"; return "done";}let h = hello();console.log(h.next()); //{valu原创 2020-05-09 21:32:03 · 562 阅读 · 0 评论 -
ES6之Class(类)
JavaScript 语言的传统方法是通过构造函数定义并生成新对象,ES6中引入 class 的概念,通过 class 关键词自定义类。class User { constructor(name, age = 20) { // 构造方法 this.name = name; // 添加属性并且赋值 this.age = age; } sayHello() { // 定义方法 return "hello"; } stati原创 2020-05-09 21:26:16 · 615 阅读 · 0 评论 -
ajax、axios、fetch的区别
axios不是xhr的子集,axios利用xhr进行了二次封装的请求库,xhr只是axios中的其中一个请求适配器,axios在nodejs端还有个http的请求适配器;axios和vue没关系,axios也不是随着Vue的兴起才广泛使用的,axios本身就是独立的请求库,跟用什么框架没关系;很多小伙伴可能会误以为 Ajax 是发请求的一种方式,或者把 XMLHttpRequest 与 Ajax 划等号,其实这是错误和片面的。,是一个概念模型,它囊括了很多技术,并不特指某一技术,它很重要的特性之一就是。原创 2020-05-09 17:32:16 · 1048 阅读 · 1 评论 -
JavaScript常用数组处理
join()数组转字符串 用指定字符串连接let arr = [1,2,3,4,5];console.log(arr.join()); // "1,2,3,4,5"console.log(arr.join('-')); // "1-2-3-4-5"console.log(arr); // [1,2,3,4,5](原数组不变)push()、pop()push(): 可以接收...原创 2019-03-21 17:54:45 · 720 阅读 · 0 评论 -
JavaScript之作用域
作用域作用域是指程序源代码中定义变量的区域。作用域规定了如何查找变量,也就是确定当前执行代码对变量的访问权限。JavaScript 采用词法作用域(lexical scoping),也就是静态作用域。静态作用域与动态作用域因为 JavaScript 采用的是词法作用域,函数的作用域在函数定义的时候就决定了。而与词法作用域相对的是动态作用域,函数的作用域是在函数调用的时候才决定的。让...原创 2019-03-29 17:49:27 · 227 阅读 · 1 评论 -
JavaScript 事件流、事件代理(委托)
事件JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。事件举例:鼠标点击页面或图像载入鼠标悬浮于页面的某个热点之上在表单中选取输入框确认表单键...原创 2019-04-04 16:23:49 · 474 阅读 · 1 评论 -
js Math对象的常用方法
Math 对象Math 对象用于执行数学任务。属于对象数据类型 typeof Math => ‘object’Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。Math.abs() 获取绝对值Math...原创 2019-04-01 10:50:12 · 259 阅读 · 0 评论 -
JavaScript防抖和节流
防抖 = 回城节流 = 技能防抖:就是一定时间内,只会执行最后一次任务;n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时将多次高频操作优化为只在最后一次执行用户输入,只需再输入完成后做一次输入校验即可。防止用户多次提交表单,在短时间内频繁操作同一按钮而导致出现异常情况滚动条、 resize 、拖拽 事件,通常只执行最后一次节流:就是一定时间内,只执行一次;n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效将高频操作优化成低频操作滚动加载,加载更多或滚到底部监听。原创 2019-04-02 10:11:55 · 7513 阅读 · 5 评论 -
JavaScript函数柯里化
函数柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。function sum(a,b,c) { return a+b+c;}console.log(sum(1,2,3)); // 6function sum(a) { return function(b) { retur...原创 2019-04-11 15:17:12 · 321 阅读 · 0 评论 -
浅谈事件循环Event Loop
首先,JavaScript是一个单线程的脚本语言。JavaScript是单线程的,可以说这是JavaScript最核心也是最基本的特性。单线程就意味着同一时间只能干一件事其次,JavaScript需要异步如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验。但JavaScript虽然是单线程,...原创 2019-03-29 13:42:50 · 598 阅读 · 0 评论 -
localStorage与sessionStorage的封装(可设置过期时间)
/** * localStorage * @调用:_local.set('access_token', '123456', 5000); * @调用:_local.get('access_token'); */var _local = { //存储,可设置过期时间 set(key, value, expires) { let params = { key...原创 2019-06-19 16:38:01 · 12868 阅读 · 0 评论 -
js获取url中的参数值(黑科技)
以此 url 为例:http://localhost/index.html?id=310&name=xia&phone=13800138000//获取url传递的信息let query = location.search; // ?id=310&name=xia&phone=13800138000let searchParams = new URL...原创 2019-06-17 14:15:03 · 1941 阅读 · 0 评论 -
JS判断浏览器当前运行环境
JavaScript详细判断浏览器运行环境function BrowserType() { // 权重:系统 + 系统版本 > 平台 > 内核 + 载体 + 内核版本 + 载体版本 > 外壳 + 外壳版本 const ua = navigator.userAgent.toLowerCase(); const testUa = regexp => regexp.tes...转载 2020-04-11 09:41:45 · 786 阅读 · 0 评论 -
H5移动端判断手势滑动方向
移动端判断手势滑动方向原创 2017-08-23 17:55:37 · 2535 阅读 · 3 评论 -
JavaScript常用字符串处理
字符串处理let str = "Hello world!";// 返回某个指定的字符串值在字符串中首次出现的位置,不存在则返回-1 lastIndexOf()console.log(str.indexOf("e")) // 1 // 与indexOf类似,但是它返回指定的值,而不是字符串的位置。 不存在则返回nullconsole.log(str.match("H")) // ...原创 2019-03-21 16:29:35 · 281 阅读 · 0 评论