imagine_tion的博客

一、概念1.JSON.stringifyJSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。JSON.stringify(value[, replacer [, space]])Boolean | Number| String 类型会自动转换成对应的原始值。undefined、任意函数以及symbol，会被忽.

一、概念1. typeof是一个运算符，有2种使用方式：typeof(表达式)和typeof 变量名，第一种是对表达式做运算，第二种是对变量做运算。typeof 操作符返回一个字符串，表示未经计算的操作数的类型。可能的返回值：“undefined”“object”“boolean”“number”“bigint”“string”“symbol”“function”注意：typeof null === 'object';查阅了相关的资料,其实这个是一个历史遗留的bug，在 j.

一、原理jsonp的核心原理是利用script标签没有同源限制的方式，可以发送跨域的get请求（只能发送get请求）。script标签中的src属性将请求参数和当前请求的回调函数名拼接在链接上。最终由服务端接收到请求之后拼接成前端可执行的字符串的形式返回。这个结果字符串最终会在前端的script标签中解析并执行。利用<script>标签没有跨域限制的漏洞,网页可以得到从其他来源动态产生的JSON数据。JSONP请求一定需要对方的服务器做支持才可以。JSONP和AJAX对比： JSONP.

一、概念1.EventEmitterEventEmitter （事件派发器）是 Node.js 的核心模块 events 中的类，用于对 Node.js 中的事件进行统一管理，用 events 特定的 API 对事件进行添加、触发和移除等等，EventEmitter 的核心就是事件触发与事件监听器功能的封装。简而言之，EventEmitter就是一个典型的发布订阅模式，实现了事件调度中心。javascript中常被提及的「发布订阅模式」，在面试的过程中，面试官往往会让你通过手写EventEmitt.

