ECMAScript 2015(简称ES6)是JavaScript的重要版本,带来了许多新特性,这些新特性大大增强了JavaScript的功能性和可读性。下面是ES6新增的主要内容:
1. 块级作用域:let 和 const
let和const用于声明变量,提供块级作用域(而非var的函数作用域)。let声明的变量在块级作用域内有效。const声明的变量是常量,必须在声明时初始化,且不可更改。
let x = 10;
if (true) {
let x = 20; // 块级作用域
console.log(x); // 20
}
console.log(x); // 10
const y = 30;
// y = 40; // 错误,不能重新赋值
2. 箭头函数(Arrow Functions)
箭头函数提供了更简洁的函数声明方式,并且不绑定自己的 this,使得在回调函数中更加直观。
// 普通函数
function add(a, b) {
return a + b;
}
// 箭头函数
const add = (a, b) => a + b;
- 箭头函数中的
this是从外层作用域继承的。
// 示例:
const obj = {
name: 'Alice',
greet: function() {
setTimeout(() => {
console.log(this.name); // 'Alice',箭头函数继承外层 `this`
}, 1000);
}
};
obj.greet();
3. 模板字符串(Template Literals)
模板字符串使得字符串拼接更加方便和直观,支持多行字符串和变量插值。
const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, Alice!
// 多行字符串
const message = `This is
a multi-line
string.`;
console.log(message);
4. 解构赋值(Destructuring Assignment)
解构赋值允许从数组或对象中提取数据并将其赋值给变量。
- 数组解构:
const arr = [1, 2, 3];
const [a, b] = arr;
console.log(a, b); // 1 2
- 对象解构:
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name, age); // Alice 25
5. 默认参数(Default Parameters)
ES6允许函数参数设置默认值,当没有传入值时使用默认值。
function greet(name = 'Guest') {
console.log(`Hello, ${name}`);
}
greet(); // Hello, Guest
greet('Alice'); // Hello, Alice
6. 剩余参数(Rest Parameters)
使用 ... 语法收集函数的多个参数为一个数组。
function sum(...args) {
return args.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6
7. 展开运算符(Spread Operator)
展开运算符 ... 可以将数组或对象展开到新的数组或对象中。
- 数组展开:
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
- 对象展开:
const obj1 = { name: 'Alice', age: 25 };
const obj2 = { ...obj1, city: 'New York' };
console.log(obj2); // { name: 'Alice', age: 25, city: 'New York' }
8. 类(Classes)
ES6引入了类的概念,使得面向对象编程(OOP)更加简洁和直观。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const person = new Person('Alice', 25);
person.greet(); // Hello, my name is Alice and I am 25 years old.
9. 模块(Modules)
ES6引入了模块化的机制,可以使用 import 和 export 来导入和导出模块。
- 导出:
// module.js
export const name = 'Alice';
export function greet() {
console.log('Hello');
}
- 导入:
// app.js
import { name, greet } from './module.js';
console.log(name); // Alice
greet(); // Hello
10. Promise
Promise 提供了一种更简洁和灵活的处理异步操作的方式,避免了回调地狱。
const promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve('Operation successful');
} else {
reject('Operation failed');
}
});
promise
.then(result => console.log(result)) // 'Operation successful'
.catch(error => console.log(error)); // 'Operation failed'
11. 符号(Symbols)
Symbol 是一种新的原始数据类型,表示唯一的标识符。
const sym = Symbol('description');
console.log(sym); // Symbol(description)
12. Set 和 Map
- Set 是一种数据结构,存储唯一值(不重复的值)。
const set = new Set([1, 2, 3, 3]);
console.log(set); // Set { 1, 2, 3 }
- Map 是一种键值对数据结构,可以使用任意类型作为键。
const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);
console.log(map.get('name')); // Alice
13. Iterator 和 Generator
- Iterator:通过
Symbol.iterator方法使得对象可以被迭代。
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
- Generator:生成器函数使用
function*语法定义,可以返回多个值,并且可以暂停和恢复。
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}
const gen = myGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
14. 反向迭代方法:for...of
for...of 循环用于迭代可迭代对象(如数组、字符串、Map、Set等):
const arr = [1, 2, 3];
for (const value of arr) {
console.log(value); // 1 2 3
}
15. Math 和 Array 的新方法
- Math 增加了
Math.pow()、Math.trunc()等新方法。 - Array 增加了
Array.from()、Array.of()、find()、findIndex()等新方法。
console.log(Math.pow(2, 3)); // 8
console.log(Array.from('hello')); // ['h', 'e', 'l', 'l', 'o']
console.log([1, 2, 3].find(x => x > 1)); // 2
总结
ES6带来了很多新特性,使得JavaScript的语法更加简洁、功能更加强大。它改进了异步编程(Promise),增加了对象和数组的操作方法(解构、扩展运算符),以及引入了类(class)和模块(import、export)等面向对象的概念,这些都极大地提高了开发效率和代码可读性。