js基础教程ES6语法入门：箭头函数与解构赋值实战案例

是不是很多学 JS 的新手都听说过 ES6，但一看到 “箭头函数”“解构赋值” 这些词就犯怵？看教程时觉得 “好像不难”，自己写代码时却不知道该怎么用；用普通函数写得好好的，为啥非要用箭头函数？拿到一个对象想取里面的属性，写了一堆obj.name obj.age，感觉特别麻烦？其实啊，ES6 的箭头函数和解构赋值是帮你简化代码的 “神器”，学会了能少写一半代码，还更不容易出错。今天兔子哥就带零基础的朋友入门这两个超实用的 ES6 语法，结合实战案例讲透用法，看完你会发现，ES6 原来这么好用，一起往下看吧！

一、先搞懂：为啥要学 ES6 语法？箭头函数和解构赋值能解决啥问题？

核心问题：ES5 语法用着挺顺手，为啥非得学 ES6 的新语法？它们真的能提高效率吗？
很多新手觉得 “能跑的代码就是好代码”，但写多了就会发现，ES5 有些写法又繁琐又容易出错。箭头函数和解构赋值就是为了解决这些痛点而生的。
先看个对比表，感受下 ES5 和 ES6 写法的差距：

语法场景	ES5 写法（繁琐版）	ES6 写法（简洁版）
函数声明	function add(a, b) { return a + b; }	const add = (a, b) => a + b;
取对象属性	var name = user.name; var age = user.age;	const { name, age } = user;
数组遍历	arr.forEach(function(item) { console.log(item); });	arr.forEach(item => console.log(item));

从表格就能看出，ES6 写法更短、更直观。兔子哥之前维护一个老项目，用 ES5 写的数组遍历嵌套了三层函数，改代码时看得头晕，后来用箭头函数重构后，逻辑一下子清晰了 —— 这就是 ES6 的价值。

二、箭头函数：让函数写法更简洁，一行代码搞定

核心问题：箭头函数到底简化了什么？和普通函数有啥区别？什么时候该用箭头函数？
箭头函数是 ES6 最常用的语法之一，光看名字就知道，它用=>（箭头）代替了function关键字，写法超级简洁。

1. 箭头函数的基本写法：从多行到一行

ES5 普通函数：声明时要写function，如果函数体只有一句返回值，还得写return。
javascript

// ES5：普通函数function add(a, b) {return a + b;}function greeting(name) {return "Hello, " + name + "!";}

ES6 箭头函数：去掉function，用=>连接参数和函数体，单句返回可以省略return和大括号。
javascript

// ES6：箭头函数const add = (a, b) => a + b; // 省略return和{}const greeting = (name) => "Hello, " + name + "!";

是不是简洁多了？如果函数体有多行代码，那就不能省略大括号和return：
javascript

// 多行函数体的箭头函数const calculate = (a, b) => {const sum = a + b;const product = a * b;return { sum, product }; // 返回对象};

2. 箭头函数在数组方法中的实战：遍历更清爽

数组的map、filter、forEach这些方法经常需要传函数作为参数，用箭头函数能让代码瞬间变干净。
场景：给数组中的数字翻倍，筛选出大于 10 的数。
javascript

const numbers = [5, 8, 12, 3, 15];// ES5：用普通函数const doubled = numbers.map(function(num) {return num * 2;});const bigNumbers = numbers.filter(function(num) {return num > 10;});// ES6：用箭头函数const doubled = numbers.map(num => num * 2); // 一行搞定const bigNumbers = numbers.filter(num => num > 10);

效果：同样的功能，箭头函数写法少了一半代码，可读性还更高。兔子哥现在写数组遍历，几乎不用普通函数了。

3. 箭头函数的 “坑”：这些情况不能用

箭头函数虽然好用，但不是所有场景都适合，这几个坑一定要避开：

