爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析

news2025/2/25 3:23:01

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析
- 基本语法
- - 1. 变量声明
  - 2. 数据类型
  - 3. 函数
  - 4. 条件语句
  - 5. 循环
  - 6. 数组
  - 7. 对象
  - 8. 类（ES6+）
  - 9. 模板字符串
  - 10. 解构赋值
  - 11. 异步编程（Promise和async/await）
- 高级教程
- - 12. 模块导入（import/export）
  - 13. 集合（Set和Map）
  - 14. 异步迭代器（async iterable）
  - 15. 其他高级特性
- 🎉 往期精彩回顾

爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析

ECMAScript（通常简称为 ES）是JavaScript的标准化规范，由Ecma International的TC39（技术委员会39）组织维护。ECMAScript定义了脚本语言的语法和行为，而JavaScript是ECMAScript规范的一种实现。以下是ECMAScript的一些核心语法特性：

基本语法

1. 变量声明

let x = 10; // 块级作用域的变量声明
const y = 20; // 常量声明，不可重新赋值

2. 数据类型

ECMAScript支持多种数据类型，包括：

原始数据类型：字符串（String）、数字（Number）、布尔值（Boolean）、空值（null）、未定义（undefined）、符号（Symbol）
复合数据类型：对象（Object）、数组（Array）、函数（Function）

3. 函数

function greet(name) {
  return `Hello, ${name}!`;
}

// 箭头函数
const greet = (name) => `Hello, ${name}!`;

4. 条件语句

if (condition) {
  // 代码块
} else {
  // 另一个代码块
}

// 条件（三元）运算符
const result = condition ? expression1 : expression2;

5. 循环

for (let i = 0; i < 10; i++) {
  // 循环体
}

while (condition) {
  // 循环体
}

do {
  // 循环体
} while (condition);

6. 数组

const fruits = ['Apple', 'Banana', 'Cherry'];

// 访问数组元素
console.log(fruits[0]); // Apple

// 修改数组元素
fruits[1] = 'Blueberry';

7. 对象

const person = {
  name: 'Alice',
  age: 25,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

// 访问对象属性
console.log(person.name); // Alice

// 调用对象方法
person.greet();

8. 类（ES6+）

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

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

const alice = new Person('Alice', 25);
alice.greet();

9. 模板字符串

const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, Alice!

10. 解构赋值

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

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

11. 异步编程（Promise和async/await）

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
};

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

// 使用async/await
async function fetchDataAsync() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchDataAsync();

这些是ECMAScript语法的一些基本元素。随着ECMAScript规范的不断发展，新的语法和特性不断被添加到JavaScript中，例如模块导入（import/export）、集合（Set和Map）、异步迭代器（async iterable）等。

高级教程

12. 模块导入（import/export）

在ECMAScript 6之前，JavaScript缺乏官方的模块系统。随着ES6的引入，import和export关键字使得模块化编程成为可能。模块化允许开发者将代码分割成独立的、可重用的单元，每个模块可以独立维护和更新。

// 导出单个值
export const myConstant = 'Hello, World!';

// 导出多个值
const myFunction = () => {
  // ...
};

export { myFunction };

// 导出默认值
export default myFunction;

// 导入模块
import { myConstant, myFunction } from './module.js';
import myDefaultFunction from './defaultModule.js';

13. 集合（Set和Map）

Set和Map是ES6中引入的两种新的数据结构，它们提供了不同于数组和对象的数据存储方式。

Set是一个集合，它只存储唯一的值（不允许重复）。
Map是一个键值对的集合，其中的键可以是任何类型，包括函数、对象或任何原始类型。

// 使用Set
const mySet = new Set();
mySet.add(1);
mySet.add(2);
console.log(mySet.size); // 2

// 使用Map
const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
console.log(myMap.get('key1')); // 'value1'

14. 异步迭代器（async iterable）

ECMAScript 8引入了异步迭代器的概念，它允许开发者在for...of循环中处理异步操作，如异步请求数据。

async function* asyncGenerator() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
  yield await Promise.resolve(3);
}

for await (const value of asyncGenerator()) {
  console.log(value); // 依次打印 1, 2, 3
}