ES6(也称为 ECMAScript 2015 或 ES2015)引入了许多新的特性和改进,使得 JavaScript 更加强大、简洁和现代化。以下是 ES6 中一些主要的新特性及其详细解释:
1. 块级作用域变量
let
关键字
let
用于声明块级作用域的变量,避免了 var
变量提升带来的问题。
if (true) {
let x = 10;
}
console.log(x); // ReferenceError: x is not defined
const
关键字
const
用于声明块级作用域的常量,声明后不能重新赋值。
const y = 20;
y = 30; // TypeError: Assignment to constant variable.
2. 模板字符串
使用反引号(`
)定义的字符串,可以包含嵌入的表达式和多行文本。
let name = 'Alice';
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, Alice!
3. 箭头函数
箭头函数提供了更简洁的函数定义语法,并且不会绑定 this
。
const add = (a, b) => a + b;
console.log(add(2, 3)); // 输出: 5
// 使用箭头函数访问外部 `this`
function Timer() {
this.seconds = 0;
setInterval(() => {
this.seconds++;
console.log(this.seconds);
}, 1000);
}
const timer = new Timer();
4. 解构赋值
解构赋值允许从数组或对象中提取值,并将其赋值给变量。
数组解构
let [a, b] = [1, 2];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
对象解构
let { name, age } = { name: 'Bob', age: 25 };
console.log(name); // 输出: Bob
console.log(age); // 输出: 25
5. 默认参数
可以为函数参数提供默认值。
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
greet(); // 输出: Hello, Guest!
greet('Alice'); // 输出: Hello, Alice!
6. 扩展运算符
扩展运算符 ...
用于数组或对象的展开和收集剩余参数。
数组展开
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出: [1, 2, 3, 4, 5]
剩余参数
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 输出: 6
7. 对象字面量增强
ES6 提供了简洁的对象属性和方法定义语法。
let x = 1, y = 2;
let obj = { x, y, sayHello() { console.log('Hello'); } };
console.log(obj.x); // 输出: 1
console.log(obj.y); // 输出: 2
obj.sayHello(); // 输出: Hello
8. 模块化
ES6 引入了模块系统,使用 import
和 export
关键字。
导出模块
// math.js
export function add(a, b) {
return a + b;
}
export const PI = 3.14;
导入模块
// main.js
import { add, PI } from './math.js';
console.log(add(2, 3)); // 输出: 5
console.log(PI); // 输出: 3.14
9. 类(Classes)
ES6 引入了 class
关键字,用于定义类。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
}
let person = new Person('Charlie', 30);
person.sayHello(); // 输出: Hello, my name is Charlie
10. 迭代器和生成器
迭代器
迭代器是一种规范,用于定义对象的遍历行为。
let iterable = {
[Symbol.iterator]() {
let step = 0;
return {
next() {
if (step < 3) {
return { value: step++, done: false };
} else {
return { done: true };
}
}
};
}
};
for (let value of iterable) {
console.log(value); // 输出: 0, 1, 2
}
生成器
生成器函数可以控制函数的执行流程,使用 function*
语法定义。
function* generator() {
yield 1;
yield 2;
yield 3;
}
let gen = generator();
console.log(gen.next().value); // 输出: 1
console.log(gen.next().value); // 输出: 2
console.log(gen.next().value); // 输出: 3
11. Promise
Promise 提供了一种用于处理异步操作的新方式。
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Success!');
}, 1000);
});
promise.then(result => {
console.log(result); // 输出: Success!
}).catch(error => {
console.error(error);
});
12. Symbol
Symbol 是一种新的原始数据类型,表示唯一的标识符。
let sym1 = Symbol('description');
let sym2 = Symbol('description');
console.log(sym1 === sym2); // 输出: false
总结
ES6 引入了许多新特性,使得 JavaScript 更加现代化和功能丰富。这些新特性极大地提高了代码的可读性、可维护性和开发效率。