文章总结： 本文详细介绍了ES6的核心新特性，包括let和const块级作用域、箭头函数、模板字符串、解构赋值及默认参数。文章还讲解了类与模块化、Promise异步编程、Symbol、Map/Set及迭代器生成器等内容，旨在提升JavaScript代码的可读性与开发效率。 综合评分： 85 文章分类： 安全开发,WEB安全
ES6新特性
原创
静观云起
码云精炼
2025年12月24日 21:59 广东
一 ES6的定义
ES6，全称ECMAScript 6，是JavaScript语言的第六个版本，也是JavaScript的下一代标准。由ECMA国际标准化组织发布。它引入了许多新语法和特性，旨在提升代码的可读性、简洁性和功能性。
二 ES6主要新特性
- let和const(块级作用域变量声明)
let和const是两种新的变量声明方式，用于替代传统的var
let特点：
✅块级作用域: let声明的变量只在它所在的代码块(如 {} 内部)中有效
✅不允许重复声明: 在同一作用域内不能重复使用 let 声明同名变量
const特点：
✅块级作用域：与let一样，const声明的变量也只在块级作用域内有效。
✅必须初始化：使用const声明变量时必须同时赋值，不能先声明后赋值。
✅不可重新赋值：const声明的是常量，声明后不能再修改其绑定的值(但对于对象和数组，其属性或元素可以修改)
✅不允许重复声明：同一作用域内不能重复声明同名常量
// let 和 constlet a = 10;const PI = 3.14;
- 箭头函数(Arrow Functions)
箭头函数是定义匿名函数的更简洁的语法，可以让代码更短、更易读。
✅箭头函数没有自己的this，它会继承定义时的上下文中的this值
✅箭头函数没有自己的arguments对象，但可以通过闭包访问外层函数的arguments
✅ 箭头函数没有prototype，也不能使用new调用，因此不能用来定义类或构造函数
// 普通函数function add(a, b) { return a + b;}
// 箭头函数const add = (x, y) => x + y;console.log(add(2, 3)); // 5
- 模板字符串(Template Literals)
✅支持多行字符串：不需要使用 \n 或字符串拼接，直接换行即可实现多行文本
✅支持嵌入变量和表达式：使用${表达式}的语法，可以方便地在字符串中插入变量、函数调用或任意JS表达式的结果，使字符串拼接更直观、更清晰
✅提升代码可读性与编写效率：相比传统的字符串拼接(使用 +)，模板字符串让包含变量的文本更加简洁、易读
const str = ` 这是第一行， 这是第二行， 这是第三行。`;console.log(str);
// 输出会保留换行格式const name = 'Alice';// 传统方式const oldWay = 'Hello,' + name + '!';// 模板字符串方式 Hello, Alice！console.log(`Hello, ${name}！`);
- 解构赋值(Destructuring Assignment)
解构赋值(Destructuring Assignment)是一种简化从数组或对象中提取值并赋值给变量的语法
const [x, y] = [1, 2];const { firstName, lastName } = { firstName: 'John', lastName: 'Doe' };
| 场景 | 传统写法 | 解构赋值写法 | 优点 |
| — | — | — | — |
| 获取数组元素 | 通过索引逐个取值 | [a, b] = [1, 2] | 一行完成，简洁直观 |
| 获取对象属性 | const name = obj.name; | const { name } = obj; | 语义清晰，减少重复代码 |
| 函数参数处理 | 手动传参或处理对象属性 | 直接解构参数对象 | 参数结构清晰，易于维护 |
- 默认参数(Default Parameters)
// 默认参数function greet(name = 'Guest') { return `Hello, ${name}`;}
- 剩余参数与展开运算符(Rest and Spread Operators)
剩余参数(Rest Parameters)和展开运算符(Spread Operator)都使用了...(三个点)语法
✅剩余参数(Rest)：用于函数定义时，把多个参数收集为一个数组
✅展开运算符(Spread)：用于函数调用或数据操作时，把数组或对象展开为多个元素或属性
function sum(...nums) { return nums.reduce((a, b) => a + b, 0);}console.log(sum(1, 2, 3)); // 6const arr1 = [1, 2];const arr2 = [3, 4];// [1, 2, 3, 4]console.log([...arr1, ...arr2]);
- 类(Classes)
ES6的class是一种语法糖，让开发者可以用更直观、更接近传统面向对象语言的方式来定义对象模板(构造函数 + 原型方法),它底层仍然是基于JavaScript的原型继承，但语法更简洁、更易读、更易维护.
✅通过class可以定义一个构造函数(constructor)，用来初始化对象
✅可以在类中定义实例方法(属于对象的方法)、静态方法(属于类本身的方法)等
class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`你好，我叫${this.name}，今年${this.age}岁`); }}const p = new Person('小明', 20);// 输出：你好，我叫小明，今年20岁p.sayHello();
- 模块化(Modules：import / export)
ES6 中的模块化(Modules)，通过 import 和 export 语法实现
✅封装与作用域隔离:模块拥有独立的作用域，模块内的变量、函数、类等默认是私有的**，不会污染全局作用域。必须通过export明确导出，其他模块才能使用，增强了代码的封装性
✅按需导入与使用: 通过 import 语法，可以精准地从其他模块中导入需要的功能，避免引入不必要的代码，提高加载效率**
✅复用性: 模块可被多个地方复用，避免重复代码**
// module.jsexport const value = 42;
// test.jsimport { value } from './module.js';
- Promise(用于异步编程)
Promise有三种状态：
pending(等待中)：初始状态，既没有成功，也没有失败。
fulfilled(已成功)：操作成功完成。
rejected(已失败)：操作失败。
一旦状态变为 fulfilled 或 rejected，就不可再改变（即状态不可逆）
const promise = new Promise((resolve, reject) => { // 模拟异步操作，比如网络请求 setTimeout(() => { // 假设操作成功 const success = true; if (success) { // 成功时调用 resolve resolve('操作成功！'); } else { // 失败时调用 reject reject('操作失败！'); } }, 1000); // 模拟1秒后返回结果});
说明：
new Promise(executor)接收一个函数 executor，它有两个参数：
resolve：异步操作成功时调用，传入结果。
reject：异步操作失败时调用，传入错误信息。
这里用 setTimeout 模拟了一个耗时 1 秒的异步任务
使用.then()和.catch()处理结果
promise .then((result) => { // 如果成功，输出：操作成功！ console.log(result); }) .catch((error) => { // 如果失败，输出：操作失败！ console.error(error); });
✅ .then(onFulfilled)：当Promise状态为fulfilled(成功)时执行，接收resolve的结果。
✅.catch(onRejected)：当Promise状态为rejected(失败)时执行，接收reject的错误信息。
✅这种链式写法让异步代码更清晰，避免了层层嵌套。
✅将异步逻辑封装在返回Promise的函数中，便于复用。调用者通过 .then()拿到结果，通过 .catch()捕获异常
- Symbol(新的原始数据类型)
✅创建唯一且不可变的值：每次调用Symbol()都会生成一个独一无二的值，即使传入相同的描述，生成的Symbol也不相等，避免属性名冲突**
✅定义内部或约定的私有属性****
const sym = Symbol('unique');// Symbol(unique)console.log(sym);
- Map和Set(新的数据结构)
const map = new Map();map.set('key', 'value');// valueconsole.log(map.get('key')); const set = new Set([1, 2, 2, 3]);// Set { 1, 2, 3 }console.log(set);
- 迭代器与生成器(Iterators & Generators)
// 定义一个生成器函数function* myGenerator() { yield 1; yield 2; yield 3;}
// 调用生成器函数，返回生成器对象(它也是迭代器)const gen = myGenerator();
// { value: 1, done: false }console.log(gen.next()); // { value: 2, done: false }console.log(gen.next()); // { value: 3, done: false }console.log(gen.next()); // { value: undefined, done: true }console.log(gen.next());
说明：
✅ function* 定义生成器函数。
✅每遇到一个 yield，函数会暂停执行并返回一个值，下次调用 next() 时从暂停处继续。
免责声明：
本文所载程序、技术方法仅面向合法合规的安全研究与教学场景，旨在提升网络安全防护能力，具有明确的技术研究属性。
任何单位或个人未经授权，将本文内容用于攻击、破坏等非法用途的，由此引发的全部法律责任、民事赔偿及连带责任，均由行为人独立承担，本站不承担任何连带责任。
本站内容均为技术交流与知识分享目的发布，若存在版权侵权或其他异议，请通过邮件联系处理，具体联系方式可点击页面上方的联系我。
本文转载自：码云精炼 静观云起《ES6新特性》
版权声明
本站仅做备份收录，仅供研究与教学参考之用。
读者将信息用于其他用途的，全部法律及连带责任由读者自行承担，本站不承担任何责任。
评论