JavaScript常见面试题（更新中）

介绍js的基本数据类型

js一共有五种数据类型 分别是undefined null boolean number string 还有ES6中新增的symbol和ES10的bigInt
symbol代表创建后独一无二的不可变的数据类型，他的出现我认为是为了解决可能出现的全局变量冲突的问题
BigInt是一种数字类型的数据 它可以表示任意精度格式的整数 使用BigInt可以安全的存储和操作大的整数 即使这个数已经超过了Number能够表示的安全整数范围

javaScript有几种类型的值

js可以分为两种类型的值 一种是基本数据类型 一种是复杂数据类型
基本数据类型undefined null boolean string number symbol bigInt
负载数据类型是Object 所有其他的如Array Date 等数据类型都可以理解为Object类型的子类
两种类型的主要区别在于他们的存储位置不同 基本数据类型的值直接保存在栈中 负载类型的值保存在堆中 通过使用在栈中保存的指针来获取堆中的值

什么是堆 什么是栈 他们之间有什们区别与联系

堆与栈的概念存在于数据结构中和操作系统中
在数据结构中 栈中数据存取方式为先进后出 而堆是一个优先级队列 是按照优先级来排序的 优先级可以按照大小来规定 完全二叉树是堆的一种实现方式
在操作系统中 内存被分为栈区与堆区
栈区内存由编译器自动分配释放 存放函数的参数 局部变量的值等 其操作方式类似于数据结构中的栈
堆区内存一般由程序员分配释放 若程序员不释放 程序结束时可能由垃圾回收机制回收

内部属性[[Class]]是什么

所有typeof饭hi值为"object"的对象（如数组）都包含一个内部属性[[Class]] (我们可以把它看做一个内部的分类而非传统的面向对象的类) 这个属性无法直接访问 一般通过Object.prototype.toString()来查看
// 我们自己创建的类就不会有这份特殊待遇，因为 toString() 找不到 toStringTag 属性时只好返回默认的 Object 标签

// 默认情况类的[[Class]]返回[object Object]
class Class1 {}
Object.prototype.toString.call(new Class1()); // "[object Object]"
// 需要定制[[Class]]
class Class2 {get [Symbol.toStringTag]() {return "Class2";}
}
Object.prototype.toString.call(new Class2()); // "[object Class2]"

介绍 js 有哪些内置对象？

js中的内置对象主要指的是在程序执行前存在全局作用域里的由js定义的一些全局值属性、函数和用来实例化其他对象的构造函数对象 一般我们经常用到的如全局变量值NaN undefined 全局函数如paseInt§、paseFloat()用来实例化对象的构造函数如Date、Object等，还有提供数学计算的单体内置对象如Math对象

undefined 与 undeclared 的区别？

已在作用域中声明但还没有赋值的变量 是undefined的 还没有在作用域中声明过的变量 是undeclared的
对于undeclared变量的引用 浏览器会报引用错误 我们可以使用typeof的安全防范机制来避免报错 因为对与undeclared变量 typeof会返回’undefined’

undefined与null的区别

首先undefined与null都是基本数据类型 这两个基本数据类型分别都只有一个值 就是undefined和null
undefined代表的是未定义 null代表的含义是空对象 一般变量声明了但还没有定义的时候就会返回undefined
null主要赋值给一个可能会返回对象的变量
undefined在js中不是一个保留字 这意味者我们可以使用undefined来作为一个变量名 但是是非常危险的 我们可以使用void 0来获得安全的undefined值
当我们对于两种类型使用typeof进行判断的时候 Null类型会返回“Object” 这是一个历史遗留问题 当我们使用双等号进行比较时会返回true
三等号会返回false

如何获取安全的undefined值

因为undefined是一个标识符 所以可以被当作变量来使用和赋值 但是会影响undefined的正常判断
我们可以使用void 0 来获得undefined

说几条写JavaScript的基本规范

