黑马程序员技术交流社区

标题: 2021年最新前端面试宝典之JavaScript部分（2）【济南校区】 [打印本页]

---

作者: 小鲁哥哥    时间: 2021-7-19 21:31
标题: 2021年最新前端面试宝典之JavaScript部分（2）【济南校区】

  JavaScript

1. 原生js 中操作数组的api 有哪些

【参考答案】

       不要直接上来就是 push,shift,pop 等，在这里可以说一些比较别人不经常说的，比方说：splice,join,map,filter 等等，还有 es6 的 find,findIndex 等

       在回答该方法的时候也应当把该方法的作用也说一下 例如：

      1. 数组.indexOf(value[, fromIndex])； 作用：查找数组项

                   indexOf 从 fromIndex（默认为 0）开始向后查找 value，返回 value 对应的下标

       2. 数组.join(str)；

                   作用：返回通过指定连接符 str 把数组连接成字符串，不改变原数组（数组转字符串）

       3. 数组.splice(start, number, value1, value2...)；

                   作用：返回删除元素组成的数组，从 start 处开始删除 number 个值后插入 valueN 参数列表到数组中，改变原数组

       4. 数组.findIndex(fn)；-- es6

                   作用：返回符合条件的第一个数组元素的索引；

       5. 数组.sort(fn)        数组.reverse() 作用：按规则排序与反转，改变原数组

2. 原生js 中操作字符串的 api 有哪些

【参考答案】

         split(),substring(),substr(),concat()等方法

         注意：在回答该方法的时候也应当把该方法的作用也说一下 例如：

         charAt(num) -- 根据索引，查找对应字符，没取到是空字符（看不到）;相当于下标查找

         IndexOf(str,num) -- 根据指定字符串查询对应索引，返回索引或者-1；第一个参数时要查询的字符串，第二个参数是开始查询的位置

         slice(num,num) -- 截取并拷贝字符串，截取失败是空字符（看不见）；第一个参数时开始位置，第二个参数时结束位置（不包括）

         substr(num,num) -- 截取字符串，截取失败是空字符（看不见）；第一个参数是开始位置，第二个参数时长度

         substring(num,num) -- 截取字符串；第一个参数是当前位置，第二个参数是结束的前一个；参数出现负数，默认为 0；参数 1>参数 2 时，自动换位

         concat() -- 合并字符

         split() -- 合并字符

         replace() -- 替换字符串；参数 1 是旧的，参数 2 是新的

         注意：注意各个方法的参数个数及含义

3. 数组方法那些会改变原素组

【参考答案】

         shift：将第一个元素删除并且返回删除元素，空即为 undefined unshift：向数组开头添加元素，并返回新的长度

         pop：删除最后一个并返回删除的元素

         push：向数组末尾添加元素，并返回新的长度reverse：颠倒数组顺序

         sort：对数组排序

         splice:splice(start,length,item)删，增，替换数组元素，返回被删除数组，无删除  则不返回

4. 什么是事件委托？实际运用场景？

【参考答案】

           事件委托就是利用事件冒泡，只指定一个父类元素绑定事件，就可以管理所有子类元素  运用场景：

          ① ajax 局部刷新区域

          ② 绑定层级比较低的时候，不在 body 上绑定

          ③ 定次数较少的时候，把多个事件绑定合并到一次事件委托中，由这个事件委托的回调，来进行分发

5. 数组如何去重

【参考答案】

     es5：这个实现方法很多，我列举其中的 2 种：

    第一种：

     

[AppleScript] 纯文本查看 复制代码

 var arr1 = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];

      function rep(arr) { var ret = [];
      for (var i = 0; i <arr1.length; i++) { if (ret.indexOf(arr1) ==-1) {
                ret.push(arr1);
             }
         }
      return ret;
     }
      var result = rep(arr1); console.log(result)

第二种：

[AppleScript] 纯文本查看 复制代码

    var arr = [1, 2, 3, 4, 5, 1, 2, 3];

     var r = arr.filter(function (element, index, self) { return self.indexOf(element) === index;});

     console.log(r);

      es6：var arr =Array.from( new Set(数组))

6. typeof 和 instanceof 的 区 别

【参考答案】

       在 js 中，判断一个基本数据的变量的类型会常用 typeof,但是在判断复杂数据类型的时候，无论是什么样的类型都会输出'object'，这就需要用到 instanceof 来检测某个对象是不是另一个对象的实例

7. 获取页面中元素的js 方法

【参考答案】

      document.getElementById(id 名)，获取的是单个元素document.querySelector(可以是 id,可以是类，标签，等等)，获取的是单个元素       document.querySelectorAll(选择器都可以) ，获取的是一类元素，是个伪数组document.getElementsByTagName(标签的名字)        获取的是一类元素，是个伪数组

