ES6新特性

最新推荐文章于 2025-08-25 21:38:45 发布

Komorebi_9999

最新推荐文章于 2025-08-25 21:38:45 发布

阅读量271

点赞数 9

CC 4.0 BY-SA版权

文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/JLY19970726/article/details/150064488

ES6（ECMAScript 2015）是 JavaScript 语言的一次重大更新，引入了许多新特性，极大地提升了语言的表现力和开发效率。以下是一些核心特性：

箭头函数（Arrow Functions）
简化函数定义，自动绑定上下文（this）：

javascript

// 传统函数
const add = function(a, b) {
  return a + b;
};

// 箭头函数
const add = (a, b) => a + b;

let/const 声明
替代var，提供块级作用域：
- let：声明可重新赋值的变量
- const：声明不可重新赋值的常量（但对象属性可修改）
javascript
```
if (true) {
  let x = 10; // 仅在当前块内有效
  const y = 20; // 不可重新赋值
}
```
模板字符串（Template Literals）
用反引号（`）定义字符串，支持多行和变量插入：

javascript
```
const name = "Alice";
const message = `Hello, ${name}!
This is a multi-line string.`;
```

解构赋值（Destructuring）
快速从数组或对象中提取值：

javascript

// 数组解构
const [a, b] = [1, 2];

// 对象解构
const { name, age } = { name: "Bob", age: 30 };

默认参数（Default Parameters）
为函数参数设置默认值：

javascript
```
function greet(name = "Guest") {
  return `Hello, ${name}`;
}
```

扩展运算符（Spread Operator）
用...展开数组或对象：

javascript

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }

类（Classes）
提供面向对象编程的语法糖：

javascript

class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    return `Hello, ${this.name}`;
  }
}

const person = new Person("Charlie");

模块（Modules）
支持import/export语法，实现代码模块化：

javascript

// module.js
export const pi = 3.14;

// main.js
import { pi } from './module.js';

Promise
处理异步操作，避免回调地狱：

javascript

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Data received"), 1000);
  });
};

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

for...of 循环
遍历可迭代对象（数组、字符串等）：

javascript
```
for (const item of [1, 2, 3]) {
  console.log(item);
}
```
Set/Map 数据结构
- Set：存储唯一值的集合
- Map：键值对集合（键可以是任意类型）
javascript
```
const set = new Set([1, 2, 2, 3]); // {1, 2, 3}
const map = new Map([["name", "Dave"], ["age", 25]]);
```