JavaScript ES6+ 语法速通

零基础 JavaScript ES6+ 语法入门与实用指南

本文档专为零基础用户设计，循序渐进讲解 ES6 及以上版本的 JavaScript 语法。每个知识点配有通俗解释和实用示例，帮助你从零开始掌握现代 JavaScript 编程。

---

一、JavaScript 简介

JavaScript 是网页开发的核心语言，能让网页实现交互、动画、数据处理等功能。现代 JavaScript（ES6+）语法更简洁、功能更强大，是前端开发的必备技能。

---

二、变量声明与数据类型

1. 变量声明

• let：声明变量，可修改。
• const：声明常量，不可重新赋值。

let score = 90;
score = 95; // 可以修改

const pi = 3.14;
// pi = 3.1415; // 报错，const 不能重新赋值

建议：优先用 const，只有需要修改时用 let。

2. 常见数据类型

• 数字（Number）：let age = 18;
• 字符串（String）：let name = '小明';
• 布尔值（Boolean）：let isOk = true;
• 数组（Array）：let arr = [1, 2, 3];
• 对象（Object）：let person = { name: '小明', age: 18 }
• 空值（null）、未定义（undefined）

---

三、字符串与模板字符串

1. 普通字符串拼接

let name = '小明';
let msg = '你好，' + name + '!';

2. 模板字符串（推荐）

let name = '小明';
let msg = `你好，${name}！`;
console.log(msg); // 你好，小明！

模板字符串用反引号 ` 包裹，支持变量插值和多行文本。

---

四、数组与对象的解构赋值

1. 数组解构

let arr = [10, 20, 30];
let [a, b, c] = arr;
console.log(a, b, c); // 10 20 30

2. 对象解构

let person = { name: '小明', age: 18 };
let { name, age } = person;
console.log(name, age); // 小明 18

解构赋值让提取数据更简洁。

---

五、箭头函数

1. 普通函数

function add(x, y) {
  return x + y;
}

2. 箭头函数（推荐）

const add = (x, y) => x + y;
console.log(add(2, 3)); // 5

箭头函数语法更简洁，常用于回调和数组操作。

---

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

1. 数组展开

let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

2. 对象展开

let obj1 = { a: 1 };
let obj2 = { ...obj1, b: 2 };
console.log(obj2); // { a: 1, b: 2 }

3. 剩余参数

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 6

... 既可用于展开，也可用于收集剩余参数。

---

七、默认参数

function greet(name = '游客') {
  console.log(`你好，${name}`);
}
greet(); // 你好，游客
greet('小明'); // 你好，小明

---

八、常用循环与遍历

1. for…of 遍历数组

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

2. for…in 遍历对象属性

let obj = { a: 1, b: 2 };
for (let key in obj) {
  console.log(key, obj[key]);
}

---

九、Promise 与异步编程

1. Promise 基础

let p = new Promise((resolve, reject) => {
  setTimeout(() => resolve('完成'), 1000);
});
p.then(data => console.log(data)); // 1秒后输出 完成

2. async/await（ES8）

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
  await delay(1000);
  console.log('已等待1秒');
}
run();

async/await 让异步代码像同步一样易读。

---

十、常用新特性速查

• includes：判断数组是否包含元素

  [1, 2, 3].includes(2); // true
  

• 可选链 ?.：安全访问多层属性

  let user = { info: { name: '小明' } };
  console.log(user.info?.name); // 小明
  console.log(user.address?.city); // undefined
  

• 逻辑赋值运算符 ??= &&= ||=

  let a;
  a ??= 10; // a为undefined时赋值10
  let b = 1;
  b &&= 2; // b为真时赋值2
  

• at()：数组支持负索引

  let arr = [10, 20, 30];
  console.log(arr.at(-1)); // 30
  

---

⭐ 学习建议

• 多练习，多写代码，遇到不懂的语法多查文档。
• 推荐配合浏览器控制台、Node.js 环境动手实验。
• 掌握ES6+语法是现代前端开发的基础。