8. 谈谈你对原型/原型链的理解

【参考答案】

   每个构造函数一旦创建都有 prototype 指针指向它的原型对象（ 构造函数.prototype）。而原型对象（构造函数.prototype）会默认生成一个 constructor 指针又指向构造函数。

9. 介绍一下闭包（概念、优点、缺点及解决办法）

【参考答案】

      概念： 闭包就是能够读取其他函数内部变量的函数。

      优点： 可以将函数当作值传递到其他地方使用（非函数所在作用域），例如在定时器、事件监听器、Ajax 请求、任何其他异步（或同步）任务中，只要使用了回调函数，实际上就是在使用闭包

       缺点：闭包会让它所在作用域中的变量始终保存在内存中，而不会被垃圾回收机制  回收，对内存消耗较大，频繁大量使用，会导致性能问题

       解决办法：闭包在不使用时，要及时释放。例如将引用内层函数对象的变量赋值为null

10. 谈谈对this 的理解

【参考答案】

      ① 普通函数中，this 指向全局对象 window

      ② 定时器中，this 指向调用对象 window

      ③ 构造函数中，this 指向当前实例化的对象

      ④ 事件处理函数中，this 指向事件触发对象

      在 js 中一般理解就是谁调用这个 this 就指向谁

11. 怎么改变this 的指向

【参考答案】

      call、apply、bind 三者均为改变 this 指向的方法

12. call/apply/bind 的区别

【参考答案】

     call（无数个参数），第一个参数：改变 this 指向；第二个参数：实参；使用之后会自动执行该函数

     apply（两个参数），第一个参数：改变 this 指向；第二个参数：数组（里面为实参）；使用时候会自动执行函数

     bind（无数个参数），第一个参数：改变 this 指向；第二个参数之后：实参；返回值为一个新的函数；使用的时候需要手动调用下返回 的新函数（不会自动执行）

13. BOM 中常用的API 有哪些

【参考答案】

    navigator：window 中封装浏览器属性和配置信息的对象cookieEnabled：识别浏览器是否启用 cookie，返回值 true/false userAgent：保存了浏览器名称和版本的字符串

    plugins：保存浏览器中所有插件信息的集合，每个 plugin 对象的 name 属性保存了插件的名称

    screen：保存显示屏信息的对象history：保存窗口的历史记录栈

    location：指代当前窗口正在访问的 url 地址对象

    location.href：保存了当前窗口正在访问的 url 地址，设置 href 属性为新 url，会在当前窗口打开新 url

    location.search()：获取 url 上面？后面的参数location.reload()：刷新当前页面

    location.reload(true/false):true —— 无论是否更改，都获取更新；false ——被修改的页面，重新获 取，未被修改的页面，从缓冲获取

    定时器：让程序按指定时间间隔，自动执行任务，任务是所有定时器的核心

14. prop 和attr 的区别

【参考答案】

     对于 HTML 元素本身就带有的固有（原有）属性，在处理时，使用 prop 方法。对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

15. null 和undefined 的区别

【参考答案】

    null 是一个表示”无”的对象，转为数值时为 0；undefined 是一个表示”无” 的原始值，转为数值时为 NaN。

    当声明的变量还未被初始化时，变量的默认值为 undefined。

    null 用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。undefined 表示”缺少值”，就是此处应该有一个值，但是还没有定义。

16. 深拷贝和浅拷贝的区别

【参考答案】

     浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块  内存。

     深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象  不会改到原 对象。

     深拷贝的方法：

     ① 递归拷贝

     ② 使用 Object.create()方法

     ③ jquery 有提供一个$.extend 也可以实现

     ④ 函数库 lodash，也有提供 cloneDeep 用来实现

17. 谈谈对promise 的理解

【参考答案】

    Promise 是异步编程的一种解决方案。所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise   是一个对象，从它可以获取异步操作的消息。

     Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。特点：

   ① 自己身上有 all、reject、resolve 这几个方法

   ② 原型上有 then、catch 等方法

   ③ 一旦建立，就无法取消，这是它的缺点

18. ES6 常用语法有哪些

【参考答案】

    ① Let：声明的变量，只作用于使用了 let 命令的代码块

    ② const :声明一个常量，声明过后，就不可修改其值(会报错)

    ③ 解构赋值

    ④ 箭头函数：用法的两个明显的优点：函数的写法更加简洁；箭头函数内部没有自己的 this 对象，而是全部继承外面的，所以内部的 this 就是外层代码块的 this。

     ⑤ 字符串模板：ES6 中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}

     ⑥ Proxy：Proxy 可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作

     ⑦ 循环：for of 实现数组的遍历（以及 keys(),value(),entries()等方法）

