ES6函数新特性：让JavaScript编码更简单高效
以前用JavaScript写函数时，经常会遇到各种麻烦。参数默认值要手动判断，处理多个参数要用arguments，this指向问题让人头疼。ES6的出现解决了这些问题，给函数增加了许多实用功能，让代码写起来更快，也不容易出错。
下面用简单易懂的方式介绍这些新功能。
参数默认值：告别繁琐判断
以前给函数参数设置默认值，需要在函数内部写很多判断语句，既麻烦又容易出错。
ES5的传统写法：
function calculate(a, b) {
a = a || 1; // 这里有个问题：如果a是0，也会被替换成1
b = b === undefined ? 2 : b;
return a + b;
}
console.log(calculate(0, 5)); // 输出5，但0被错误地替换成了1ES6的改进写法：
function calculate(a = 1, b = 2) {
return a + b;
}
console.log(calculate()); // 输出3（使用默认值1和2）
console.log(calculate(5)); // 输出7（a=5，b使用默认值2）
console.log(calculate(0, 0)); // 输出0（正确识别0值）ES6的默认参数只在参数为undefined时生效，传null或0都不会触发默认值，避免了ES5中的常见错误。
剩余参数：轻松处理多个参数
以前处理不确定数量的参数时，要用arguments对象，但它不是真正的数组，使用起来很麻烦。
ES5的arguments方式：
function sum() {
// 先把arguments转换成真正的数组
const numbers = Array.prototype.slice.call(arguments);
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 输出6ES6的剩余参数写法：
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 输出15剩余参数用三个点(...)表示，它会将传入的所有参数收集成一个真正的数组，可以直接使用数组方法。
扩展运算符：数组操作更便捷
扩展运算符看起来和剩余参数一样，但作用正好相反：它把数组拆分成单个元素。
常用场景示例：
// 1. 求数组最大值
const scores = [95, 87, 92, 78, 96];
console.log(Math.max(...scores)); // 输出96
// 2. 合并数组
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]
// 3. 复制数组
const original = [1, 2, 3];
const copy = [...original];
// 4. 函数传参
function introduce(name, age, city) {
console.log(`${name}今年${age}岁，来自${city}`);
}
const person = ['张三', 25, '北京'];
introduce(...person); // 张三今年25岁，来自北京箭头函数：简洁语法与稳定的this
箭头函数是ES6中最受欢迎的特性之一，不仅语法简洁，还解决了this指向的问题。
基本语法对比：
// ES5普通函数
const multiply = function(a, b) {
return a * b;
};
// ES6箭头函数
const multiply = (a, b) => a * b;解决this指向问题：
const user = {
name: '李四',
tasks: ['任务1', '任务2', '任务3'],
// ES5写法：this指向会变化
showTasks1: function() {
this.tasks.forEach(function(task) {
console.log(this.name + ': ' + task); // 这里this指向window
});
},
// ES6箭头函数：this保持正确指向
showTasks2: function() {
this.tasks.forEach((task) => {
console.log(this.name + ': ' + task); // 正确指向user对象
});
}
};
user.showTasks2(); // 正确输出：李四: 任务1 等箭头函数的特点：
语法简洁，可以省略function关键字和return
没有自己的this，继承外层作用域的this
不能作为构造函数使用
没有arguments对象
参数解构：直接从参数中提取值
当函数参数是对象或数组时，可以直接在参数中解构出需要的属性。
对象参数解构：
// 传统写法
function displayUser(user) {
const name = user.name;
const age = user.age;
const city = user.city || '未知';
console.log(`${name}，${age}岁，来自${city}`);
}
// ES6解构写法
function displayUser({ name, age, city = '未知' }) {
console.log(`${name}，${age}岁，来自${city}`);
}
displayUser({ name: '王五', age: 30 }); // 王五，30岁，来自未知数组参数解构：
// 获取坐标点
function getCoordinates([x, y]) {
return { x, y };
}
const point = getCoordinates([10, 20]);
console.log(point); // {x: 10, y: 20}函数名属性改进：调试更方便
ES6改进了函数的name属性，让调试时能更清楚地识别函数。
// 普通函数
function normalFunction() {}
console.log(normalFunction.name); // "normalFunction"
// 箭头函数
const arrowFunc = () => {};
console.log(arrowFunc.name); // "arrowFunc"
// 匿名函数赋值
const anonymous = function() {};
console.log(anonymous.name); // "anonymous"（ES5中为空字符串）实际应用示例
下面通过一个完整的例子展示这些特性的综合应用：
// 用户数据处理函数
function processUserData(
{ name, age, hobbies = [], address = {} } = {},
...otherInfo
) {
// 参数默认值和解构一起使用
const userInfo = {
name: name || '匿名用户',
age: age || 0,
hobbies: [...hobbies, '编程'], // 扩展运算符添加默认爱好
address: { city: '未知', ...address }, // 合并地址信息
otherInfo: [...otherInfo] // 剩余参数收集其他信息
};
return userInfo;
}
// 使用示例
const user = processUserData(
{
name: '赵六',
age: 28,
hobbies: ['阅读', '运动'],
address: { city: '上海', district: '浦东' }
},
'高级会员',
'VIP用户'
);
console.log(user);使用建议
优先使用箭头函数：特别是在需要保持this指向的场景，如事件处理、定时器回调等。
合理使用参数默认值：给可选参数设置合理的默认值，减少外部判断。
用剩余参数替代arguments：剩余参数是真正的数组，使用更方便。
善用扩展运算符：在数组合并、复制、传参时使用，代码更简洁。
参数解构提高可读性：当参数较多或结构复杂时，使用解构让代码更清晰。
这些ES6函数特性现在已经成为了现代JavaScript开发的标准写法。掌握它们不仅能提高编码效率，还能让代码更加清晰易懂。在实际项目中灵活运用这些特性，你会发现JavaScript函数编写变得轻松很多。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
