JavaScrpit入门(三)-函数
一、何为函数?
JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。
这里采用w3school-JavaScript函数给的定义。
使用函数,能有效时结构高内聚、低耦合。
在JavaScript中函数作为一种引用变量存在,在特性上颇具特色。
二、学习函数须知
- 函数也是一种数据类型,被划为为引用类型变量
- 开发命名规范:当多个单词拼写在一起时,第一个单词小写,其余单词许首字母大写。
- loadingFile()、keepClick()、isEmpty();
- 小括号放参数。以下为函数的两种形式
- JavaScript中函数的实参(实际参数)个数和形参(形式参数)个数不一定要相同。(该点在本文章内会介绍->五、函数的组成->1. 函数的参数)
- return 会停止函数执行,并返回值。
三、命名函数表法式
在此,用例子来更好的说明
/*
var 函数(变量)名 = function [表达式名](){
执行的语句;
....
....
....
}
*/
var test = function abc(){
console.log("hello world");
}
// 在此情况下,调用函数需test()调用
// 此时test.name为abc
//抑或是:
//此种方式为常用方法
//demo 为函数变量
//demo.name 为demo
//调用函数为demo()
var demo = function(){
return 0;
}
// test为该函数体,在控制台输入test会返回
/*
ƒ abc() {
console.log("hello world");
}
*/
控制台输入test时,附图
四、一般函数
/*
var 函数(变量)名 = function(){
执行的语句;
....
....
....
}
*/
//此种方式为常用方法
//demo 为函数变量
//demo.name 为demo
//调用函数为demo()
function demo(){
return 0;
}
五、函数的组成
1. 函数(变量)存在的属性
在此仅介绍几个(此处假设函数变量名为demo):
- demo.length 为函数的形参个数
其次,在函数内部可以调用的属性
- arguments[](形参列表) 为引用的数组类型,其用于存储实参。
- arguments[0],为第一个实参的值(存在的话)
- arguments.length 为传递实参的个数
- demo[](实参列表) 为引用的数组类型,其用于存储形参。
- demo[0] ,为第一个形参的参数的值(存在的话)
- demo.length 为传递形参的个数。
附:正因为有该种属性的存在,使得JavaScript函数的实参的形参数目可以不同,⬇。
2. 函数的参数
//在函数声明定义的参数为形参,以下a,b,c为形参
var demo = function(a,b,c){
return a+b+c;
}
//在调用函数时的参数为实参,3、4、5为实参
var result = demo(3,4,5);
在JavaScript中,颇具特色的一点为其函数的实参个数与形参的个数不一定要相同,可以不同。
在函数调用时,实参和形参调用时,存在一定的映射关系,其具体规则如下。
//函数在调用时,形参列表仅当对应位置存在实参时,才会映射值;
//例如
var demo = function (a,b,c,d){
for(var i=0; i < arguments.length;i ++){
document.write(arguments[i]);
}
}
demo(1,2);//此时输出为1 2.arguments[]有1 2 demo[0],demo[1]分别为1、2 ,其余为undefined
demo(1,2,3,4,5);//此时输出为1 2 3 4 5,arguments[]有1 2 3 4 5;demo[]有1 2 3 4 5
demo(1,2,3,4,5,6);//此时输出为1 2 3 4 5 6,arguments[]有1 2 3 4 5 6;demo[]有1 2 3 4 5
3.函数相关题目及参考代码
以下为函数.html 文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
</head>
<body>
<script>
/*
函数说明:
此为对于四个问题的函数,函数的调用与输入、输出均在网页的控制台操作.
例如:在页面点击右键后,点击检查(或者按F12),即可看到控制台,输入即可
文章末会附教程相关图。
*/
//示例,在控制台输出
console.log("控制台在此输出,其余函数均为调用还未输入,如不明白控制台怎么使用情况文章末步骤");
//示例:在控制台输出hello world
var test = function abc() {
console.log("hello world");
}
// 1.写一个函数,输出告知的动物的叫声
var animalVoice = function(animal) {
var voice = "未知声音";
if (animal == "老鼠") {
voice = "吱吱";
} else if (animal == "猫") {
voice = "喵喵";
} else if (animal == "狗") {
voice = "汪汪";
}
return voice;
}
// 2.累加器
var sum = function() {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
// 3.输入数字,逆转并且输出汉字形式
var han = function(a) {
switch (a) {
case 1:
return "一";
case 2:
return "二";
case 3:
return "三";
case 4:
return "四";
case 5:
return "五";
case 6:
return "六";
case 7:
return "七";
case 8:
return "八";
case 9:
return "九";
case 0:
return "零";
}
}
var reseverHan = function(num) {
var c;
var str = "";
do {
c = num % 10;
num = parseInt(num / 10);
str += (han(c));
} while (num > 0);
return str;
}
//4.输出n!
var factorial = function(n) {
if (n == 1)
return 1;
else
return n * factorial(n - 1);
}
//5.输出1-n位斐波那契数列
var Fibonacci = function(n) {
var result = "";
var first = 1;
var second = 1;
if (n >= 1)
result += first + " ";
if (n >= 2)
result += second + " ";
for (var i = 3; i <= n; i++) {
var t = first + second;
first = second;
second = t;
result += second + " ";
}
return result;
}
</script>
</body>
</html>
六、浏览器-控制台的相关使用
示例(基于函数.html文件):
-
- 页面内右键点击检查或者F12
- 页面内右键点击检查或者F12
-
- 点击控制台
- 点击控制台
-
- 在控制台调用函数使用
- 在控制台调用函数使用
以上,此为本人学习过程中的笔记,可能因为能力不足存在一些不足,还请大家多多包涵和给予建议,共同进步。如有问题,敬请私信。