前端开发面试题总结-JavaScript篇(二)

其他高频问题

15、JS的数据类型有哪些

JavaScript的数据类型分为: 简单数据类型 和 引用数据类型。
简单数据类型包括: Number、String、Boolean、Undefined、Null 和 Symbol；
引用数据类型包括: Object，包括数组、函数等。此外，ES2020新增了 BigInt 用于大整数。

16、如何判断数组类型？

● Array.isArray(arr)
● Object.prototype.toString.call(arr) === '[object Array]'
● arr instanceof Array（不推荐，可能受跨窗口影响）。

17、解释 this 的指向规则

● 默认绑定：全局对象（严格模式为 undefined）。
● 隐式绑定：调用时的对象（如 obj.fn()）。
● 显式绑定：call/apply/bind 指定 this。
● new 绑定：指向新创建的对象。

18、跨域问题及解决方案

答案：
● 同源策略：协议、域名、端口一致。
● 解决方案：
a. CORS（服务器设置 Access-Control-Allow-Origin）。
b. JSONP（通过 

19、宏任务与微任务的区别是什么？列举常见的宏任务和微任务。

区别：
○ 宏任务：由浏览器/Node.js 发起的任务，执行优先级低于微任务。每次事件循环中只执行一个宏任务。
○ 微任务：在当前宏任务执行结束后、下一个宏任务开始前立即执行，优先级更高。
● 常见类型：
○ 宏任务：setTimeout、setInterval、DOM 事件回调、I/O 操作（Node.js）、requestAnimationFrame（浏览器）、setImmediate（Node.js）。
○ 微任务：Promise.then、Promise.catch、Promise.finally、MutationObserver（浏览器）、process.nextTick（Node.js，优先级最高）。

20、为什么微任务的优先级高于宏任务？设计目的是什么？

微任务的设计是为了在当前任务执行完成后、渲染前处理高优先级的异步操作（如 Promise 回调），确保这些操作能快速响应，避免阻塞 UI 更新。例如：
● 在数据更新后立即处理 DOM 变更（如 Vue/React 的异步更新机制）。
● 确保多个 Promise.then 回调连续执行，避免被其他任务插队。

21、什么是“严格模式”（Strict Mode）？它解决了哪些问题？

● 启用方式：在脚本或函数顶部添加 "use strict";。
● 主要限制：
○ 禁止未声明变量赋值（抛出 ReferenceError）。
○ 禁止删除不可删除属性（如 delete Object.prototype）。
○ 函数参数不能重名。
○ eval 和 arguments 不能作为变量名。
○ this 默认不指向全局对象（未绑定时为 undefined）。

22、ES6模块化和Commonjs模块化的区别

● 语法：
○ ES6：使用 import 和 export。
○ CommonJS：使用 require 和 module.exports。
● 加载方式
○ ES6：静态加载（编译时确定依赖）。
○ CommonJS：动态加载（运行时加载）。
● 模块输出
○ ES6：输出值的引用，模块内部变化会反映到外部。
○ CommonJS：输出值的拷贝，模块内部变化不会影响外部。
● 应用场景
○ ES6：适合浏览器和现代开发环境（如Webpack、Babel）。
○ CommonJS：主要用于Node.js。
● 兼容性
○ ES6：现代浏览器和Node.js 12.x以上支持，旧环境需转译。
○ CommonJS：Node.js原生支持，浏览器需打包工具。
● 总结
○ ES6模块化：静态加载、输出引用，适合现代开发。
○ CommonJS：动态加载、输出拷贝，适合Node.js。

23、本地存储和cookie的区别

1. 是什么: 都是用来存储数据的方式
2. 区别:
   2.1. 请求不同:

• cookie 向服务器请求数据会携带
• sessionStorage和localStorage 仅在本地保存
  2.2. 存储大小限制也不同:
• cookie 数据不能超过 4k
• sessionStorage和localStorage约 5M
  2.3. 数据有效期不同:
