JavaScript面试题②（JS面试题②）

1.解释 JavaScript 中的作用域与变量声明提升？
参考答案：
我对作用域的理解是只会对某个范围产生作用，而不会对外产生影响的封闭空间。在这样的一些空间里，外部不能访问内部变量，但内部可以访问外部变量。
所有申明都会被提升到作用域的最顶上
同一个变量申明只进行一次，并且因此其他申明都会被忽略
函数声明的优先级优于变量申明，且函数声明会连带定义一起被提升

2.Node. js 的适用场景？
参考答案：比如：RESTFUL API、实时聊天、客户端逻辑强大的单页 APP，具体的例子比如说：本地化的在线音乐应用，本地化的在线搜索应用，本地化的在线 APP 等。

3.bind、call、apply 的区别
call 和 apply 其实是一样的，区别就在于传参时参数是一个一个传或者是以一个数组的方式来传。
call 和 apply 都是在调用时生效，改变调用者的 this 指向。
bind 也是改变 this 指向，不过不是在调用时生效，而是返回一个新函数。

4.使用构造函数的注意点
参考答案：

1. 一般情况下构造函数的首字母需要大写，因为我们在看到一个函数首字母大写的情况，就认定这是一个构造函数，需要跟new关键字进行搭配使用，创建一个新的实例（对象）
2. 构造函数在被调用的时候需要跟new关键字搭配使用。
3. 在构造函数内部通过this+属性名的形式为实例添加一些属性和方法。
4. 构造函数一般不需要返回值

5.数组的常用方法
参考答案：

1. Array. map()
   此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
2. Array. forEach()
   此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和 map 方法区分
3. Array. filter()
   此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回
4. Array. every()
   此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回 true，否则为 false
5. Array. some()
   此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回 true，若所有元素都不满足判断条件，则返回 false
6. Array. reduce()
   此方法是所有元素调用返回函数，返回值为最后结果, 传入的值必须是函数类型
7. Array. push()
   此方法是在数组的后面添加新加元素，此方法改变了数组的长度
8. Array. pop()
   此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度
9. Array. shift()
   此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度
10. Array.unshift()
    此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度
11. Array.isArray()
    判断一个对象是不是数组，返回的是布尔值
12. Array.concat()
    此方法是一个可以将多个数组拼接成一个数组

6.字符串常用操作
参考答案：

• charAt(index): 返回指定索引处的字符串
• charCodeAt(index): 返回指定索引处的字符的 Unicode 的值
• concat(str1, str2, … ): 连接多个字符串，返回连接后的字符串的副本
• fromCharCode(): 将 Unicode 值转换成实际的字符串
• indexOf(str): 返回 str 在父串中第一次出现的位置，若没有则返回-1
• lastIndexOf(str): 返回 str 在父串中最后一次出现的位置，若没有则返回-1
• match(regex): 搜索字符串，并返回正则表达式的所有匹配
• replace(str1, str2):str1 也可以为正则表达式，用 str2 替换 str1
• search(regex): 基于正则表达式搜索字符串，并返回第一个匹配的位置
• slice(start, end)：返回字符索引在 start 和 end（不含）之间的子串
• split(sep，limit)：将字符串分割为字符数组，limit 为从头开始执行分割的最大数量
• substr(start，length)：从字符索引 start 的位置开始，返回长度为 length 的子串
• substring(from, to)：返回字符索引在 from 和 to（不含）之间的子串
• toLowerCase()：将字符串转换为小写
• toUpperCase()：将字符串转换为大写
• valueOf()：返回原始字符串值
  7.作用域的概念及作用
  参考答案：
• 作用域 ： 起作用的一块区域
• 作用域的概念： 对变量起保护作用的一块区域
• 作用： 作用域外部无法获取到作用域内部声明的变量，作用域内部能够获取到作用域外界声明的变量。

8.作用域的分类
参考答案：块作用域、词法作用域、动态作用域
解析：
1 块作用域 花括号 {}
2 词法作用域（js 属于词法作用域） 作用域只跟在何处被创建有关系，跟在何处被调用没有关系
3 动态作用域 作用域只跟在何处被调用有关系，跟在何处被创建没有关系

