如何像人类一样写JavaScript代码(包会)之函数基本使用

简介: 如何像人类一样写JavaScript代码(包会)之函数基本使用

前言


JavaScript是一种广泛使用的编程语言,但对于初学者来说,理解和使用函数可能是一个挑战。本文将向您介绍什么是函数,以及如何声明和调用它们。通过通俗易懂的比喻和示例代码,您将掌握函数的基本使用方法,并像人类一样写JavaScript函数!!!


一、函数是什么?


函数可以被视为一套操作步骤的组合,它能够接受输入并产生输出。就像制作三明治一样,我们需要一些原料(输入),通过一系列步骤(函数内的操作)进行加工,最后得到成品(输出)。


二、函数声明:


在JavaScript中,我们使用关键词 function 来声明一个函数。函数声明有一个函数名和一套操作步骤。比如,我们可以声明一个名为 makeSandwich 的函数,用来制作三明治。

function makeSandwich()
{
  //code...
}


29943e6767144686973c2cfbfc12e232.png


三、函数调用:


函数声明只是定义了函数的操作步骤,并不会真正执行它。要执行函数,我们需要调用它。调用函数的过程就像按照之前定义的操作步骤制作三明治。


3.1 简单函数示例:

下面是几个简单函数的示例代码,帮助您更好地理解函数的使用:


a. 函数声明:

function makeSandwich() {
   // 制作三明治的步骤
   // ...
}


711167498e9e4aa9b1a527bc8c1f8a7f.png

使用function关键字+()+{}即可声明一个函数


b. 函数调用:

makeSandwich();


27daef32cb1049319d99fb0f485b4e2e.png

直接使用函数名+()即可调用


c. 打印信息的函数:

function printMessage() {
   console.log("Hello, world!");
}
printMessage();


306b62948e9440a6bff3208e4dc1a21f.png

d. 计算乘法的函数:

function multiplyNumbers() {
   var result = 2 * 3;
   console.log(result);
}
multiplyNumbers();


85504ec866e54231aff421d4912a6f21.png

e. 打招呼函数:

function sayHello() {
  console.log("Hello! How are you?");
}
sayHello();


b562975c37be46e69e88559d998ad35f.png

该函数名为 sayHello,它没有任何参数,并且在函数体内打印了一条问候信息。函数通过调用 sayHello() 来执行,调用后会在控制台输出问候语。


f. 显示当前时间函数:

function showCurrentTime() {
  let now = new Date();
  console.log("Current time is: " + now.toLocaleTimeString());
}


cfd5819608b347f49cf863fe0d76b13d.png

showCurrentTime();

该函数名为 showCurrentTime,它没有任何参数。函数体内创建了一个 Date 对象来获取当前时间,并通过 toLocaleTimeString() 方法将其格式化为可读的时间字符串。最后,函数调用 showCurrentTime() 执行,以显示当前时间在控制台中。


这两个函数示例展示了无参数无返回值的函数。它们没有接受任何输入(参数),并且不会返回结果。相反,它们通过执行内部的一些操作来实现所需的功能。在上述示例中,函数体内的代码负责打印问候语和当前时间的信息。


这些简单的函数可以作为代码块的组合,使我们能够更好地组织和复用代码。调用函数将触发函数体内的操作,帮助我们实现特定的功能和任务。


总结


now 现在您已经学会了JS函数,请你开始在您亲爱的IDE开始像人类一样写代码,我是xxxx,我是你们的人类JavaScript老师,我们下节课再见…

相关文章
|
20天前
|
JavaScript
|
1天前
|
JavaScript 前端开发 开发工具
【JavaScript 与 TypeScript 技术专栏】TypeScript 如何提升 JavaScript 代码的可读性与可维护性
【4月更文挑战第30天】TypeScript 提升 JavaScript 代码的可读性和可维护性,主要通过静态类型系统、增强代码组织、智能提示与错误检测、文档化和在大型项目中的优势。静态类型减少误解,类和接口提供结构,智能提示提高编码效率,类型注解充当内置文档。在大型项目中,TypeScript 降低理解差异,平滑迁移现有 JavaScript 项目,助力提高开发效率和项目质量。
|
2天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
3天前
|
存储 JavaScript 前端开发
每日一道javascript面试题(九)函数的参数可以和函数体中的变量重名吗
每日一道javascript面试题(九)函数的参数可以和函数体中的变量重名吗
|
3天前
|
JavaScript 前端开发
每日一道javascript面试题(七)你真的知道箭头函数吗
每日一道javascript面试题(七)你真的知道箭头函数吗
|
8天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停/恢复功能的特殊函数,利用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。例如,一个简单的Generator函数可以这样表示: ```javascript function* generator() { yield 'Hello'; yield 'World'; } ``` 创建实例后,通过`.next()`逐次输出"Hello"和"World",展示其暂停和恢复的特性。
18 0
|
8天前
|
JavaScript 前端开发 算法
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
在开发中,采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,能很好的提高代码的质量。可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,降低理解代码的难度,提高代码的可读性。可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以更快速地定位和修复bug,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。可扩展性:更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
|
9天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
10 0
|
15天前
|
缓存 JavaScript 前端开发
js的入口函数,入口函数的作用
js的入口函数,入口函数的作用
16 4
|
15天前
|
JavaScript
js校验统一社会信用代码
js校验统一社会信用代码
19 0