langmanboy的博客

1. 模块规范2. 导入导出3. 动态导出4. webpack打包编译

防抖与节流防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能以及避免资源浪费节流是第一个说了算，后续都会被节流阀屏蔽掉，防抖是最后一个说了算，前面启用的都会被清除1. 防抖函数防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间<input type="text"><script> // 防抖 事件触发 n 秒后执行一次, 如果在 n 秒

Event Loop1. 定时器setTimeout 允许我们将函数推迟到一段时间间隔之后再执行setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数定时器 setTimeout/setinterval 中的 this 都指向 window1-1 setTimeoutsetTimeout(func|code, delay, arg1, arg2, ...)在指定毫秒数后执行代码或者函数dunc|code 想要执行的函数或代码d

Class类与继承1. Class基础语法1-1 定义类ES6 引入了 Class 类构造方式，作为对象的模板，通过class关键字，可以定义类ES6 的 class 是一个语法糖，新的 class 写法只是让对象原型的写法与继承更加清晰简洁**Tips：**类方法与方法之间不需要逗号分隔定义类的一种方法是使用类声明，通过 class 关键字定义类类表达式是定义类的另一种方法，类表达式可以命名或不命名。命名类表达式的名称是该类体的局部名称，仅在类内部可见// 第一种方式 通过clas

Iterator 迭代器1. 迭代器1-1 迭代器概念Javascript 四种集合数据结构：Array、Object、Map、Set迭代器它是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署 Iterator 接口，就可以完成遍历操作为各种数据结构，提供一个统一的、简便的访问接口使数据结构的成员能够按某种次序排列Iterator 接口主要供 for...of 消费1-2 迭代器原理创建一个指针对象，指向当前数据结构的起始位置，也就是说，遍历器对象本质上，就是

Reflect 映射1. Reflect 映射Reflect对象与 Proxy 对象一样，也是 ES6 为了操作对象而提供的新 APIReflect 是一个内置的对象，而不是一个函数对象，因此它是不可构造的Reflect 作用：优化 Object 的一些操作方法以及合理的返回 Object 操作返回的结果Proxy 在拦截访问目标对象，或者对代理对象操作都是通过 Reflect 映射来完成let obj = { name: 'jsx'};// 获取对象属性console.log(

Proxy 代理1. Proxy 代理创建Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例，Proxy对象需要传入两个参数target —— 被代理的目标对象，可以是任何东西，包括函数handler —— 代理配置，带有捕捉器即拦截操作的方法的对象，内部可以定义零个或多个代理函数let proxy = new Proxy(target, handler)如果 handler 没有设置拦截，所有对

箭头函数1. 箭头函数语法箭头函数是 ES6 新增的特性， 通过使用 => 定义函数的新语法箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super 或 new.target箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数arg1, arg2, ..argN 函数参数expression 函数返回值let func = (arg1, arg2, ..., argN) => expression;let func =

Map 和 WeakMap1. Map 创建Map 是一个键值对的数据项的集合，就像一个 Object 一样，但是它们最大的差别是 Map 允许任何类型的键 key 或者值 value由于对象只接受字符串或者 Symbol 作为键，ES6 提供了 Map 数据结构，字符串，各种类型的值包括对象都可以当作键或者值具有 Iterator 接口、且每个元素都是一个双元素的数组的数据结构都可以当作Map构造函数的参数// Map()构造函数参数必须是可迭代对象let map = new Map([['n

Set 和 WeakSet1. Set 创建Set 是一个特殊的类型集合 —— 值的集合没有键，它的每一个值只能出现一次new Set(iterable) 可以接受一个数组或者具有 iterable 接口的其他数据结构作为参数，用来初始化// 声明let set = new Set();// 提供数组对象，则会复制数组元素以并去重let set = new Set([1, 2, 5, 5, 5])console.log(set); // Set(3) {1, 2, 5}// 去除字符串

