weixin_60547084的博客

/ 我的电脑是16的偏差，我用我同事的电脑测试，有的是14 有的是18。// 这里我准备判断是否相等，但是不知道为什么会存在偏差。存在按键盘F11、手动点全屏后中间的×，先说说几种方案。// 监听浏览器窗口来判断是否全屏，用来管理全屏状态。// 不需要重复修改，这里也有可能是用户修改窗口尺寸。基本情况是属于只是鼠标点击全屏按钮。// 已开启全屏，需要退出。// 未开启全屏，需要开启。

【代码】JavaScript 工具函数（分享）

通过 input:file 获取的 file 文件。File 和 Blob 可以通过构造函数互转。

/ 在 observedAttributes 数组中的值，可以监听标签上的属性，当对应的属性值发生改变时调用。// 当继承指定 HTML 元素时，该元素需要继承使用（is="自定义元素名"）// 在元素被移动到新的文档时调用，比如 document.adoptNode。// 当继承任意 HTML 元素时，该元素可以当做组件使用。// 影子模式，与主文档分开呈现，保持元素的私有功能。// 在元素被添加到文档之后调用，会调用多次。// 在元素被移除文档之后调用，会调用多次。// *自定义内置元素。

在许多老的项目中使用的都是 iframe 进行的页面嵌套，我这里写了三个页面进行演示红色的页面为最外层，本地开的服务，端口为 5500，而黄色和蓝色的页面分别为第二层和第三层，端口为 5501专门做的不是一个端口，后面会有作用。

该应用场景是，是使用luckysheet生成PDF，一共分了四种情况，传值的时候只需要判断，生成html的宽度(需要乘0.75，因为是pt单位做对比)只要大于a4的宽度就需要纵向打印。

【代码】JavaScript 关于async、await怎样合理的使用try、catch去处理(分享)

文章目录toString(radix)parseInt(string, radix)0.1 + 0.2 !=== 0.3BigInt()toString(radix)把十进制转换为其他进制// 2 <= radix <= 36// num：为十进制let num = 10// 要把十进制转换为多少进制console.log(num.toString(2)) // '1010'parseInt(string, radix)把其他进制转换为十进制// 2 <= radix

文章目录1. js是单线程2. 同步任务和异步任务2.1 同步( synchronous )2.2 异步( asynchronous )3. 执行机制(事件循环)3.1 同步与异步执行机制3.2 事件循环1. js是单线程JavaScript语言的一大特点就是单线程，也就是说同一个时间只能做一件事。这样因为JavaScript这门脚本语言诞生的使命所致，JavaScript早期是为了处理页面中用户的交互，以及操作DOM而诞生的，比如我们对莫个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加之

文章目录1. 认识Promise2. Promise初体验3. Promise的状态与值3.1 状态3.2 值4. Promise方法的使用4.1 then、finally4.2 Promise静态方法5. Promise的实现6. async、await6.1 async6.2 await1. 认识PromisePromise 是一门新技术(ES6规范)Promise 是 JS 中进行异步编程新的解决方案，旧的使用的是回调函数从语法上来说，Promise 是一个构造函数从功能上来说，Promi

文章目录防抖节流重绘回流(重排)重绘与回流的关系防抖在一个事件被多次触发时，只会执行最后一次，比如表单登录节流在规定的时间只会触发一次，比如轮播图重绘当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘回流(重排)当 render 树中的一部分，或者全部因为大小边距等问题，发生改变而需要 DOM 树重新计算的过程叫做回流重绘与回流的关系重绘不一定会回流，回流一定会重绘...

// 这种方式只能对同一作用域进行拷贝function fn() { if (true) { return "你是大聪明" } else { return "我是大聪明" }}let str = fn.toString()let newStr = str.substring(str.indexOf("{") + 1, str.lastIndexOf("}"))let newFn = new Function(newStr)console.log(newFn ===

