前端面试题--JavaScript篇

一、JavaScript中的数据类型

JavaScript中共有八种数据类型：Number、String、Boolean、Object、Null、Undefined、null、Symbol、BigInt 其中Symbol和BigInt是ES6新增的数据类型

Symbol代表独一无二且不可改变的数据类型，主要为了解决可能出现的全局变量冲突问题

BigInt是一种数字类型的数据，它可以表示任意精度格式的整数

二、数据类型检测方式

1. typeof（） 其中数组对象和null都会被判断成Object

2. instanceof（） 内部运行机制是在原型链中能否找到该类型的原型 只能正确判断引用数据类型，不能正确判断基本数据类型

3. constructor

4. Object.prototype.toString.call()通过Object对象的原型方法toString来判断数据类型

三、判断数组的方式

1. 通过instanceof判断

2. 通过Object.prototype.toString.call()

3. 通过obj.__proto__=Array.prototype

4. 通过Array.isArray()

5. 通过Array.prototype.isPrototypeOf()

四、undefined和null的区别

undefined是未定义的，一般对象声明了还未定义会返回undefined；

null代表的含义是空对象，null主要用于赋值给一些可能会返回对象的变量，作为初始化；

typeof（null）返回值是object；typeof（undefined）返回值是undefined

五、==操作符的强制类型转换

首先会判断两者类型是否相同，相同的话就比较两者的大小；

类型不同的话进行强制类型转换；

会先判断是否在对比null和undefined，是的话就返回true；

判断两者类型是否为number和string，是的话就将string转化为number类型；

六、Object.is()和比较操作符“==”，“===”的区别

使用双等号进行判断时，如果两边类型不一致，会先进行强制类型转换再比较；

使用三等号进行判断时，如果两边类型不一致不会进行强制类型转换，直接返回false；

使用Object.is进行判断时，一般情况下和三等号是一致的，不同的是处理了一些特殊的情况，比如-0和+0不再相等，两个NaN是相等的；

七、JavaScript中的包装类型

在JavaScript中，基本类型是没有属性和方法的，为了便于操作基本类型的值，在调用基本类型的属性或方法时，JavaScript在后台隐式的将基本类型的值转换为对象；

JavaScript也可以使用Object函数显式的将基本类型转换为包装类型；

使用valueOf将包装类型转换为基本类型；

八、var、let和const的区别

1. var不存在块级作用域，let和const存在块级作用域；

2. var存在变量提升，let和const不存在变量提升，即变量只能在声明后被使用；

3. var声明的变量为全局变量，并将该变量添加为全局对象的属性，但let和const不会；

4. var允许重复声明变量，后声明的变量会覆盖前面声明的变量，但let和const不会；

5. 声明变量时，var和let可以不用设置初始值，但const必须设置初始值；

6. let创建的变量允许改变指针指向，const不允许；

九、箭头函数和普通函数的区别

1. 箭头函数比普通函数更简洁；

2. 箭头函数没有自己的this；

3. 箭头函数继承来的this指针指向永远不会改变；

4. 箭头函数不能作为构造函数使用；

5. 箭头函数没有自己的arguments参数；

6. 箭头函数没有prototype；

十、扩展运算符

1. 对象扩展运算符

对象的扩展运算符用于取出参数对象中所有可遍历属性，拷贝到当前对象中；

2. 数组扩展运算符

数组的扩展运算符将数组转换为用“，”分割的参数序列；

十一、Proxy可以实现什么功能

Proxy是ES6中新增的功能，可以用来自定义对象中的操作，vue3中通过Proxy替换原本的Object.defineProperty来实现数据响应式；

十二、new操作符的执行过程

1. 首先创建一个新的空对象；

2. 设置原型，将对象的原型设置为函数的prototype对象；

3. 将函数的this指针指向这个对象，执行构造函数的代码；

4. 判断函数的返回值类型，如果是值类型，返回创建的对象，如果是引用类型，返回这个引用类型的对象；

十三、JavaScript中的内置对象

Array、Math、String、Number、Date

1. Math

方法：Math.random()生成0-1之间随机小数；

Math.floor()向下取整；

Math.ceil()向上取整；

Math.round()四舍五入取整数；

Math.pow(x,y)求x的y次方；

Math.sqrt()求开方；

2. Number

方法：isFinite（）检查是否为有限的数字；

isNaN（）是否为NaN；

parseInt（）转化为整数；

parseFloat（）转化为浮点数；

Number（）转化为数字类型；

3. String

方法：charAt（index）获取index位置处的字符；

concat（）连接字符串；

indexOf（）查找符合条件的第一个字符串所在位置的下标；

lastIndexOf（）查找符合条件的第一个字符串所在位置的下标（从后往前查）；

slice（start，end）和substring（start，end）截取字符串；

