js新增函数

admin 2026年02月23日 11:10 102 0

JavaScript在近年版本中新增了多项函数相关特性，显著提升了开发效率与代码可读性，ES6引入箭头函数，简化语法并绑定词法this；默认参数允许为函数形参设置初始值；剩余参数（...args）可收集不定数量参数；展开运算符（...）则用于数组或对象的元素展开，ES2017新增async/await，使异步函数逻辑更直观，避免回调地狱，函数构造器支持new.target检测，严格模式限制this指向，这些改进让函数定义与调用更灵活，增强了代码的健壮性与可维护性。

JavaScript 新增函数特性：从 ES6 到现代 JS 的函数进化之路

JavaScript 作为一门动态编程语言，函数是其核心支柱之一，从 ES6（2015年）开始，JavaScript 不断迭代更新，为函数带来了诸多强大且便捷的新特性，这些特性不仅简化了代码编写，提升了开发效率，也让函数的表达能力和灵活性得到了质的飞跃，本文将带你系统梳理 JavaScript 中新增的函数特性，从基础语法到高级应用，掌握这些特性能让你在现代 JS 开发中游刃有余。

箭头函数：简洁语法与 this 绑定的革命

箭头函数（Arrow Function）是 ES6 引入的最具代表性的函数特性之一，它用更简洁的语法替代了传统 function 关键字声明的函数，同时巧妙地解决了传统函数 this 指向混乱的问题。

语法简化

箭头函数的基本语法为 () => {}，相比传统函数,它有以下简化规则：

省略 function 关键字：直接用 => 连接参数列表和函数体
参数列表简化：当参数只有一个时，可省略圆括号；无参数时，用空圆括号表示
函数体简化：当函数体只有一行返回语句时，可省略和 return

// 传统函数
function add(a, b) {
  return a + b;
}
// 箭头函数（省略 {} 和 return）
const add = (a, b) => a + b;
// 单参数省略 ()
const square = x => x * x;
// 无参数用 ()
const log = () => console.log('Hello, ES6!');
// 更复杂的例子
const filter = (arr, predicate) => arr.filter(item => predicate(item));

this 指向的词法绑定

传统函数的 this 指向取决于调用方式（如作为构造函数、对象方法、独立调用等），而箭头函数没有自己的 this，它会继承外层作用域的 this（即"词法作用域"的 this），这一特性在回调函数、事件处理等场景中尤为实用。

function Person() {
  this.age = 25;
  this.sayAge = function() {
    console.log(this.age); // 25
  };
  // 传统函数：this 指向 window（非严格模式）
  setTimeout(function() {
    console.log(this.age); // undefined
  }, 1000);
  // 箭头函数：this 继承 Person 的 this（即实例对象）
  setTimeout(() => {
    console.log(this.age); // 25
  }, 1000);
}
const p = new Person();
// 实际应用示例
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  // 传统函数：this 指向 button
  console.log('Button clicked:', this.id);
  // 如果需要访问外部作用域的 this
  const that = this;
  setTimeout(function() {
    console.log('Delayed:', that.id); // 需要额外的变量
  }, 1000);
  // 使用箭头函数更简洁
  setTimeout(() => {
    console.log('Delayed with arrow:', this.id); // 直接继承
  }, 1000);
});

注意事项

箭头函数不能作为构造函数使用（没有 prototype 属性，也不能使用 new 调用）
箭头函数没有 arguments 对象，但可以通过剩余参数（后文介绍）获取参数列表
箭头函数不能用作生成器函数（不能使用 function* 语法）
箭头函数不能使用 yield 关键字
箭头函数没有自己的 this、super 或 new.target

默认参数函数：为参数设置智能默认值

在 ES6 之前，若函数参数未传入或传入 undefined，需要手动设置默认值，ES6 引入了默认参数（Default Parameters），允许在函数定义时直接为参数指定默认值,极大地简化了参数校验逻辑。

基本语法

在参数列表中，通过 参数名 = 默认值 的形式设置默认值，当调用函数时，若该参数未传入或为 undefined，则使用默认值；否则使用传入值。

// 传统方式：手动设置默认值
function logMessage(msg) {
  msg = msg || 'Default message';
  console.log(msg);
}
// 默认参数
function logMessage(msg = 'Default message') {
  console.log(msg);
}
logMessage(); // 'Default message'
logMessage('Hello'); // 'Hello'
logMessage(undefined); // 'Default message'（undefined 触发默认值）
logMessage(null); // null（null 不会触发默认值）
// 多个默认参数
function createPerson(name = 'Anonymous', age = 18, city = 'Unknown') {
  return { name, age, city };
}
createPerson(); // { name: 'Anonymous', age: 18, city: 'Unknown' }
createPerson('Alice'); // { name: 'Alice', age: 18, city: 'Unknown' }
createPerson('Bob', 30); // { name: 'Bob', age: 30, city: 'Unknown' }

默认值的表达式支持

默认值可以是任意合法的 JavaScript 表达式，甚至可以依赖前面的参数（但需注意"暂时性死区"）。

// 默认值为表达式
function getPower(base, exponent = 2) {
  return Math.pow(base, exponent);
}
getPower(5); // 25（exponent 默认为 2）
getPower(5, 3); // 125
// 默认值依赖前一个参数
function concatName(firstName, lastName = ' Smith') {
  return firstName + lastName;
}
concatName('John'); // 'John Smith'
concatName('Alice', ' Johnson'); // 'Alice Johnson'
// 更复杂的默认值表达式
function calculateTotal(price, tax = 0.1, discount = price * 0.05) {
  return price * (1 + tax) - discount;
}
calculateTotal(100); // 105 (100 * 1.1 - 5)
calculateTotal(100, 0.2); // 115 (100 * 1.2 - 5)
calculateTotal(100, 0.2, 10); // 110 (100 * 1.2 - 10)
// 默认值中使用函数调用
function getRandomId() {
  return Math.random().toString(36).substr(2, 9);
}
function createUser(name = 'User', id = getRandomId()) {
  return { name, id };
}
console.log(createUser()); // 每次调用生成不同的 id

默认参数的注意事项

默认参数在函数调用时求值，每次调用都会重新计算
默认参数不会影响 arguments 对象
默认参数可以使用解构赋值（ES6+）
默认参数不能有重复的参数名

// 默认参数每次调用都重新计算
function counter() {
  console.log('Counter called');
  return 0;
}
function test(a = counter()) {
  console.log(a);
}
test(); // 输出: Counter called, 0
test(); // 再次输出: Counter called, 0
// 使用解构赋值的默认参数
function greet({ name = 'Guest', age = 18 } = {}) {
  console.log(`Hello ${name}, you are ${age} years old`);
}
greet(); // Hello Guest, you are 18 years old
greet({ name: 'Alice' }); // Hello Alice, you are 18 years old
greet({ name: 'Bob', age: 25 }); // Hello Bob, you are 25 years old

JavaScript 从 ES6 开始引入的函数新特性，如箭头函数和默认参数，极大地提升了代码的简洁性和可读性，箭头函数

标签： #js #函数