javascript基础教程ES6语法入门案例

是不是总听说 “学前端必须会 ES6”，可打开教程全是 let、箭头函数这些新词，越看越懵？用老语法写代码总被说 “不规范”，想改 ES6 又不知道从哪下手？学了语法却没案例练，过两天就忘得差不多？新手学 ES6，最愁的就是 “看不懂” 和 “用不上”。今天兔子哥就用大白话讲透 ES6 核心语法，附上手案例，每个语法都对比老写法，让你一看就懂、一学就会，再也不用对着复杂概念发呆！

基础问题：ES6 到底是啥？不学老语法直接学它行吗？

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

---

核心语法案例：5 个必学 ES6 语法，老写法 vs 新写法对比

这些语法是 ES6 的 “顶梁柱”，学会了能解决 80% 的开发问题，每个都附案例：

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

老写法：用 var 声明变量，容易出现作用域问题，比如循环里的变量跑到外面：
javascript

for (var i = 0; i < 3; i++) {setTimeout(() => console.log(i), 100); // 打印3个3，而不是0、1、2}

ES6 写法：用 let/const，作用域清晰，let 声明可变变量，const 声明不可变变量：
javascript

// let声明可变变量let age = 20;age = 21; // 可以改// const声明不可变变量const name = "小明";// name = "小红"; // 会报错，不能改// 循环里用let，每个i都是独立的for (let i = 0; i < 3; i++) {setTimeout(() => console.log(i), 100); // 正确打印0、1、2}

避坑点：const 声明的对象，里面的属性能改，比如const obj = {a:1}; obj.a = 2;（可以），但不能给 obj 重新赋值成新对象。

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

老写法：函数声明又长又容易出现 this 指向问题：
javascript

// 普通函数function add(a, b) {return a + b;}// 对象方法里的this容易乱const person = {name: "小明",sayHi: function() {setTimeout(function() {console.log("你好，我是" + this.name); // this指向不对，打印undefined}, 100);}};

ES6 写法：箭头函数更简洁，this 指向定义时的环境：
javascript

// 箭头函数简化写法const add = (a, b) => a + b; // 一行搞定，自动return// 解决this问题const person = {name: "小明",sayHi: function() {setTimeout(() => {console.log(`你好，我是${this.name}`); // this指向person，正确打印“小明”}, 100);}};

避坑点：箭头函数别用来写对象方法，比如const obj = { fn: () => {} }，里面的 this 会不对，用普通函数更稳妥。

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

老写法：用加号拼接字符串，容易漏写或换行麻烦：
javascript

const name = "小明";const age = 20;const info = "我叫" + name + "，今年" + age + "岁，\n喜欢编程。"; // 加号多、换行加\n

ES6 写法：用反引号（`）和 ${}，支持换行和变量嵌入：
javascript

const name = "小明";const age = 20;const info = `我叫${name}，今年${age}岁，喜欢编程。`; // 不用加号，直接换行，变量放${}里

避坑点：用反引号（键盘左上角～键）不是单引号，新手常搞错；变量里可以写简单表达式，比如${age + 1}。

语法点	老写法问题	ES6 优势	一句话总结
let/const	var 作用域混乱	块级作用域，变量不污染	声明变量用 let/const，var 丢一边
箭头函数	代码长，this 乱	简洁，this 指向固定	简单函数用箭头，一行写完不费劲
模板字符串	加号多，换行难	变量嵌入，支持换行	字符串用反引号，${} 里放变量

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

老写法：从对象或数组里拿值，要一个个赋值，代码啰嗦：
javascript

const person = { name: "小明", age: 20 };const name = person.name;const age = person.age; // 要写两行const arr = [10, 20];const a = arr[0];const b = arr[1]; // 数组取值也麻烦

ES6 写法：一行提取多个值，简洁高效：
javascript

// 解构对象const person = { name: "小明", age: 20 };const { name, age } = person; // 一行拿到name和age// 解构数组const arr = [10, 20];const [a, b] = arr; // 一行拿到a=10，b=20// 给默认值，防止没有属性const { gender = "男" } = person; // person没有gender，用默认值“男”

避坑点：解构对象时，变量名要和属性名一致，不然拿不到值，比如const { username } = person如果 person 没 username，就是 undefined。

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

老写法：遍历数组用 for 循环，筛选、转换数据代码长：
javascript

// 老写法：把数组里的数字翻倍const numbers = [1, 2, 3];const newNumbers = [];for (let i = 0; i < numbers.length; i++) {newNumbers.push(numbers[i] * 2);}// 老写法：筛选大于2的数字const bigNumbers = [];for (let i = 0; i < numbers.length; i++) {if (numbers[i] > 2) {bigNumbers.push(numbers[i]);}}

ES6 写法：用 map/filter 一行搞定，代码更优雅：
javascript

const numbers = [1, 2, 3];// map：转换数组，每个元素翻倍const newNumbers = numbers.map(num => num * 2); // 结果[2,4,6]// filter：筛选数组，保留大于2的元素const bigNumbers = numbers.filter(num => num > 2); // 结果[3]// forEach：遍历数组，替代for循环numbers.forEach(num => console.log(num)); // 打印1、2、3

避坑点：这些方法返回新数组，不会改原数组，所以要用变量接收，比如const newArr = arr.map(...)；别在这些方法里修改原数组，容易出 bug。

---

实战案例：用 ES6 语法做个 “用户信息卡片”

把上面的语法串起来，做个简单又实用的案例，步骤超详细：

案例需求：

定义用户数据，用 ES6 语法提取信息、拼接字符串、渲染到页面，实现点击按钮显示用户卡片功能。

步骤拆解：

1. HTML 结构：一个按钮和显示卡片的容器：

html

<button id="showBtn">显示用户信息button><div id="cardContainer">div>

1. JavaScript 逻辑（全 ES6 语法）：

javascript

// 等DOM加载完再操作（避免获取不到元素）document.addEventListener("DOMContentLoaded", () => {// 1. 用const声明用户数据（不可变）const user = {name: "小红",age: 22,hobbies: ["看书", "跑步", "编程"],address: { city: "北京", district: "海淀" }};// 2. 解构赋值提取信息const { name, age, hobbies, address: { city } } = user;// 3. 用map处理爱好数组，转成列表项const hobbyItems = hobbies.map(hobby => `
${hobby}`).join("");// 4. 模板字符串拼接卡片HTMLconst cardHtml = `
用户信息卡片
姓名：${name}
年龄：${age}
城市：${city}
爱好：
${hobbyItems}

`;// 5. 箭头函数绑定点击事件document.getElementById("showBtn").addEventListener("click", () => {document.getElementById("cardContainer").innerHTML = cardHtml;});});

1. 运行效果：点击按钮，页面会显示带样式的用户卡片，包含姓名、年龄、城市和爱好列表，全用 ES6 语法实现，代码比老写法简洁一半！

避坑点：

• map 返回的是数组，拼接 HTML 时要用join("")转成字符串，不然会有逗号；
• 解构嵌套对象（比如 address 里的 city）要用address: { city }，别直接写city；
• 模板字符串里的变量可以是表达式，比如${age + 1}会显示 23。

---

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

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

老浏览器比如 IE 确实不支持，但现在开发都用打包工具（比如 Babel）把 ES6 转成 ES5，所以不用怕兼容性问题，先学透 ES6 再说。实际开发中，框架脚手架会自动处理兼容，你只管写 ES6 就行。

学 ES6 要背语法吗？记不住怎么办？

不用死记！多用就熟了。刚开始可以把常用语法抄在小本子上，写代码时翻一翻，比如 “箭头函数用 =>”“模板字符串用和${}”，写十次八次自然就记住了。重点是理解 “为什么这么写”，比如 let 解决 var 的作用域问题，这样记更牢。

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

先把这 5 个吃透！有余力再学 class 类、模块化 import/export、Promise 这些。前端开发常用的就是今天讲的这些，不用贪多，先保证常用的用熟练，再逐步扩展。

---

最后说点实在话

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

标签： 一学就会 setTimeout