JavaScript函数

已于 2024-08-06 11:02:00 修改
阅读量440 收藏 16
点赞数 8
分类专栏： JavaScript学习之路 文章标签： javascript 开发语言 ecmascript 前端
于 2024-08-05 18:04:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YE137950/article/details/140929355
版权

函数的定义

函数声明

语法实例

function double(n) {
    return n * 2;
}

特点：可以在函数声明前调用这个函数

调用函数

console.log(double(5)); // 输出 10
console.log(double(3.5)); // 输出 7

函数表达式

可以是匿名的表达式

const double = function(n) {
    return n * 2;
};

也可以是有名的表达式

const double = function doubleFunction(n) {
    return n * 2;
};

在函数表达式之前是不可以调用这个函数的

调用函数

console.log(double(5)); // 输出 10
console.log(double(3.5)); // 输出 7

无论匿名还是有名都可以通过double来调用这个函数

函数同样可以是一个值，被赋给一个变量，或者作为表达式中的一部分

实例

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
 

1. 使用变量存储函数的返回值

// 调用函数，并将返回值存储在变量 x 中
var x = toCelsius(77);

// 使用变量 x 来构造字符串
var text = "The temperature is " + x + " Celsius";

// 打印结果
console.log(text); // 输出: The temperature is 25 Celsius
 

2. 直接在表达式中使用函数

// 直接在字符串中使用函数调用
var text = "The temperature is " + toCelsius(77) + " Celsius";

// 打印结果
console.log(text); // 输出: The temperature is 25 Celsius

箭头函数

语法

let myFunction = (a, b) => a * b;

之前：

hello = function() {
  return "Hello World!";
}

用了箭头函数之后：

hello = () => {
  return "Hello World!";
}

如果函数只有一个语句，并且该语句返回一个值，则可以去掉花括号和 return 关键字：

箭头函数默认返回值：

hello = () => "Hello World!";

注释：这仅在函数只有一条语句时才有效。

如果有参数，则将它们传递到括号内：

带参数的箭头函数：

hello = (val) => "Hello " + val;

事实上，如果只有一个参数，也可以略过括号：

不带括号的箭头函数：

hello = val => "Hello " + val;

一个函数返回多个值

一个函数返回多个值时可以使用数组进行操作

实例

const jiantou = (n) => {

  return [n * 10, n + n + n, n * n * n];

}

console.log(jiantou(2));

返回

还可以详细要求返回哪个值

function getResult(num1, num2){
            return [num1+num2,num1-num2,num1*num2,num1/num2];
        }
        var result = getResult(4,2);//返回的是一个数组
console.log(result);
console.log(getResult(4,2)[0]);
console.log(getResult(4,2)[1]);
console.log(getResult(4,2)[2]);
console.log(getResult(4,2)[3]);

返回

函数的调用

函数调用和引用的区别。在 JavaScript 中，函数对象和函数调用是两种不同的概念：

  • 函数对象：这是指向函数本身的引用，不会执行函数。

  • 函数调用：这是使用 () 运算符执行函数，并返回函数的返回值。

实例

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

// 将函数对象引用赋值给 innerHTML
document.getElementById("demo").innerHTML = toCelsius;
</script>

</body>
</html>

这样，网页上只会显示函数的定义 function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32); }。

如果我们希望显示函数调用的结果，我们需要使用 () 运算符来执行函数：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

// 调用函数并将结果赋值给 innerHTML
document.getElementById("demo").innerHTML = toCelsius(100); // 将 100 华氏度转换为摄氏度
</script>

</body>
</html>

在这个例子中，toCelsius(100) 调用函数，并返回结果 37.77777777777778，这个结果会显示在网页上。

我是小叶啊
关注
  • 8
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript函数及其作用
weixin_44703582的博客
12-22 2061
目录 一、函数的作用 二、函数的使用 三、函数封装 四、函数的返回值 五、函数的两种声明方式 总结 一、函数的作用 在 JS 里面，我们可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。 简单来说就是： 函数封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。 二、函数的使用 在JavaScript中，每个函数其实..
JavaScript 函数学习
qq_66198247的博客
04-27 2091
一.函数的使用 函数在使用时分为两步：声明函数和调用函数 1.声明函数 function是声明函数的关键字,必须小写 由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如getSum 2.调用函数 调用的时候千万不要忘记添加小括号 口诀:函数不调用，自己不执行。 注意︰声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。 3.函数的封装 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口 简单理解:封装类似于将电
深入浅出 JavaScript 函数：从基础到进阶，全面解析函数的奥秘
weixin_63490470的博客
08-15 1594
函数的定义使用。
JavaScript 函数
Jinmy的博客
03-08 191
。。。
javascript函数式编程
04-06
JavaScript函数式编程是利用JavaScript语言编写函数式风格代码的一种编程范式。函数式编程强调使用纯函数、避免副作用、函数的不可变性以及利用高阶函数等概念。通过阅读《JavaScript函数式编程指南》，读者可以了解...
declare:明确声明Javascript函数中的参数类型
05-21
在Javascript中，声明函数时，不能对其参数类型进行任何限制。 在执行过程中，您始终必须手动检查参数的类型。 这意味着您可以使用任何类型的参数调用相同的函数。 这可能会导致无法预料的行为。 例如，根据其参数...
JavaScript函数式编程.pdf
04-09
不过，由于【标题】中提供了文档的名称——"JavaScript函数式编程.pdf"，我可以根据这个名称扩展出关于JavaScript函数式编程的知识点。 JavaScript函数式编程的知识点非常丰富，涉及很多方面的内容，下面将详细介绍...
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-27 724
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
JavaScript代码片段
weixin_66128399的博客
08-26 365
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
jQuery基础——DOM
m0_54066656的博客
08-27 1290
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 4601
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
vue ref和reactive区别
灰海
08-25 1572
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue2 part3
E___V___E的博客
08-25 882
年龄+1岁添加性别属性，默认值：男修改性别在列表首位添加一个朋友
class 2: vue.js 3 模板语法和内置指令
ComingLiu的博客
08-29 325
vue.js 3
基于Thymeleaf、bootstrap、layUI 混合前端应用
宣晨光
08-26 1082
以下代码基于Spring boot + Thymeleaf框架，前端采用BootstrapV3.3.7 LayUIV2.9.13 版本。
vue part 5
最新发布
E___V___E的博客
08-29 429
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
浏览器精度问题
m0_46281382的博客
08-25 744
浏览器如何解析后端返回的long类型的数据
日本JavaScript函数教学课件详解：背景色与样式控制
这个日语版的JavaScript函数教学课件深入浅出地介绍了函数的概念、基本用法以及一些实用的功能实现，包括对HTML元素样式控制的示例，有助于学习者理解JavaScript的函数机制，并掌握如何在实际项目中灵活运用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值