前端面试题（js篇）

1、javascript中的数据类型

基本数据类型：

Number，String，Boolean，Undefined，null

复杂数据类型：

object，Array等

基本数据类型的数据直接存储在栈中，而复杂数据类型存储在堆中

PS:栈内存是自动分配内存的，而堆内存是动态分配内存的，不会自动释放的，所以每次使用完对象的时候都要设置为null,从而减少无用内存的消耗

2、判断数据类型的几种方法

typeof

instanceof

constructor

object.prototype.toString.call()

3、== 和 === 有什么区别

=== 是全等，会比较两边的数据类型和值的大小

== 是相等两边类型相同，比较大小，两边类型不同

4、call、apply、bind的区别

call：

非严格模式：如果不传参数，或者第一个参数是null或undefined,this都指向window

严格模式：第一个参数是谁，this就指向谁，包括null和undefined，如果不传参数this就是undefined

apply:

和call基本一致，区别在于apply需要把传递的参数放入数组

bind:

语法和call一模一样，区别在于bind只改变指向，不调用函数，参数为单个的值

5、字面量创建对象和new创建对象有什么区别？

字面量：

字面量创建对象更简单，方便阅读

不需要作用解析，速度更快

new内部：

创建一个新对象

使新对象的__proto__指向原函数的prototype

改变this指向（指向新的obj）并执行该函数，执行结果保存起来作为result

判断执行函数的结果是不是null或undefined,如果是则返回之前的新对象，如果不是则返回result

6、什么是闭包？怎么解决闭包

闭包：

函数嵌套函数

函数内部可以引用函数外部的参数和变量

参数和变量不会被垃圾回收机制回收

解决办法：1.立即执行函数 2. let声明变量----let定义变量

7、原型链

原型链：

多个__proto__组成的集合成为原型链

所有实例的__proto__都指向他们的构造函数prototype

所有的prototype都是对象，自然它的__proto__指向的是object()的prototype

所有的构造函数的隐式原型指向的都是Function()的显示原型

Object的隐式原型是null

8、JS中的常用的继承方式有哪些？

原型继承、类继承、ES6中的extend

9、深拷贝和浅拷贝

简单来说，就是B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝；如果B没变，那就是深拷贝

浅拷贝是拷贝地址，深拷贝是整个地址的值，浅拷贝的修改，会修改地址的值，深拷贝的修改，修改新的地址的值

实现浅拷贝的方法：

for...in只循环第一层

object.assign方法

直接用=赋值

实现深拷贝的方法：

采用递归去拷贝所有层级属性

通过JSON对象来实现深拷贝

lodash函数库实现深拷贝

10、你是如何理解 Promise 的？

主要解决异步深层嵌套的问题

promise提供了简洁的API，使得异步操作更加容易

promise基本使用：

promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败的回调函数

promise的基本API:then()得到异步正确结果

catch()获取异常信息

finally()成功与否都会执行（不是正式标准）

11、宏任务和微任务都有哪些

宏任务：script、setTimeOut、setInterval、setImmediate

微任务:promise.then,process.nextTick、Object.observe、MutationObserver

注意：Promise是同步任务

12、var let const 有什么区别？

var 变量，没有块的概念，可以跨块访问，不能跨函数访问

let 变量，只能在块级作用域里访问，不能跨块访问，也不能跨函数访问

const 常量，使用时必须初始化，只能在块级作用域里访问，且不能访问

13、什么是跨域？跨域的方式都有哪些？

根据浏览器的同源策略造成的，域名，协议，端口只要有一个不一样就被成为跨域

JSONP 只能get请求

CORS 通过自定义请求来让服务器和浏览器进行沟通

14、get和post区别

冪等/不冪等（可缓存/不可缓存）

get请求是冪等的，所以get请求的数据是可以缓存的

而post请求是不冪等的，查询查询对数据是有副作用的，是不可缓存的

传参

get传参，参数是在url中的，准确的说get传参也可以放到body中，只不过不推荐使用