文章目录1. new的实现2. call的实现1. new的实现function New(fn) { // 1. 创建一个新对象 let obj = {} // 2. 使实例的隐形原型 == 构造函数的显示原型 obj.__proto__ = fn.prototype fn.prototype.constructor = fn // 3. 改变this指向 // 4. 把fn中的属性方法添加到新对象上 let args = [...arguments] args.

文章目录1. 浅拷贝原理2. 浅拷贝实现3. 深拷贝原理4. 深拷贝实现4.1 乞丐版深拷贝4.2 递归实现深拷贝4.3 递归升级版1. 浅拷贝原理浅拷贝是拷贝的引用一般情况下，浅拷贝只会拷贝一层层级结构特别深的话，如果拷贝的不是最深层数据的值，都为浅拷贝2. 浅拷贝实现// 通过for in实现浅拷贝// 注意：for in会遍历原型上面的属性，这里就不考虑这种情况let obj = { name: "小红", age: 18, hobby: { a: "aaa",

文章目录1. 闭包语法糖2. class/get/set3. 属性拦截器4. 对象代理拦截器1. 闭包语法糖// 这种set、get方法可以添加约束// set必须要有参数，get必须要有返回值function fn() { let num = 10 return { set num(value) { console.log("num被修改了"); num = value }, get num() { console.log("nu

文章目录1. Symbol(符号)1.1 Symbol的定义1.2 Symbol的创建1.3 Symbol的一些`api`2. BigInt(大数)2.1 BigInt的定义2.2 BigInt的创建3. Set(集合)3.1 集合的定义3.2 集合的创建3.3 集合常用`api`3.4 集合的补充4. Map(映射)4.1 映射的定义4.2 映射的创建4.3 映射常用`api`4.4 映射的补充5. WeakMap和WeakSet5.1 WeakMap(弱映射)5.2 WeakSet(弱集合)5.3 案例

文章目录1. let与const1.1 let1.2 const2. 解构赋值2.1 解构赋值定义2.2 数组解构2.3 对象解构3. 箭头函数3.1 基本语法3.2 this指向4. 展开语法4.1 剩余参数4.1.1 基本用法4.1.2 剩余参数配合解构赋值4.2 扩展运算符4.2.1 可迭代对象4.2.2 对象5. 模板字符串5.1 基本语法1. let与const1.1 letlet声明的变量有块级作用域let不存在变量提升在同一作用域中，let声明的变量不能重复声明le

文章目录1. 函数模式2. 方法模式3. 构造器模式4. 上下文模式4.1 call 的基本使用4.2 apply 的基本使用4.3 bind 的基本使用1. 函数模式function fn(){ console.log("我是函数调用")}fn()2. 方法模式let obj = { fn(){ console.log("我是方法调用") }}obj.fn()3. 构造器模式function Person(name){ this.name = name}

文章目录1. 迭代器原理2. 迭代器的实现1. 迭代器原理在js中可以使用for of 操作可迭代对象，字符串、数组、Set、Map这些都是可迭代的可迭代对象指的是任何具有专用迭代器方法，且该方法返回可迭代对象的value，迭代器对象具有next()方法和value、done属性当迭代器时首先调用这个迭代器对象(Symbol.iterator)，然后重复调用它里面的next()方法，直到done为true时结束在这些可迭代对象内部是怎么实现的我们并不清楚，但是知道了这些原理之后可以尝试自己去实现

文章目录1. typeof2. instanceof3. constructor4. Object.prototype.toString.call()5. 四种方法的总结1. typeof// typeof 返回对应类型的字符串let num = 123let str = "123"let bool = truelet arr = []let obj = {}let fn = function () { }let cla = class { }console.log(typeof n

文章目录1. 经典问题2. 什么是闭包1. 经典问题在面试中会遇到一个经典的问题// html部分<ul> <li>我是第1个li标签</li> <li>我是第2个li标签</li> <li>我是第3个li标签</li> <li>我是第4个li标签</li></ul>// js部分let lis = document.querySelectorAll("li

文章目录1. 认识BOM2. window事件3. window方法4. window属性4.1 页面滚动4.2 窗口大小5. location对象5.1 URL的组成5.2 location对象的属性5.3 location对象的常见方法6. navigator对象7. history对象1. 认识BOM浏览器对象模型( Browser Object Model )它提供了独立的内容与浏览器窗口进行交互的对象，其核心对象是windowBOM由document、location、navigatio

文章目录1. 认识DOM2. 获取元素2.1 通过标签名获取2.2 通过ID获取2.3 通过类名获取2.4 H5新增的获取方式2.5 特殊元素的获取3. 事件3.1 事件三要素3.2 事件类型3.3 注册事件3.4 删除事件3.5 事件流3.6 鼠标事件对象3.7 键盘事件对象3.8 事件委托(事件代理)4. 元素自定义属性4.1 默认的自定义属性4.2 h5新增的自定义属性5. 节点操作5.1 节点类型5.2 获取父元素5.3 获取子元素5.4 获取兄弟元素5.5 添加节点对象5.6 删除节点5.7 克隆

1. 数学对象(Math)2. 日期对象(Data)3. 数组对象(Array)3.1 静态方法3.2 改变原数组方法3.3 不改变原数组方法3.4 遍历数组，不改变原数组4. 字符串对象(String)5. 正则对象(RegExp)5.1 元字符5.1.1 基本元字符5.1.2 限定元字符5.1.3 首尾元字符5.1.4 简写元字符5.1.5 否定元字符5.2 修饰符5.3 反向引用5.4 贪婪模式6. 错误对象(Error)6.1 主动抛出异常6.2 代码异常7

文章目录1. 什么是对象2. 创建对象的三种方式3. this4. 对象的增删改查5. new做了什么事情6. 遍历对象1. 什么是对象万物皆是对象，对象有属性和方法，拿人来举例：人的姓名、年龄、性别等这些都是属性，属性可以通过点属性的形式去获取，人可以吃东西、走路、唱歌等这些都是方法，方法可以通过点方法括号的形式去调用举例来说操作浏览器要使用window对象操作网页要使用document对象操作控制台要使用console对象在 JS 中，对象是一组无序的相关属性和方法的集合对象是

1. 作用域的作用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。JS没有块级作用域(ES6之前)2. 全局作用域使用var声明的变量，会挂载在window上，属于全局变量不声明直接赋值的变量，也会挂载在window上var声明的变量和function声明的变量会提升3. 函数作用域(局部作用域)函数内部可以访问函数外部的变量函数内部的变量只能当前函数，和当前函数内部的函数访问，包括形参函数所在的作用域层，是属于声明时所在的，而不是调用时所在的函数内部使用

一组(多个)数据的集合，在数组中可以存放任意类型的数据。形参是函数声明上面的，实参是调用时传递的。

1. 装箱与拆箱简单来说：装箱是将基本类型转换为引用类型，拆箱是将引用类型转换为基本类型而在string类型上使用api的时候，会经过一个装箱拆箱的过程，基本包装类型对象这个就是装箱在使用Number()、Boolean()、String()这些强制类型转换的方法时，就会进行一个拆箱操作2. “==” 规则null 只能 == undefined，其他都为false如果其中一个是 Symbol 类型，那么返回 falsestring、boolean和number做对比时，都会转换为num

文章目录1. 算数运算符2. 递增和递减运算符3. 比较运算符(关系运算符)4. 逻辑运算符4.1 逻辑中断5. 赋值运算符6. 运算符优先级7. 判断语句7.1 if7.2 switch7.3 三元运算符(三目)8. 不可思议的相等和不相等9. 循环语句9.1 for9.2 while9.3 do...while9.4 跳出循环与跳出当次循环10. `js`隐式类型转换1. 算数运算符算数运算符描述实例+加11 + 22 = 33-减33 - 22 = 11*

文章目录1. 认识javascript2. js三种引入方式3. js输入输出语句4. 变量4.1 什么是变量4.2 变量的使用4.3 变量命名规范5. 基本数据类型5.1 Number5.2 String5.3 Boolean5.4 Undefined和Null6. 基本数据类型检测 typeof7. 基本数据类型转换7.1 转为数字型7.2 转为字符串类型7.3 转为布尔类型8. 复杂数据类型1. 认识javascriptjs是脚本语言：不需要编译，运行过程中由js解释器( js引擎 )逐行来进行

使用alert()会自调用toString()方法let obj = { name: '小红', age: 18}console.log(obj); // {name: '小红', age: 18}console.log(obj.toString()); // [object Object]alert(obj) // [object Object]