JavaScript ES6语法特性详解

原创于 2025-04-17 17:43:20 发布 · 402 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #开发语言

前端专栏收录该内容

44 篇文章

订阅专栏

JavaScript ES6语法特性详解

前言

随着JavaScript的不断发展，ECMAScript 2015（简称ES6）引入了许多新的语法特性和改进。这些特性极大地提升了开发者的工作效率，使代码更加简洁、易读和高效。本文将详细介绍ES6的主要语法特性，并通过实例进行说明。

一、变量声明

1. `let` 和 `const`

在ES6之前，JavaScript只能使用var来声明变量。ES6引入了let和const关键字，提供了更严格的变量作用域管理。

`let`

特性：块级作用域，不会提升到全局。

示例：

if (true) {
  let a = 1;
  console.log(a); // 输出 1
}
console.log(a); // 报错，a未定义

`const`

特性：声明常量，变量不能重新赋值，但对象和数组的内容可以修改。

示例：

const PI = 3.1415;
PI = 3; // 报错

const obj = { name: 'Alice' };
obj.name = 'Bob'; // 允许

二、函数改进

2. 箭头函数（Arrow Functions）

箭头函数是ES6中引入的一种更简洁的函数书写方式，支持单行表达式和隐式返回。

基本语法：

const add = (a, b) => a + b;

匿名函数简化：

// 传统写法
setTimeout(function() {
  console.log('Hello');
}, 1000);

// 箭头函数写法
setTimeout(() => console.log('Hello'), 1000);

`this` 绑定：

箭头函数不会有自己的this，而是继承自外层作用域。

const obj = {
  name: 'Alice',
  sayHi: () => {
    setTimeout(() => {
      console.log(this.name); // 输出 Alice
    }, 1000);
  }
};
obj.sayHi();

三、模板字符串

3. `backtick`（反引号）

模板字符串允许在字符串中嵌入变量和表达式，使用${}语法。

基本用法：

const name = 'Alice';
const age = 25;
const str = `Hello, ${name}! You are ${age} years old.`;
console.log(str); // 输出 Hello, Alice! You are 25 years old.

多行字符串支持：

const text = `
This is a multi-line string.
Line 1
Line 2
`;
console.log(text);
// 输出
// This is a multi-line string.
// Line 1
// Line 2

四、解构赋值

4. 数组和对象的解构

ES6允许通过模式匹配的方式从数组或对象中提取数据。

数组解构：

const arr = [1, 2, 3];
const [a, b] = arr;
console.log(a); // 输出 1
console.log(b); // 输出 2

// 省略中间元素
const [x,, y] = arr;
console.log(x); // 1
console.log(y); // 3

对象解构：

const obj = { name: 'Alice', age: 25 };
const { name, age } = obj;
console.log(name); // Alice
console.log(age); // 25

// 变量重命名
const { name: newName } = obj;
console.log(newName); // Alice

五、默认参数值

5. 函数参数的默认值

ES6允许在函数定义时为参数指定默认值。

基本用法：

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet(); // 输出 Hello, Guest!
greet('Alice'); // 输出 Hello, Alice!

复杂类型支持：

function createPerson({ name = 'Unknown', age = 0 }) {
  return { name, age };
}

const person1 = createPerson({});
console.log(person1); // { name: 'Unknown', age: 0 }

const person2 = createPerson({ name: 'Alice' });
console.log(person2); // { name: 'Alice', age: 0 }

六、类的语法

6. `class`关键字

ES6引入了class关键字，简化了面向对象编程。

基本语法：

class Animal {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const dog = new Animal('Buddy');
dog.sayHello(); // 输出 Hello, my name is Buddy

继承与重写方法：

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类构造函数
    this.breed = breed;
  }

  sayHello() {
    super.sayHello(); // 调用父类方法
    console.log(`I am a ${this.breed}`);
  }
}

const bulldog = new Dog('Buddy', 'Bulldog');
bulldog.sayHello();
// 输出：
// Hello, my name is Buddy
// I am a Bulldog

七、模块化

7. `export` 和 `import`

ES6引入了原生的模块化语法，支持按需加载代码。

导出模块：

// math.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.1415;

引入模块：

import { add, PI } from './math';
console.log(add(2, 3)); // 输出 5
console.log(PI); // 输出 3.1415

八、其他特性

8. `for...of` 循环

用于遍历数组或可迭代对象。

const arr = [1, 2, 3];
for (let num of arr) {
  console.log(num);
}
// 输出 1, 2, 3

9. `Promise`

ES6原生支持Promise，用于处理异步操作。

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data loaded');
    }, 1000);
  });
}

getData().then(data => console.log(data)); // 输出 Data loaded（延迟1秒）