ES6 入门教程：现代 JavaScript 开发必备特性

没事多睡觉666

已于 2025-05-04 16:30:21 修改

阅读量350

点赞数 11

文章标签： javascript es6 前端

于 2025-05-04 16:28:34 首次发布

本文链接：https://blog.csdn.net/2401_85751940/article/details/147700756

版权

前言

ECMAScript 2015（简称 ES6）是 JavaScript 语言的重大更新，引入了许多新特性，使 JavaScript 开发更加现代化和高效。本文将介绍 ES6 中最常用和最重要的特性，帮助您快速上手现代 JavaScript 开发。

一、let 和 const 声明

ES6 引入了两种新的变量声明方式：let 和 const，用于替代传统的 var。

// let 声明块级作用域变量
let name = '吴彦祖';
name = '刘德华'; // 可以重新赋值

// const 声明块级作用域常量
const PI = 3.14159;
// PI = 3.14; // 报错，不能重新赋值

// 块级作用域示例
{
  let blockScoped = 'visible inside block';
  const alsoBlockScoped = 'also visible inside block';
}
// console.log(blockScoped); // 报错，未定义

二、箭头函数

箭头函数提供了更简洁的函数语法，并且不绑定自己的 this。

// 传统函数
function add(a, b) {
    return a + b;
  }
  
  // 箭头函数
  const add = (a, b) => a + b;
  
  // 单个参数可以省略括号
  const square = x => x * x;
  
  // 无参数需要空括号
  const greet = () => console.log('Hello world!');
  
  // 多行函数体需要大括号和 return
  const multiply = (a, b) => {
    const result = a * b;
    return result;
  };

三、模板字符串

模板字符串使用反引号（`）标识，可以嵌入变量和多行文本。

const name = '吴彦祖';
const age = 25;

// 传统字符串拼接
console.log('My name is ' + name + ' and I am ' + age + ' years old.');

// 模板字符串
console.log(`My name is ${name} and I am ${age} years old.`);

// 多行字符串
const message = `
  Hello ${name},
  Welcome to our website!
  We hope you enjoy your stay.
`;

四、解构赋值

解构赋值允许从数组或对象中提取值并赋给变量。

// 数组解构
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 3

// 对象解构
const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};
const { firstName, lastName } = person;
console.log(firstName, lastName); // John Doe

// 重命名变量
const { firstName: fName, lastName: lName } = person;
console.log(fName, lName); // John Doe

// 默认值
const { age = 25, country = 'USA' } = person;
console.log(age, country); // 30 USA

五、默认参数

函数参数可以设置默认值。

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

greet(); // Hello, Guest!
greet('Alice'); // Hello, Alice!
greet('Bob', 'Hi'); // Hi, Bob!

六、扩展运算符和剩余参数

扩展运算符（...）可以将数组或对象展开，剩余参数可以将多个参数收集到一个数组中。

// 扩展运算符 - 数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// 扩展运算符 - 对象
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// 剩余参数
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

七、Promise 和异步编程

Promise 提供了更好的异步编程解决方案，避免了回调地狱。

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5;
      if (success) {
        resolve('Data fetched successfully!');
      } else {
        reject('Error fetching data!');
      }
    }, 1000);
  });
};

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

八、async/await

async/await 是基于 Promise 的语法糖，使异步代码看起来像同步代码。

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

九、类和模块

ES6 引入了类语法和模块系统。

// 类定义
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

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

// 继承
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}`);
  }
}

const student = new Student('Alice', 20, 12);
student.greet();
student.study();

十、模块化

ES6 模块使用 export 和 import 语法。

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

// app.js
import multiply, { PI, add } from './math.js';

console.log(PI); // 3.14159
console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6