replace（）、toUpperCase（）、toLowerCase（）；

十四、对JSON的理解

JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言识别，并可以转换为任意语言的对象，JSON在开发中主要用来数据交互；

json转js：JSON.parse(obj);

js转json：JSON.stringify();

十五、JavaScript脚本延迟加载的方式有哪几种

延迟加载就是等页面加载完成后再加载js文件；

1. defer属性：给脚本添加defer属性，这个属性会使脚本的加载与文档的解析同步进行，在文档解析完成后再执行这个脚本文件；

2. async属性：给脚本添加async属性，这个属性会使脚本异步加载；

3. 动态创建DOM方式；

4. 使用setTimeOut延迟方式；

十六、数组有哪些方法

join：用指定分隔符将数组每一项拼接成字符串；

push：向数组末尾添加元素；

pop：向数组末尾删除元素；

unshift：向数组首部添加元素；

shift：向数组首部删除元素；

sort：对数组元素进行排序；

reverse：颠倒数组中元素顺序；

concat：用于连接两个或多个数组；

slice：截取部分数组；

splice：可以实现数组的删除、替换和添加元素；

forEach：遍历数组；

filter：过滤功能；

indexOf：当前值在数组中第一次出现的位置；

lastIndexOf：当前值在数组中最后一次出现的位置；

find：返回匹配项；

findIndex：返回匹配项索引；

十七、对Ajax的理解

ajax是指通过JavaScript的异步通信，从服务器中获取xml文档并从中提取数据，再更新网页的对应部分而不用刷新整个网页；

十八、变量提升

变量提升即将变量声明提升到所在作用域最开始部分，可以在定义语句前被访问到；

变量提升可以提高性能且容错性更好；

十九、常见的DOM操作

1. 获取DOM节点

getElementById（）；

getElementsByTagName（）；

getElementsByClassName（）；

querySelector（）；

querySelectorAll（）；

2. 创建节点

createElement（）；

3. 删除节点

removeChild（）；

4. 添加节点

appendChild（）；

insertBefore（）；

改变元素内容：

innerText和innerHTML，前者不识别HTML标签，同时换行和空格会去除，后者可以识别，不去除换行和空格；

二十、鼠标事件

onmousemove：鼠标在某元素上移动；

onmouseover：鼠标移动到某元素之上（事件冒泡）；

onmouseenter：鼠标移入某元素之上（没有事件冒泡）；

onmouseleave：鼠标移出元素；

onmouseout：鼠标移出目标元素之上；

onmouseup：鼠标按钮被释放弹起时触发；

onmousedown：鼠标按钮被按下；

二十一、for in和for of的区别

for in遍历获取数组的索引，for of遍历获取数组的值；

for in会遍历对象的整个原型链，for of只遍历当前对象，不遍历原型链；

在遍历数组时，for in会返回数组中所有可遍历的属性，for of只返回数组下标对应的属性值；

for in适合遍历对象，for of适合遍历数组；

二十二、对原型和原型链的理解

当使用构造函数创建一个对象后，这个对象内部会包含一个指针，这个指针指向该构造函数的prototype属性对应的值，在es5中这个指针就叫对象的原型；

当访问一个对象的属性时，如果这个对象内部不存在这个属性，就会去该对象的原型对象中找这个属性，这个原型对象又会有自己的原型，于是就这个一直找下去，这个过程就称为原型链；

二十三、闭包

闭包是指有权访问另一个函数作用域中变量的函数；

创建闭包的常见方式就是在一个函数内部创建另一个函数；

二十四、bind、call和apply

共同点：都可以改变this指针指向；

区别：bind返回的是一个新的函数，需要调用才可以执行，call和apply可以直接执行；

call方法可以将实参在对象之后依次传递，apply需要将实参存放在一个数组中统一传递；

二十五、异步编程的实现方式

1. 回调函数的方式，缺点是多个回调函数嵌套的时候会造成回调函数地狱，上下两层回调函数的代码耦合度较高，不利于代码的维护；

2. promise的方式，使用promise方式可以将嵌套的回调函数作为链式调用，但有时会造成多个then链式调用造成代码语义不明确；

3. generator的方式，它可以在函数执行过程中将函数执行权转移出去，在函数外部还可以将执行权转移回来；

4. async函数的方式，async函数是promise和generator实现的一个自动执行的语法糖，它内部自带执行器；

二十六、对promise的理解

promise是异步编程的一种解决方案，它是一个对象，可以获取异步编程的消息，它的出现大大改变了异步编程的困境，避免了地狱回调；

三个状态：pending-进行中；fulfilled-已成功；rejected-已拒绝；

五个常用方法：then、catch、race、finally、all；

二十七、async和await

async函数是generator函数的语法糖，使用async关键字来表示，在函数内部使用await来表示异步；