02 ES6的函数参数默认值

函数参数的默认值是 ECMAScript 2015 (ES6) 引入的功能,它允许你在函数定义时为参数指定默认值。当函数被调用时,如果没有为某个参数提供值,或者提供了 undefined,那么就会使用这个默认值。

以下是函数参数默认值的一些关键点和用法示例:

基本用法

javascript 复制代码
function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet();        // 输出 "Hello, Guest!" 因为没有提供 name 参数
greet('Alice'); // 输出 "Hello, Alice!" 使用提供的 name 参数

在这个例子中,如果调用 greet 函数时没有提供 name 参数,name 将默认为 'Guest'

参数列表中的默认值

默认值可以设置在参数列表的任意位置,但一旦参数有默认值,它右边的所有参数也必须有默认值。

javascript 复制代码
function greet(name, message = 'Hello') {
  console.log(`${message}, ${name}!`);
}

// 这将抛出错误,因为 message 有默认值,但 age 没有
// greet('Alice');

greet('Alice', 'Hi'); // 输出 "Hi, Alice!"
greet('Alice');       // 输出 "Hello, Alice!" 使用 message 的默认值

与解构赋值结合使用

默认值可以与解构赋值结合使用,为更复杂的参数结构提供默认值。

javascript 复制代码
function configure(options = {}) {
  console.log(`Width: ${options.width || 'default width'}`);
  console.log(`Height: ${options.height || 'default height'}`);
}

configure({ width: 100 }); // 输出 "Width: 100" 和 "Height: default height"
configure();               // 输出 "Width: default width" 和 "Height: default height"

默认值是一次求值的

参数的默认值表达式在函数定义时求值一次,而不是每次调用函数时。

javascript 复制代码
let defaultGreeting = 'Hello';

function greet(name, greeting = defaultGreeting) {
  console.log(`${greeting}, ${name}!`);
}

(defaultGreeting = 'Hi');
greet('Alice'); // 即使 defaultGreeting 已改变,依然输出 "Hello, Alice!"

函数的剩余参数

剩余参数(rest parameters)也可以用默认值。

javascript 复制代码
function sum(...numbers = []) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum());  // 输出 0,因为没有提供任何参数
console.log(sum(1)); // 输出 1
console.log(sum(1, 2, 3, 4)); // 输出 10

函数参数的默认值提供了一种方便的方式来定义函数,使得函数调用更加灵活和健壮。开发者可以根据需要提供参数,或者依赖预设的默认值。

相关推荐
秋田君2 分钟前
深入理解JavaScript设计模式之闭包与高阶函数
开发语言·javascript·设计模式
山有木兮木有枝_6 分钟前
JavaScript预编译机制深度解析:从V8引擎到执行上下文
前端
袁煦丞9 分钟前
电子书阅读器界的"万能工具"Koodo Reader :cpolar内网穿透实验室第593个成功挑战
前端·后端·远程工作
半醉看夕阳26 分钟前
HarmonyOS开发 ArkTS 之字符串的剖析
javascript·harmonyos·arkts
程序猿小D30 分钟前
第14节 Node.js 全局对象
linux·前端·npm·node.js·编辑器·vim
Mintopia35 分钟前
当代码遇见光影魔术师:用 JavaScript 揭秘环境光遮蔽的奇幻世界
前端·javascript·计算机图形学
Dignity_呱1 小时前
别在傻傻分不清any void never unknown的场景啦
前端·vue.js·typescript
站在风口的猪11081 小时前
《前端面试题:CSS3新特性》
前端·css·html·css3·html5
crary,记忆1 小时前
Angular报错:cann‘t bind to ngClass since it is‘t a known property of div
前端·javascript·angular·angular.js
betterangela1 小时前
react私有样式处理
前端·react.js·前端框架