语法

以下是 JavaScript 中常见的语法分类和说明，涵盖了基础语法规则、声明方式、控制结构、函数定义等多个方面：

数据类型

JavaScript 中的数据类型分为 基本数据类型 和 引用数据类型 两大类。

一、变量声明

var
- 早期的变量声明方式，作用域为函数级或全局级。
- 示例：var x = 10;
let
- 块级作用域变量声明方式（ES6 引入）。
- 示例：let y = 20;
const
- 声明常量，值不可重新赋值，必须初始化。
- 示例：const z = 30;

二、数据类型

一、基本数据类型（Primitive Types）

基本数据类型是按值访问的，也就是说我们可以直接操作保存在变量中的实际值。包括以下几种：

String（字符串）
- 表示文本数据。
- 示例：let str = "Hello, World!";
Number（数字）
- 表示整数或浮点数。
- 示例：let num = 42; let pi = 3.14;
BigInt（大整数）
- 用于表示比 Number 更大的整数。
- 示例：let bigInt = 9007199254740991n;
Boolean（布尔值）
- 表示逻辑值 true 或 false。
- 示例：let isTrue = true;
Undefined（未定义）
- 表示变量已声明但未赋值。
- 示例：let x; console.log(x); // undefined
Null（空值）
- 表示一个空对象引用。
- 示例：let obj = null;
Symbol（符号）
- 表示唯一的、不可变的数据类型，通常用作对象属性的键。
- 示例：let sym = Symbol('description');

二、引用数据类型（Reference Types）

引用数据类型是按引用访问的，存储的是指向数据结构的指针。主要包括：

Object（对象）
- 包含键值对的集合。
- 示例：let person = { name: "Alice", age: 25 };//type: object
Array（数组）
- 一种特殊的对象，用于存储有序的数据列表。
- 示例：let arr = [1, 2, 3]; //type: object
Function（函数）
- 一种可执行代码块，也是对象的一种。
- 示例：let greet = function() { console.log("Hello!"); }; //typeof greet 结果是 function,greet instanceof Object 结果是 true
Date（日期）
- 用于处理日期和时间。
- 示例：let date = new Date();// type:object
RegExp（正则表达式）
- 用于匹配字符串模式。
- 示例：let regex = /abc/;// type:object

三、特殊值

NaN（Not-a-Number）
- 表示非数字的值。
- 示例：let nan = NaN;// type:number
Infinity 和 -Infinity
- 表示正无穷大和负无穷大。
- 示例：let inf = Infinity; let ninf = -Infinity;// type:number

三、表达式与运算符

算术运算符
- 加法 (+)、减法 (-)、乘法 (*)、除法 (/)、取模 (%) 等。
- 示例：let result = 5 + 3;
比较运算符
- 等于 (==)、全等于 (===)、不等于 (!=)、大于 (>)、小于 (<) 等。
- 示例：if (x === y) { ... }
逻辑运算符
- 逻辑与 (&&)、逻辑或 (||)、逻辑非 (!)。
- 示例：if (x > 0 && y < 10) { ... }
赋值运算符
- 简单赋值 (=)、复合赋值（如 +=、-= 等）。
- 示例：x += 5; // 等价于 x = x + 5;

四、控制结构

条件语句

if...else
- 示例：if (x > 0) { ... } else { ... }

switch

示例：

javascript

switch (day) {
  case 1: console.log('Monday'); break;
  case 2: console.log('Tuesday'); break;
  default: console.log('Unknown');
}

循环语句
- for
  - 示例：for (let i = 0; i < 5; i++) { ... }
- while
  - 示例：while (x > 0) { ... }
- do...while
  - 示例：
    javascript
```
do {
  ...
} while (x > 0);
```

五、函数定义

普通函数

示例：

javascript

function greet(name) {
  return "Hello, " + name;
}

箭头函数（ES6）

示例：

javascript

const greet = (name) => `Hello, ${name}`;

匿名函数
- 示例：setTimeout(function() { console.log('Timeout!'); }, 1000);

生成器函数

示例：

javascript

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

六、对象与数组

对象字面量

示例：

javascript

let person = {
  name: "Alice",
  age: 25,
  greet: function() { console.log("Hello!"); }
};

数组字面量
- 示例：let arr = [1, 2, 3];
解构赋值
- 对象解构：
  javascript
```
let { name, age } = person;
```
- 数组解构：
  javascript
```
let [a, b] = arr;
```

七、类与继承（ES6）

类定义

示例：

javascript

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

继承

示例：

javascript

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

八、模块化（ES6）

导出模块

示例：

javascript