post传参，参数是在请求体中，准确的说post传参也可以放到url中，只不过不推荐使用

安全性

get较不安全

post较为安全

准确的说两者都不安全，都是明文传输的，在路过公网的时候都会被访问到，不管是url还是header还是body，都会被访问到，要想做到安全，就需要使用https

参数长度

get参数长度有限，是较小的

准确来说，get在url传参的时候是很小的

post传参长度不受限制

发送数据

post传参发送两个请求包，一个是请求头，一个是请求体，请求头发送后服务器进行验证，要是验证通过的话就会给客户端发送一个100-continue的状态码，然后就会发送请求体

字符编码

get在url上传输的时候只允许ASCII编码

15、说说你知道的状态码

2xx开头的表示成功

一般就是200

3xx开头的表示重定向

301永久重定向

302临时重定向

304表示可以在缓存中取数据（协商缓存）

4xx开头表示客户端错误

403跨域

404请求资源不存在

5xx开头表示服务端错误

16、localStorage、SessionStorage、cookie

localStorage

生命周期：关闭浏览器后数据依然保留，除非手动清除，否则一直在

作用域：相同浏览器的不同标签在同源情况下可以共享localStorage

sessionStorage

生命周期：关闭浏览器或者标签后即失效

作用域：只在当前标签可用，当前标签的iframe中且同源可以共享

cookie

是保存在客户端的，一般由后端设置值，可以设置过期时间

储存大小只有4K

一般用来保存用户的信息的

在http下cookie是明文传输的,较不安全

17、从浏览器输入url后都经历了什么？

先进行DNS域名解析，先查看本地hosts文件，查看有没有当前域名对应的ip地址，若有直接发起请求，没有的话会在本地域名服务器去查找，该查找属于递归查找，如果本地域名服务器没查找到，会从根域名服务器查找，该过程属于迭代查找，根域名会告诉你从哪个与服务器查找，最后查找到对应的ip地址后把对应规则保存到本地的hosts文件中。

18、什么是回流什么是重绘？

回流

render树中一部分或全部元素需要改变尺寸、布局、或着需要隐藏而需要重新构建，这个过程叫做回流

回流必将引起重绘

重绘

render树中一部分元素改变，而不影响布局的，只影响外观的，比如颜色。该过程叫做重绘

页面至少经历一次回流和重绘（第一次加载的时候）

19、事件冒泡和事件捕捉有什么区别

事件冒泡

在addEventListener中的第三属性设置为false（默认）

从下至上（儿子至祖宗）执行

事件捕捉

在addEventListener中的第三属性设置为true

从上至下（祖宗到儿子）执行

20、数组的几种循环

forEach方法默认没有返回值

map方法参数依次为（当前循环元素，该元素下标，数组本身）默认返回一个数组，map不改变原数组

filter方法过滤，若为true,则返回数组

some方法全为true,返回true，

every方法有个为true,就返回true

reduce方法数组元素累加累乘

for of方法

21、字符串转数组，数组转字符串的方法

字符串转数组：

split("") 参数为要以什么字符分隔字符串

数组转字符串：

toString()

join(",")

22、数组常用的方法？

会改变原数组：

pop (删除数组的最后一个元素并返回删除的元素)

push(向数组的末尾添加一个或更多元素，并返回新的长度)