19. Jquery 在项目中常用的方法有哪些

【参考答案】

     使用 JQuery 获取元素

     JQ 获取元素的内容：$("xxxx").html() JQ 中的事件操作

     JQ 操作控件属性JQ 操 作 css ajax 操作

     jq 函数级插件--$.fn.extend-添加成员函数/$.extend-添加静态方法

20. jquery.extend 与jquery.fn.extend 的区别是什么

【参考答案】

     jQuery 为开发插件提拱了两个方法，分别是：

     ① jquery.fn.extend();用来扩展 jquery 实例

     ② jquery.extend();用来扩展 jquery 对象本身

21. json 字符串和和json 对象如何相互转化？

【参考答案】

JSON.parse() 从一个字符串中解析出 json 对象JSON.stringify() 从一个对象中解析出字符串

22. 跨域的几种解决方式

【参考答案】

① 通过 jsonp 跨域

② CORS

核心思想：在服务器端通过检查请求头部的 origin，从而决定请求应该成功还是失 败 。 具 体 的 方 法 是 在 服 务 端 设 置 Response Header 响 应 头 中 的Access-Control-Allow-Origin 为对应的域名，实现了 CORS（跨域资源共享），这里出于在安全性方面的考虑就是尽量不要用 *，但对于一些不重要的数据则随意。

③ 后端配置，允许跨域

23. 前端开发过程中使用过哪些优化手段？（雅虎 14 条性能优化原则）

【参考答案】

（1） 减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存 ，图片服务器。

（2） 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数

（3） 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能。

（4） 当需要设置的样式很多时设置 className 而不是直接操作 style。

（5） 少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。

（6） 避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属

性)。

（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

（8） 避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显示出来，显示比 div+css 布局慢。

24. 简述一下cookies，sessionStorage 和localStorage 的区别

【参考答案】

特性	Cookie	localStorage	sessionStorage
特性	一般由服务器生成，可设置失效时间。如果在浏览器端生成 Cookie， 默认是关闭浏览器后 失效	除非被清除， 否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据 大小	4K 左右	一般为 5MB
与服务器端通信	每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来 性能问题	仅在客户端（即浏览器）中保存，不参与和服务器 的通信
易用性	需要程序员自己封装， 源生的 Cookie 接口不友好	源生接口可以接受，亦可再次封装来对 Object 和Array 有更好的支持

25. http 状态码有哪些？分别代表什么意思？

【参考答案】

1 开头：（被接受，需要继续处理。）

2 开头 （请求成功）

3 开头 （请求被重定向）

4 开头：（请求错误）

5 开头：（服务器错误）

200	（正常；请求已完成。）
301	（已移动 — 请求的数据具有新的位置且更改是永久的。）
307	（重新请求的 URL，客户端自动重新请求新的地址）
400	（错误请求 — 请求中有语法问题，或不能满足请求。）
403	（禁止 — 即使有授权也不需要访问。）
404	（找不到 — 服务器找不到给定的资源；文档不存在。）
405	（资源被禁止）
414	（请求 - URI 太长）
500	（内部错误 — 因为意外情况，服务器不能完成请求。）
503	（无法获得服务 — 由于临时过载或维护，服务器无法处理请求。）
101	（服务器将遵从客户的请求转换到另外一种协议）
100	（初始的请求已经接受，客户应当继续发送请求的其余部分。

26. 什么是Event Loop？

【参考答案】

       含义：Event Loop 是一个程序结构，用于等待和发送消息和事件。

         简单说，就是在程序中设置两个线程：一个负责程序本身的运行，称为"主线程"；另一  个负责主线程与其他进程（主要是各种 I/O 操作）的通信，被称为"Event Loop 线程"（可以译为"消息线程"）

        解释【重点】：

        程序的运行模式：运行以后的程序叫做"进程"（process），一般情况下，一个进程一  次只能执行一个任务。

        以 JavaScript 语言为例，它是一种单线程语言，所有任务都在一个线程上完成，一旦遇到大量任务或者遇到一个耗时的任务，网页就会出现"假死"。

        能否采用多线程？

       如果采用多线程，同时运行多个任务，会导致占用多倍的系统资源，也闲置多倍的资源，而 Event Loop 正是解决以上问题的：每当遇到 I/O 的时候，主线程就让 Event Loop 线程去通知相应的 I/O 程序，然后接着往后运行，所以不存在等待时间。等到 I/O 程序完成操作，Event Loop 线程再把结果返回主线程。主线程就调用事先设定的回调函数，完成整个任务

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2