export const PI = 3.14;
export function add(x, y) { return x + y; }

导入模块
- 示例：
  javascript
```
import { PI, add } from './math.js';
```

九、异步编程

回调函数
- 示例：setTimeout(() => console.log('Callback!'), 1000);

Promise

示例：

javascript

let promise = new Promise((resolve, reject) => {
  if (true) resolve('Success!');
  else reject('Error!');
});
promise.then(console.log).catch(console.error);

Async/Await

示例：

javascript

async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  return data;
}

ESModule 的特性

ES Module（ECMAScript Module）是 JavaScript 的官方模块系统，自 ES6（ES2015）引入以来，已经成为现代前端开发的标准模块规范。它提供了一套静态的、基于文件的模块机制，具有良好的可维护性、可组合性和优化潜力。

📌 一、基本语法特性

✅ 1. `export`：导出模块内容

用于从模块中导出变量、函数、类或值，供其他模块导入使用。

示例：

// math.js
export const PI = 3.14;

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

export default class Calculator { /* ... */ }

多种导出方式：

命名导出（Named Export）
js
```
export { PI, add };
```

默认导出（Default Export）

export default class MyComponent { /* ... */ }

✅ 2. `import`：导入模块内容

用于从其他模块导入已导出的内容。

示例：

// main.js
import { PI, add } from './math.js';
import Calculator from './Calculator.js';

console.log(PI); // 3.14
console.log(add(2, 3)); // 5

多种导入方式：

按名称导入
js
```
import { PI, add } from './math.js';
```

全部导入并重命名

import * as MathUtils from './math.js';
console.log(MathUtils.PI);

仅执行模块（不导入具体变量）

import './init.js'; // 执行初始化逻辑

默认导入

import Calculator from './Calculator.js';

🧩 二、高级语法特性

✅ 3. 动态导入（Dynamic Import）

ES Module 支持异步加载模块，常用于代码分割和懒加载。

button.addEventListener('click', async () => {
  const module = await import('./lazyModule.js');
  module.doSomething();
});

⚠️ 注意：动态导入返回一个 Promise。

✅ 4. 模块路径支持类型

在现代构建工具（如 Vite、Rollup）或原生浏览器环境中，可以使用以下路径格式：

类型	示例
相对路径	`import utils from './utils.js'`
绝对路径	`import config from '/config.js'`（浏览器环境）
包名	`import _ from 'lodash'`（需打包工具支持）

✅ 5. 导入 JSON 文件

ES Module 原生支持导入 .json 文件。

import data from './data.json' assert { type: 'json' };

console.log(data.name);

⚠️ 注意：部分环境需要添加 assert { type: 'json' } 断言。

✅ 6. 模块作用域与静态分析

ES Module 是静态的，意味着：

所有 import 和 export 必须在顶层作用域声明。
不允许运行时动态修改模块结构。
可以被构建工具进行 Tree-shaking、预加载等优化。

✅ 7. 默认导出与命名导出混合使用

// utils.js
export const version = '1.0.0';

export default function log(msg) {
  console.log(msg);
}

// main.js
import log, { version } from './utils.js';
log('Version: ' + version);

✅ 8. 模块的唯一性与缓存机制

模块在整个应用中只会被加载和执行一次，无论被导入多少次。

// counter.js
let count = 0;
export function increment() {
  count++;
  console.log(count);
}

// a.js
import { increment } from './counter.js';
increment(); // 输出 1

// b.js
import { increment } from './counter.js';
increment(); // 输出 2

🧱 三、模块与其他标准的对比

特性	CommonJS	AMD	UMD	ES Module
标准来源	Node.js	浏览器（早期）	通用兼容方案	ECMAScript 官方标准
加载方式	同步	异步	可同步/异步	静态 + 异步支持（动态导入）
构建工具支持	Webpack、Babel 等	RequireJS	多数构建工具	Rollup、Vite、Webpack 等
浏览器原生支持	❌	❌	❌	✅（Chrome、Firefox、Safari 等）
Tree-shaking 支持	❌	❌	❌	✅
模块缓存	✅	✅	✅	✅

🧩 四、ES Module 在不同环境中的使用

环境	使用说明
浏览器	`<script type="module">` 或通过构建工具
Node.js	文件扩展名为 `.mjs`，或设置 `"type": "module"`
构建工具	Vite、Rollup、Webpack、Snowpack 等全面支持
TypeScript	支持 `ESNext` 或 `ES2020` 模块目标

✅ 总结表格：ES Module 主要特性一览

