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地址),文章请勿滥用,也希望大家尊重笔者的劳动成果。

相关文章
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
72 3
|
3月前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
9天前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
|
2月前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
38 4
js学习--制作猜数字
|
2月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
48 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
3月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
3月前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
该文章跟随月影老师的指导,探讨了编写优质JavaScript代码的三大原则:各司其职、组件封装与过程抽象,通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
|
2月前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
37 4
|
2月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
20 2
|
2月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
19 2
下一篇
无影云桌面