面试题-整理

小凡爱睡觉
128 阅读17分钟

背诵  面试题

one  深拷贝浅拷贝的区别

  • 答案：深拷贝和浅拷贝是指在赋值一个对象时，拷贝的深度不同。

  • 浅拷贝 将原对象或原数组的引用直接赋给新对象，新数组，新对象/数组只是原对象的一个引用

  • 深拷贝 创建一个新的对象和数字，将原对象的各项属性的值(数组的所有元素)拷贝过来，是“值”而不是“引用”

two Typeof 与 instanceof 区别

  • Typeof and instanceof 操作符都是用来 判断数据类型的 使用的场景却各不相同，其中一些细节也需要特别注意

  • typeof  运算符返回一个字符串 表示操作数的类型

  • instanceof  运算符用于检测构造函数prototype属性是否出现在某个实例对象的原型链上

three bind、call、apply区别

call

  1.  与 apply类似,都是在特点的作用域中调用函数

  2. 但是传入参数的形式不同,call是把参数列举出来传入函数

apply

1 与call类似，都是在特定的作用域中调用函数

2 但是传入参数的形式不同，apply是把参数放在一个数组里传入

bind

1 与call和apply的不同之处在于bind不会立即调用函数，而是返回一个新的函数，需要在需要的时候在调用，也就是提前指定好函数的执行环境

Four new操作符具体干了什么

new 操作符用于创建一个给定构造函数的实例对象

1 new 通过构造函数 person 创建出来的实例可以访问到构造函数中的属性

2 new通过构造函数 person 创建处理的实例可以访问到构造函数原型链中的属性

3 构造函数 person 的 this指向是new通过构造函数 person创建出来的实例

Five 什么是防抖和节流，有什么区别

防抖和节流本质是不一样的，防抖动是多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

高频事件触发，但在n秒内只会执行一次，所有节流会稀释函数的执行频率

思路:每次触发事件时判断当前是否有等待执行的延时函数

six 箭头函数与普通函数的区别

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

2 箭头函数没有自己的this

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

4 call,apply,bind等方法不能改变箭头函数中的this的指向

5 箭头函数不能作为构造函数使用

6 箭头函数没有自己的arguments

7 箭头函数没有prototype

seven 说说你对作用域链的理解

作用域 即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合,作用域决定了代码区块中变量和其他资源的可见性

作用域分类

1 全局作用域

任何不在函数中或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问

2 函数作用域

函数作用域也叫局部作用域，如果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问，不能在函数以外去访问

3 块级作用域

Es6引入let和const关键字和var关键字不同，在大括号中使用let和const声明的变量存在于块级作用域中，在大括号之外不能访问这些变量

eight 基本数据类型和引用数据类型的区别

1 基本数据类型是存放在栈中的简单数据段

2 引用数据类型是存放在堆内存中具体内容的引用地址，通过这个地址可以快速查找到对象

nine 说说对原型的理解

原型

原型js具有公共属性和方法的对象

原型的作用其实js为类(函数)提供一个【公共区域】,在这个公共区域中声明的属性和方法能够被所有通过这个类所创建的对象所访问到，减少内存消耗

原型作用 1 数据共享 节省内存空间

作用2 为了实现继承

原型是一个对象，在原型中通常拥有两个属性

1 构造器 constructor 该属性指向了这个类(函数)本身

2 原型指向_proto_该属性指向原型本身，提供给通过类创建的对象使用。

Ten 说说对闭包的理解

闭包的概念

闭包的函数:声明一个在函数中的函数，叫做闭包函数

闭包：内部函数总是可以访问其所在的外部函数中声明的变量和参数，即使在其外部函数被返回了之后

闭包的特点

让外部访问函数内部成为可能

局部变量会常驻在内存中

可以避免使用全局变量，防止全局变量污染