特性	说明
`export`	支持命名导出、默认导出
`import`	支持按名导入、默认导入、全部导入
静态解析	可进行 Tree-shaking、提前优化
模块缓存	每个模块只执行一次
动态导入	`import()` 返回 Promise，支持懒加载
JSON 支持	可导入 JSON 文件（需断言）
跨平台兼容	支持浏览器、Node.js、构建工具
无全局污染	每个模块有自己的作用域

📌 小贴士

推荐使用默认导出 + 命名导出结合的方式提高灵活性。
使用 import() 进行按需加载，提升性能。
在大型项目中优先使用 ESM 替代 CommonJS，便于长期维护和优化。
若需兼容旧环境，请使用打包工具（如 Vite、Webpack）转换为适配格式。

如果你正在使用 Vitepress 或 Markdown 编写文档，也可以直接嵌入 .js 模块并通过动态导入演示模块化行为。

ES 简洁语法

ES6（ECMAScript 2015）及后续版本引入了许多简洁语法（Syntactic Sugar），极大地提升了 JavaScript 的可读性和开发效率。这些特性不仅让代码更简洁明了，还增强了表达力和功能性。

✅ 一、变量声明与解构赋值

1. `const` / `let`

替代 var，提供块级作用域和不可变绑定。

const PI = 3.14;
let count = 0;

2. 解构赋值（Destructuring Assignment）

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

对象解构：

const { name, age } = { name: 'Alice', age: 25 };

数组解构：

const [first, second] = ['apple', 'banana'];

默认值：

const { color = 'red' } = {};

✅ 二、函数增强

1. 箭头函数（Arrow Function）

简化函数定义，自动绑定 this。

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

2. 参数默认值（Default Parameters）

为函数参数指定默认值。

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

3. 展开运算符（Spread Operator）

展开数组或对象。

const arr = [1, 2, 3];
const newArr = [...arr, 4]; // [1, 2, 3, 4]

const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3 }; // { a: 1, b: 2, c: 3 }

4. 剩余参数（Rest Parameters）

将多个参数收集为一个数组。

function sum(...nums) {
  return nums.reduce((acc, num) => acc + num, 0);
}
sum(1, 2, 3); // 6

✅ 三、对象字面量增强

1. 属性简写（Shorthand Property Names）

当属性名与变量名相同时，可以省略。

const name = 'Alice';
const user = { name }; // 等价于 { name: name }

2. 方法简写（Method Shorthand）

省略 function 关键字。

const person = {
  sayHi() {
    console.log('Hi!');
  }
};

3. 计算属性名（Computed Property Names）

使用变量作为属性名。

const key = 'age';
const obj = {
  [key]: 25
}; // { age: 25 }

✅ 四、模板字符串（Template Literals）

使用反引号（`）包裹字符串，支持换行和变量插值。

const name = 'Alice';
console.log(`Hello, ${name}!
Welcome to ES6.`);

✅ 五、类语法（Class Syntax）

提供更清晰的面向对象编程方式。

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

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

继承：

class Student extends Person {
  study() {
    console.log(`${this.name} is studying`);
  }
}

✅ 六、模块化语法（Module Syntax）

导出（export）

export const PI = 3.14;
export default class App {}

导入（import）

import App from './App.js';
import { PI } from './constants.js';

✅ 七、Promise 与 async/await

Promise 链式调用

fetch(url)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

async/await（同步风格异步代码）

async function getData() {
  try {
    const res = await fetch(url);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error(err);
  }
}

✅ 八、其他简洁语法特性

特性	示例	说明
Map/Set 构造函数初始化	`new Map([['a', 1], ['b', 2]])`	可直接传数组初始化
对象方法：Object.assign / Object.keys / Object.values	`js Object.values(obj)`	快速获取对象属性值
Array.from / Array.of	`js Array.from('abc') // ['a','b','c']`	转换类数组
includes 方法	`'hello'.includes('e') // true`	替代 indexOf 判断是否存在
指数运算符	`2 ** 3 // 8`	替代 Math.pow

🧩 总结表格：ES6+ 简洁语法一览

类别	特性	示例
变量与结构	`let`, `const`, 解构赋值	`const { name } = user;`
函数	箭头函数、默认参数、剩余参数	`(a, b = 1, ...rest) => {}`
对象	属性简写、方法简写、计算属性名	`{ name }, method() {}, [key]: value`
字符串	模板字符串	`Hello, ${name}`
类	class、extends、super	`class Animal { constructor() {} }`
模块	export / import	`export default`, `import * as`
异步	Promise、async/await	`async function fetchData()`
数组工具	`Array.from`, `Array.of`, `includes`	`[...arr]`, `'a'.includes('a')`

📌 小贴士

