JS中的默认参数怎么用?有什么作用?

javascript 中的默认参数用于在函数调用时未传参或参数为 undefined 时提供替代值。其核心作用是提升函数容错能力,避免意外错误。基本写法是在定义参数时赋默认值,如 function greet(name = “guest”)。只有参数为 undefined 时才会使用默认值,null、空字符串、0、false 等不会触发。常见用途包括:1. 提供可选参数;2. 设置配置对象默认值;3. 异步请求中设定默认超时时间;4. 工具函数中实现通用行为。默认值可为表达式或函数调用,如 new date() 或 a * 2,并且后参数可引用前参数。注意事项有:1. 默认值仅在参数为 undefined 时生效;2. 默认值表达式惰性求值,在每次调用时执行;3. 避免与解构混用以免引发副作用。合理使用默认参数能增强代码健壮性和可读性,减少边界判断。

JS中的默认参数怎么用?有什么作用?

JavaScript 中的默认参数是一个非常实用的功能,尤其在写函数的时候,能让我们更灵活地处理未传参或 undefined 的情况。它的核心作用就是:当调用函数时没有传递某个参数,或者该参数是 undefined 时,使用一个默认值来代替

默认参数的基本写法

默认参数的语法很简单,在定义函数参数的时候直接给参数赋值即可:

function greet(name = "Guest") {  console.log("Hello, " + name);}

上面这个例子中,如果调用 greet("Tom"),输出的就是 “Hello, Tom”;如果调用 greet() 或者 greet(undefined),就会使用默认值 "Guest",输出 “Hello, Guest”。

注意:只有当参数是 undefined 的时候,默认值才会生效。如果传的是 null、空字符串或者其他假值(比如 0、false),默认值不会被使用。

默认参数的实际用途

默认参数最常见的用途,是让函数对缺失的参数有容错能力,避免运行时报错或出现意外结果。

举个例子,假设你写了一个计算价格的函数:

function calculatePrice(quantity, pricePerUnit, taxRate = 0.1) {  return quantity * pricePerUnit * (1 + taxRate);}

这里 taxRate 通常是个可选参数。如果不传,就按 10% 税率计算。这样写可以让函数接口更简洁,也更容易维护。

还有一些场景适合用默认参数:

函数需要配置对象时,可以为整个对象设置默认值异步请求封装中设置默认超时时间工具函数中提供通用行为,同时允许定制化

默认参数也可以动态计算

默认参数不只是能写固定值,还可以是一个表达式,甚至调用其他函数:

function logTime(time = new Date()) {  console.log("Log time:", time);}

每次不传参数调用 logTime() 时,都会生成当前时间。再比如:

function multiply(a, b = a * 2) {  return a * b;}

这里的 b 默认等于 a * 2,所以 multiply(3) 返回的是 3 * 6 = 18

需要注意的是,默认参数的作用域是独立的“临时作用域”,也就是说后面的参数可以引用前面的参数。

使用默认参数时要注意的地方

虽然默认参数很好用,但也有一些细节需要注意:

默认值只会在参数为 undefined 时触发
比如传了 null、空字符串、false0 都不会触发默认值。

默认参数是惰性求值的
默认值表达式会在每次函数调用时重新执行,而不是定义函数时一次性计算。

不要把默认参数和解构混用导致副作用
比如下面这种写法可能会让人困惑:

function foo({ x = 1 } = {}) {  console.log(x);}

这种嵌套结构容易出错,理解起来也复杂一些,建议保持简单清晰。

基本上就这些。默认参数看似简单,但用好了能让代码更健壮、易读,也能减少很多边界判断的麻烦。

以上就是JS中的默认参数怎么用?有什么作用?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1505589.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 03:48:59
下一篇 2025年12月20日 03:49:14