一个函数作用域中所有的变量声明应该尽量提到函数首部 用一个var声明变量 不允许出现两个连续的var声明 声明时如果变量没有值 应该给变量赋值对应类型的初始值 便于他人理解代码
进行比较时候 尽量使用三等代替两等
switch语句必须带有default分支
for循环必须使用大括号
if语句必须使用大括号

JavaScript原型 原型链 有什么特点

在js中我们是使用构造函数来新建一个对象的 每一个构造函数的内部都有一个prorotype属性值 这个属性值是一个对象 这个对象包含了可以由该构造函数所有实例共享的属性和方法。当我们使用构造函数创建一个对象后 对象的内部将包含一个指针 指向构造函数的prorotype属性对应的值 在ES5中这个指针被称为对象的原型 一般来说我们不应该能够获取到这个值 但是在浏览器中实现了__proto__ 属性来让我们访问这个属性 但是我们最好不要使用这个属性 因为它不是规范中规定的 ES5中新增了一个object.getPrototypeOf()方法，我们可以通过这个方法来获取对象的原型

当我们访问一个对象的属性时 如果这个对象内部不存在这个属性 那么他会去它的原型对象里找到这个属性，这个原型对象又会有自己的原型 于是就会一直找下去 这就是原型链的概念 原型链的尽头一般来说都是Object.prototype所以这就是我们新建的对象为什么能够使用toString()等方法的原因

特点：
javaScript对象是通过引用来传递的 我们创建的每个新对象实体中并没有属于自己的原型副本 当我们修改原型时 与之相关的对象也会继承这一改变

js中获取原型的方法

p.proto
p.constructor.prototype
Object.getPrototypeOf§

在js中不同进制数字的表示方式

以0X、0x开头的表示为16进制
以0、0O、0o开头的表示为8进制
以0B、0b开头的表示为2进制

let和const的注意点

声明变量只在声明时的代码块内有效
不存在声明提升
存在暂时性死区 如果在变量生命前使用 会报错
不允许重复声明 重复声明会报错

什么是rest参数

rest 参数（形式为…变量名），用于获取函数的多余参数。

什么是尾调用，使用尾调用有什么好处？

尾调用指的是在函数最后一步调用另一个函数 我们的代码执行是基于执行栈的 所以我们在一个函数调用另一个函数时 我们会保留当前的执行上下文 然后在新建另一个执行上下文加入栈中 使用尾调用的话 因为是最后异步 所以这时我们就不用保留当前的执行上下文 从而节省了内存 这就是尾调用优化 ES6的尾调用优化只在严格模式下开启 正常模式是无效的

Symbol 类型的注意点？

Symbol函数不能使用new命令 否则会报错
Symbol函数可以接受一个字符串作为参数 表示对Symbol实例的描述 主要是为了在控制台显示 或者转化为字符串时 比较容易区分
Symbol作为属性名 该属性不会出现在for…in for…of循环中 也不会被Object.keys() Object.getOwnPropertyNames() JSON.stringify()返回
Object.getOwnPropertySymbols方法返回一个数组 成员是当前对象的所有用作属性名的Symbol值
Symbol.for接受一个字符串作为参数 然后搜索有没有以该参数作为名称的Symbol值 如果有 就返回这个Symbol值 否则就新建并返回一个以该字符串为名称的Symbol值
Symbol.keyFor方法返回一个已登记的Symbol类型值的key

Set和WeakSet结构

ES6提供了新的数据结构Set 它类似于数组 但是成员的值都是唯一的 没有重复的值
WeakSet结构与Set类似 也是不重复的值的集合 但是WeakSet的成员只能是对象 而不能是其他类型 WeakSet中的对象都是弱引用 即垃圾回收机制不考虑WeakSet对该对象的引用

Map 和 WeakMap 结构

Map数据结构 它类似于对象 也是键值对的集合 但是键的范围不限于字符串 各种类型的值（包括对象）都可以当做键
WeakMap结构与Map结构类似 也是用于生成键值对的集合 但是WeakMap只接受对象作为键名（null除外） 不接受其他类型的值作为键名 而且WeakMap的键名所指向的对象 不计数垃圾回收机制