9. js 属于哪种作用域
参考答案：词法作用域（函数作用域）

10.自执行函数? 用于什么场景？好处?
参考答案：
自执行函数: 1、声明一个匿名函数 2、马上调用这个匿名函数。
作用：创建一个独立的作用域。
好处：防止变量弥散到全局，以免各种 js 库冲突。隔离作用域避免污染，或者截断作用域链，避免闭包造成引用变量无法释放。利用立即执行特性，返回需要的业务函数或对象，避免每次通过条件判断来处理
场景：一般用于框架、插件等场景

11.多个页面之间如何进行通信
参考答案：有如下几个方式：

1. cookie
2. web worker
3. localeStorage 和 sessionStorage

12.css 动画和 js 动画的差异
参考答案：

1. 代码复杂度，js 动画代码相对复杂一些
2. 动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css 动画不能添加事件
3. 动画性能看，js 动画多了一个 js 解析的过程，性能不如 css 动画好

13.如何做到修改 url 参数页面不刷新
参考答案：
HTML5 引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。

14.数组方法 pop() push() unshift() shift()
参考答案：

• arr. pop() 从后面删除元素，只能是一个，返回值是删除的元素
• arr. push() 从后面添加元素，返回值为添加完后的数组的长度
• arr. unshift() 从前面添加元素, 返回值是添加完后的数组的长度
• arr. shift() 从前面删除元素，只能删除一个 返回值是删除的元素

15.事件绑定与普通事件有什么区别
参考答案：

• 用普通事件添加相同事件，下面会覆盖上面的，而事件绑定不会
• 普通事件是针对非 dom 元素，事件绑定是针对 dom 元素的事件

16.IE 和标准下有哪些兼容性的写法
参考答案：

var ev = ev || window.event;
document.documentElement.clientWidth || document.body.clientWidth;
var target = ev.srcElement || ev.target;

17.如何阻止冒泡与默认行为
参考答案：

• 阻止冒泡行为：非 IE 浏览器 stopPropagation()，IE 浏览器 window. event. cancelBubble = true
• 阻止默认行为：非 IE 浏览器 preventDefault()，IE 浏览器 window. event. returnValue = false

18.js 中 this 闭包 作用域
参考答案：
this：指向调用上下文
闭包：定义一个函数就开辟了一个局部作用域，整个 js 执行环境有一个全局作用域
作用域：一个函数可以访问其他函数中的变量（闭包是一个受保护的变量空间）

19.javascript 的本地对象，内置对象和宿主对象
参考答案：

1. 本地对象
   ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象"。简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
2. 内置对象
   JS中内置了17个对象，常用的是Array对象、Date对象、正则表达式对象、string对象、Global对象
3. 宿主对象
   由ECMAScript实现的宿主环境提供的对象，可以理解为：浏览器提供的对象。所有的BOM和DOM都是宿主对象。

20. 事件冒泡与事件捕获
参考答案：
事件冒泡：由最具体的元素（目标元素）向外传播到最不具体的元素
事件捕获：由最不确定的元素到目标元素

21.复杂数据类型如何转变为字符串
参考答案：

• 首先，会调用 valueOf 方法，如果方法的返回值是一个基本数据类型，就返回这个值
• 如果调用 valueOf 方法之后的返回值仍旧是一个复杂数据类型，就会调用该对象的 toString 方法
• 如果 toString 方法调用之后的返回值是一个基本数据类型，就返回这个值，
• 如果 toString 方法调用之后的返回值是一个复杂数据类型，就报一个错误。

22.javascript 中 this 的指向问题
参考答案：

• 全局环境、普通函数（非严格模式）指向 window
• 普通函数（严格模式）指向 undefined
• 函数作为对象方法及原型链指向的就是上一级的对象
• 构造函数指向构造的对象
• DOM 事件中指向触发事件的元素

23.call 与 apply 区别
参考答案：第二个参数的类型不同
解析：

