ES6(ECMAScript 2015)是 JavaScript 语言的一个重要版本,它引入了许多新特性,使得 JavaScript 更加强大和灵活。以下是一些主要的 ES6 新特性:
1. 块级作用域(let 和 const)
let:声明变量,具有块级作用域,避免了 var 的变量提升问题。
let x = 10;
if (true) {
let x = 20;
console.log(x); // 20
}
console.log(x); // 10
const:声明常量,不能重新赋值,也具有块级作用域。
const y = 30;
// y = 40; // Error: Assignment to constant variable.
console.log(y); // 30
2. 箭头函数(Arrow Functions)
使用 => 语法定义函数,具有更简洁的写法,并且不绑定自己的 this,而是捕获外部上下文的 this。
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
3. 模板字符串(Template Literals)
使用反引号(`)来定义多行字符串,并且可以在字符串中嵌入表达式。
const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!
4. 解构赋值(Destructuring Assignment)
可以从数组或对象中提取值,并将它们赋值给变量。
const [a, b] = [1, 2];
console.log(a, b); // 1 2
const {name, age} = {name: 'Alice', age: 25};
console.log(name, age); // Alice 25
5. 扩展运算符(Spread Operator)
可以将数组或对象展开为单个元素,用于函数调用、数组构造、对象合并等场景。
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
console.log(newArr); // [1, 2, 3, 4, 5]
const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 3};
console.log(obj2); // {a: 1, b: 2, c: 3}
6. 类(Classes)
引入了基于原型的面向对象编程的语法糖,更接近于传统的类和继承模型。
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, ${this.name}`);
}
}
const person = new Person('John');
person.greet(); // Hello, John
7. 模块(Modules)
使用 import 和 export 关键字,可以更好地管理代码和依赖关系。
// utils.js
export function add(a, b) {
return a + b;
}
// main.js
import { add } from './utils.js';
console.log(add(2, 3)); // 5
8. Promise 对象
用于异步编程,解决了回调地狱的问题,Promise 对象表示一个异步操作的最终完成或失败。
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => resolve('Success!'), 1000);
});
myPromise.then(result => console.log(result)); // 1秒后打印: Success!
9. 默认参数值(Default Parameters)
可以为函数参数提供默认值。
function greet(name = 'Guest') {
console.log(`Hello, ${name}`);
}
greet(); // Hello, Guest
greet('Alice'); // Hello, Alice
10. for…of 循环
用于遍历数组、字符串、Map、Set 等可迭代对象,更简洁且更符合语义。
const arr = [1, 2, 3];
for (const value of arr) {
console.log(value); // 1 2 3
}
11. Symbol 类型
新增了一种基本数据类型 Symbol,表示独一无二的值,常用于定义对象的私有属性。
const sym = Symbol('unique');
const obj = {
[sym]: 'hidden value'
};
console.log(obj[sym]); // hidden value
12. Map 和 Set 数据结构
Map:类似于对象,但 Map 的键可以是任何类型的值。
const map = new Map();
map.set('key', 'value');
map.set(123, 'number');
console.log(map.get('key')); // value
console.log(map.get(123)); // number
Set:类似于数组,但 Set 不允许重复值。
const set = new Set([1, 2, 2, 3]);
console.log(set); // Set(3) {1, 2, 3}
13. async/await
在 ES6 的基础上,ES8 引入了 async/await,它是对 Promise 的语法糖,使得异步代码看起来像同步代码,更易读。
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}