JavaScript学习教程：ES6核心语法全解析，新手也能轻松入门

学 JavaScript 的新手朋友，是不是总遇到这种情况？写代码时变量声明全用 var，结果各种作用域问题搞不清；拼接字符串用一堆加号，看着就头大；函数参数多了，还得一个个判断是否传值？其实啊，这些麻烦 ES6 早就帮咱们解决了！今天兔子哥就把 ES6 最核心的语法掰开揉碎了讲，全是新手必学的干货，看完你会发现写 JS 代码能这么清爽！

一、先明白：ES6 到底是啥？不学行不行？

可能有朋友会问，我学基础 JS 还没吃透，为啥非要学 ES6？简单说，ES6 是 2015 年推出的 JavaScript 新版本，加了一堆好用的新特性，能让代码更短、更清楚、更好维护。就像手机从功能机升级到智能机，虽然老方法还能用，但新功能用惯了就回不去了。
现在企业里写 JS 基本都用 ES6 语法，招聘要求里也常写 “熟悉 ES6”。有个粉丝跟我说，他面试时因为不会箭头函数，写的代码被面试官说 “太老了”，错失了机会。所以啊，新手别想着回避，早点学 ES6，既能提高效率，又能跟上行业节奏。

二、变量声明：let 和 const 代替 var，这些坑别踩

以前写 JS 都用 var 声明变量，但 var 问题太多了，比如可以重复声明、作用域混乱。ES6 的 let 和 const 彻底解决了这些问题，新手记好这两条：

1. let：声明可变的变量

javascript

// ES5用varvar age = 20;var age = 21; // 重复声明不报错，坑！// ES6用letlet age = 20;let age = 21; // 直接报错，避免重复声明

let 声明的变量有块级作用域，比如在 if 或 for 循环里声明的变量，外面访问不到，不会污染全局变量，这比 var 安全多了。

2. const：声明不变的变量（常量）

javascript

const name = "小明";name = "小红"; // 报错！const声明的变量不能改

const 不是说变量里的内容绝对不变，而是变量指向的地址不变。比如声明数组或对象：
javascript

const arr = [1, 2, 3];arr.push(4); // 可以改内容，不报错arr = [5, 6]; // 改地址，报错

兔子哥建议：优先用 const，除非确定变量要改再用 let。这样代码可读性更高，别人一看就知道哪些变量不会变。

三、箭头函数：一行搞定函数，写法太爽了

ES6 的箭头函数能把函数写得超简洁，尤其适合简短的函数，新手一定要学会。

1. 基本用法：去掉 function，加箭头

javascript

// ES5普通函数function add(a, b) {return a + b;}// ES6箭头函数const add = (a, b) => a + b; // 一行搞定！

是不是短了很多？如果函数体有多行，用大括号包起来：
javascript

const sayHello = (name) => {console.log("你好");return "你好，" + name;};

2. 箭头函数的 this 更靠谱

普通函数的 this 总是变来变去，很容易搞混，箭头函数的 this 会继承外部的 this，不用再写 that = this 这种麻烦代码了。这在 DOM 事件和对象方法里特别有用，新手暂时记不住原理也没关系，先学会用就行。

四、解构赋值：提取数据超方便，数组对象都能用

从数组或对象里取数据，以前得一个个赋值，ES6 的解构赋值一句话就能搞定，新手写表单处理、接口数据解析时经常用到。

1. 数组解构

javascript

const arr = [10, 20, 30];// ES5取数据const a = arr[0];const b = arr[1];// ES6解构const [a, b, c] = arr;console.log(a); // 10，b是20，c是30

还能跳过不需要的元素，用逗号隔开：
javascript

const [a, , c] = arr; // a=10，c=30，跳过第二个

2. 对象解构

javascript

const user = {name: "小明",age: 20,city: "北京"};// ES5取数据const name = user.name;const age = user.age;// ES6解构const { name, age } = user; // 直接提取同名属性console.log(name); // "小明"

想改名也可以：
javascript

const { name: userName } = user; // 把name改名为userNameconsole.log(userName); // "小明"

解构赋值在函数参数里超好用，比如接收接口返回的对象：
javascript

function showUser({ name, age }) {console.log(name, age);}showUser(user); // 直接传对象，自动解构

五、模板字符串：拼接字符串不用加号，还能换行

以前拼接字符串用一堆加号，既麻烦又容易出错，ES6 的模板字符串用反引号（`）和 ${} 解决问题。

1. 基本用法：${} 里放变量或表达式

javascript

const name = "小明";const age = 20;// ES5拼接const str = "我叫" + name + "，今年" + age + "岁";// ES6模板字符串const str = `我叫${name}，今年${age}岁`; // 清爽多了！

2. 支持换行：写 HTML 片段超方便

javascript

// 不用再拼接换行符了const html = `
姓名：${name}
年龄：${age}

`;
这在写动态 HTML 时简直是救星，新手做 DOM 操作时一定要用起来。

六、其他必学语法：默认参数、展开运算符

除了上面几个，这两个语法也高频使用，简单好记：

1. 函数默认参数：参数不传有默认值

javascript

// ES5给默认值很麻烦function greet(name) {name = name || "游客"; // 兼容性差console.log("你好，" + name);}// ES6默认参数function greet(name = "游客") {console.log(`你好，${name}`);}greet(); // 不传参数，用默认值“游客”

2. 展开运算符（...）：数组或对象展开

javascript

// 合并数组const arr1 = [1, 2];const arr2 = [3, 4];const arr3 = [...arr1, ...arr2]; // [1,2,3,4]// 复制对象const user = { name: "小明" };const user2 = { ...user, age: 20 }; // {name: "小明", age:20}

展开运算符在处理数组和对象的复制、合并时特别方便，比以前用 concat 或 assign 简洁多了。

七、新手常踩的坑：这些错误别再犯

学 ES6 时，新手很容易在这些地方出错，兔子哥帮你提前避坑：
第一个坑：用 const 声明基础类型变量后强行修改。比如 const a = 1; a = 2; 这会报错，记住基础类型用 const 就不能改了。
第二个坑：箭头函数用在对象方法里。箭头函数没有自己的 this，用它当对象方法会出问题：
javascript

const user = {name: "小明",sayHi: () => {console.log(this.name); // 报错！this指向不对}};

对象方法还是用普通函数，箭头函数适合独立函数或回调。
第三个坑：解构时变量名和属性名不一致。比如 const {userName} = user; 如果 user 里没有 userName 属性，会得到 undefined，这时候要用别名：const { name: userName } = user;

八、兔子哥的学习建议：多写多练，别怕出错

ES6 语法看起来多，但常用的就那几个，新手不用追求一次学完，先把箭头函数、解构赋值、模板字符串这几个高频语法练熟。
建议找个小项目练手，比如用 ES6 重写之前的 JS 代码，对比一下老写法和新写法的区别，感受 ES6 的简洁。有个粉丝用 ES6 改写了计算器项目，代码量减少了近一半，成就感满满。
别害怕浏览器兼容性问题，现在主流浏览器都支持 ES6，开发环境也有 Babel 转译工具，放心用就行。刚开始写可能会不习惯，但写两周就会发现，再也回不去了 ——ES6 写代码真的太爽了！
希望这篇教程能帮到想学 ES6 的新手，别觉得新语法难，其实它是为了让 JS 更好用才设计的。跟着例子多敲几遍代码，你会发现 ES6 一点都不难，还能让你爱上写 JavaScript！

标签： 功能机 智能机