• 不能用作构造函数：箭头函数没有this绑定，不能用new关键字创建实例，会报错。
• 对象方法别用箭头函数：对象里的方法用箭头函数，this会指向全局对象，而不是当前对象。javascript

  const user = {name: "小明",// 错误用法：箭头函数的this不指向usersayHi: () => console.log("Hi, " + this.name)};user.sayHi(); // 输出Hi, undefined（因为this不对）

  
  
• 需要动态 this 的场景：比如事件回调函数，用箭头函数会导致this指向错误，应该用普通函数。

分割线

三、解构赋值：从对象 / 数组里 “精准取数”，告别繁琐代码

核心问题：解构赋值到底怎么用？为什么说它能简化取数据的过程？
解构赋值就像 “精准提取器”，能从对象或数组中快速取出需要的属性或元素，不用再一层层写obj.attr。

1. 对象解构：取对象属性一步到位

ES5 取对象属性：如果要取对象的多个属性，得写多行赋值，特别繁琐。
javascript

// ES5：取对象属性const user = {name: "小红",age: 20,address: { city: "北京", district: "海淀" }};const userName = user.name;const userAge = user.age;const userCity = user.address.city; // 取深层属性更麻烦

ES6 对象解构：用{}包裹需要的属性名，一行代码就能取多个属性，深层属性也能直接取。
javascript

// ES6：对象解构const { name: userName, age: userAge, address: { city: userCity } } = user;console.log(userName); // 小红console.log(userAge); // 20console.log(userCity); // 北京

如果属性名和变量名一致，还能简化：
javascript

// 变量名和属性名一致时const { name, age } = user;console.log(name); // 小红（直接用name变量）

2. 数组解构：按位置取元素，交换变量超方便

数组解构和对象解构类似，但它按 “位置” 提取元素，适合需要取数组特定位置值的场景。
ES5 取数组元素：需要通过索引一个个取，交换变量还得用临时变量。
javascript

// ES5：取数组元素和交换变量const fruits = ["苹果", "香蕉", "橘子"];const firstFruit = fruits[0];const secondFruit = fruits[1];// 交换变量let a = 10;let b = 20;let temp = a;a = b;b = temp;

ES6 数组解构：按顺序写变量名，直接取对应位置的元素，交换变量不用临时变量。
javascript

// ES6：数组解构const [firstFruit, secondFruit] = fruits;console.log(firstFruit); // 苹果console.log(secondFruit); // 香蕉// 交换变量（超简单）let a = 10;let b = 20;[a, b] = [b, a]; // 直接交换console.log(a); // 20，b变成10

小技巧：数组解构时，用...可以取剩余元素：
javascript

const [first, ...rest] = fruits;console.log(rest); // ["香蕉", "橘子"]（取除了第一个的所有元素）

3. 解构赋值的实战：处理接口数据更清爽

实际开发中，我们经常需要处理接口返回的复杂数据，解构赋值能让代码变简洁。
场景：接口返回用户信息，需要提取用户名、年龄和所在城市。
javascript

// 接口返回的数据const response = {code: 200,data: {user: {id: 1,name: "小李",age: 25,address: { city: "上海", street: "南京东路" }},message: "success"}};// 用解构赋值提取需要的信息const {data: {user: { name, age, address: { city } },message} = response;console.log(name); // 小李console.log(age); // 25console.log(city); // 上海console.log(message); // success

如果不用解构，得写response.data.user.name这种长代码，既麻烦又容易拼错。

分割线

四、实战案例：用箭头函数和解构赋值重构代码

核心问题：学了语法怎么用在实际项目中？看看重构前后的对比！
下面用一个 “用户列表处理” 的案例，看看箭头函数和解构赋值怎么让代码变优雅。

重构前（ES5 写法）：

javascript

// ES5：处理用户列表function processUsers(users) {// 筛选成年用户const adults = users.filter(function(user) {return user.age >= 18;});// 提取用户名和年龄，生成新数组const userInfo = adults.map(function(user) {return {username: user.name,userAge: user.age,city: user.address ? user.address.city : "未知"};});return userInfo;}// 测试数据const users = [{ name: "小明", age: 17, address: { city: "北京" } },{ name: "小红", age: 20, address: { city: "上海" } },{ name: "小刚", age: 22, address: null }];console.log(processUsers(users));

重构后（ES6 写法）：

javascript

// ES6：用箭头函数和解构赋值重构const processUsers = users => {// 筛选成年用户，用箭头函数const adults = users.filter(user => user.age >= 18);// 提取信息，用解构赋值和箭头函数const userInfo = adults.map(({ name, age, address: { city } = {} }) => ({username: name,userAge: age,city: city || "未知" // 处理city为undefined的情况}));return userInfo;};// 测试数据不变const users = [{ name: "小明", age: 17, address: { city: "北京" } },{ name: "小红", age: 20, address: { city: "上海" } },{ name: "小刚", age: 22, address: null }];console.log(processUsers(users));

变化：代码行数减少近一半，逻辑更清晰，尤其是map方法里用了解构赋值，直接提取name age city，不用反复写user.xxx。

五、新手常见问题：这些错误别再犯了！

1. 箭头函数省略 return 却写了大括号？

错误示例：
javascript

const add = (a, b) => { a + b }; // 错误：有{}却没写return

原因：箭头函数如果用了{}，就必须显式写return，否则返回undefined。
正确写法：
javascript

const add = (a, b) => { return a + b }; // 要么写return// 或省略{}和returnconst add = (a, b) => a + b;

2. 解构赋值时变量名和属性名不一致，没起别名？

错误示例：
javascript

const user = { name: "小明", age: 18 };const { username } = user; // 错误：属性名是name，变量名却用usernameconsole.log(username); // undefined

原因：对象解构默认按属性名匹配，变量名和属性名不一致时必须起别名。
正确写法：
javascript

const { name: username } = user; // 用:起别名console.log(username); // 小明

3. 解构深层属性时，上层属性可能为 null？

错误示例：
javascript

const user = { name: "小明", address: null };const { address: { city } } = user; // 报错：Cannot destructure property 'city' of 'null'

原因：address是null，解构address.city会报错。
解决方法：设置默认值为空对象：
javascript

const { address: { city } = {} } = user; // 给address设默认值{}console.log(city); // undefined（不报错）

最后说几句实在的

箭头函数和解构赋值是 ES6 里最实用的语法，没有之一。它们不只是让代码变短，更重要的是让逻辑更清晰，减少重复劳动。新手刚开始可能不习惯，但用几次就会发现 “真香”—— 再也不用写一堆function和obj.attr了。
建议大家从简单场景开始练：先用箭头函数代替数组方法里的普通函数，再用解构赋值处理对象和数组。遇到报错别慌，大部分是语法细节没注意，比如箭头函数的return省略规则、解构时的别名设置。
兔子哥的经验是，一旦用惯了 ES6 语法，就再也回不去 ES5 了。这些语法就像编程里的 “快捷键”，能帮你更高效地写代码。动手试试吧，把今天的案例敲一遍，你会发现 ES6 入门真的不难，用好它们能让你的 JS 代码上一个大台阶！

标签： arr.forEach console.log