javascript基础教程：ES6语法入门+30天实战学习计划

是不是总听说 “学前端必须会 ES6”，可打开教程一看，全是 let、箭头函数、Promise 这些陌生词，越看越头大？学了老版 JavaScript，写代码总觉得啰嗦，别人用 ES6 几行搞定的事，你写十几行还容易错；想系统学 ES6，却不知道从哪开始，学了又忘，更不知道怎么用到实际项目里？新手学 ES6，最愁的就是 “不知道学啥” 和 “学了不会用”。今天兔子哥就把 ES6 核心语法拆解开讲，再给你整个 30 天实战计划，每天学一点练一点，保准你 30 天入门 ES6，写代码又快又规范！

基础问题：ES6 到底是啥？不学老版 JavaScript 直接学它行不行？

可能有朋友会问：“ES6 听着就高级，我连 var 都没吃透，能学吗？它和普通 JavaScript 有啥不一样啊？” 哎，这你可问对了！ES6 其实就是 JavaScript 的 “升级版”，2015 年推出的新语法标准，加了好多实用功能，让代码写起来更简洁、更顺手。比如老版用 var 声明变量容易出问题，ES6 的 let 和 const 就解决了这个坑；老版函数写起来长，ES6 的箭头函数一行就能搞定。
不学老版直接学 ES6 也行，但最好知道变量、函数这些基础概念。为啥现在都推荐学 ES6？因为现在前端开发基本都用它啊！框架、库全是 ES6 语法，不学根本看不懂别人的代码。网友 “小前端” 说：“之前用老语法写循环，嵌套三层看着就晕，学了 ES6 的箭头函数和数组方法，代码一下清爽了，同事都夸我进步快！” 所以别犹豫，ES6 真得学，而且没那么难。

---

核心 ES6 语法入门：这 5 个语法点，前端开发天天用

ES6 语法不少，但这 5 个最核心，学会了能解决 80% 的开发问题：

1. let/const：变量声明终于不坑了

作用：代替老版的 var，解决变量作用域问题。
用法：

• let：声明可以改的变量，比如let age = 20; age = 21;（没问题）
• const：声明不能改的变量，比如const name = "小明"; name = "小红";（直接报错）
  避坑点：
• 别再用 var 了！var 声明的变量会 “穿透” 循环和条件，比如 for 循环里用 var，循环外还能拿到最后一个值，用 let 就不会；
• const 声明的对象，里面的属性能改，比如const obj = {a:1}; obj.a = 2;（可以），但不能给 obj 重新赋值成别的对象。

2. 箭头函数：一行搞定函数，this 不迷路

作用：简化函数写法，解决 this 指向混乱的问题。
用法：
老版函数：function add(a, b) { return a + b; }
箭头函数：const add = (a, b) => a + b;（一行搞定，自动 return）
避坑点：

• 箭头函数里的 this，指向定义时的环境，不是调用时的对象，所以别用它写对象的方法，不然 this 会不对；
• 只有一个参数时，括号能省，比如const double = num => num * 2;，超简洁。

3. 模板字符串：拼接字符串不用加加号了

作用：代替老版的字符串拼接，支持换行和变量嵌入。
用法：
老版："我叫" + name + "，今年" + age + "岁";（加号多了容易漏）
ES6：\我叫{age} 岁 ``（用反引号，变量放 ${} 里）
避坑点：

• 用反引号（键盘左上角～键）不是单引号，新手常搞错；
• 支持换行，写多行文本超方便，比如 HTML 模板：

javascript

const html = `
${name}

`;

4. 解构赋值：快速提取对象数组里的值

作用：不用一个个赋值，一行提取多个值。
用法：

• 解构对象：const { name, age } = person;（直接拿到 person 里的 name 和 age）
• 解构数组：const [first, second] = [10, 20];（first=10，second=20）
  避坑点：
• 变量名要和对象的属性名一致，不然拿不到值，比如const { username } = person;如果 person 里没有 username，就会是 undefined；
• 可以设默认值，const { age = 18 } = person;如果 person 里没 age，就用 18。

5. 数组方法：map/filter/reduce，循环不用 for 了

作用：代替老版的 for 循环，处理数组更优雅。
用法：

• map：遍历数组，返回新数组，比如[1,2,3].map(num => num * 2); // 结果 [2,4,6]
• filter：过滤数组，返回符合条件的新数组，比如[1,2,3].filter(num => num > 1); // 结果 [2,3]
• reduce：累加计算，比如[1,2,3].reduce((sum, num) => sum + num, 0); // 结果 6
  避坑点：
• 这些方法都返回新数组，不会改原数组，所以要用变量接收，比如const newArr = arr.map(...);
• 别在这些方法里写修改原数组的代码，容易出 bug。

