JavaScript常见面试题（二）

1.new操作符的实现原理

• 首先创建一个空对象{}。
• 然后将空对象的原型设置为函数的prototype对象。
• 让函数this指向这个对象，为对象添加属性。
• 最后返回这个对象

2.map和Object的区别

都是用来存储键值对的集合
不同点

• map键可以是任意的类型，而object的键只能是String或者Symbol。
• map键是有序的，会按照键的顺序返回键值,Object键的顺序是无序的。
• map的键值对size可以直接通过size获取，而Object只能手动计算（Object.keys()）。
• map是可以直接迭代的，而Object需要先获取键的数组，然后再进行迭代。

3.JavaScript脚本延迟加载的方式有哪些？

等页面加载完成以后再加载JavaScript文件。

• 给script标签添加defer属性，脚本会在文档解析完成后执行。
• 给script标签添加async属性。
• 把JavaScript文件放在页面底部，让HTML和CSS先加载。

4.JavaScript 类数组对象的定义？（伪数组）

与数组对象类似（有索引和长度），但是不能调用数组的方法（pop，push）。

• 常见的伪数组：arguements（保存了函数调用的参数），获取到的DOM元素集合（document.querySelector），字符串。
• 将伪数组转化为数组的方法：[].slice.call()；Array.prototype.slice.call() ，Array.from()，扩展运算符…

5. 数组有哪些原生方法？

• toString()：将数组转化为字符串
• join()：将数组通过指定字符串进行连接
• push（向数组末尾添加元素），pop（移除数组的最后一个元素），unshift（数组头部添加），shift（移除数组的第一个元素）
• indexOf（返回数组第一个匹配到的索引，找不到返回-1） lastIndexOf(最后匹配的索引)
• slice（截取数组中的一部分） splice（数组中删除，替换）
• 遍历（forEach，map，every是否所有元素复合条件，some是否存在元素符合条件）

6.为什么函数的 arguments 参数是类数组而不是数组？如何遍历类数组?

arguement是一个对象，有索引，长度等属性。

• 遍历：可以先转化为数组再进行遍历（方法如上）

7.什么是 DOM 和 BOM？

• DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。
• BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。BOM的核心是window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。
  

8.对AJAX的理解，实现一个AJAX请求

• AJAX是 Asynchronous JavaScript and XML 的缩写，指通过JavaScript 的 异步通信，从服务器获取数据来更新页面，不用刷新整个页面。

实现ajax的步骤

• 首先创建一个XMLHttpRequest 对象。
• 使用这个对象的open方法创建一个http请求（可以设置请求的类型和url），也可以添加请求头等信息。然后使用onreadystatechange属性指定一个回调函数，该函数在请求状态发生变化时调用。
• 使用send()方法发送请求。对于GET请求，可以将请求参数附加到URL中；对于POST请求，可以将请求参数作为send()方法的参数传递。
• 处理响应：通过检查readyState和status属性来确定请求的状态。readyState表示请求的当前状态，其中4表示请求已完成并且响应已就绪，status表示服务器返回的HTTP状态码，200表示请求成功。可以通过responseText或responseXML属性获取完整的响应数据。

9. JavaScript为什么要进行变量提升，它导致了什么问题？

变量提升表示无论函数中何处位置声明变量，变量都被提升到函数的最前面，这样就不会报错。

• 目的：提高性能，通过将变量和函数的声明提前到作用域顶部，避免了在执行过程中重复解析和查找的开销。预先分配栈空间也提高了函数执行的效率。容错性更好：变量提升使得可以在变量声明之前就使用它们，即使在代码书写上存在疏忽，也不会报错。这种容错性可以避免一些不规范的代码导致的问题。
• 问题：可能导致在变量声明之前使用变量时出现undefined的情况。

10.如何判断一个对象是否属于某个类？

• 可以通过Object.prototype.toString.call()方法来判断
• instanceof
• constructor

class Person {
  constructor(name) {
    this.name = name;
  }
}

const person = new Person("xiaoming");
console.log(person instanceof Person);
// console.log(person.constructor === Person);
const a = [1, 2, 3];
console.log(Object.prototype.toString.call(a)); //[object Array]

注意：Object.prototype.toString.call(）方法不能判断具体的类

11.for…in和for…of的区别

都是遍历对象的方法，for…in主要用来枚举对象属性，for…of遍历（ES6新增）可迭代对象（字符串，set，map，类数组对象）。

• for…in遍历的是对象的键，for…of遍历的是对象的键值。（这里的对象不是Object）
• for…in遍历数组会遍历其原型链上的属性，for…of只会遍历当前对象
• 用for…in遍历对象可以先获取到键的集合，再遍历对象的值（普通对象）

12.数组的遍历方法有哪些

• forEach：第一个参数是一个回调函数，回调函数有三个参数，分别是值，索引和遍历的数组对象。第二个参数可选（用来绑定this指向）
• for…of
• map:第一个参数是回调函数，回调函数有三个参数，分别是值，索引和遍历的数组对象。第二个参数可选（用来绑定this指向），会返回一个新数组。
• filter：参数与前面的一样
• every，some

13.forEach和map方法有什么区别

• forEach会改变原数组，没有返回值
• map不会改变原数组，会返回一个新的数组。