JavaScript学习之旅-6(原创)

简介: 在上一篇文章中,我们主要学习了JavaScript中的Map和Set,以及如何通过 for ...of 去遍历Array、Set、Map;for ... in与for ... of的区别;如何使用forEach去遍历。

在上一篇文章中,我们主要学习了JavaScript中的Map和Set,以及如何通过 for ...of 去遍历Array、Set、Map;for ... in与for ... of的区别;如何使用forEach去遍历。这一篇文章我主要学习JavaScript中,如何定义函数(也称方法),使用函数,如何规避传参的风险。

定义函数:

在JavaScript中,我们定义函数有两种方式,首先看方式一:


img_4795da12e6c0ffd8178ff5dc502d0b38.png
方式一

上述methodName()函数的定义如下:

function 关键词表示我们定义了一个函数;

methodName 是函数的名称;

(x)括号内列出函数的参数,多个参数以,(逗号)分隔;

{ ... }之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句。

请注意,函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回。

因此,函数内部通过条件判断和循环可以实现我们自己的业务逻辑。

如果没有return语句,函数执行完毕后也会返回结果,只是结果为undefined。

特别注意:JavaScript有一个在行末自动添加分号的机制,这可能让你栽到return语句的一个大坑,

function m(){

return{ name:'f' } ;

}

f() ; // { name: 'f' }

如果把return语句拆成两行(也就是 return放在单独的一行):

function m(){

return

{ name:' f '};

}

f() ; // undefined

要小心了,由于JavaScript在行末会自动为我们添加分号,上面的代码实际上变成了:

function m(){

return ;

// 自动添加了分号,相当于return undefined ; { name : 'f' };// 这行语句已经没法执行到了 }

所以正确的多行写法是:

function m(){

return{

// 这里不会自动加分号,因为 { 表示语句尚未结束

name:'f'};

}


由于JavaScript的函数也是一个对象,上述定义的methodName() 函数本质上就是一个函数对象,而函数名methodName可以视为指向该函数的变量。


img_631d98c6569a3083740342e77ee54ac0.png
方式二

在这种方式下,function (x) { ... }是一个匿名函数,它没有函数名。但是,这个匿名函数赋值给了变量methodName,所以,通过变量 methodName 就可以调用该函数。

上述两种定义完全等价,注意第二种方式按照完整语法需要在函数体末尾加一个 ; (分号),表示赋值语句结束。

使用函数:

使用函数的方式,我们可以直接这样(如下图所示)

img_890c57142ac5cd62e6fa2999479492d5.png
使用函数

由于JavaScript允许传入任意多个参数而不影响调用,那么问题就来了,如果我们传入多个参数,或者不传参数,又或者想规避传参的风险,这该如果去做?

1)如果我们传入多个参数:


img_31a871033524917eb9d16544c8289f20.png
传入多个参数

经试验证明,我们传递多个参数(methodName只需要一个参数),但是函数内部最终还是只选择了第一个参数,

2)如果我们不传参数:


img_a4ac12cb5d7deb4a1cbc1e51fe247630.png
不传参数

经试验证明,我们不传参数,函数最终只会显示  undefined

3)如何规避这种传参的风险?

我们能否在执行函数前,对参数进行一些检查:

JavaScript为了解决在函数使用前对参数进行一些检查,提供了一个关键字,叫 arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array,利用arguments,我们可以获得调用者传入的所有参数。也就是说,即使函数不定义任何参数,还是可以拿到参数的值,如下图:


img_ecebf8d69e40f37c789b525677f4ea20.png
arguments

我们在调用 methodName的时候,放入了3个参数,分别是 1 2 3,然后在方法执行的时候,arguments首先会遍历我们传递的参数,这样我们就可以根据arguments去进行对应的逻辑判断了,比如对参数的长度进行判断,对参数进行过滤等等。

JavaScript学习之旅-3我们提到过变量的概念。 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。我们可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕,本地变量就会被删除。在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

本篇文章关于函数的定义和使用,如何通过arguments去规避传参风险的内容就结束了。

未完待续。。。

如果这篇文章对你有帮助,希望各位看官留下宝贵的star,谢谢。

Ps:著作权归作者所有,转载请注明作者, 商业转载请联系作者获得授权,非商业转载请注明出处(开头或结尾请添加转载出处,添加原文url地址),文章请勿滥用,也希望大家尊重笔者的劳动成果。

相关文章
|
10天前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
20 4
|
18天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学生网课学习效果评价附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学生网课学习效果评价附带文章源码部署视频讲解等
36 2
|
19天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的语言课学习系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的语言课学习系统附带文章源码部署视频讲解等
17 3
|
18天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的中医学习服务管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的中医学习服务管理系统附带文章源码部署视频讲解等
24 1
|
18天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的在线学习过程管理系统软件附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的在线学习过程管理系统软件附带文章源码部署视频讲解等
14 1
|
18天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
17 0
|
18天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生国学自主学习平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生国学自主学习平台附带文章源码部署视频讲解等
19 0
|
21天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的英语学习交流平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的英语学习交流平台小程序附带文章源码部署视频讲解等
21 0
|
21天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的学习资源推送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的学习资源推送系统附带文章源码部署视频讲解等
17 0
|
21天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的可视化的学习系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的可视化的学习系统附带文章源码部署视频讲解等
14 0