JavaScript
文章平均质量分 66
不二博客
编码是我快乐,分享使我成长。
展开
-
基于 Promise/A+ 规范手写 Promise
Promise是基于发布订阅模式实现的。then方法对于还在pending的任务,将回调函数和onRejected存入数组。Promise的resolvereject方法将数组中的方法依次执行方法会返回一个新的Promise方法以便链式调用。原创 2023-02-28 09:15:10 · 224 阅读 · 0 评论 -
设计模式之发布订阅模式
发布订阅模式是一种设计模式,它是一种编程思想,它可以帮助我们解决”回调地狱“的问题。Promise也是借鉴了发布订阅设计模式的思想来实现的。原创 2023-02-20 09:10:52 · 558 阅读 · 0 评论 -
这一定是前端导出Excel界的天花板~
前端导出Excel表格,支持设置样式,函数和公式原创 2022-06-26 00:34:14 · 691 阅读 · 0 评论 -
Router中Hash和history的简单实现
Router 是路由管理工具,Vue,React 中分别常用的是 vue-router 和 react-router-dom。在探究其实现原理前,我们先来复习一下 Location 对象Location 对象中包含有关当前 URL 的信息。而当浏览器 URL 发生改变后 PopStateEvent 事件。window.addEventListener('popstate', e => { console.log(e);});在 vue-router 和 react-router-d原创 2021-08-17 11:14:00 · 258 阅读 · 0 评论 -
JavaScript 中 Long 类型 尾数舍去 和 Double类型 科学计数法 的问题
Long 类型 尾数舍去 的问题Long 类型的数据在 JavaScript 中会出现尾数舍去的情况, 比如说 后端一个数为 864943364894076928 但是在 JavaScript 中为 864943364894076900,尾数直接被舍去。console.log(864943364894076928)864943364894076900遇见这种情况下,我们一般想到的是后端为我们处理,将 Long 类型转化为 String 类型,其实前端也是可以处理的。JSONBig 是一个第三方原创 2021-01-23 10:33:04 · 917 阅读 · 0 评论 -
html2canvas 在IOS手机中浏览器出现白屏和微信无法截图的解决方案
每次开始截图前是浏览器置顶window.scrollTo(0,0);白屏和微信无法截图是可以尝试降低版本,如果还无法解决可以使用大神的方案 https://github.com/FEA-Dven/html2Canvas// 引入import html2canvas from "../../lib/html2canvas";// 使用, 全局window对象加入html2canvas,如果没有window就调用原来的,所以需要做判断(window.html2canvas || html2canv原创 2020-09-02 16:46:33 · 1933 阅读 · 0 评论 -
使用陀螺仪模拟IOS系统的水平仪
前言好久都没有正式的敲过代码了,今天决定使用 HTML5 中的陀螺仪模拟一下 IOS 系统的水平仪,而 Canvas 画布也有很长一段时间没有使用,顺带的复习一下 Canvas 画布的 API 。文章目录前言效果创建画布获取陀螺仪参数绘制倾斜的角度清除画布渲染页面绘制圆形水平后的效果总结效果苹果系统的水平仪效果如下,不过在由于 IOS 系统将陀螺仪列入了用户隐私,所以 IOS 系统需要在 ...原创 2020-04-04 11:33:04 · 1491 阅读 · 0 评论 -
ES6中Array新增的API
在 ES6 中新增了 Array 的一些 API ,在此处记录一下。文章目录静态方法Array.of() 创建数组Array.from() 将类数组转换为数组实例方法find(callback) 查找满足条件的元素findIndex(callback) 返回满足条件的元素的下标fill(data) 填充数据copyWithin(target,[start],[end]) 在数组内复制includ...原创 2020-04-03 11:24:50 · 207 阅读 · 0 评论 -
Reflect 反射和Proxy 代理
前言在阅读了很多博文后,发现大部分博文都是先代理后反射,这样来说对于一下我来说不是很友好,所以本篇博文将先记录反射,在来记录下代理将会更友好的阅读。文章目录前言Reflect 反射defineProperty() 设置对象的属性描述deleteProperty() 移除对象的属性apply() 调用函数construct() 创建对象set() 获取属性get() 获取属性getOwnProp...原创 2020-04-02 17:27:20 · 375 阅读 · 0 评论 -
Object 属性描述符
属性描述符是一个普通的对象中用来描述属性的相关信息。Object.getOwnPropertyDescriptor() 返回指定属性描述符返回对象的key属性的属性描述const obj = { a: 1, b: 2}console.log(Object.getOwnPropertyDescriptor(obj, 'a'))属性描述value...原创 2020-04-01 17:13:53 · 289 阅读 · 0 评论 -
WeakSet集合和WeakMap集合
WeakSet集合和WeakMap集合分别和Set集合和Map集合对应,在WeakSet集合和WeakMap集合中内部储存地址不会影响垃圾回收,而且不是一个可迭代函数。在使用Set集合时,当添加的时候是一个对象时,删除对象,Set集合中值仍存在,Map集合也一样。let obj = { name: "jack", age: 18}const set = new Set();...原创 2020-04-01 16:25:36 · 136 阅读 · 0 评论 -
手写Promise源码
const MyPromise = (() => { // 定义三种状态 const PENDING = 'pending'; const RESOLVED = 'resolved'; const REJECTED = 'rejected'; // 不让外界访问的状态数据 const PromiseStatus = Symbol('Prom...原创 2020-04-01 15:19:30 · 181 阅读 · 0 评论 -
Map知识点和手写模拟Map对象
Map集合存储的二维数组的的是键值对const map = new Map([ ["name", "robbit"], ["age", 20]])console.log(map)// Map(2) {"name" => "roobit", "age" => 20}get(key) 返回Map集合中key的val值map.get('name') // ro...原创 2020-03-31 11:59:05 · 139 阅读 · 0 评论 -
Set知识点和手写模拟Set对象
Set对象Set对象用于存储任何类型的唯一值。const s1 = new Set([1, 2, 3, 3, '3'])console.log(s1)// Set(4) {1, 2, 3, "3"}// [[Entries]]// 0: 1// 1: 2// 2: 3// 3: "3"// size: 4// __proto__: Setsize记录着Set对象的长度。...原创 2020-03-30 15:34:49 · 423 阅读 · 0 评论 -
宏任务和微任务的一道经典面试题~
async function async1 () { console.log('async1 start'); await async2(); console.log('async1 end')}async function async2 () { console.log('async2')}console.log('script start'...原创 2020-03-28 16:20:15 · 8698 阅读 · 8 评论 -
迭代器和生成器
在学习迭代器(Iterator)之前,我们需要理解一下的几个问题什么是迭代?从一个数据集合中按照一定的顺序,不断的取出数据的过程。迭代和遍历有什么区别?迭代强调是依次取出,不能确定取出的有多少,也不能保证把数据全部取完。什么是迭代器?对迭代过程的封装,通常为对象,不同的语言中,表现出来的迭代形式不一样。JavaScript中的迭代器在JavaScript中的迭代器,存在next()...原创 2020-03-26 09:11:46 · 112 阅读 · 0 评论 -
函数修饰符 async await
async 是 ES7 中用于修饰函数,被修饰的函数返回一个Promise对象。async function test() { return 123;}const pro = test();console.log(pro);// Promise {<resolved>: 123}await 操作符用于等待一个 Promise 对象, 它只能在异步函数 asyn...原创 2020-03-25 15:41:09 · 1044 阅读 · 0 评论 -
ES6中 Promise 对象使用以及一些面试点
JavaScript是单线程执行的,由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。Promise 是一个对象,它代表了一个异步操作的最终完成或者失败。...原创 2020-03-24 10:49:02 · 288 阅读 · 0 评论 -
MutationObserver 监听DOM对象的变化
MutationObserver 可以通过监听DOM对象的子节点的变化(childList)、属性的变化(attributes)和后代节点的变化(subtree),当以上内容发生改变时触发回调函数。实例化 MutationObserverconst observer = new MutationObserver(callback)创建监听 observeobserver.onserve(...原创 2020-03-23 09:12:45 · 1124 阅读 · 2 评论 -
ES6中新增class类
constructor 类的声明class Person { constructor(job, name, age, sex) { this.job = job; this.name = name; this.age = age; this.sex = sex; } print() { co...原创 2020-03-20 18:24:28 · 319 阅读 · 0 评论 -
ES6中新增的数据类型 Symbol
在ES6之前,基本数据类型有五种 Undefined、Null、String、Number、Boolean;引用数据类型有一种 Object。但在ES6之后,新增了一种基本数据类型 Symbol。文章目录Symbol是什么?可以做什么?Symbol是什么?Symbol用来表示独一无二的值,创建一个符号。console.log(Symbol())console.log(typeof Sym...原创 2020-03-20 14:39:09 · 2029 阅读 · 0 评论 -
ES6中Object的新特性
文章目录成员速写方法速写计算属性名is() 判断assign() 混合对象getOwnPropertyNames()成员速写成员速写是当返回的属性名和返回的值一致时可以简写function create(userName, userAge) { return { userName, userAge }}console.log(create...原创 2020-03-19 11:06:04 · 247 阅读 · 0 评论 -
ES6中Function的新特性
在ES6中,函数的参数可以设置默认值。实参为null,形参为null。实参没有参数或者为undefined,形参为默认值。(function(a, b = 10, c = 3, d = 4, e = 5) { console.log(a, b, c, d, e)})(1, 2, undefined, null)// a => 1// b => 2// c =&g...原创 2020-03-17 10:07:31 · 498 阅读 · 0 评论 -
解构赋值的运用
什么是解构赋值解构赋值是赋值运算符的扩展,左边结构与右边结构一一对应赋值。let [a, b, c] = [1, 2, 3]console.log(a, b, c)// a => 1// b => 2// c => 3除了上面最基本的解构赋值,我们还可以省略let [a, , b] = [1, 2, 3]console.log(a, b)// a =&g...原创 2020-03-16 18:30:12 · 331 阅读 · 0 评论 -
扩展运算符(...)在Array、Function和Object中的运用
... 运算符…运算符是ES6中新增的扩展运算符,在ES6中运用在数组和函数中,在ES7中支持Object。在数组中是用来console.log(1, 2, ...[3, 4, 5])// 1 2 3 4 5原创 2020-03-16 10:28:47 · 225 阅读 · 0 评论 -
JavaScript 默认行为,事件冒泡和事件委托
我们都知道,我们在浏览网页的过程中,网页会自动的有一些默认行为,比如是当我提交表单的时候,浏览器的默认行为会自动提交表单,当我点击鼠标反键时,会自动出现反键菜单,这个浏览器的默认行为有些时候给我们带来了很大的便利,但是有些时候我们又不需要浏览器执行的默认行为,比如说我们浏览网页的时候看见一些好看的图片,就顺手反键copy下来,有一些图片我有不想让别人copy,此时我们可以阻止浏览器的默认行为。阻...原创 2019-11-30 15:04:13 · 387 阅读 · 0 评论 -
JavaScript 数组和类数组鉴定的几种方式
什么是类数组?拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理);不具有数组所具有的方法;类数组和数组的写法是一样的,但是它不是数组,对象是Object; arguments是最我们最常见的类数组var obj = {}var arr = [];instanceofinstanceof 运算符用来检测 constructor.protot...原创 2019-11-30 10:10:03 · 342 阅读 · 0 评论 -
JavaScript 闭包的理解
在了解闭包之前,我们先来了解下局部变量和全局变量局部变量即为定义在局部作用于下的变量,仅在这个作用域下被调用;全局变量即为定义在window下,在任何地方都可以调用。那么他们有哪些优缺点呢?局部变量用完会随着当前程序一同被销毁,不会占用内存,但是不可以重复使用。全局变量可以重复使用,但是很容易造成变量污染。看来局部变量和全局变量都有他的优缺点,那么怎么样才能够变量重用,又可以...原创 2019-11-12 21:12:02 · 322 阅读 · 0 评论 -
JavaScript 面对对象知识点整理
面对对象什么是面对对象?创建一个自定义对象调用自定义对象this关键字封装继承多肽什么是面对对象?面对对象是一种编程思想,以人固有的思维方式用来解决程序中的逻辑思维,便于程序的维护管理。创建一个自定义对象在我们生活中,汽车使我们的不可缺少的交通工具,假设设定汽车的对象,汽车有品牌,颜色,排量等等属性var obj = { carName = 'BWM', carColor = 'Bl...原创 2019-08-10 15:18:33 · 353 阅读 · 0 评论 -
JavaScript 正则表达式知识点整理
正则表达式正则常用的表达式正则的创建和使用正则的方法exec():匹配字符串的值,返回找到的值,且确定其位置test():匹配字符串中制定的值,返回true 或 false正则的修饰符正则是用于在字符串的匹配和替换,在开发中常用于输入字符串的格式验证。正则常用的表达式表达式描述\将下一个字符标记为特殊符号^输入字符串的开始位置$输入字符串的结束位置...原创 2019-08-03 13:18:29 · 372 阅读 · 0 评论 -
JavaScript 数组知识点整理
数组的定义和创建数组的访问数组的修改数组的方法二维数组的创建数组的定义和创建数组,顾名思义就是将一堆数据定义为统一的名字,在日常开发的过程中,使用数组方便数据的编译和维护。假设我们有如下数据var car1 = "BMW";var car2 = "Tesla";var car3 = "Volvo";......在此时存在多个相同名字的数据,那么我们就是可以使用数据来存储,创建一...原创 2019-08-03 10:46:19 · 428 阅读 · 0 评论 -
JavaScript 分支结构知识点整理
在我们进行逻辑运算时,难免少不了使用分支结构实现页面上的需求功能,再次整理一下分支结构的语法及其使用。1. If…Else 语句在代码中需要通过判断来选择执行不同的代码块,所以我们可以使用If…Else语句在实现。if(条件){ 条件为真时执行}esle{ 条件为假时执行}2. Switch 语句在通过用户输入的值进行判断返回多个的值。switch(n){case 1:...原创 2019-07-25 20:41:13 · 603 阅读 · 0 评论 -
JavaScript 运算符知识点整理
算数运算符算数运算符描述+加-减*陈/除%取余+ +累加- -递减i ++ 与 ++ i 的区别i ++:先赋值后计算,++ i:先计算后赋值。var i= 1;var s = i ++ + ++ i;for(var a = 0;a < 100;a ++){ i = i ++;};con...原创 2019-07-22 20:46:29 · 379 阅读 · 0 评论 -
Javascript 解析过程及其作用域链
Javascript在执行的步骤先通篇检查错误的语法,假设出现语法错误将无法执行脚本。语法无错误的情况下开始预编译,申明变量提前,值为undefined,函数体整体提前。预编译完成后将开始从上至下的原则进行解释执行,自动忽略变量声明和函数体的创建; 当变量与函数体名称重复时,后者覆盖前者,前者被回收。语法正确语法错误检查语法预编译报错声明提前解析执行其中预编译的过程,将var声明的变量...原创 2019-11-11 20:21:59 · 391 阅读 · 0 评论