ES6 知识点整理

一、变量声明:varletconst 的区别

  1. 作用域
    • var:函数作用域(函数内有效)。
    • let/const:块级作用域({} 内有效,如 iffor)。
  2. 变量提升
    • var 会提升变量到作用域顶部(值为 undefined)。
    • let/const 不会提升,存在暂时性死区(声明前使用会报错)。
  3. 重复声明
    • var 允许重复声明,let/const 不允许。
  4. 修改值
    • const 声明的是常量,基本类型不可修改,对象/数组的属性可修改。
    • 比喻const 像贴了标签的盒子,盒子本身不能换,但里面的东西可以改。

二、箭头函数 vs 普通函数

区别 箭头函数 普通函数
this 指向 继承外层作用域的 this 由调用方式动态决定
构造函数 不能使用 new 实例化 可以实例化对象
arguments 对象 无,需用 ...rest 参数
原型属性 prototype

示例

javascript 复制代码
// 箭头函数
const sum = (a, b) => a + b;
// 普通函数
function sum(a, b) { return a + b; }

三、模板字符串

  • 特点 :使用反引号(````````)包裹,支持多行文本、变量嵌入(${变量})。
  • 优点 :避免繁琐拼接,代码更清晰。
    示例
javascript 复制代码
const name = "小明";
console.log(`你好,${name}!
今天天气不错~`); // 支持换行和变量

四、解构赋值

  • 作用:从数组/对象中快速提取值,简化赋值操作。
  • 场景 :函数参数解构、JSON 数据处理。
    示例
javascript 复制代码
// 数组解构
const [a, b] = [1, 2]; // a=1, b=2
// 对象解构
const { name, age } = { name: "小明", age: 18 };

五、Promise

  • 作用:解决回调地狱,管理异步操作(如网络请求)。
  • 状态pending(进行中)、fulfilled(成功)、rejected(失败)。
  • 链式调用 :通过 .then().catch() 处理结果。
    示例
javascript 复制代码
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("成功"), 1000);
});
promise.then(res => console.log(res)); // 1秒后输出"成功"

六、Set 和 Map

结构 特点 常用方法
Set 成员唯一(自动去重) add(), delete(), has()
Map 键值对集合,键可以是任意类型 set(), get(), has()

示例

javascript 复制代码
// Set去重
const arr = [1, 2, 2, 3];
const unique = [...new Set(arr)]; // [1, 2, 3]
// Map存储键值对
const map = new Map();
map.set("name", "小明");

七、Class 类

  • 本质:ES6 的类是基于原型的语法糖,更接近传统面向对象语言。
  • 特点 :支持继承(extends)、静态方法(static)、构造函数(constructor)。
    示例
javascript 复制代码
class Person {
  constructor(name) { this.name = name; }
  sayHello() { console.log(`我是${this.name}`); }
}
const p = new Person("小明");
p.sayHello(); // 输出"我是小明"

八、async/await

  • 作用:以同步方式写异步代码,解决回调嵌套问题。
  • 原理async 函数返回 Promise,await 等待异步操作完成。
    示例
javascript 复制代码
async function fetchData() {
  const res = await fetch("api/data"); // 等待请求完成
  const data = await res.json();
  console.log(data);
}

九、扩展运算符(...

  • 用途 :数组/对象展开、函数参数传递。
    示例
javascript 复制代码
// 合并数组
const arr1 = [1, 2], arr2 = [3, 4];
const merged = [...arr1, ...arr2]; // [1, 2, 3, 4]
// 对象合并
const obj1 = { a: 1 }, obj2 = { b: 2 };
const mergedObj = { ...obj1, ...obj2 }; // { a:1, b:2 }

十、模块化(import/export

  • 作用:拆分代码为独立模块,便于维护和复用。

  • 用法

    javascript 复制代码
    // 导出
    export const name = "小明";
    export default function() { ... };
    // 导入
    import { name } from './module';
    import myFunc from './module';

总结高频考点

  1. 变量声明let/const 的块级作用域和暂时性死区。
  2. 箭头函数this 绑定和匿名特性。
  3. Promise:状态管理和链式调用。
  4. 解构赋值:简化数据提取。
  5. Class 和模块化:面向对象编程和代码组织。

以上问题覆盖了 ES6 的核心知识点,建议结合代码实践加深理解。如需更完整题目,可参考:CSDN-ES6面试题掘金-ES6面试题

相关推荐
IT_陈寒15 分钟前
Redis的KEYS命令把我搞崩溃了,改用SCAN才活过来
前端·人工智能·后端
Jackson__1 小时前
为什么 Agent 越聊越慢?聊聊 Context(上下文)管理
前端·agent·ai编程
KaMeidebaby1 小时前
卡梅德生物技术快报|抗体合成:多肽抗体合成工程化方案:Nsp2 保守肽多抗制备与多维度验证
前端·网络·数据库·人工智能·算法
青禾网络1 小时前
前端做音画匹配这件事,我从"随机塞"到"AI 自动对齐"
前端·github
仙人球部落1 小时前
-python-LangGraph框架(3-31-LangGraph 「合并式状态管理」的原理与实践)
开发语言·javascript·python
2601_963771372 小时前
Hardening Enterprise WordPress Sites Against REST API Leaks and Bad Headers
前端·windows·word·php
蓝银草同学2 小时前
Stream 实战:博客列表排序、过滤与分页(AI 辅助学习 Java 8)
java·前端·后端
2601_957190902 小时前
飞行影院安装施工指南:场地、动感系统与影片内容配套
大数据·前端·人工智能
爱折腾的小黑牛2 小时前
简记往来批量录入功能的实现:从文本到结构化数据
前端·算法
sunfdf3 小时前
Next.js 新手从零部署到首跑实战指南
开发语言·javascript·ecmascript