1. call 和 apply 的作用，完全一样，唯一的区别就是在参数上面。
2. call 接收的参数不固定，第一个参数是函数体内 this 的指向，第二个参数以下是依次传入的参数。
3. apply 接收两个参数，第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象（数组或者类数组）

24.异步加载 js 的方法
参考答案：
方案一：

25.去除字符串里面的重复字符
参考答案：
最简单的方式

[...new Set("ababbc")].join(""); // "abc"

26.求数组的最大值
参考答案：Math. max. apply(null, 数组)

var a = [1, 2, 3, 5];
alert(Math.max.apply(null, a)); //最大值
alert(Math.min.apply(null, a)); //最小值

27.原型的作用 以及什么是原型
参考答案：作用：实现资源共享
什么是原型: 实例在被创建的那一刻，构造函数的 prototype 属性的值。

28. javascript 里面的继承怎么实现，如何避免原型链上面的对象共享
参考答案：用构造函数和原型链的混合模式去实现继承，避免对象共享可以参考经典的 extend()函数，很多前端框架都有封装的，就是用一个空函数当做中间变量

29.说说你对作用域链的理解
参考答案：作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到 window 对象即被终止，作用域链向下访问变量是不被允许的。

30.JavaScript 原型，原型链 ? 有什么特点？

• 原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链。
• 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

31.js 延迟加载的方式有哪些？
参考答案：defer 和 async、动态创建 DOM 方式（用得最多）、按需异步载入 js

32.分别阐述 split(), slice(), splice(), join()？
参考答案：

• join()用于把数组中的所有元素拼接起来放入一个字符串。所带的参数为分割字符串的分隔符，默认是以逗号分开。归属于 Array
• split()即把字符串分离开，以数组方式存储。归属于 Stringstring
• slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array. splice()
• splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。返回的是含有被删除的元素的数组。
  33.document. write 和 innerHTML 的区别?
  参考答案：
  document. write 是重写整个 document, 写入内容是字符串的 html 2. innerHTML 是 HTMLElement 的属性，是一个元素的内部 html 内容

34.让你自己设计实现一个 requireJS，你会怎么做？
参考答案：核心是实现 js 的加载模块，维护 js 的依赖关系，控制好文件加载的先后顺序

35.requireJS 的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）
参考答案：核心是 js 的加载模块，通过正则匹配模块以及模块的依赖关系，保证文件加载的先后顺序，根据文件的路径对加载过的文件做了缓存

36.用原生 JavaScript 的实现过什么功能吗？
参考答案：轮播图、手风琴、放大镜、3D动画效果等，切记，所答的一定要知道实现原理！，不知道还不如不说！

37.BOM 对象有哪些，列举 window 对象？
参考答案：
1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
2、document对象，文档对象；
3、location对象，浏览器当前URL信息；
4、navigator对象，浏览器本身信息；
5、screen对象，客户端屏幕信息；
6、history对象，浏览器访问历史信息；

38.什么是三元表达式？“三元”表示什么意思？
参考答案：三元如名字表示的三元运算符需要三个操作数。
语法是 条件 ? 结果1 : 结果2; . 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

39.我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
参考答案：所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。

40.知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么?
参考答案：Webkit 是浏览器引擎，包括 html 渲染和 js 解析功能，手机浏览器的主流内核，与之相对应的引擎有 Gecko（Mozilla Firefox 等使用）和 Trident（也称 MSHTML，IE 使用）。 对于浏览器的调试工具要熟练使用，主要是页面结构分析，后台请求信息查看，js 调试工具使用，熟练使用这些工具可以快速提高解决问题的效率

41.JavaScript 的循环语句有哪些？
参考答案：while for do while forEach

42.作用域-编译期执行期以及全局局部作用域问题
参考答案：js 执行主要的两个阶段：预解析和执行期

43.如何添加 html 元素的事件，有几种方法？请列举
参考答案：直接在标签里添加；在元素上添加、使用事件注册函数添加

44.事件绑定的方式
参考答案：
嵌入 dom
<button onclick="func()">按钮</button>
直接绑定
btn.onclick = function() {};
事件监听
btn.addEventListener("click", function() {});