箭头函数和解构赋值是ES6核心特性，前者简化函数语法并解决this指向问题，后者便捷提取数组和对象数据。1. 箭头函数用=>定义，省略function、return及括号，适用于回调和单行表达式；2. 箭头函数无自身this，继承外层作用域，避免定时器或事件中this错误；3. 解构赋值按模式提取值，数组可跳过元素，对象可重命名或设默认值；4. 函数参数结合解构提升接口可读性；5. 两者结合常用于API数据处理，如map中嵌套解构提取深层属性。合理使用可显著提升代码简洁性与健壮性。
箭头函数和解构赋值是ES6中两个非常实用的特性，它们不仅让代码更简洁，还解决了传统写法中的一些痛点。在实际开发中合理使用，能显著提升编码效率和可读性。
箭头函数：更简洁的函数写法
箭头函数通过=>语法定义，省去了function关键字，适合用于短小的函数表达式。
比如数组遍历中，传统写法：
const numbers = [1, 2, 3];numbers.map(function(x) {
return x * 2;
});
使用箭头函数后变得更简洁：
const numbers = [1, 2, 3];numbers.map(x => x * 2);
当只有一个参数时，括号可省略；单行返回值时，大括号和return也可省略。
箭头函数没有自己的this，它会捕获外层作用域的this值。这在事件回调或定时器中特别有用。
例如，在对象方法中使用定时器：
const user = {name: 'Alice',
greet: function() {
setTimeout(() => {
console.log('Hello, ' + this.name);
}, 1000);
}
};
user.greet(); // 正确输出 Alice
如果用普通函数，this会指向全局对象，导致出错。
解构赋值：从数组和对象中提取数据
解构赋值允许我们按模式从数组或对象中提取值并赋给变量，语法直观清晰。
从数组解构：
const colors = ['red', 'green', 'blue'];
const [first, second] = colors;
console.log(first); // 'red'
console.log(second); // 'green'
可以跳过某些元素：
const [,, third] = colors; // 只取第三个从对象解构更常用：
const person = { name: 'Bob', age: 25 };const { name, age } = person;
console.log(name); // 'Bob'
也可以重命名变量：
const { name: userName, age: userAge } = person;在函数参数中结合解构，能让接口更清晰：
function displayUser({ name, age }) {console.log(`${name} is ${age} years old.`);
}
displayUser(person); // 直接传对象
配合默认值使用，增强健壮性：
const { role = 'guest' } = person; // 如果没有role，默认为'guest'实战结合：箭头函数与解构赋值协同工作
在真实项目中，这两个特性经常一起出现。
比如处理API返回的用户列表：
const users = [{ id: 1, profile: { name: 'Tom', email: 'tom@example.com' } },
{ id: 2, profile: { name: 'Jerry', email: 'jerry@example.com' } }
];
const emails = users.map(({ profile: { email } }) => email);
console.log(emails); // ['tom@example.com', 'jerry@example.com']
这里一行代码完成了深层对象属性的提取，结构清晰且不易出错。
基本上就这些。掌握箭头函数和解构赋值，不仅能写出更现代的JavaScript代码，还能避免this指向问题、简化数据提取逻辑。在日常开发中多加练习，很快就能得心应手。
