【前端面试题】JavaScript 核心知识点解析（第一题到第三十题）

一．ES5、ES6 平时工作用到了哪些新特性

1. JSON 处理方法：JSON.parse()（字符串转对象）、JSON.stringify()（对象转字符串）
2. 变量声明：let（块级作用域变量）、const（常量）
3. 函数特性：箭头函数（简洁语法，不绑定 this）
4. 异步编程：Promise、async/await（异步代码同步化）
5. 数组方法：
   • 遍历与过滤：forEach、filter、find、findIndex
   • 检测与转换：some、map、every、includes、reduce
6. 运算符：
   • 解构运算符（对象/数组解构）
   • 展开运算符（...，用于数组展开）
   • 剩余参数（...参数名，收集函数参数）
7. 模块化：ES6 模块化（import/export）
8. 字符串方法：trim（去空格）、startsWith（前缀检测）、endsWith（后缀检测）

记忆技巧：多发现规律，例如数组方法中"some map, every includes, reduce"可联想成句子辅助记忆。

二．说说对作用域链的理解

作用域链是 JavaScript 中变量访问的规则体系，其核心特点：

1. 访问规则：变量只能向上访问，从当前作用域逐层向上查找，直至全局作用域（window 对象），无法向下访问。
2. 形成机制：函数嵌套时，内部函数可访问外部函数的变量，这种层级关系形成链式结构。
3. 特殊处理：JavaScript 本身没有块级作用域，可通过立即执行函数(function(){})()模拟块级作用域。

简单说：函数作用域内使用的变量，若在当前作用域找不到定义，会逐层向上查找，直到全局作用域，这种链式关系就是作用域链。

三．手写 AJAX 代码

let xhr = new XMLHttpRequest();
// 初始化请求（方法、URL）
xhr.open("get", "url");
// 监听请求状态变化
xhr.onreadystatechange = function() {// readyState=4表示请求完成，status=200表示请求成功if (xhr.status === 200 && xhr.readyState === 4) {console.log(xhr.responseText); // 处理响应数据}
};
// 发送请求
xhr.send();

四．onclick 和 addEventListener 绑定单击事件的区别

1. 书写位置：onclick可写在 HTML 标签上，addEventListener只能在 JS 中使用
2. 事件类型：onclick仅能绑定点击事件，addEventListener可绑定多种事件
3. 多事件处理：
   • onclick后绑定的事件会覆盖前面的
   • addEventListener可绑定多个事件，不会覆盖
4. 事件阶段控制：addEventListener可通过第三个参数控制事件在捕获阶段（true）或冒泡阶段（false，默认）触发
5. 适用范围：onclick仅对 HTML 元素有效，addEventListener对任何 DOM 元素都有效

五．async 和 await 的作用

• async：修饰函数，使其默认返回 Promise 对象，可直接使用then方法处理返回值
• await：只能在async函数内部使用，用于获取 Promise 的返回值（等待resolve或reject的结果）

核心作用：将异步代码的书写方式改为同步风格，使代码结构更清晰，解决回调地狱问题。

注意：若await后不是 Promise 对象，则按同步方式处理，返回值为undefined

六．箭头函数和普通函数的区别

1. 语法形式：箭头函数使用=>定义，写法更简洁
2. 参数对象：箭头函数没有arguments，需使用剩余参数；普通函数有arguments对象
3. 函数命名：箭头函数都是匿名函数；普通函数可匿名可具名
4. this 指向：
   • 普通函数：this 指向调用它的对象（或构造函数实例）
   • 箭头函数：不绑定 this，继承自所在上下文