• sessionStorage：仅在当前浏览器窗口关闭前有效
• localStorage：始终有效，持久数据,除非手动删除
• cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效

24、什么是事件代理（事件委托）

1. 是什么
   ● 事件代理（事件委托），是JavaScript中绑定事件的常用技巧。把原本需要绑定的事件委托给父元素，让父元素负责事件监听。事件代理的原理是DOM元素的事件冒泡
2. 事件委托的好处：
   ● 减少事件数量，提高性能
3. 使用场景：
   ● 动态创建的元素
   ●大量的子元素需要注册事件

25、什么是事件流

1. 是什么
   ● 事件流流动的路径。也就是说，当一个事件发生时，这个事件的传播过程就是事件流。
2. 事件包含阶段
   ●事件流一般包含三个阶段：捕获 目标 冒泡

26、如何检测浏览器的类型

可以通过 navigator.userAgent 来检测浏览器的信息

27、对象的方法和字符串方法(常用)

1. 对象
   ● Object.keys() 获取对象中的属性, 返回数组
   ● Object.values() 获取对象中的属性值, 返回数组
   ● Object.assign() 对象浅拷贝
2. 字符串
   ● length属性 获取字符串的长度
   ● charAt() 从一个字符串中返回指定的字符
   ● substring 方法返回一个字符串在开始索引到结束索引之间的一个子集
   ● split() 字符串转数组, 返回数组
   ● includes() 字符串是否包含某个元素, 返回布尔值

28、什么是深拷贝和浅拷贝

1.浅拷贝: 拷贝对象的一层属性,如果对象里面还有对象,拷贝的是地址, 两者之间修改会有影响,适用于对象里面属性的值是简单数据类型的.
2.深拷贝: 拷贝对象的多层属性,如果对象里面还有对象,会继续拷贝,使用递归去实现

29、call、apply和bind的区别

1. 是什么
   ● 用来改变this指向的方法
2. 特点
   2.1. call/apply/bind 第一个参数修改this的指向
   2.2. call 可以调用函数, 第二个参数,实参列表, 参数之间用逗号隔开
   2.3. apply 可以调用函数, 第二个参数,是个数组或伪数组

30、38–es6有哪些新特性?

ES6 核心新特性：

1. 变量声明
   ○ let/const：块级作用域，解决变量提升问题，const 声明常量。
2. 箭头函数
   ○ () => {}：简化函数语法，无自身 this，继承外层上下文，不可作为构造函数。
3. 模板字符串
   ○ 反引号 ` 包裹，支持换行和变量插值（${value}）。
4. 解构赋值
   ○ 从数组/对象中提取值赋值给变量，简化数据访问（如 const { a, b } = obj）。
5. 函数参数默认值
   ○ 允许函数参数设置默认值（function(a = 1) {}）。
6. 扩展运算符
   ○ … :展开数组/对象（合并数组、浅拷贝对象等）。
7. Promise
   ○ 异步编程解决方案，替代回调地狱，支持链式调用（.then()/.catch()）。
8. 模块化
   ○ import/export 实现代码模块化，取代传统脚本依赖管理。
9. 类（Class）
   ○ 语法糖，基于原型链的面向对象编程（class/extends/super）。
10. Set/Map 数据结构
    ○ Set 存储唯一值，Map 支持任意类型的键值对。
11. Symbol
    ○ 唯一且不可变的数据类型，用于对象属性的唯一标识。
12. 生成器（Generator）
    ○ function* 定义，yield 暂停执行，实现惰性求值或异步流程控制。
13. Proxy/Reflect
    ○ 代理对象操作（拦截读取、赋值等），Reflect 提供对象操作的标准方法。
    核心价值：
    ● 提升代码简洁性、可读性与维护性
    ● 增强异步处理能力（Promise、async/await后续）
    ● 推动模块化与标准化开发模式。