好的,ES6(ECMAScript 2015)是 JavaScript 的重大更新,引入了许多新特性,以下是其核心特点:
-
let与const-
let用于声明块级作用域的变量:javascriptif (true) { let x = 10; } console.log(x); // ReferenceError -
const用于声明常量(不可重新赋值):javascriptconst PI = 3.14; PI = 3.15; // TypeError
-
-
箭头函数(Arrow Functions)
-
简化函数语法,自动绑定当前上下文(
this):javascriptconst add = (a, b) => a + b; const square = x => x * x;
-
-
模板字符串(Template Literals)
-
支持多行字符串和变量插值:
javascriptconst name = "Alice"; console.log(`Hello, ${name}! Welcome to ES6.`);
-
-
解构赋值(Destructuring)
-
从数组或对象中提取值:
javascript// 数组解构 const [a, b] = [1, 2]; // 对象解构 const { id, name } = { id: 1, name: "Bob" };
-
-
默认参数(Default Parameters)
-
为函数参数设置默认值:
javascriptfunction greet(name = "Guest") { return `Hello, ${name}!`; }
-
-
扩展运算符(Spread Operator)
-
展开数组或对象:
javascriptconst arr1 = [1, 2]; const arr2 = [...arr1, 3]; // [1, 2, 3] const obj1 = { a: 1 }; const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }
-
-
Promise 与异步处理
-
解决回调地狱,支持链式调用:
javascriptfetchData() .then(data => process(data)) .catch(error => console.error(error));
-
-
类(Classes)
-
提供更清晰的面向对象语法:
javascriptclass Person { constructor(name) { this.name = name; } greet() { return `Hello, ${this.name}!`; } }
-
-
模块化(Modules)
-
支持
import和export:javascript// math.js export const add = (a, b) => a + b; // main.js import { add } from './math.js';
-
-
其他特性
- Symbol:创建唯一标识符。
- Map/Set:新的数据结构。
- 迭代器(Iterators) 与 生成器(Generators):简化遍历逻辑。
- Proxy 与 Reflect:元编程支持。
JavaScript ES6 新特性详解
Symbol:创建唯一标识符
Symbol 是 ES6 引入的一种新的原始数据类型,用于创建唯一的标识符。主要特点包括:
- 每个 Symbol 值都是独一无二的,即使传入相同的描述
- 不是构造函数,不能使用 new 调用
- 常用于对象属性的键,避免属性名冲突
示例用法:
javascript
const symbol1 = Symbol('description');
const symbol2 = Symbol('description');
console.log(symbol1 === symbol2); // false
const obj = {
[symbol1]: 'value1',
[symbol2]: 'value2'
};
Map/Set:新的数据结构
Map
Map 是一种键值对集合,与 Object 的主要区别:
- 键可以是任意类型(Object 只能是字符串或 Symbol)
- 维护插入顺序
- 有 size 属性可直接获取元素数量
- 性能更好,特别是在频繁增删的场景
常用方法:
javascript
const map = new Map();
map.set('key', 'value');
map.get('key'); // 'value'
map.has('key'); // true
map.delete('key');
map.clear();
Set
Set 是一种值集合,特点:
- 成员值唯一(自动去重)
- 维护插入顺序
- 同样有 size 属性
常用方法:
javascript
const set = new Set([1, 2, 3]);
set.add(4);
set.has(3); // true
set.delete(2);
set.clear();
迭代器(Iterators)与生成器(Generators)
迭代器
迭代器是一个对象,它实现了一个标准的迭代协议:
- 必须实现 next() 方法
- next() 返回 { value, done } 对象
- 可迭代对象实现了 [Symbol.iterator] 方法
javascript
const iterable = {
[Symbol.iterator]() {
let step = 0;
return {
next() {
step++;
if (step <= 3) {
return { value: step, done: false };
}
return { value: undefined, done: true };
}
};
}
};
生成器
生成器函数是创建迭代器的语法糖,使用 function* 声明:
javascript
function* generator() {
yield 1;
yield 2;
yield 3;
}
const gen = generator();
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { value: 3, done: false }
gen.next(); // { value: undefined, done: true }
Proxy 与 Reflect:元编程支持
Proxy
Proxy 用于创建对象的代理,可以拦截和自定义基本操作:
javascript
const target = {};
const handler = {
get(target, prop) {
return prop in target ? target[prop] : 'default';
}
};
const proxy = new Proxy(target, handler);
proxy.test = 'value';
console.log(proxy.test); // 'value'
console.log(proxy.nonExistent); // 'default'
常用拦截操作:
- get/set
- has
- deleteProperty
- apply(函数调用)
- construct(new 操作)
Reflect
Reflect 提供了与 Proxy 拦截器方法一一对应的静态方法,用于更优雅地操作对象:
javascript
const obj = {};
Reflect.set(obj, 'prop', 'value');
console.log(Reflect.get(obj, 'prop')); // 'value'
Reflect 的主要用途:
- 提供统一的操作对象API
- 与 Proxy 配合使用
- 替代一些 Object 方法,如 defineProperty
- 让操作返回值更加合理(如返回布尔值表示成功与否)
这些特性显著提升了 JavaScript 的开发效率和代码可读性。实际开发中可通过 Babel 等工具兼容旧浏览器。供大家参考