前端日记

面试官：ajax原理是什么？如何实现？ 一、是什么AJAX 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页 Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面 流程图如下： 下面举个例子： 领导想找小李汇报一下工作，就委托秘书去叫小李，自己就接着做其他事情，直到秘书告诉他小李已经到了，最后小李跟领导汇报工作 Ajax请求数据流程与“领导想找小李汇报一下工作”类似，上述秘书就相当于XMLHttpRequest对象，领导相当于浏览器，响应数据相当于小李 浏览器可以发送HTTP请求后，接着做其他事情，等收到XHR返回来的数据再进行操作 二、实现过程实现 Ajax 异步交互需要服务器逻辑进行配合，需要完成以下步骤： 创建 Ajax 的核心对象 XMLHttpRequest 对象 通过 XMLHttpRequest 对象的 ope ...

面试官：数组的常用方法有哪些？ 一、操作方法数组基本操作可以归纳为 增、删、改、查，需要留意的是哪些方法会对原数组产生影响，哪些方法不会 下面对数组常用的操作方法做一个归纳 增下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响 push() unshift() splice() concat() push()push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度 123let colors = []; // 创建一个数组let count = colors.push("red", "green"); // 推入两项console.log(count) // 2 unshift()unshift()在数组开头添加任意多个值，然后返回新的数组长度 123let colors = new Array(); // 创建一个数组let count = colors.unshift("red", "green"); // 从数组开头推入两项alert(count); ...

面试官：bind、call、apply 区别？如何实现一个bind? 一、作用call 、apply 、bind 作用是改变函数执行时的上下文，简而言之就是改变函数运行时的this指向 那么什么情况下需要改变this的指向呢？下面举个例子 123456789var name = "lucy";var obj = { name: "martin", say: function () { console.log(this.name); }};obj.say(); // martin，this 指向 obj 对象setTimeout(obj.say,0); // lucy，this 指向 window 对象 从上面可以看到，正常情况say方法输出martin 但是我们把say放在setTimeout方法中，在定时器中是作为回调函数来执行的，因此回到主栈执行时是在全局执行上下文的环境中执行的，这时候this指向window，所以输出lucy 我们实际需要的是this指向obj对象 ...

面试官：Javascript本地存储的方式有哪些？区别及应用场景？ 一、方式javaScript本地缓存的方法我们主要讲述以下四种： cookie sessionStorage localStorage indexedDB cookieCookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 HTTP 无状态导致的问题 作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制 cookie 有效期、安全性、使用范围的可选属性组成 但是cookie在每次请求中都会被发送，如果不使用 HTTPS 并对其加密，其保存的信息很容易被窃取，导致安全风险。举个例子，在一些使用 cookie 保持登录态的网站上，如果 cookie 被窃取，他人很容易利用你的 cookie 来假扮成你登录网站 关于cookie常用的属性如下： Expires 用于设置 Cookie 的过期时间 1Expires=Wed, 21 Oct 2015 07:28:00 GMT Max-Age 用于设置在 Coo ...

面试官：说说你对闭包的理解？闭包使用场景 一、是什么一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure） 也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域 在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来，作为函数内部与外部连接起来的一座桥梁 下面给出一个简单的例子 12345678function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数，一个闭包 alert(name); // 使用了父函数中声明的变量 } displayName();}init(); displayName() 没有自己的局部变量。然而，由于闭包的特性，它可以访问到外部函数的变量 二、使用场景任何闭包的 ...

面试官：JavaScript中执行上下文和执行栈是什么？ 一、执行上下文简单的来说，执行上下文是一种对Javascript代码执行环境的抽象概念，也就是说只要有Javascript代码运行，那么它就一定是运行在执行上下文中 执行上下文的类型分为三种： 全局执行上下文：只有一个，浏览器中的全局对象就是 window 对象，this 指向这个全局对象 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文 Eval 函数执行上下文： 指的是运行在 eval 函数中的代码，很少用而且不建议使用 下面给出全局上下文和函数上下文的例子： 紫色框住的部分为全局上下文，蓝色和橘色框起来的是不同的函数上下文。只有全局上下文（的变量）能被其他任何上下文访问 可以有任意多个函数上下文，每次调用函数创建一个新的上下文，会创建一个私有作用域，函数内部声明的任何变量都不能在当前函数作用域外部直接访问 二、生命周期执行上下文的生命周期包括三个阶段：创建阶段 → 执行阶段 → 回收阶段 创建阶段创建阶段即当函数被调用，但未执行任何其内部代码之前 创建阶段做了三件 ...

面试官：大文件上传如何做断点续传？ 一、是什么不管怎样简单的需求，在量级达到一定层次时，都会变得异常复杂 文件上传简单，文件变大就复杂 上传大文件时，以下几个变量会影响我们的用户体验 服务器处理数据的能力 请求超时 网络波动 上传时间会变长，高频次文件上传失败，失败后又需要重新上传等等 为了解决上述问题，我们需要对大文件上传单独处理 这里涉及到分片上传及断点续传两个概念 分片上传分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（Part）来进行分片上传 如下图 上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件 大致流程如下： 将需要上传的文件按照一定的分割规则，分割成相同大小的数据块； 初始化一个分片上传任务，返回本次分片上传唯一标识； 按照一定的策略（串行或并行）发送各个分片数据块； 发送完成后，服务端根据判断数据上传是否完整，如果完整，则进行数据块合成得到原始文件 断点续传断点续传指的是在下载或上传时，将下载或上传任务人为的划分为几个部分 每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上 ...

面试官：深拷贝浅拷贝的区别？如何实现一个深拷贝？ 一、数据类型存储前面文章我们讲到，JavaScript中存在两大数据类型： 基本类型 引用类型 基本类型数据保存在在栈内存中 引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中 二、浅拷贝浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝 如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址 即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址 下面简单实现一个浅拷贝 123456789function shallowClone(obj) { const newObj = {}; for(let prop in obj) { if(obj.hasOwnProperty(prop)){ newObj[prop] = obj[prop]; } } return newObj;} 在JavaScrip ...

面试官：说说JavaScript中的数据类型？存储上的差别？ 前言在JavaScript中，我们可以分成两种类型： 基本类型 复杂类型 两种类型的区别是：存储位置不同 一、基本类型基本类型主要为以下6种： Number String Boolean Undefined null symbol Number数值最常见的整数类型格式则为十进制，还可以设置八进制（零开头）、十六进制（0x开头） 123let intNum = 55 // 10进制的55let num1 = 070 // 8进制的56let hexNum1 = 0xA //16进制的10 浮点类型则在数值汇总必须包含小数点，还可通过科学计数法表示 1234let floatNum1 = 1.1;let floatNum2 = 0.1;let floatNum3 = .1; // 有效，但不推荐let floatNum = 3.125e7; // 等于 31250000 在数值类型中，存在一个特殊数值NaN，意为“不是数值”，用于表示本来要返回数值的操作失败了（而不是抛出错误） 12console.log(0/0) ...

面试官：什么是防抖和节流？有什么区别？如何实现？ 一、是什么本质上是优化高频率执行代码的一种手段 如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能 为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 防抖（debounce） 和 节流（throttle） 的方式来减少调用频率 定义 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时 一个经典的比喻: 想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应 假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制 电梯第一个人进来后，15秒后准时运送一次，这是节流 电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖 代码实现节流完成节流可以使用时间戳与定时器的写法 使用时间戳写法，事件会立即执行，停止触发后没有办法 ...