如何像人类一样写JavaScript代码(包会)之函数参数和返回值

简介: 如何像人类一样写JavaScript代码(包会)之函数参数和返回值

前言


JavaScript作为一门广泛应用的编程语言,其函数参数和返回值是非常重要的概念。理解和熟练运用函数参数和返回值的知识,可以帮助开发者编写更为灵活和功能强大的代码。本文将介绍函数参数和返回值的基本概念,并提供一些示例代码来帮助读者更好地理解(让你成为一个真正的人类程序猿


一、函数参数:


函数参数是函数定义时用来接收外部传入的值的变量。JavaScript函数参数具有灵活性,可以传递任意类型的值,包括基本类型和对象。


1.1 示例代码一:不带参数的函数

function greet() {
  console.log("Hello, World!");
}
greet(); // 输出:"Hello, World!"


1.2 示例代码二:带一个参数的函数

function greet(name) {
  console.log("Hello, " + name + "!");
}
greet("Alice"); // 输出:"Hello, Alice!"


当有一个参数的时候,调用是这样的:functionName(参数)


1.3 示例代码三:带多个参数的函数

function addNumbers(a, b) {
  return a + b;
}
let result = addNumbers(3, 5);
console.log(result); // 输出:8


当函数有多个参数的时候,只需要这样调用函数:functionName(参数1,参数2…参数n)


二、函数返回值


函数返回值是函数执行完毕后返回给调用者的结果。JavaScript函数可以使用return语句返回一个值,也可以不返回任何值,此时返回值为undefined。


2.1 示例代码一:没有返回值的函数

function greet() {
  console.log("Hello, World!");
  // 没有return语句
}
let result = greet();
console.log(result); // 输出:undefined


2.2 示例代码二:带返回值的函数

function addNumbers(a, b) {
  return a + b;
}
let result = addNumbers(3, 5);
console.log(result); // 输出:8


2.3 示例代码三:返回对象的函数

function createPerson(name, age) {
  return {
    name: name,
    age: age
  };
}
let person = createPerson("Alice", 25);
console.log(person.name); // 输出:"Alice"
console.log(person.age); // 输出:25


三、函数参数的默认值:


JavaScript支持为函数参数设置默认值,当调用函数时没有传递该参数时,将使用默认值。这在部分参数值可选的场景下非常有用。

他的语法结构为:

function a(name = "Hello world")
{
  //code...
}


只需要使用"="把参数的值赋值上去就可以了,当不传参数的时候,他的值为你=后面的东西,如果你传参数,他就会变成你的传的那个值


3.1 示例代码一:设置参数的默认值

function greet(name = "World") {
  console.log("Hello, " + name + "!");
}
greet(); // 输出:"Hello, World!"
greet("Alice"); // 输出:"Hello, Alice!"


3.2 示例代码二:使用默认值的函数

function power(base, exponent = 2) {
  return Math.pow(base, exponent);
}
let result1 = power(3); // 使用默认的exponent值
console.log(result1); // 输出:9
let result2 = power(2, 4); // 传递自定义的exponent值
console.log(result2); // 输出:16


3.3 示例代码三:默认参数可以使用前面参数的值

function fullName(firstName, lastName = firstName) {
  return firstName + " " + lastName;
}
let result = fullName("Alice");
console.log(result); // 输出:"Alice Alice"


3.4 注意点

这个函数参数的默认值只能为最后n个加,你不能像下面这样加:

function a(name,age=12,body)
{
  //code...
}


这样就会有问题了!!!从而导致bug甚至是报错的出现!


总结


函数参数和返回值是编写JavaScript代码过程中至关重要的概念。通过合理使用函数参数,我们可以灵活地传递值给函数,从而实现不同的功能。而返回值则提供了函数运行完毕后返回结果的途径,帮助我们获取函数的执行结果。另外,了解和应用函数参数的默认值可以让我们编写更加健壮和易用的函数。


希望本文的介绍和示例代码能够帮助读者更好地理解和运用函数参数和返回值的概念,在编写JavaScript代码时能够写出更优雅、高效的函数。


now 现在您已经学会了JS函数的参数和返回值了,你开始在您亲爱的IDE开始像人类一样写JavaScript代码,并且非常熟练,我是人才程序猿,你们的人类JavaScript老师,我们下节课再见

相关文章
|
12天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
29 3
原生js炫酷随机抽奖中奖效果代码
|
12天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
24 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
11天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
27 7
|
11天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
17天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
174 4
|
19天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
69 6
|
15天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
45 1
|
25天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
资源调度 JavaScript 前端开发
JavaScript 包管理器工作原理简介
本文讲的是JavaScript 包管理器工作原理简介,这是个对的选择,因为 JavaScript 管理器这个大组织中出现了一个新成员,叫做 Yarn,刚刚出现,就引发了很多讨论。
1548 0