使用简洁语法时注意保持代码可读性，避免过度缩写。
推荐配合 TypeScript 和现代构建工具（如 Vite、Rollup）使用。
在大型项目中优先使用模块化、箭头函数、解构等特性提升代码质量。

如果你有具体场景（如“如何用解构优化 React props”、“如何优雅处理嵌套对象”），我可以进一步帮你写出最佳实践示例。

语法 ​

数据类型 ​

一、变量声明 ​

二、数据类型 ​

一、基本数据类型（Primitive Types） ​

二、引用数据类型（Reference Types） ​

三、特殊值 ​

三、表达式与运算符 ​

四、控制结构 ​

五、函数定义 ​

六、对象与数组 ​

七、类与继承（ES6） ​

八、模块化（ES6） ​

九、异步编程 ​

ESModule 的特性 ​

📌 一、基本语法特性 ​

✅ 1. export：导出模块内容 ​

示例： ​

多种导出方式： ​

✅ 2. import：导入模块内容 ​

示例： ​

多种导入方式： ​

🧩 二、高级语法特性 ​

✅ 3. 动态导入（Dynamic Import） ​

✅ 4. 模块路径支持类型 ​

✅ 5. 导入 JSON 文件 ​

✅ 6. 模块作用域与静态分析 ​

✅ 7. 默认导出与命名导出混合使用 ​

✅ 8. 模块的唯一性与缓存机制 ​

🧱 三、模块与其他标准的对比 ​

🧩 四、ES Module 在不同环境中的使用 ​

✅ 总结表格：ES Module 主要特性一览 ​

📌 小贴士 ​

ES 简洁语法 ​

✅ 一、变量声明与解构赋值 ​

1. const / let ​

2. 解构赋值（Destructuring Assignment） ​

对象解构： ​

数组解构： ​

默认值： ​

✅ 二、函数增强 ​

1. 箭头函数（Arrow Function） ​

2. 参数默认值（Default Parameters） ​

3. 展开运算符（Spread Operator） ​

4. 剩余参数（Rest Parameters） ​

✅ 三、对象字面量增强 ​

1. 属性简写（Shorthand Property Names） ​

2. 方法简写（Method Shorthand） ​

3. 计算属性名（Computed Property Names） ​

✅ 四、模板字符串（Template Literals） ​

✅ 五、类语法（Class Syntax） ​

✅ 六、模块化语法（Module Syntax） ​

导出（export） ​

导入（import） ​

✅ 七、Promise 与 async/await ​

Promise 链式调用 ​

async/await（同步风格异步代码） ​

✅ 八、其他简洁语法特性 ​

🧩 总结表格：ES6+ 简洁语法一览 ​

📌 小贴士 ​

语法

数据类型

一、变量声明

二、数据类型

一、基本数据类型（Primitive Types）

二、引用数据类型（Reference Types）

三、特殊值

三、表达式与运算符

四、控制结构

五、函数定义

六、对象与数组

七、类与继承（ES6）

八、模块化（ES6）

九、异步编程

ESModule 的特性

📌 一、基本语法特性

✅ 1. `export`：导出模块内容

示例：

多种导出方式：

✅ 2. `import`：导入模块内容

示例：

多种导入方式：

🧩 二、高级语法特性

✅ 3. 动态导入（Dynamic Import）

✅ 4. 模块路径支持类型

✅ 5. 导入 JSON 文件

✅ 6. 模块作用域与静态分析

✅ 7. 默认导出与命名导出混合使用

✅ 8. 模块的唯一性与缓存机制

🧱 三、模块与其他标准的对比

🧩 四、ES Module 在不同环境中的使用

✅ 总结表格：ES Module 主要特性一览

📌 小贴士

ES 简洁语法

✅ 一、变量声明与解构赋值

1. `const` / `let`

2. 解构赋值（Destructuring Assignment）

对象解构：

数组解构：

默认值：

✅ 二、函数增强

1. 箭头函数（Arrow Function）

2. 参数默认值（Default Parameters）

3. 展开运算符（Spread Operator）

4. 剩余参数（Rest Parameters）

✅ 三、对象字面量增强

1. 属性简写（Shorthand Property Names）

2. 方法简写（Method Shorthand）

3. 计算属性名（Computed Property Names）

✅ 四、模板字符串（Template Literals）

✅ 五、类语法（Class Syntax）

✅ 六、模块化语法（Module Syntax）

导出（export）

导入（import）

✅ 七、Promise 与 async/await

Promise 链式调用

async/await（同步风格异步代码）

✅ 八、其他简洁语法特性

🧩 总结表格：ES6+ 简洁语法一览

📌 小贴士