语法点	老版写法	ES6 写法	优点
变量声明	var a = 1;	let a = 1;	作用域清晰，不污染全局
函数	function f(a){return a*2}	const f = a => a*2	简洁，this 指向明确
字符串拼接	"name:" + name	name:${name}	少写加号，支持换行

---

30 天实战学习计划：每天任务明确，学完就能用

按这个计划学，每天学一个小语法，练一个小案例，30 天稳稳入门：

第一阶段：基础语法（1-10 天）

天数	核心内容	实战任务	当天目标
1-2 天	let/const	改老代码，把 var 换成 let/const	理解变量作用域，避免重复声明错误
3-4 天	箭头函数	把普通函数改成箭头函数	会写单行和多行箭头函数
5-6 天	模板字符串	重构字符串拼接代码	用模板字符串代替所有加号拼接
7-8 天	解构赋值	提取对象和数组的值	一行代码提取 3 个以上变量
9-10 天	阶段小测	用前 4 个语法写个人信息卡片	综合运用基础语法，代码无报错

第二阶段：进阶语法（11-20 天）

天数	核心内容	实战任务	当天目标
11-13 天	数组方法 map/filter	处理商品列表，过滤价格 > 100 的商品	会用 map 转换数据，filter 筛选数据
14-15 天	展开运算符...	合并数组、复制对象	不用 concat 和 assign，用... 合并数据
16-18 天	Promise 基础	写个加载数据的异步函数	理解异步流程，避免回调地狱
19-20 天	阶段项目	做简易待办清单，用 ES6 语法	增删待办事项，用数组方法处理数据

第三阶段：实战巩固（21-30 天）

天数	核心内容	实战任务	当天目标
21-23 天	class 类	用 class 写个用户类	会声明类、定义方法和继承
24-26 天	模块化 import/export	拆分代码到不同文件	实现模块导入导出，代码解耦
27-29 天	综合项目	做天气查询小工具	用 ES6 语法处理 API 数据、渲染页面
30 天	复盘优化	重构项目代码，精简冗余	用 ES6 特性优化代码，提升可读性

兔子哥提示：每天花 1-1.5 小时足够，1 小时学语法，30 分钟练案例。遇到不懂的别死磕，先标记下来，继续往后学，很多问题后面自然就懂了。

---

避坑指南：新手学 ES6 最容易踩的 6 个坑

这些坑我当年学的时候全踩过，现在告诉你，少走弯路：

1. 用 let 声明变量还放 if 外面

比如：if (true) { let a = 1; } console.log(a); 会报错，因为 let 声明的 a 只在 if 里有效，外面拿不到。解决：把 let 声明放外面，或者在同一作用域里使用。

2. 箭头函数里用 this 拿 DOM 元素

比如按钮点击事件用箭头函数：btn.addEventListener('click', () => { this.innerHTML = '点击了'; }) 会发现 this 不对，因为箭头函数的 this 不是按钮。解决：这种情况用普通函数，或者存个变量const _this = this;。

3. 解构赋值时变量名和属性名不一样

比如const { username } = user; 但 user 里的属性叫 name，结果 username 就是 undefined。解决：用别名const { name: username } = user; 这样 username 就等于 user.name 了。

---

自问自答：学 ES6 常见疑问，一次性说清

浏览器不支持 ES6 语法怎么办？

老浏览器比如 IE 确实不支持，但现在开发都用打包工具（比如 Babel）把 ES6 转成 ES5，所以不用怕兼容性问题，先学透 ES6 再说。

30 天计划完不成咋办？某一天掉队了咋补？

计划是参考，不是死命令！比如第 5 天的模板字符串没学会，第 6 天学解构时，刻意用模板字符串写案例，慢慢就补上了。学编程不怕慢，就怕断，每天进步一点比突击学一天强。

除了这些语法，ES6 还有哪些要学？

先把这 5 个吃透！有余力再学 class、模块化、Set/Map 这些，前端开发常用的就这些，不用贪多，先保证常用的用熟练。

---

最后说点掏心窝子的

学 ES6 最大的误区就是 “只看教程不动手”，看别人写箭头函数觉得简单，自己写就忘加箭头；看模板字符串清爽，实际写还是习惯性加加号。真的，一定要动手敲，哪怕对着例子抄，也要边抄边想 “这行代码为啥这么写”。
我刚开始学数组方法时，map 和 filter 总搞混，练了二十多个例子才分清；用解构赋值时，总忘写大括号，报错十几次才记住。现在回头看，那些当时觉得难的语法，用熟了真的离不开，写代码效率至少提了一半。
按这个 30 天计划走，每天坚持练，你会发现 ES6 真的让 JavaScript 变简单了，代码写得顺，自己看着都舒服。现在就打开编辑器，从今天的 let/const 开始，敲起来，30 天后你会感谢现在开始的自己，真的！

标签： 天天用 可打开