一、概念数组去重：去除数组中相同的元素，确保数组中的每一个元素都是独一无二的。二、实现首先，我们首先约定将数组去重函数命名为unique，然后将方法添加到Array.prototype上。这样我们的每一个数组对象都可以调用到此方法了。1.双重循环版本一：基本思路：每存储一个新元素，遍历新数组是否含有该元素。Array.prototype.unique = function () { const newArray = []; // 去重后新数组存放处 let isRepeat; // .

一、概念1.浅拷贝（浅克隆）创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址中的值，就会影响到另一个对象。2.深拷贝（深克隆）将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。二、实现1.浅拷贝创建一个新的对象，遍历需要克隆的对象，将需要克隆对象的属性依次添加到新对象上，然后返回。function clo.

一、概念compose 是函数式编程中很重要的函数之一， 因为其巧妙的设计而被广泛使用。compose 函数的作用就是组合函数的，将函数串联起来执行，将多个函数组合起来，一个函数的输出结果是另一个函数的输入参数，一旦第一个函数开始执行，就会像多米诺骨牌一样推导执行了。组合的概念是非常直观的，并不是函数式编程独有的，在我们生活中或者前端开发中处处可见。比如我们现在流行的 SPA (单页面应用)，都会有组件的概念，为什么要有组件的概念呢，因为它的目的就是想让你把一些通用的功能或者元素组合抽象成可重用的组.

本次推文将会带领大家通过手写来达到模拟数组拍平（扁平化） flat 方法实现。在一些大厂的面试中，flat方法的实现往往是一道比较基础的面试题，通常出现在笔试或者第一轮面试当中，主要考察基本的手写代码的能力。首先我们先来回顾一下flat方法概念。一、概念1.数组扁平化方法 Array.prototype.flat() 也叫数组拍平、数组拉平、数组降维。const arr = [1,[2,3],[4,[5,[6]],7]];// 不传参数时，默认“拉平”一层arr.flat() // [1,.

书接上回，本次推文将会继续讲解Promise的开发，以提高异步编程的能力。一、回顾上次推文代码回顾：class MyPromise{ static PENDING = 'pending'; static FULFILLED = 'fulfilled'; static REJECTED = 'rejected'; constructor(executor){ this.status = MyPromise.PENDING; this.value = nul.

一、构建本次推文将会手写开发Promise实现，提升异步编程的能力。首先声明定义类并声明Promise状态与值，有以下几个细节需要注意。executor为执行者当执行者出现异常时触发拒绝状态使用静态属性保存状态值状态只能改变一次，所以在resolve与reject添加条件判断因为 resolve或rejected方法在executor中调用，作用域也是executor作用域，这会造成this指向window，现在我们使用的是class定义，this为undefinedclass MyP.

偏移量偏移量概念公式offsetHeight元素在垂直方向上占用的空间大小，以像素为单位。包括元素的高度、(可见的) 水平滚动条的高度、上下边框高度offsetHeght = content + padding + border + scrollXoffsetWidth元素在水平方向上占用的空间大小，以像素为单位。包括元素的宽度、(可见的)垂直滚动条的宽度、左右边框宽度offsetWidth = content + padding + border + scrollY.

前端开发始终绕不过的就是操作DOM，在Vue，Angular，React等框架出现后，我们通过操作数据来控制DOM（绝大多数时候），越来越少的去直接操作DOM。但是并不是所有时候都一定要引入这些库，对于基础的JS操作DOM的方法，还是需要掌握的。一、查询1.按照ID查询document.getElementById(id) // 兼容最好这个接口很简单，根据元素id返回元素，返回值是Element类型，如果不存在该元素，则返回null。语法：const mainDom = document.

一、正则表达式是什么正则表达式是用于匹配字符串中字符组合的模式，即实现对字符串中的信息进行查找、替换和提取操作。单个字符最简单的正则表达式可以由简单的数字和字母组成，没有特殊的语义，纯粹就是一一对应的关系。如想在’apple’这个单词里找到‘a’这个字符，就直接用/a/这个正则就可以了。但是如果想要匹配特殊字符的话，就得请出我们第一个元字符**\**， 它是转义字符字符，顾名思义，就是让其后续的字符失去其本来的含义。举个例子：我想匹配*这个符号，由于*这个符号本身是个特殊字符，所以我要利用转.

一、常见错误理解this是指向自身吗？特别是在函数中使用 this 的时候，this 是指的所在的这个函数对象吗？看下面示例：function test() { console.log(this.name)}test.name='aaaa'test() // ''输出的是空字符串，因为此时 this 指向的是 window ，所以 this 并不是指向自身this指向函数的作用域吗？ function test() { var name = 'bbbbb' conso.

前言众所周知 javascript 是一种弱类型语言。强类型和弱类型主要是在变量类型处理的角度进行分类的。强类型是一旦指定数据类型，如果不经过强制转换，那么将永远是指定的这个类型。js 中无法声明数据类型，变量类型是根据实际值决定的，由编译器自动调用转换函数进行转换，这种方式称之为隐式转换，今天我们就来聊聊数据类型是如何隐式转换的吧！小试牛刀可能很多小伙伴都知道 JS隐式转换 ，但你是否真的懂它了呢？下面来试试吧！！定义一个变量 a ，使得下面的表达式结果为 true a == 1 &am.

1. git工作流GitFlow是由Vincent Driessen 提出的一个 git 操作流程标准。包含如下几个关键分支：名称说明master主分支develop主开发分支，包含确定即将开发的代码feature新功能分支，一般一个新功能对应一个分支，对于功能的拆分需要比较合理，以避免后面一些不必要的代码冲突release发布分支，发布时候用的分支，一般测试时候发现的BUG在这个分支进行修复hotfixhotfix分支，紧急修复BUG的时候使用的

一、proxy的概念Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。var proxy = new Proxy(target, handler); //target为目标对象，handler参数也是一个对象，用来定制拦截行为。定义一个拦截读取.

一、由来及意义Javascript中表示“集合”的数据结构，主要是 Array、Object、Map、Set 这四种数据集合，除此之外，它们相互之间还可以组合使用，例如Array的成员是Map，Map的成员是Object等。因此Javascript的需要一种统一的接口机制，来处理所有不同的数据结构。遍历器（Iterator）就是这样一种机制。它是一种接口，可以为各种不同的数据结构提供一种访问机制（访问接口），任何数据结构部署Iterator接口，就可以完成该数据解构成员的遍历操作（Iterator 接.

一、栈堆概念栈栈是内存中一块用于存储局部变量和函数参数的线性结构，遵循着先进后出的原则。数据只能顺序的入栈，顺序的出栈。当然，栈只是内存中一片连续区域一种形式化的描述，数据入栈和出栈的操作仅仅是栈指针在内存地址上的上下移动而已。如下图所示（以 C 语言为例）：如图所示，栈指针刚开始指向内存中 0x001 的位置，接着 sum 函数开始调用，由于声明了两个变量，往栈中存放了两个数值，栈指针也对应开始移动，当 sum 函数调用结束时，仅仅是把栈指针往下移动而已，并不是真正的数据弹出，数据还在，只不

Symbol 是什么?Symbol 是 ES6 新推出的一种基本类型，它表示独一无二的值，它可以接受一个字符串作为参数，带有相同参数的两个Symbol值不相等，这个参数只是表示Symbol值的描述而已，主要用于程序调试时的跟踪，当然你也可以不传入参数，同样的我们可以通过typeof来判断是否为Symbol类型。const s1 = Symbol();const s2 = Symbol();console.log(s1 === s2); // falseconst s1 = Symbol('de.

一、介绍proto(__ proto__)在类似 java 这种语言中，继承的概念是通过类和类之间实现的，但 javascript 根本没有类，都是对象，所以，在 javascript中，继承的概念是通过对象和对象之间实现的。在考虑 javascript 继承的时候，范围只限于引用数据类型，虽然引用数据类型分为 Function 和 Object 两种，但在继承问题上，不需要区分 Function 和 Object，只需要统一看成对象即可。__proto__和prototype 不同，prot.

原生ajax的请求过程一、请求流程创建XMLHTTPRequest对象。使用open方法设置和服务器的交互信息。设置发送的数据，开始和服务器端交互。注册事件。更新界面。二、步骤解析创建XMLHTTPRequest对象XMLHttpRequest是AJAX的基础。所有现代浏览器均支持XMLHttpRequest对象，（IE5 和 IE6 使用 ActiveXObject）。//新建XMLHttpRequest对象var ajax = new XMLhttpRequest();

对象的循环遍历一、方法种类for inObject.keys()Object.getOwnPropertyNames()Object.OwnPropertySymbols()Reflect.ownKeys()二、方法规则for…in：循环遍历对象自身的和继承的可枚举的属性（不含 Symbol 属性）。for (const key in obj) { console.log(key + ' --- ' + obj[key]); }Object.ke

Javascript垃圾回收机制一、什么是内存泄漏？程序的运行需要内存，当程序提出要求，操作系统就会供给内存。对于不再用到的内存，没有及时释放，就叫做内存泄漏。对于持续运行的服务进程，必须及时释放内存，否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。二、什么是垃圾回收机制?JavaScript具有垃圾收集器，垃圾收集器会按照固定的时间间隔周期性的执行。最常见的垃圾回收方式有两种：标记清除引用计数1.标记清除：原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量

一、DOM的事件模型是什么？DOM之事件模型：脚本模型内联模型（同类一个，后者覆盖）动态绑定（同类多个）<body> <!--⾏内绑定：脚本模型--> <button onclick="javascrpt:alert('Hello')">Hello1</button> <!--内联模型--> <button onclick="showHello()">Hello2</button> <!-

一、实现防抖函数防抖函数原理：在事件被触发n秒后再执⾏回调，如果在这n秒内⼜被触发，则重新计时。⼿写简化版:// 防抖函数 const debounce = (fn, delay) => { let timer = null; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay);

一、解析 URL Params 为对象let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled'; parseParam(url) /* 结 果 { user: 'anonymous', id: [ 123, 456 ], // 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型 city: '北京', // 中⽂需解码

一、验证是否是邮箱function isEmail(email) { var regx = /^([a-zA-Z0-9_\-])+@([a-zA-Z0-9_\-])+(\.[a-zA-Z0-9_\-])+$/; return regx.test(email); }语法：regex.test(tel)参数是一个字符串类型的值，返回true或者false，如果匹配返回true，否则返回false。...

一、验证是否是身份证function isCardNo(number) { var regx = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; return regx.test(number); }语法：regex.test(tel)参数是一个字符串类型的值，返回true或者false，如果匹配返回true，否则返回false。...

一、判断是否是电话号码function isPhone(tel) { var regx = /^1[34578]\d{9}$/; return regx.test(tel); }语法：regex.test(tel)参数是一个字符串类型的值，返回true或者false，如果匹配返回true，否则返回false。

一、===：称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false；1.如果类型不同，就一定不相等。2.如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN( ) 来判断，即 NaN===NaN 为 false）。3.如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。4.如果两个值都是true，或是false，那么相等。5.如果两个值都引用同一个对象或是函数，那么相等，否则不相等。6.

1.基本类型是存储在栈中的，但是一旦被闭包引用则成为常驻内存，会存在内存中。2.复杂类型会存储在内存堆中。

loader是用来告诉webpack如何转换某一类型的文件，并且引入到打包出的文件中plugins是用来拓展webpack功能的，他们会在整个构建过程中生效，执行相关的任务在webpack.config.js中配置module.exports = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } plugins: [ ..

1.什么是ajaxAjax能够在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，实现局部刷新，大大降低了资源的浪费，是一门用于快速创建动态网页的技术，ajax的使用分为四部分：1、创建XMLHttpRequest对象var xhr = new XMLHttpRequest();2、向服务器发送请求，使用xmlHttpRequest对象的open和send方法，3、监听状态变化，执行相应回调函数4、get请求通过url传参，post请求通过send方法传参2.ajax返回的状态0

1.Promise的含义Promise是异步编程的一种解决方案，比传统的解决方案一一回调函数和事件一一更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法来说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。（1）对象的状态不受

Map与其他数据结构的互相转换（1）Map转为数组前面已经提过，Map转为数组最方便的方法，就是使用拓展运算符（…）。const myMap = new Map() .set(true, 7) .set({foo: 3}, ['abc']);[...myMap]// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]（2）数组转为Map将数组传入Map构造函数额，就可以转为Map。new Map([ [true, 7], [{foo: 3}

Map遍历方法Map结构原生提供三个遍历器生成函数和一个遍历方法。————Map.prototype.keys()：返回键名的遍历器。————Map.prototype.values()：返回键值的遍历器。————Map.prototype.entries()：返回成员的遍历器。————Map.prototype.forEach()：遍历Map的所有成员。需要特别注意的是，Map的遍历顺序就是插入顺序。const map = new Map([ ['F', 'no'], ['T',

Map实例的属性与操作方法Map结构的实例有以下属性和操作方法。（1） size属性size属性返回Map结构的成员总数。const map = new Map();map.set('foo', true);map.set('bar', false);map.size // 2（2） Map.prototype.set(key,value)set方法设置键名key对应的键值为value，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就会新生成该键。const m

1.Map的含义和基本用法Javascript的对象（Object），本质上是键值对的集合（hash结构），但是传统上只能用字符当作键。这给它的使用带来了很大的限制。const data = {};const element = document.getElementById('myDiv');data[element] = 'metadata';data['[object HTMLDivElement]'] // "metadata"上面代码原意是将一个DOM节点作为对象data的键，但是

set遍历操作Set结构的实例有四个遍历方法，可以用于遍历成员。———