分享十道前端面试题 js篇

1.Ajax原理是什么？如何实现？

Ajax全称（Async Javascript and XML）即异步的Javascript和XML，是一种创建交互式网页应用的网页开发技术，可以在不加载整个页面的情况下，与服务器交换数据，并更新部分网页

Ajax原理简单来说就是通过XmlGgttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用Javascript来操作DOM来更新页面

实现Ajax异步交互需要服务器逻辑进行配合，需要完成一下步骤：

• 创建Ajax的核心对象XMLHttpRequest对象

• 通过XMLHttpRequest对象的open（）方法与服务端建立连接

• 构建请求所需的数据内容，并通过XMLHttpRequest对象的send（）方法发送给服务器端

• 通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端你的通信状态

• 接收并处理服务端向客户端响应的数据结果

• 将处理结果更新到HTML中

2.数组的常用方法有哪些？

 数组的操作方法可以归纳为增，删，改，查。要注意的是哪些会对原数组产生影响，哪些不会

下面对数组常用的方法做一个归纳

• 增

下面前三种是对原数组产生影响的方法，第四种没有影响

• push（）

• unshift（）

• splice（）

• concat（）

• 删

前三种会影响原数组，最后一种不会影响

• pop（）

• shift（）

• splice（）

• slice（）改

即修改原来数组的内容，常用splice

splice（）

传入是三个参数，分别是开始位置，要删除的元素数量，要插入的任意多个元素，返回删除元素的数组，对原数组产生影响

• 查

即查找元素，返回元素坐标或者元素值

• indexOf（）

• includes（）

• find（）

排序方法

数组有两个方法可以对元素重新排序

• reverse

• sort

转换方法

常见的转换方法有：

join（）

join（）方法接收一个参数，即字符串分隔符，返回包含所有项的字符串

迭代方法

常用来迭代数组的方法（都不改变原数组）如下：

• some（）

• every（）

• forEach（）

• filter（）

• map（） 

3.bind，call，apply的区别？如何实现一个bind？

apply、call、bind区别在于：

• 三者都可以改变函数的this指向

• 三者第一个参数都是this要指向的对象，如果没有这个参数或者参数为undefined或者null，则默认指向全局window

• 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入 

• bind是返回绑定this之后的函数，apply、call则是立即执行

实现bind的步骤可以分为三部分：

• 方式一：只在bind中传递函数参数

• 方式二：在bind中传递函数参数，也在返回函数中传递参数

• 兼容new关键字

4.javascript本地存储的方式有哪些？区别以及应用场景

 主要有四种，分别是：

• cookie

• sessionStorage

• localStorage

• indexedDB

区别：

• 存储大小：cookie数据大小不超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大很多，可以达到5M或者更大

• 有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除；sessionStorage数据在当前浏览器关闭后自动删除；cookie设置的cookie过期时间一直有效，即使窗口关闭或者浏览器关闭

• 数据与服务器之间的交互方式，cookie的数据会自动传递到服务器，服务器端也可以写cookie到客户端；sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存

应用场景：

• 标记用户与跟踪用户行为的情况，推荐使用cookie

• 适合长期保存在本地的数据，推荐使用localStorage

• 敏感账号一次性登录，推荐使用sessionStorage

• 存储大量数据的情况，在线文档保存编辑历史的情况，推荐使用indexedDB

5.说说对闭包的理解？使用场景有哪些？

闭包说通俗一点就是打通了一条在函数外部访问函数内部作用域的通道，正常情况下函数外部是访问不到函数内部作用域变量的

表象判断是不是闭包：函数嵌套函数，内部函数被return ，内部函数调用外层函数的局部变量 

优点：可以隔离作用域，不造成全局污染

缺点：由于闭包长期驻留内存，则长期这样会导致内存泄露

如何解决内存泄露：将暴露在外部的闭包重置为null

使用场景：封装组件，for循环和定时器结合使用，for循环和dom事件结合，可以在性能优化过程中，节流防抖函数的使用，导航栏获取下标的使用

 6.深拷贝与浅拷贝的区别？如何实现一个深拷贝？

javascript中存在两大数据类型：

• 基本类型

• 引用类型

基本类型数据保存在栈内存中

引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中

浅拷贝

浅拷贝指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝

如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址

即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址

深拷贝

深拷贝开辟一个新的栈，两个对象属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的 属性

常见的深拷贝方式有：

• _.cloneDeep（）

• jQuery.extend（）

• JSON.stringify（）

• 手写循环递归

7.说说javascript中的数据类型？存储上的差别？

在javascript中，可以分为两种类型：

• 基本类型

• 复杂类型 

两种类型的区别是：存储位置不同

• 基本数据存储于栈中

• 引用类型的对象存储于堆中

基本类型

基本类型主要分为六种：

• number

• string

• boolean

• undefined

• null

• symbol

引用类型

复杂类型统称为object，主要讲述以下三种：

• object

• array

• function

8. 什么是防抖和节流？有什么区别？如何实现？

本质上市优化高频率执行代码的一种手段

比如浏览器的resize、scroll、keypress、mousemove等事件触发时，会不断调用绑定在事件上的回调函数，极大的浪费资源、降低前端性能

为了优化体验，需要对这类事件进行调用次数的限制，对此我们可以采用throttle和debounce的方式来减少调用频率

定义

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

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

相同点：

• 都可以通过用serTimeout实现

• 目的都是降低回调执行频率，节省计算资源

不同点：

• 函数防抖：在一段连续操作结束后，处理回调，利用clearTimeout和setTimeout实现函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能

• 函数防抖关注一定时间连续触发的时间，只在最后执行一次，而函数节流一段时间内只执行一次

应用场景：

防抖在连续的时间，只需触发一次回调的场景有：

• 搜索框搜索输入，只需用户最有一次输入完，再发送请求

• 手机号、邮箱验证输入检测

• 窗口大小resize，只需要窗口调整完成后，计算窗口代销，防止重复渲染

节流在间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听

• 搜索框，搜索联想功能

 9.解释一下什么是事件代理？应用场景？

事件代理也称事件委托，通俗来说，就是把一个元素响应事件的函数委托到另一个元素

事件委托会把一个或者一组元素的事件委托到他的父层或者更外层的元素上，真正绑定事件的是外层元素，而不是目标元素

当事件响应到目标元素上时，会通过事件冒泡机制从而触发他的外层元素绑定的事件，然后在外层元素上去执行函数

应用场景

如果我们有一个列表，列表中有大量的列表项，我们需要在点击列表项的时候响应一个事件

如果给每个列表一一都绑定一个函数，那对于内存消耗是非常大的

这时候就可以事件委托，把点击事件绑定在父级元素上面，然后执行事件的时候再去匹配目标元素

10.说说对事件循环（EventLoop）的理解？

首先，javascript是一门单线程的语言，意味着同一时间内只能做一件事，但是这并不意味单线程 就是阻塞，而实现单线程非阻塞的方法就是事件循环

在javascript中，所有的任务都可以分为

• 同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行

• 异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等