shift(删除并返回数组的第一个元素）

unshift(向数组的开头添加一个或更多元素，并返回新的长度)

reverse(反转数组的元素顺序)

sort(对数组的元素进行排序)

splice(用于插入、删除或替换数组的元素)

会改变原数组：

concat---连接两个或更多的数组，并返回结果。

every---检测数组元素的每个元素是否都符合条件。

some---检测数组元素中是否有元素符合指定条件。

filter---检测数组元素，并返回符合条件所有元素的数组。

indexOf---搜索数组中的元素，并返回它所在的位置。

join---把数组的所有元素放入一个字符串。

toString---把数组转换为字符串，并返回结果。

lastIndexOf---返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

map---通过指定函数处理数组的每个元素，并返回处理后的数组。

slice---选取数组的的一部分，并返回一个新数组。

valueOf---返回数组对象的原始值

23、JS 里垃圾回收机制是什么

标记清除法

垃圾回收机制获取根并标记他们，然后访问并标记所有来自它们的引用，然后在访问这些对象并标记它们的引用…如此递进结束后若发现有没有标记的（不可达的）进行删除，进入执行环境的不能进行删除

引用计数法

当声明一个变量并给该变量赋值一个引用类型的值时候，该值的计数+1，当该值赋值给另一个变量的时候，该计数+1，当该值被其他值取代的时候，该计数-1，当计数变为0的时候，说明无法访问该值了，垃圾回收机制清除该对象

缺点：当两个对象循环引用的时候，引用计数无计可施。如果循环引用多次执行的话，会造成崩溃等问题。所以后来被标记清除法取代。

24、怎么判断一个对象是空对象

for...in... 遍历属性不为空返回值为true 为空返回值false

JSON.stringify == "{}"可以直观观察

ES6新增的方法Object.keys() 返回值是对象中属性名组成的数组再通过length来判断是否是空对象, Object.keys().length

25、防抖和节流

防抖

n秒后在执行该事件，若在n秒内被重复触发，则重新计时

节流

n秒内只运行一次，若在n秒内重复触发，只有一次生效

26、es6新增了什么

新增了 let 声明变量和 const 声明常量

模板字符串

对象解构赋值

扩展运算符和剩余参数

箭头函数

set 数据结构，类似于数组，但是内部成员都是唯一的，使用 new Set() 生成一个set 数据结构

27、数组去重

将数组的每一个元素依次与其他元素做比较，发现重复元素，利用数组方法splice()删除重复元素

使用双层循环改变原数组

借助新数组，判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中（原数组长度不变但被按字符串顺序排序）

创建一个新数组，判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中

借助indexOf()方法判断此元素在该数组中首次出现的位置下标与循环的下标是否相等

利用数组中的filter方法

28、字符串转对象，对象转字符串

对象转成字符串

JSON.stringify()

字符串转成对象

JSON.parse()

29、js中Math常用的方法

Math.abs() 获取绝对值

Math.ceil() and Math.floor() 向上取整和向下取整

Math.round() 四舍五入

Mand.random() 取[0,1)的随机小数

Math.max() and Max.min() 获取一组数据中的最大值和最小值

Math.PI 获取圆周率π 的值

Math.pow() 获取一个值的多少次幂

Math.sqrt() 对数值开方

30、HTTPS和HTTP的区别

HTTPS协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的SSL加密传输协议。

HTTP的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输，身份认证的网络协议，比HTTP协议安全。

31、this的指向

普通函数调用，this指向window

构造函数，this指向实例对象

对象方法调用，this指向该方法所属的对象

通过事件绑定的方法，this指向绑定事件对象

定时器函数，this指向window

箭头函数没有自己的this，当在内部使用this时，它会指向最近一层作用域的this

前端面试题（js篇）相关推荐

前端面试题js篇，持续更新
1.解释重绘与回流,以及如何优化? 重绘与回流: 在页面加载时,浏览器会把获取到的html代码解析成dom树,dom树中包含html所有标签以及js动态生成的元素等.浏览器会把所有的样式(即css ...
2023前端面试题——JS篇
1.判断 js 类型的方式 1. typeof 可以判断出'string','number','boolean','undefined','symbol' 但判断 typeof(null) 时值为 ' ...
详细前端面试题javascript篇--持续更新
最新前端面试题汇总大全(超详细含vue,react,css,js,webpack,性能优化等)–持续更新点击查看前端HTML篇前端CSS篇前端面试题js篇--持续更新 1. JS 数据类型 ?存 ...
http协议修改js或html,web前端面试题对答篇：HTTP fetch发送2次请求的原因？
web前端面试题对答篇:HTTP fetch发送2次请求的原因? 2020-08-31 04:36:44 289 编程开发 HTTP fetch发送2次请求的原因?面对这道出现频率较高的面试题,我想说 ...
前端面试题-JavaScript篇
web前端面试题 JavaScript篇 1.JavaScript的数据类型都有哪些(8条)? ES5中有6种:Number.String.Boolean.Undefined.Null.Object ...
前端面试题 ---- html篇
前端面试题 ---- html篇想要换工作了,转载自https://www.cnblogs.com/zhangshuda/p/8464772.html,感谢原博主. 一.html 1.html和xh ...
详细前端面试题HTML篇
CSS篇 JS篇 Vue篇 TypeScript篇 React篇微信小程序篇前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新前端面试题汇总大全二(含答案超详细,Vu ...
2023前端面试题------JS 面试题(2) es6
2023前端面试题------es6 面试题三. JS高频面试题 15. 事件循环 16. 微任务和宏任务 17. http相关 18. 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生 ...
winform接收http请求_web前端面试题对答篇：HTTP fetch发送2次请求的原因？
HTTP fetch发送2次请求的原因?面对这道出现频率较高的面试题,我想说的是:发送两次请求的情况确实存在,但这与你所使用的是不是http协议,所采用的是不是fetch真的没有一毛钱关系! 接下来, ...
初级前端面试题 - js
前言:众所周知,HTML,CSS,JS是学习前端所必备的.js的基础学好了,框架类的vue,react等都会接受的很快,因此js是前端很总要的一个部分,这篇文章将会结合面试题,对js的知识点进行总结 ...

前端面试题（js篇）

1、javascript中的数据类型

2、判断数据类型的几种方法

3、== 和 === 有什么区别

4、call、apply、bind的区别

5、字面量创建对象和new创建对象有什么区别？

6、什么是闭包？怎么解决闭包

7、原型链

8、JS中的常用的继承方式有哪些？

9、深拷贝和浅拷贝

10、你是如何理解 Promise 的？

11、宏任务和微任务都有哪些

12、var let const 有什么区别？

13、什么是跨域？跨域的方式都有哪些？

14、get和post区别

15、说说你知道的状态码

16、localStorage、SessionStorage、cookie

17、从浏览器输入url后都经历了什么？

18、什么是回流什么是重绘？

19、事件冒泡和事件捕捉有什么区别

20、数组的几种循环

21、字符串转数组，数组转字符串的方法

22、数组常用的方法？

23、JS 里垃圾回收机制是什么

24、怎么判断一个对象是空对象

25、防抖和节流

26、es6新增了什么

27、数组去重

28、字符串转对象，对象转字符串

29、js中Math常用的方法

30、HTTPS和HTTP的区别

31、this的指向

前端面试题（js篇）相关推荐

最新文章

热门文章

前端面试题（js篇）

1、javascript中的数据类型

2、判断数据类型的几种方法

3、== 和 === 有什么区别

4、call、apply、bind的区别

5、字面量创建对象和new创建对象有什么区别？

6、什么是闭包？怎么解决闭包

7、原型链

8、JS中的常用的继承方式有哪些？

9、深拷贝和浅拷贝

10、你是如何理解 Promise 的？

11、宏任务和微任务都有哪些

12、var let const 有什么区别？

13、什么是跨域？跨域的方式都有哪些？

14、get和post区别

15、说说你知道的状态码

16、localStorage、SessionStorage、cookie

17、从浏览器输入url后都经历了什么？

18、什么是回流 什么是重绘？

19、事件冒泡和事件捕捉有什么区别

20、数组的几种循环

21、字符串转数组，数组转字符串的方法

22、数组常用的方法？

23、JS 里垃圾回收机制是什么

24、怎么判断一个对象是空对象

25、防抖和节流

26、es6新增了什么

27、数组去重

28、字符串转对象，对象转字符串

29、js中Math常用的方法

30、HTTPS和HTTP的区别

31、this的指向

前端面试题（js篇）相关推荐

最新文章

热门文章

18、什么是回流什么是重绘？