Symbol 类型1. Symbol 声明根据规范，对象的属性键只能是字符串类型或者 Symbol 类型Symbol 是一种基本数据类型，Symbol()函数会返回 symbol 类型的值，Symbol 值是唯一的标识符，不会与其他属性名产生冲突Tips：Symbol 函数前不能使用 new 命令，会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象类型let symbol1 = Symbol();let symbol2 = Symbol();console.log(symb

扩展语法1. 函数 rest 参数ES6 引入 rest 参数也叫剩余参数，用于获取函数的多余参数，可以替代使用arguments对象... 出现在函数参数列表的最后，那么它就是 rest 参数，它会把参数列表中剩余的参数收集到一个数组中rest 参数组成的变量是一个数组，该变量将多余的参数放入数组中函数的length属性，不包括 rest 参数function restFn(...arg) { console.log(arg);}restFn(1, true, {name: '

解构赋值解构赋值语法是一种 Javascript 表达式，通过解构赋值可以将属性值从对象/数组中取出赋值给其他变量ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构1. 基本数据类型解构1-1 字符串解构赋值字符串也可以解构赋值，字符串会被转换成了一个类似数组的对象类似数组的对象都有一个length 属性，因此还可以对这个属性解构赋值// 会将字符串转换成一个类数组对象let [a, b, c, d ,e] = 'hello';console.log(a, b,

模版字符串1. 模版字符串基础1-1 简介ES6 引入了模板字符串，模版字符串用反引号（`）标识它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量let name = `jsx`;console.log(${name})1-2 转义在模板字符串中需要使用反引号，则前面要用反斜杠转义 \let greeting = `\``; // `1-3 多行使用模板字符串表示多行字符串，所有的空格和缩进都会被保留let message = ` jsx

模版字符串1. 模版字符串基础1-1 简介ES6 引入了模板字符串，模版字符串用反引号（`）标识它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量let name = `jsx`;console.log(${name})1-2 转义在模板字符串中需要使用反引号，则前面要用反斜杠转义 \let greeting = `\``; // `1-3 多行使用模板字符串表示多行字符串，所有的空格和缩进都会被保留let message = ` jsx

let、const1. let 关键字let 关键字拥有块级作用域let 关键字不会存在变量提升暂时性死区：let 关键字声明时会存在暂时性死区let 关键字不允许重复声明// let 关键字拥有块级作用域{ let str = 'jsx'; var num = 123; // 在同一作用域下可以访问 console.log(str)}console.log(str); // 访问不到strconsole.log(num);// 不存在变量提升console.log(s

严格模式1. use strictuse strict 是一种 ECMAscript5 添加的（严格）运行模式，这种模式使得 Javascript 在更严格的条件下运行。严格模式的实现使您的程序或函数遵循严格的操作环境严格模式对正常的JavaScript语义做了一些更改：消除了 JavaScript 语法的一些不合理，不严谨之处，减少了一些怪异行为消除了代码运行的一些不安全之处，保证代码运行的安全提高编译器的效率，增加运行速度禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，

页面声明周期1. DOMContentLoaded 事件DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载完成DOMContentLoaded 事件发生在 document 对象上，必须使用 addEventListener 来捕获具有 async 特性（attribute）的脚本不会阻塞 DOMContentLoaded使用 document.createElement('script')

UI 事件与表单事件1. 鼠标事件1-1 事件类型针对鼠标操作的行为有多种事件类型：mousedown/mouseup —— 在元素上点击/释放鼠标按钮mouseover/mouseout —— 鼠标指针从一个元素上移入/移出mousemove —— 鼠标在元素上的每个移动都会触发此事件click —— 如果使用的是鼠标左键，则在同一个元素上的 mousedown 及 mouseup 相继触发后，触发该事件dblclick —— 在短时间内双击同一元素后触发。如今已经很少使用了conte

事件1. 事件基础1-1 什么是事件？在文档、浏览器、标签元素等元素在特定状态下触发的行为即为事件，比如用户的单击行为、表单内容的改变行为即为事件，我们可以为不同的事件定义处理程序。JS 使用异步事件驱动的形式管理事件事件类型：JS 为不同的事件定义的类型，也可以称为事件名称，有鼠标，指针，键盘，表单，用于界面，用户界面等事件类型事件目标：事件目标指产生事件的对象，比如 a 标签被点击那么 a 标签就是事件目标。元素是可以嵌套的，所以在进行一次点击行为时可能会触发多个事件目标事件处

BOM 浏览器对象模型浏览器对象模型（Browser Object Model），简称 BOM，表示由浏览器（主机环境）提供的用于处理文档（document）之外的所有内容的其他对象window 浏览器实例location 加载文档的信息和常用导航功能实例navigator 客户端标识和信息的对象实例history 当前窗口建立以来的导航历史记录screen 客户端窗口及屏幕信息1. window 对象window 对象是 BOM 的核心，是 js 访问浏览器的接口，也是 ES 规定的

空间坐标1. 视口与文档尺寸1-1 浏览器可视区域网页很多都是多屏（通过滚动条显示看不见的内容），所以文档尺寸一般大于视口尺寸视口尺寸不包括浏览器工具条、菜单、标签、状态栏等当你打开控制台后，视口尺寸就相应变小了position 使用文档定位，fixed 使用视口定位文档坐标在页面滚动时不发生改变，视口坐标的操作需要考虑滚动条的位置1-2 浏览器视口尺寸获取文档（document）可视区域不包括滚动部分在内的宽度和高度document.documentElement.client

节点和元素属性样式1. 创建节点1-1 creatTextNodedocument.createTextNode(data)创建一个新的文本节点，data 是一个字符串为文本节点的内容<div class="container"></div><script> // creattextNode 文本节点 let elem = document.querySelector('.container'); let text = documen

Object 对象方法1. 对象原始转换对象中不存在布尔转换，只有字符串和数值转换数值转换发生在对象相减或应用数学函数时字符串转换通常发生在 alert() 输出时为了进行转换，JavaScript 尝试查找并调用三个对象方法：obj[Symbol.toPrimitive](hint)obj.toString()obj.valueOf()1-1 Symbol.toPrimitiveSymbol.toPrimitive 的内建 symbol，它被用来给转换方法命名如果 S

DOM 文档对象模型1. Web API 的概念api：应用程序接口。是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能Web API：是 Web 的应用程序编程接口，浏览器 API 可以扩展 Web 浏览器的功能，服务器 API 可以扩展 Web 服务器的功能js 组成：ECMAScript、DOM、BOMECMAScript：定义了 JavaScript 的语法规范BOM：浏览器对象模型，提供用于处理文档之外的所有内容的其他对象DOM：文档对象模型，提供用于处理文档的对象2

正则表达式在 JavaScript 中，正则表达式通过内建的 RegExp 类的对象来实现，并与字符串集成正则表达式是用于匹配字符串中字符组合的模式，在 JavaScript 中，正则表达式也是对象这些模式被用于 RegExp的 exec 和 test 方法, 以及 String 的 match、matchAll 、replace、search 和 split 方法1. 正则创建与属性创建一个正则表达式对象有两种语法字面量创建对象创建1-1 字面量创建使用一个正则表达式字面量，其由包含

String 字符串详解1. String 字符串类型1-1 字符串引号字符串可以包含在单引号 ''、双引号 "" 或反引号 `` 中单引号和双引号不能混用同类引号不能嵌套：双引号里不能再放双引号，单引号里不能再放单引号单引号里可以嵌套双引号；双引号里可以嵌套单引号反引号允许字符串跨行let str = 'hello world';let str1 = "hello world";let str2 = `${1 + 2}`;let str3 = '<div class="bo

Number 数字类型详解1. Number类型在现代 JavaScript 中，数字 Number 有两种类型：JavaScript 中的常规数字以 64 位的格式 IEEE-754 存储，也被称为双精度浮点数。BigInt 数字，用于表示任意长度的整数。有时会需要它们，因为常规数字不能安全地超过 253 或小于 -253，仅在少数特殊领域才会用到 BigInt。let num = 22; // Numberlet num1 = 23426456456456n; // BigInt

Math 和 Date 对象1. Math 对象Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象Math 不是一个构造器，Math 的所有属性与方法都是静态的Math 用于 Number类型，它不支持 bigInt 类型方法描述Math.PI圆周率，Math 对象的属性Math.abs()返回绝对值Math.random()生成0 ~ 1之间的随机浮点数Math.floor()向下取整（往小取值）Math

Array数组方法改变原数组的方法：fill()、pop()、push()、shift()、splice()、unshift()、reverse()、sort()；不改变原数组的方法：concat()、every()、filter()、find()、findIndex()、forEach()、indexOf()、join()、lastIndexOf()、map()、reduce()、reduceRight()、slice()、some()1. 添加删除元素1-1 splice()arr.splic

箭头函数和this指针1. 箭头函数1-1 什么是箭头函数箭头函数是 ES6 新增的特性， 通过使用 => 定义函数的新语法箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super 或 new.target箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数let func = (arg1, arg2, ..., argN) => expression;arg1..argN 函数参数expression 函数返回值

JSON 对象1. 什么是 JSON ？JSON 全称是 JavaScript Object Notation，即 JavaScript 对象标记法JSON 是一种轻量级（Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式JSON 是存储和交换文本信息的语法，类似 XML，JSON 比 XML 更小、更快，更易解析JavaScript 能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象{

数组去重、排序、扁平化1. 数组去重1-1 双层 for 循环定义一个新数组，并存放原数组的第一个元素遍历原始数组，将原始数组中的每个元素与新数组中的每个元素进行比对如果不重复则添加到新数组中，重复则不添加，最后返回新数组// 双重for循环去重// 通过原始数组与新数组中元素对比来去重function unique(arr) { // 判断是否为数组 if (!Array.isArray(arr)) { console.log('type error!'

数据类型判断tyepof ：检测数据类型的运算符instanceof ： 检测某一个实例是否属于这个类constructor ：检测实例和类关系的，从而检测数据类型Object.prototype.toString.call(value)：检测数据类型1. typeoftypeof 运算符返回参数的类型对 typeof x 的调用会以字符串的形式返回数据类型Tips：typeof null 的结果为 object。这是官方承认的 typeof 的错误，这个问题来自于 JavaScri

call、apply、bindcall、apply 和 bind 是挂在 Function 对象上的三个方法,只有函数才有这些方法作用：改变函数执行时的 this 指向1. callfun.call(thisArg, arg1, arg2, ...)thisArg：在 function 函数运行时使用的 this 值非严格模式下：thisArg 指定为 null，undefined，fun 中的this 指向 window 对象严格模式下：fun 的 this 为 undefined值为

深拷贝和浅拷贝1. 内存地址Array， Function，Object 等等可以认为是除了基本数据类型 String，Number，Boolean，null，undefined，Symbol 以外，所有类型都是引用数据类型引用数据类型存储在堆内存中，在栈中存储了指针，该指针指向堆中该实体的起始地址当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体let str = 'jsx'; // stringlet num = 100; // numberlet bool = tr

预编译、变量提升、作用域1. 预编译JavaScript 编译过程只有下面三个步骤：语法分析预编译解释执行预编译分为全局预编译和函数预编译：全局预编译发生在页面加载完成时执行函数预编译发生在函数执行的前一刻1-1 全局预编译全局预编译步骤：创建 GO（Global Object，全局执行期上下文，在浏览器中为 window）对象找形参和变量声明，将变量声明和形参作为 GO 的属性名，并赋值为 undefined在全局里找函数 function 声明，将函

原型、原型链与继承1. [[Prototype]] 和 __proto__[[Prototype]]和 __proto__ 表示对象的内部属性，其值指向对象原型在 ES5 之前没有标准的方法访问这个内置属性 [[Prototype]]，但是大多数浏览器都支持通过 __proto__ 来访问__proto__ 是非标准属性，它是为了方便让用户可以直接获取，修改 instance 的 [[Prototype]] 属性的一种方式在 ES6 中新增了 getPrototypeOf、setPrototyp

类数组转换为真数组的常用方法以及注意事项