相关推荐

  • 您不需要 CSS 预处理器

    原生 css 在最近几个月/几年里取得了长足的进步。在这篇文章中,我将回顾人们使用 sass、less 和 stylus 等 css 预处理器的主要原因,并向您展示如何使用原生 css 完成这些相同的事情。 分隔文件 分离文件是人们使用预处理器的主要原因之一。尽管您已经能够将另一个文件导入到 css…

    2025年12月24日
    000
  • React 嵌套组件中,CSS 样式会互相影响吗?

    react 嵌套组件 css 穿透影响 在 react 中,嵌套组件的 css 样式是否会相互影响,取决于采用的 css 解决方案。 传统 css 如果使用传统的 css,在嵌套组件中定义的样式可能会穿透影响到父组件。例如,在给出的代码中: 立即学习“前端免费学习笔记(深入)”; component…

    2025年12月24日
    000
  • React 嵌套组件中父组件 CSS 修饰会影响子组件样式吗?

    对嵌套组件的 CSS 修饰是否影响子组件样式 提问: 在 React 中,如果对嵌套组件 ComponentA 配置 CSS 修饰,是否会影响到其子组件 ComponentB 的样式?ComponentA 是由 HTML 元素(如 div)组成的。 回答: 立即学习“前端免费学习笔记(深入)”; 在…

    2025年12月24日
    000
  • 在 React 项目中实现 CSS 模块

    react 中的 css 模块是一种通过自动生成唯一的类名来确定 css 范围的方法。这可以防止大型应用程序中的类名冲突并允许模块化样式。以下是在 react 项目中使用 css 模块的方法: 1. 设置 默认情况下,react 支持 css 模块。你只需要用扩展名 .module.css 命名你的…

    2025年12月24日
    000
  • action在css中的用法

    CSS 中 action 关键字用于定义鼠标悬停或激活元素时的行为,语法:element:action { style-property: value; }。它可以应用于 :hover 和 :active 伪类,用于创建交互效果,如更改元素外观、显示隐藏元素或启动动画。 action 在 CSS 中…

    2025年12月24日
    000
  • css规则的类型有哪些

    CSS 规则包括:通用规则:选择所有元素类型选择器:根据元素类型选择元素类选择器:根据元素的 class 属性选择元素ID 选择器:根据元素的 id 属性选择元素(唯一)后代选择器:选择特定父元素内的元素子选择器:选择作为特定父元素的直接子元素的元素伪类:基于元素的状态或特性选择元素伪元素:创建元素…

    2025年12月24日
    000
  • 深入理解CSS框架与JS之间的关系

    深入理解CSS框架与JS之间的关系 在现代web开发中,CSS框架和JavaScript (JS) 是两个常用的工具。CSS框架通过提供一系列样式和布局选项,可以帮助我们快速构建美观的网页。而JS则提供了一套功能强大的脚本语言,可以为网页添加交互和动态效果。本文将深入探讨CSS框架和JS之间的关系,…

    2025年12月24日
    000
  • HTML+CSS+JS实现雪花飘扬(代码分享)

    使用html+css+js如何实现下雪特效?下面本篇文章给大家分享一个html+css+js实现雪花飘扬的示例,希望对大家有所帮助。 很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果 可以点击看看在线运行:http://hai…

    2025年12月24日 好文分享
    500
  • 10款好看且实用的文字动画特效,让你的页面更吸引人!

    图片和文字是网页不可缺少的组成部分,图片运用得当可以让网页变得生动,但普通的文字不行。那么就可以给文字添加一些样式,实现一下好看的文字效果,让页面变得更交互,更吸引人。下面创想鸟就来给大家分享10款文字动画特效,好看且实用,快来收藏吧! 1、网页玻璃文字动画特效 模板简介:使用css3制作网页渐变底…

    2025年12月24日 好文分享
    000
  • tp5如何引入css文件

    tp5引入css文件的方法:1、将css文件放在public目录下的static文件里即可;2、在页面引入中写上“”语句即可。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 其实很简单,只需要将css,js,image文件放在这个目录下即可 页…

    2025年12月24日
    000
  • 聊聊CSS 与 JS 是如何阻塞 DOM 解析和渲染的

    本篇文章给大家介绍一下css和js阻塞 dom 解析和渲染的原理。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 hello~各位亲爱的看官老爷们大家好。估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能。然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其…

    2025年12月24日
    200
  • js如何修改css样式

    js修改css样式的方法:1、使用【obj.className】来修改样式表的类名;2、使用【obj.style.cssTest】来修改嵌入式的css;3、使用【obj.className】来修改样式表的类名;4、使用更改外联的css。 本教程操作环境:windows7系统、css3版,DELL G…

    2025年12月24日
    000
  • 如何使用纯CSS、JS实现图片轮播效果

    本篇文章给大家详细介绍一下使用纯css、js实现图片轮播效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 .carousel {width: 648px;height: 400px;margin: 0 auto;text-align: center;position: a…

    2025年12月24日
    000
  • js如何修改css

    js修改css的方法:1、使用【obj.style.cssTest】来修改嵌入式的css;2、使用【bj.className】来修改样式表的类名;3、使用更改外联的css文件,从而改变元素的css。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 js修改css的方法: 方法…

    2025年12月24日
    000
  • js如何改变css样式

    js改变css样式的方法:1、使用cssText方法;2、使用【setProperty()】方法;3、使用css属性对应的style属性。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 js改变css样式的方法: 第一种:用cssText div.style.cssText…

    2025年12月24日
    000
  • 为什么css放上面js放下面

    css放上面js放下面的原因:1、在加载html生成DOM tree的时候,可以同时对DOM tree进行渲染,这样可以防止闪跳,白屏或者布局混乱;2、javascript加载后会立即执行,同时会阻塞后面的资源加载。 本文操作环境:Windows7系统、HTML5&&CSS3版,DE…

    2025年12月24日
    000
  • 推荐六款移动端 UI 框架

    作为一个前端人员来说,总结几款相对来说不错的用于移动端开发的UI框架是非常必要的,以下几种移动端UI框架就能基本满足工作中开发需要,根据项目需求,选用合适的框架搭建项目,更能容易提高开发效率。 一、MUI         最接近原生APP体验的高性能前端框架,追求性能体验,是我们开始启动MUI项目的…

    2025年12月24日
    000
  • css如何实现图片的旋转展示效果(代码示例)

    本篇文章给大家带来内容是通过代码示例介绍使用css+js实现图片的旋转展示,制作一个手动操作的“无限”照片轮播图。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就开始介绍如何实现效果。 1、构建图像轮播框架 首先是HTML。它有点难以阅读,因为我们删除了元素之间的任何空格…

    2025年12月24日
    000
  • css3+js实现烟花绽放的动画效果(代码示例)

    本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来看看效果: 动画的实现原理: 动画使用了两个关键帧(keyframes): 一个是烟花筒上升的轨迹,另一个…

    2025年12月24日
    000
  • css+js如何在幻灯片上添加文字?实现幻灯片的旋转切换(附代码)

    本篇文章给大家带来的内容是介绍css+js如何在幻灯片上添加文字?实现幻灯片的旋转切换(附代码)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在之前的文章【css如何实现幻灯片效果?幻灯片的实现方法】中介绍了实现淡入淡出幻灯片的实现方法,本篇文章就在其基础上去解释如何在幻灯片上…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信