会造成内存的泄漏(有一块内存空间被长期占用，而不被释放

闭包的创建

闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰，闭包会发生内存泄漏，每次外部函数执行的时候，外部函数的引用地址不同，都会重新创建一个新的地址。但凡是当前活动对象中有内部子集引用的数据，那么这个时候，这个数据不删除，保留一根指针给内部活动对象

Eleven 说说对XHR的理解

1  XMLHttpRequest对象用于服务器交互，在AJAX编程中作为AJAX原理被大量使用

2 axios内部便是采用了XHR来与服务器进行交互的

3 应用步骤

1 创建XHR对象

2 配置请求方法和请求URL地址

3 监听loadend事件,接收相应结果

4 发送请求

twelve  聊一聊对Promi se的理解

12.1 什么是promise

1 Promise是异步编程的一种方案，解决了地狱回调的问题，是一种链式调动的方式

2 Promise 简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果

3 Promise是一个对象，从它可能获取异步操作的最终状态(成功或

失败)

4 Promise是一个构造函数，对外提供统一的API，自己身上有all,reject,resolve等方法，原型上有then,catch等方法

12.2 名词约定

Promise(首字母小写) 对象指的是 promise实例对象

Promise 首字母大写且单数形式 表示 Promise构造函数

Promises 首字母大写且复数形式 用于指代 Promise规范

Promise的两个特点

1 Promise对象的状态不会受外界影响

2 一旦状态改变，就不会再变,任何时候都可以得到这个结果

12.3 Promise的三个状态

1 pending 初识状态

2 fulfilled成功状态

3 rejected 失败状态

12.3 1  Promise 只有异步操作的结果可以决定当前是哪一种状态，只能由 pending变成fulfilled或者由pending变成rejected

12.3 2 Promise接受一个「函数」作为参数，该函数的两个参数分别是resolve和reject。

12.3 3  resolve函数的作用：在异步操作成功时将参数传递出去；

12.3 4 reject函数的作用：在异步操作失败将参数传递出去

12.3 5 then()方法： then 方法就是异步操作执行完后，用链式调用的方式执行回调函数。

12.3 6 catch()方法： 当执行 resolve 的回调抛出异常了（代码出错了），会进到这个 catch 方法中。

12.3 7 all()方法： Promise 的 all方法在所有异步操作执行完后才执行回调。

12.4 8 race()方法：而 race 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。

Threen  说说什么是事件循环

一 是什么

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

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

  • 同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行
  • 异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等

微任务

一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前

常见的微任务有：

Promise.then

MutaionObserver

Object.observe（已废弃；Proxy 对象替代）

process.nextTick（Node.js）

宏任务

宏任务的时间粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求就不太符合

常见的宏任务有：

script (可以理解为外层同步代码)

setTimeout/setInterval

UI rendering/UI事件

postMessage、MessageChannel

setImmediate、I/O（Node.js）

Fourteen async与await

async 是异步的意思，await则可以理解为 async wait。所以可以理解async就是用来声明一个异步方法，而 await是用来等待异步方法执行

async

async函数返回一个promise对象，下面两种方法是等效的

await

正常情况下，await命令后面是一个 Promise对象，返回该对象的结果。如果不是 Promise对象，就直接返回对应的值

Fiveteen 谈谈对this的理解

this代表的是当前对象，由于执行环境不同，所代表的对象也不同。

比如：

    1、在DOM0事件中this指向调用这个函数的对象。

    2、在构造函数中this指向创建新的实例

    3、在箭头函数中this指向当前函数外离他最近的对象

    4、当函数为全局函数时this指向 window  （在全局范围内，这代表全局对象，例如web浏览器中的 window 对象）

    5、在call和apply中，this会指向第一个参数。

    总结：那个对象触发的函数就会指向那个对象。

sixteen 聊一聊内存泄漏

seveteen Git常用命令有哪些

git clone 克隆代码

git branch 查看分支

git branch -a 查看远程分支

git pull 拉取

git init  新建Git代码库

git add  添加指定文件

git commit -a 提交暂存区到仓库区

git branch 列出所有本地分支

git checkout -b 切换分支

git push origin - delete 删除远程分支

git status 显示有变更的文件

eighteen BFC是什么

one.  BFC 全称：Block Formatting Context， 名为 “块级格式化上下文”。

W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性

Two   怎样触发BFC

这里简单列举几个触发BFC使用的CSS属性

  • overflow: hidden
  • display: inline-block
  • position: absolute
  • position: fixed
  • display: table-cell
  • display: flex

BFC的规则

  • BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
  • BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
  • 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
  • 计算BFC的高度时，浮动元素也参与计算

BFC解决了什么问题

1 使用Float脱离文档流，高度塌陷  (目前了解

nineteen 如何实现一个左边固定宽度，右边自适应的布局

左边设置固定宽度，右侧设置flex:1

Twenty em 和 rem 的区别

one em  是一个相对单位。相对于当前对象内文本的font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px

Two  rem  是一个相对单位。是相对HTML根元素。

em 和 rem 都是 响应式单位

  1. rem是相对于根元素进行计算，而em是相对于当前元素或父元素的字体大小。
  2. rem不仅可以设置字体的大小，还支持元素宽、高等属性。
  3. em是相对于当前元素或父元素进行换算，层级越深，换算越复杂。而rem是相对于根元素计算，避免层级关系

Twenty-one  Flex的常用属性 

容器属性

justify-content:center 主轴居中对齐 

align-items:center  侧轴居中对齐

flex-direction 主轴的方向

flex-wrap 换行方式

成员的属性

flex 1

flex-grow

flex-basis

flex-shrink

Twenty-two 谈谈对响应式布局的理解

响应式布局就是用一套代码，去适配不同的设备。既可以运行在PC端，也可以运行在移动端。这就是通俗一点的说法。接下来我们看看它的优缺点：

优点：

1.面对不同分辨率设备灵活性强

2.能够快捷解决多设备显示适应问题

缺点：

1.兼容各种设备工作量大，效率低下

2.代码累赘，会出现隐藏无用的元素，加载时间加长

3.其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），CSS3中的Media Query（媒介查询）是通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。

我们常见的媒体类型

1024分辨率以上：PC端

768 ~ 450 : pad mini , mobile 横屏

450分辨率以下： mobile 竖屏

Twenty-three  数字运算丢失精度的问题如何解决

Twenty-four localStorage 和 sessionStorage的区别 

区别如下：

1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

2、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

4、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

老师答案 

都是本地存储

存储时效不同 

localStorage 是永久存储，关闭浏览器也不会丢失

sessionStorage关闭当前窗口就丢失了

Twenty-five   说说地址栏输入URL敲下回车后发生了什么

例如当我们在 web 浏览器的地址栏中输入：www.baidu.com，具体发生了：

 1. 对www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址 

  1. 根据这个 IP，找到对应的服务器，发起 TCP 的三次握手 3. 建立 TCP 连接后, 发起 HTTP 请求 

  2. 服务器响应 HTTP 请求，浏览器得到 html 代码 

  3. 浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片等）（先得到 html 代 码，才能去找这些资源） 

  4. 服务器响应对应的资源

  5. 响应数据完毕, 四次挥手，关闭 TCP 连接 8. 浏览器对页面进行渲染呈现给用户

 

Twenty-six git pull 和git clone的区别是什么

git pull是从远程仓库拉取最新的代码到本地仓库，并且自动合并到当前分支。而git clone是将远程仓库完整地复制一份到本地，包括所有分支和历史记录。通常情况下，git clone只需要执行一次，而git pull需要频繁执行以保持本地代码与远程仓库同步。

Twenty-seven 登录流程

1 用户按下登录按钮，收集用户输入的表单信息(用户名密码)

2 表单校验  正则表达式

3 发送请求给服务器

4 响应一个 token 和用户信息 (用户名)

5  将 token 和用户名存储到本地laocalStrage，

将token 添加到 axios的请求拦截器，每次请求接口都需要携带 token 

6跳转到首页

Twenty-eight  什么是前端工程化

工程化，可以理解为使用一些方式，去改良然后提高行业中现有的步骤、设计、应用方式。前端工程化，就是指对前端进行一些流程的标准化，让开发变得更有效率，且更好地做产品交付

且分类为四个维度 

1 模块化 

指的是将代码功能做拆分,分成独立地单独相互依赖的片段.

2 组件化 

组件化是UL层面上的更细粒度的拆分，一种类似div等原神元素的“自定义元素”

3 规范化

前端代码的规范，规范是很重要的，能让代码能够写得更容易更正确

4 自动化

重复的可以自动化的流程化工作，应该尽量去自动化。让人去做，对人是一种折磨，然后也不能保证质量，因为通常流程也很复杂，即使是简单，做多了也容易错。

Twenty-nine  Node.js和浏览器执行js代码区别 

1 浏览器和node.js都可以看作是js的运行平台,浏览器是js在客户端的运行时环境，而node.js在服务端的运行环境

2 js运行在浏览器端，用于用户的交互效果，js运行在node.js，用于服务器的操作，

3 js需要浏览器的js引擎解析执行，但是不同浏览器的js引擎不同，存在兼容性的问题，而node.js是基于chrome v8引擎的运行时环境，无兼容性问题。

4 对于ECMAScript语法来说，在node.js和浏览器中都能运行。node.js无法使用DOM和BOM的操作，浏览器无法执行node.js中文件操作等功能

5浏览器下this指向window.nodejs中this指向global

6使用的模块标准不同,node.js使用的是Common.js的模块标准，而浏览器使用的是Es的模块标准，所有nodejs中使用的是require()导入模块;浏览器中js使用的是import的方式导入

therty  什么是node.js？有什么作用

1 node.js一种JavaScript的运行环境，能够使得JavaScript能够脱离浏览器运行，以前js只能在浏览器基础上运行，能够操作的也知

识浏览器，比如浏览器上的放大缩小操作，前提是浏览器开启的基础上行操作(浏览器是客户端)。有了node.js之后，js可以在服务端进行操作，直接在系统上进行操作，可以打开、关系浏览器等操作

2 简单的说 Node.jsjs运行在服务端的JavaScript,Node.js 是一个基于 Chrome javaScript 运行时建立的一个平台，Node.js是一个事件驱动i/O访问JavaScript环境,基于Google的V8引擎，V8引擎执行JavaScript的速度非常快，性能非常好

avatar
文章
阅读
粉丝