javascript你必须知道的常见面试题（下）
26.如何判断一个变量是对象类型？
- 使用 typeof 操作符
if (typeof yourVariable === 'object' && yourVariable !== null) {
// 变量是对象类型
}
- 使用 instanceof 操作符
if (yourVariable instanceof Object) {
// 变量是对象类型
}
- 使用 Object.prototype.toString 方法
if (Object.prototype.toString.call(yourVariable) === '[object Object]') {
// 变量是对象类型
}
- 使用 Array.isArray（如果要排除数组）
if (Array.isArray(yourVariable)) {
// 变量是数组，不是对象
} else if (typeof yourVariable === 'object' && yourVariable !== null) {
// 变量是对象类型
}
27.如何判断一个变量是数组类型？
- 使用 Array.isArray 方法
if (Array.isArray(yourVariable)) {
// 变量是数组类型
}
- 使用 instanceof 操作符
if (yourVariable instanceof Array) {
// 变量是数组类型
}
- 使用 Array.prototype.isArray 方法
if (Object.prototype.toString.call(yourVariable) === '[object Array]') {
// 变量是数组类型
}
28.如何检查一个变量是否为函数类型？
- 使用 typeof 操作符
if (typeof yourVariable === 'function') {
// 变量是函数类型
}
- 使用 instanceof 操作符
if (yourVariable instanceof Function) {
// 变量是函数类型
}
- 使用 Object.prototype.toString 方法
if (Object.prototype.toString.call(yourVariable) === '[object Function]') {
// 变量是函数类型
}
29.什么是 JSON？如何将 JSON 字符串转换为 JavaScript 对象？
JSON是一种轻量级的数据交换格式，它以易于人们阅读和编写的方式表示数据对象。
json字符串转js对象：JSON.parse()
js对象转json字符串：JSON.stringify()
30.typeof 运算符返回哪些值？typeof 和 instanceof 有什么区别？
typeof返回string,number,undefined,boolean,object(object,null,array),function
typeof返回的值是数据类型，instanceof返回的值是boolean;
instanceof主要用于判断一个对象是否是一个实例的原型，主要用来检查对象的继承关系。
31.let、const 和 var 的区别是什么？ 解释一下let 和 const 的块级作用域。
let、const 和 var都是用来声明变量的。
- let、const是es6引入的新的声明变量的方式；
- var可以变量提升，let和const不可以；
- let、const有块级作用域名，var没有；
- var可以重复声明变量，let、const不可以；
- let、const存在暂时性死区，var不存在；
- var和let声明的变量可以再次赋值，const不可以。
let和const是es6新增的声明变量的方式，声明的变量仅在声明的块或语句中可见，不会提升至整个函数或全局作用域。
32.数组的常用方法有哪些？
- push()： 在数组末尾添加一个或多个元素，并返回新的数组长度。
- pop()： 删除数组最后一个元素，并返回该元素的值。
- unshift()： 在数组开头添加一个或多个元素，并返回新的数组长度。
- shift()： 删除数组的第一个元素，并返回该元素的值。
- concat()： 连接两个或多个数组，不会改变原数组，返回一个新数组。
- slice()： 从数组中提取部分元素，返回一个新数组。
- splice()： 用于插入、删除或替换数组的元素。
- map()： 创建一个新数组，其结果是调用数组中的每个元素上提供的函数。
- filter()： 创建一个新数组，其中包含通过测试函数的所有元素。
- forEach()： 对数组的每个元素执行提供的函数，没有返回值。
33.字符串的常用方法有哪些？
- concat()： 连接两个或多个字符串，返回一个新字符串
- indexOf(substring[, startIndex])： 返回字符串中第一次出现子字符串的位置，如果没有找到返回 -1。
- lastIndexOf(substring[, startIndex])： 返回字符串中最后一次出现子字符串的位置，如果没有找到返回 -1。
- slice(start[, end])： 提取字符串的一部分，并返回一个新字符串，不会修改原字符串。
- substring(start[, end])： 提取字符串的一部分，和 slice 类似，但不支持负数索引。
- substr(start[, length])： 提取字符串的一部分，从指定位置开始，指定长度。
- toUpperCase() 和 toLowerCase()： 将字符串分别转换为大写和小写。
- replace(searchValue, replaceValue)： 替换字符串中的匹配项。
- split(separator[, limit])： 将字符串分割成数组，可指定分隔符。
34.解释一下同步和异步的区别？
同步：代码按照顺序执行，一个任务执行完后才会执行下一个，会阻塞后面任务的执行。
异步：非阻塞，一个任务的执行不会阻塞后面任务的执行。异步代码需要考虑回调函数，
promise等方式来处理任务的完成和结果。
35.什么是异步编程？有哪些处理异步的方式？
异步编程：通过将耗时的任务分配给其他线程或线程池来实现的。可以提高程序的并发处理能力，让程序具有更好的性能和影响速度。
处理异步的方式：
- 回调函数
- promise
- generator
- async/await
36.什么是 IIFE（立即调用函数表达式）？
立即调用函数表达式是一种常见的函数表达式，会立即执行创建时定义的函数。
目的：创建一个独立的作用域，防止变量污染全局作用域。
使用场景：
- 创建私有作用域
- 避免变量冲突
- 模块模式
- 传递全局对象
37.什么是 LocalStorage 和 SessionStorage？有什么区别？
LocalStorage 和 SessionStorage 都是 Web Storage API 提供的一种存储数据的方式，它们用于在客户端浏览器中存储数据，以便在会话之间或在页面刷新后保持数据。
-
生命周期：LocalStorage 的数据持久存在，而 SessionStorage 的数据在会话结束时被清除。
-
容量：LocalStorage 通常有更大的存储空间。
-
作用域：LocalStorage 存储在同一域名下的所有页面都可以访问，而 SessionStorage 仅在同一会话下的页面之间共享。
-
用途：LocalStorage 适合长期存储数据，而 SessionStorage 更适合在同一会话中的页面之间共享临时数据。
38.map 和 forEach 的区别是什么？
map 和 forEach都是js中用于迭代数组的方法，循环遍历数组中的每一项匿名函数中的this都是指向window。
区别：
- 返回值不同：forEach没有返回值，map 返回一个新数组。
- map 不修改原数组，返回一个新数组；forEach也不修改原数组。
- map可以链式调用，forEach不可以链式调用。
39.bind , apply 和call 的区别是什么？
bind、apply 和 call 是 JavaScript 中用于修改函数执行上下文的方法。
-
参数传递方式：
bind:返回一个新的函数，并绑定了指定的上下文，但不会立即执行。可以传递参数，但会在新函数被调用时生效。
apply:立即调用函数，传递参数的方式是数组形式。
call:立即调用函数，参数是直接列举的。 -
立即执行与延迟执行：
bind:返回一个新的函数，需要手动调用。
apply和call:立即调用函数。 -
对原函数的影响：
bind:不会立即执行原函数，新函数和原函数之间不会互相影响。
apply和call:立即执行原函数，可能会影响原函数的执行。
40.parseInt 和 parseFloat 的区别是什么？
parseInt 和 parseFloat 都是内置函数，将字符串转换为数字。
parseInt将字符串转换为整数，可以接受一个参数或者两个参数。
parseFloat将字符串转换为浮点数，只接受一个参数，可以转换为整数或小数。
41.new关键字有什么作用？具体干了什么？
作用：
- 创建对象实例：new用于调用构造函数，创建新的对象实例。
- 制定构造函数中的this指向：new调用构造函数时，js会在内部创建一个新对象，并将构造函数中的this指向这个新对象。
原理：
- 创建一个新的空对象；设置原型，将对象的原型设置为构造函数的prototype对象；
- 让函数的this指向这个对象，执行函数，为这个新对象添加属性；
- 判断函数的返回值类型，返回创建的对象或者引用类型的对象。
42.什么是 XMLHttpRequest？它有哪些常用属性和方法？
XMLHttpRequest是ajax技术的核心，是一种支持异步请求的技术。
ajax能实现不刷新页面就和服务器交互主要就归功于XMLHttpRequest。
属性：
- onreadystatechange： 用于指定当 readyState 属性发生变化时的回调函数。
- readyState： 表示请求的状态，有以下五个值：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪 - status： 服务器返回的 HTTP 状态码（例如，200 表示成功，404 表示未找到，等等）。
- statusText： 服务器返回的 HTTP 状态文本。
- responseText： 以字符串形式返回服务器的响应。
- responseXML： 以 XML 形式返回服务器的响应。
方法：
- open(method, url, async)： 初始化请求。
- method: 请求使用的 HTTP 方法（GET、POST 等）。
- url: 请求的 URL。
- async: 是否异步执行，默认为 true。
- send(data)： 发送请求。
- data: 发送的数据，对于 POST 请求，数据通常以字符串或 FormData 对象的形式发送。
- setRequestHeader(header, value)： 设置请求头。
- header: 请求头名称。
- value: 请求头的值。
- abort()： 取消当前请求。
- getAllResponseHeaders()： 获取所有响应头。
- getResponseHeader(header)： 获取指定响应头的值。
- header: 响应头名称。
43.什么是柯里化（Currying）？
函数柯里化是一种将函数转换为只接收一个参数的形式的技术。
将原来接收多个参数的函数转换为接收一个参数的函数，并返回一个新的函数，该函数接收剩余的参数并返回最终的结果。
44.DOM常见的操作有哪些？
-
选择元素：
getElementById： 通过元素的 ID 获取元素。
getElementsByClassName：通过类名获取元素集合。
getElementsByTagName：通过标签名获取元素集合。
querySelector：通过 CSS 选择器选择单个元素。
querySelectorAll：通过 CSS 选择器选择所有符合条件的元素。 -
操作元素属性：
getAttribute：获取元素的属性值。
setAttribute：设置元素的属性值。
removeAttribute：移除元素的属性。
classList：操作元素的类名。 -
操作元素内容：
innerHTML：获取或设置元素的 HTML 内容。
innerText 或 textContent：获取或设置元素的文本内容。
appendChild：在元素末尾添加子节点。
removeChild：移除子节点。 -
创建和插入元素：
createElement：创建新元素节点。
createTextNode：创建文本节点。
appendChild：在元素末尾添加子节点。
insertBefore：在指定节点之前插入新节点。 -
事件处理：
addEventListener：添加事件监听器。
removeEventListener：移除事件监听器。
45.什么是虚拟 DOM？有什么优势？
虚拟DOM是一个普通的js对象，用来描述真实DOM结构。
优势：
- 提高了性能
- 实现了跨平台兼容
- 提高了开发效率
- 提升了用户体验
- 使代码简洁，易读
46.前端缓存方法有哪些？
- 浏览器缓存（http缓存机制，service worker缓存）
- 本地缓存（localstorage和sessionstorage）
- cookies
- 内存缓存
- cdn缓存
- 服务器端缓存
47.渲染10万条数据怎么优化？闪烁怎么解决？
- 虚拟滚动，只渲染可见区域的数据
- 分批加载，通过分页加载或滚动到底部时逐步加载
- 前端缓存，缓存已经渲染过的数据
- DOM操作优化，减少不必要的DOM操作
- 渲染优化
- CSS动画
48.什么是回流和重绘？
回流：指浏览器必须重新计算并应用全部页面布局的过程。
回流会导致页面布局改变，元素的尺寸，位置，结构改变，计算样式的重新计算。回流的开销比较大，应减少回流的次数，提高页面的性能。
重绘：指重新绘制元素的样式，不涉及布局变化，开销较小。
49.什么是作用域链？有什么关键特点？
作用域链是在js中用于查找变量的一种机制，一层一层的引用关系形成了作用域链。
特点：
- 静态作用域；
- 变量对象；
- 作用域链的搜索规则：沿着作用域链向上搜索。
作用：保证执行环境里有权访问的变量和函数是有序的，只能向上访问，访问到window
对象即被终止。
50.Ajax的原理是什么？如何实现？
Ajax是一种用于在不刷新整个页面的情况下进行数据交换的技术。
通过js在后台异步地与服务器进行数据交互，获取数据并更新页面，无需刷新整个页面。
- 创建Ajax的核心对象XMLHttpRequest 对象。
- 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接。
- 构建请求所需要的数据内容，并通过XMLHttpRequest对象的send()方法发送给服务器端。
- 通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端你的通信状态。
- 接收并处理服务器端向客户端响应的数据结果。
- 将处理结果更新到 HTML 页面中。
51.浏览器从输入Url到渲染页面发生了什么？
网络篇：
- 构建请求；
- 查找强缓存；
- DNS解析；
- 建立TCP连接；
- 发送http请求。
浏览器解析篇：
- 解析Html构建DOM树；
- 解析css构建css树，样式计算；
- 生成布局树。
浏览器渲染篇：
- 建立图层树；
- 生成绘制列表；
- 生成图块并栅格化；
- 显示器显示内容；
- TCP四次挥手。
52.Js的脚本延迟加载的方式有哪些？
页面加载完再加载js文件，js延迟加载有助于提高页面加载速度。
- defer属性；
- async属性；
- 动态创建dom方式；
- setTimeout；
- 将Js文件放在底部。
53.什么是https？工作原理是什么？http和https有什么区别？
https：是一种通过计算机网络进行安全通信的协议，用于确保在用户和网站之间传输的数据的安全性和隐私性。
原理：
1、握手阶段（Handshake）：
- 当客户端（浏览器）访问一个使用HTTPS的网站时，服务器会返回一个包含公钥的数字证书。
- 客户端收到数字证书后，会验证证书的合法性，包括是否过期、是否由可信的证书颁发机构（CA）签发等。
- 如果验证通过，客户端生成一个用于对称加密的随机密钥（称为预主秘钥）。
2、密钥交换阶段（Key Exchange）：
- 客户端使用服务器的公钥加密预主秘钥，并发送给服务器。
- 服务器使用自己的私钥解密客户端发送的数据，获取预主秘钥。
3、对称加密阶段：
- 服务器和客户端都拥有了相同的预主秘钥，使用这个预主秘钥生成会话密钥，用于对称加密通信。
- 这个对称加密的会话密钥只在当前会话中使用，提供了更高的效率。
4、数据传输阶段：
- 使用对称加密的会话密钥对传输的数据进行加密和解密。
- 在整个通信过程中，只有握手阶段使用了非对称加密（公钥、私钥），这是因为非对称加密相对较慢，而对称加密相对较快。
区别：
1、安全性：
HTTP： 是明文传输的协议，数据在传输过程中是不加密的，容易被中间人窃听和篡改。
HTTPS： 使用了TLS（Transport Layer Security）或SSL（Secure Sockets Layer）协议进行加密，确保数据在传输过程中是加密的，提供了更高的安全性。
2、加密方式：
HTTP： 不对数据进行加密，数据以纯文本形式传输。
HTTPS： 使用对称密钥加密和非对称密钥加密相结合的方式，确保传输的数据在安全通道上是加密的。
3、端口：
HTTP： 默认使用端口80。
HTTPS： 默认使用端口443。
4、证书：
HTTP： 不需要证书。
HTTPS： 使用数字证书，通过证书颁发机构（CA）进行签名，用于验证网站的身份。
5、搜索引擎排名：
HTTP： Google等搜索引擎可能更倾向于将使用HTTPS的网站排名更高。
HTTPS： 提供了更安全的传输，对搜索引擎排名可能有一定的优势。
6、连接方式：
HTTP： 是无状态的，每次请求都是独立的，不保留历史信息。
HTTPS： 由于加密和安全性的要求，可能会增加一些连接的
54.this指向谁？如何改变this的指向？
- this出现在全局函数中,永远指向window
- this出现在严格模式中永远不会指向window
- 当某个函数为对象的一个属性时，在这个函数内部this指向这个对象
- this出现在构造函数中，指向构造函数新创建的对象
- 当一个元素被绑定事件处理函数时，this指向被点击的这个元素
- this出现在箭头函数中时，this和父级作用域的this指向相同
改变this指向：
- 延时器；
- 箭头函数；
- call();apply();bind();