什么是Proxy

Proxy用于修改某些操作的默认行为 等同于在语言层面做出修改 属于一种元编程 即对编程语言进行编程
Proxy可以理解成 在目标对象前架设一层拦截 外界对该对象的访问都必须先通过这层拦截 因此提供了一种机制 可以对外界访问进行过滤与改写

Reflect对象创建的目的

将Object对象上一些明显属于语言内部的方法（比如Object.defineProperty）放到Reflect对象上
修改某些Object方法的返回结果 让其变得合理
让Object操作都变成函数行为
Reflect对象的方法与Proxy对象方法一一对应 只要是Proxy对象的方法 就能在Reflect对象上找到对应的方法 就让Proxy对象可以方便的调用对应的Reflect方法 完成默认行为 作为修改行为的基础

require 模块引入的查找方式？

当 Node 遇到 require(X) 时，按下面的顺序处理。
（1）如果 X 是内置模块（比如 require(‘http’)）
a. 返回该模块。
b. 不再继续执行。
（2）如果 X 以 “./” 或者 “/” 或者 “…/” 开头
a. 根据 X 所在的父模块，确定 X 的绝对路径。
b. 将 X 当成文件，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。
X
X.js
X.json
X.node
c. 将 X 当成目录，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。
X/package.json（main字段）
X/index.js
X/index.json
X/index.node
（3）如果 X 不带路径
a. 根据 X 所在的父模块，确定 X 可能的安装目录。
b. 依次在每个目录中，将 X 当成文件名或目录名加载。
（4）抛出 “not found”

什么是 Promise 对象，什么是 Promises/A+ 规范？

Promise 对象是异步编程的一种解决方案，最早由社区提出。Promises/A+ 规范是 JavaScript
Promise 的标准，规定了一个 Promise 所必须具有的特性。
Promise 是一个构造函数，接收一个函数作为参数，返回一个 Promise 实例。一个 Promise 实例有三种
状态，分别是 pending、resolved 和 rejected，分别代表了进行中、已成功和已失败。实例的状态只能
由 pending 转变 resolved 或者 rejected 状态，并且状态一经改变，就凝固了，无法再被改变了。状
态的改变是通过 resolve() 和 reject() 函数来实现的，我们
可以在异步操作结束后调用这两个函数改变 Promise 实例的状态，它的原型上定义了一个 then 方法，使
用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务，会在本轮事件循环的末尾
执行。

如何检测浏览器所支持的最小字体大小？

用 JS 设置 DOM 的字体为某一个值，然后再取出来，如果值设置成功，就说明支持。

怎么做JS代码Error统计

error 统计使用浏览器的 window.error 事件。

单例模式什么

单例模式保证了全局只有一个实例来被访问。比如说常用的如弹框组件的实现和全局状态的实现。

策略模式是什么

策略模式主要用来将方法的实现和方法的调用分离开 外部通过不同的参数可以调用不同的策略

代理模式是什么

代理模式就是为一个对象提供一个代用品或替代符 以便控制对它的访问

中介者模式是什么

中介者模式表示 多个对象通过一个中介者进行交流而不是直接交流 这样能够将通信的各个对象及逆行解耦

适配器模式是什么

适配器用来解决两个接口不兼容的情况 不需要改变原来的接口 通过包装一层的方式实现两个接口正常协作 假如我们需要一个新的接口返回方式 但是老的接口在太多地方用了 不能随意更改 这时就可以使用适配器模式 或者当我们想要一种自定义的时间返回格式 但是又不能更改js时间格式化的接口 这时就可以使用适配器模式

观察者模式与发布订阅模式有什么不同

发布订阅模式其实属于广义上的观察者模式
观察者模式中 观察者直接订阅目标事件 在目标发出内容改变的事件时 直接接受事件并作出响应
发布订阅模式中 发布者与接收者之间多了一个调度中心 调度中心一方面从发布者接受事件 一方面向订阅者发布事件 订阅者需要在调度中心订阅事件 通过调度中心 实现了发布于订阅的解耦 提高代码的维护性

