文章目录
- 其他高频问题
- 15、JS的数据类型有哪些
- 16、如何判断数组类型？
- 17、解释 this 的指向规则
- 18、跨域问题及解决方案
- 19、宏任务与微任务的区别是什么？列举常见的宏任务和微任务。
- 20、为什么微任务的优先级高于宏任务？设计目的是什么？
- 21、什么是“严格模式”（Strict Mode）？它解决了哪些问题？
- 22、ES6模块化和Commonjs模块化的区别
- 23、本地存储和cookie的区别
- 24、什么是事件代理（事件委托）
- 25、什么是事件流
- 26、如何检测浏览器的类型
- 27、对象的方法和字符串方法(常用)
- 28、什么是深拷贝和浅拷贝
- 29、call、apply和bind的区别
- 30、38--es6有哪些新特性?
其他高频问题
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的区别
- 是什么: 都是用来存储数据的方式
- 区别:
2.1. 请求不同:
- cookie 向服务器请求数据会携带
- sessionStorage和localStorage 仅在本地保存
2.2. 存储大小限制也不同: - cookie 数据不能超过 4k
- sessionStorage和localStorage约 5M
2.3. 数据有效期不同: - sessionStorage：仅在当前浏览器窗口关闭前有效
- localStorage：始终有效，持久数据,除非手动删除
- cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效
24、什么是事件代理（事件委托）
- 是什么
● 事件代理（事件委托），是JavaScript中绑定事件的常用技巧。把原本需要绑定的事件委托给父元素，让父元素负责事件监听。事件代理的原理是DOM元素的事件冒泡 - 事件委托的好处：
● 减少事件数量，提高性能 - 使用场景：
● 动态创建的元素
●大量的子元素需要注册事件
25、什么是事件流
- 是什么
● 事件流流动的路径。也就是说，当一个事件发生时，这个事件的传播过程就是事件流。 - 事件包含阶段
●事件流一般包含三个阶段：捕获 目标 冒泡
26、如何检测浏览器的类型
可以通过 navigator.userAgent 来检测浏览器的信息
27、对象的方法和字符串方法(常用)
- 对象
● Object.keys() 获取对象中的属性, 返回数组
● Object.values() 获取对象中的属性值, 返回数组
● Object.assign() 对象浅拷贝 - 字符串
● length属性 获取字符串的长度
● charAt() 从一个字符串中返回指定的字符
● substring 方法返回一个字符串在开始索引到结束索引之间的一个子集
● split() 字符串转数组, 返回数组
● includes() 字符串是否包含某个元素, 返回布尔值
28、什么是深拷贝和浅拷贝
1.浅拷贝: 拷贝对象的一层属性,如果对象里面还有对象,拷贝的是地址, 两者之间修改会有影响,适用于对象里面属性的值是简单数据类型的.
2.深拷贝: 拷贝对象的多层属性,如果对象里面还有对象,会继续拷贝,使用递归去实现
29、call、apply和bind的区别
- 是什么
● 用来改变this指向的方法 - 特点
2.1. call/apply/bind 第一个参数修改this的指向
2.2. call 可以调用函数, 第二个参数,实参列表, 参数之间用逗号隔开
2.3. apply 可以调用函数, 第二个参数,是个数组或伪数组
30、38–es6有哪些新特性?
ES6 核心新特性：
- 变量声明
○ let/const：块级作用域，解决变量提升问题，const 声明常量。 - 箭头函数
○ () => {}：简化函数语法，无自身 this，继承外层上下文，不可作为构造函数。 - 模板字符串
○ 反引号 ` 包裹，支持换行和变量插值（${value}）。 - 解构赋值
○ 从数组/对象中提取值赋值给变量，简化数据访问（如 const { a, b } = obj）。 - 函数参数默认值
○ 允许函数参数设置默认值（function(a = 1) {}）。 - 扩展运算符
○ … :展开数组/对象（合并数组、浅拷贝对象等）。 - Promise
○ 异步编程解决方案，替代回调地狱，支持链式调用（.then()/.catch()）。 - 模块化
○ import/export 实现代码模块化，取代传统脚本依赖管理。 - 类（Class）
○ 语法糖，基于原型链的面向对象编程（class/extends/super）。 - Set/Map 数据结构
○ Set 存储唯一值，Map 支持任意类型的键值对。 - Symbol
○ 唯一且不可变的数据类型，用于对象属性的唯一标识。 - 生成器（Generator）
○ function* 定义，yield 暂停执行，实现惰性求值或异步流程控制。 - Proxy/Reflect
○ 代理对象操作（拦截读取、赋值等），Reflect 提供对象操作的标准方法。
核心价值：
● 提升代码简洁性、可读性与维护性
● 增强异步处理能力（Promise、async/await后续）
● 推动模块化与标准化开发模式。
