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面试题

相关推荐
软件开发技术深度爱好者23 分钟前
HTML5+JavaScript实现连连看游戏之二
javascript·游戏·html5
zhangguo200223 分钟前
react18基础速成
前端·javascript·react.js
海盐泡泡龟44 分钟前
Vue中的过滤器知道多少?从是什么、怎么用、应用场景、原理分析、示例解释
前端·vue.js·flutter
NoneCoder3 小时前
CSS 架构与命名规范
前端·css
牧杉-惊蛰8 小时前
Vue3中到达可视区域后执行
前端·javascript·vue.js
GISer_Jing9 小时前
ByteMD详解
前端·javascript
小杨升级打怪中9 小时前
前端面经-VUE3篇(二)--vue3基础知识(二)计算属性(computed)、监听属性(Watch)
前端
IoOozZzzz10 小时前
ES6异步编程中Promise与Proxy对象
前端·javascript·es6
hunandede10 小时前
av_dict_get,av_dict_set,av_dict_set_int
java·前端·javascript
linkingvision10 小时前
Chrome 136 H265 WebRTC 支持 正式版本已包含
前端·chrome·webrtc