开发中常见的几种Content-Type

application/x-www-form-urlencoded
浏览器的原生form表单 如果不设置enctype属性 那么最终会以application/x-www-form-urlencoded方式提交数据 这种方式提交的数据存放在body中 按照key1=val1&key2=val2的方式进行编码 key于val都进行url转码
multipart/form-data
该方式也是常见的post提交方式 通常表单上传文件时使用该种方式
application/json
告诉服务器消息主题是序列化后的JSON字符串
text/xml
该种方式主要用于提交XML格式的数据

如何确定页面的可用性时间，什么是 Performance API？

Performance API 用于精确度量、控制、增强浏览器的性能表现。这个 API 为测量网站性能，提供以前没有办法做到的精度。
使用 getTime 来计算脚本耗时的缺点，首先，getTime方法（以及 Date 对象的其他方法）都只能精确到毫秒级别（一秒的千分之一），想要得到更小的时间差别就无能为力了。其次，这种写法只能获取代码运行过程中的时间进度，无法知道一些后台事件的时间进度，比如浏览器用了多少时间从服务器加载网页。为了解决这两个不足之处，ECMAScript 5引入“高精度时间戳”这个 API，部署在 performance 对象上。它的精度可以达到1毫秒的千分之一（1秒的百万分之一）。
navigationStart：当前浏览器窗口的前一个网页关闭，发生 unload 事件时的 Unix 毫秒时间戳。如果没有前一个网页，则等于 fetchStart 属性。
loadEventEnd：返回当前网页 load 事件的回调函数运行结束时的 Unix 毫秒时间戳。如果该事件还没有发生，返回 0。

js中的命名规则

第一个字符必须是字母下划线或美元符号
其他可以是下划线美元符号或任何字母或数字
推荐使用驼峰命名法

js语句末尾分号是否可以省略

语句结尾的分号不是必须的 但是写上可以有利于代码的维护性 在压缩时 不容易出错

Object.assign()

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象 它将放回目标对象

Math.ceil()和Math.floor()

Math.ceil() == 向上取整 返回一个大于或等于给定数字的最小整数

Math.floor() == 向下取整 返回一个小于或等于给定数字的最大整数

js for循环的注意点

当判断语句有多个语句时 以最后一个判断语句的值为准 如果没有判断语句 则循环一直进行

一个列表假设有100000个数据 怎么办

将数据分页 利用分页原理 每次服务器只返回一定数目的数据 浏览器每次只对一部分进行加载
使用懒加载的方法 每次加载一部分数据 其余数据需要使用时再去加载

js中倒计时的纠偏实现

在前端实现中我们一般使用setTimeout于setInterval方法来实现一个倒计时效果 但是使用这些方法会造成事件偏差的问题 这时由于js程序的执行机制造成的 setTImeout于setInterval的作用是每隔一段时间将回调事件加入到事件队列中 因此事件是不会立即执行的 只有当执行栈为空的时候才会取出事件执行 这就是造成误差的原因
解决方法
第一种是通过前端定时向服务器发送请求获取新的时间差 来校准倒计时时间
第二种是前端根据偏差时间来自动调整时间间隔的方式实现 我们通过一个变量来记录已经倒计时的秒数 第一次函数调用的时候 首先将变量加一 然后根据这个变量和每次间隔的时间就可以计算出无偏差时应该显示的时间 我们再将真实事件于这个事件相减 就可以得到偏差时间的大小 我们从间隔时间中减去这个偏差时间 依次来纠正

进程间通信的方式

管道通信
消息队列通信
信号量通信
信号通信
共享内存通信
套接字通信

ele.getElementsByClassName和ele.querySelectorAll的区别

element.getElementsByClassName返回一个即时更新的HTMLCollection
element.querySelectorAll返回一个非即时更新的NodeList
前者是动态的 改变DOM结构会同步 后者只会记录调用api时的结果