专栏首页学习猿地Web前端学习 第3章 JavaScript基础教程6 函数基础
原创

Web前端学习 第3章 JavaScript基础教程6 函数基础

一、函数的基本概念

函数是一个可执行的语句块,定义的时候不执行,调用的时候执行,使用"函数名()"的形式可以调用函数, 语法如下所示:

1 function fun(){   //定义函数,函数名为fun
2     //函数体
3 }
4 fun();            //调用函数

我们先来编写第一个最简单的函数,当这个函数执行的时候会在控制台输出"hello function" 示例代码如下:

1 function fun(){
2     console.log("hello function")
3 }
4 fun(); 

在上面的代码中我们定义了一个函数,并调用了一次,这样就会在控制台输出一次“hello function”。我们在编程的过程中,很多代码是需要多次使用的,我们可以把它们写在一个函数中,这样我们每次希望执行这些代码的时候,只需要调用这个函数,而不是复制-粘贴多次代码。

二、参数

下面编写一个函数sum,输出10和20两个数之和 示例代码如下:

1 function sum(){
2     var num1 = 10;
3     var num2 = 20;
4     var result = num1 + num2;
5     console.log(result);
6 }
7 sum();

在上面例子中我们调用sum函数,可以成功在控制台输出计算结果,但是函数内部的代码是固定的,虽然可以多次使用,但是每次使用输出的都是10和20的加和,为了让函数更加灵活,我们希望实现一个函数可以计算任意两个数的加和,那么我们就需要了解函数是如何传递参数的。

下面一个简单的例子演示函数如何传递参数 示例代码如下:

1 function fun(str){
2     console.log("hello" + str);
3 }
4 fun("world");

在定义函数的括号中,我们添加了一个参数str,这个参数叫做形参。它在函数内部像一个变量一样。但是在函数调用之前他是没有值的。当调用函数的时候,调用函数的括号中我们也添加了一个参数"world",这个参数叫做实参,他可以是任意数据类型的值。函数被调用后,形参str被赋予了实参"world"的值,然后执行console.log便会在控制台输出"helloworld"

上面的函数有一个形参和一个实参,函数可以传递多个参数,用逗号间隔 示例代码如下:

1 function sum(num1,num2){
2     console.log(num1 + num2);
3 }
4 sum(10,20);

当我们调用函数的时候,实参和形参是一一对应的,10对应的是num1,20对应的是num2,函数执行后会在控制台输出10和20的加和。

下面我们来编写一个函数,它有一个正整数参数n,当我们调用函数时,函数会输出包括n在内,1~n所有正整数的加和 示例代码如下:

1 function sum(n){
2     var sum = 0;
3     for(var i = 0;i<=n;i++){
4         sum += i;
5     }
6     console.log(sum);
7 }
8 sum(100);
9 sum(567);

我们通过一个函数规定了一种计算方式,我们使用函数的只要输入一个值,函数就会计算出一个准确的结果。

三、返回值

在上面的例子中,我们输入了一个参数,函数就可以在控制台输出我们希望得到的结果,但是在实际开发中,很多情况我们要的不是在控制台输出得到的结果,而单纯的只是为了获取这个值,那么我们就需要用到函数的返回值。

在函数中,我们可以通过return关键字指定一个返回值,函数有了return,当函数被调用的时候就可以把调用的结果赋值给另一个变量了 示例代码如下:

 1 function fun1(){
 2     
 3 }
 4 
 5 function fun2(){
 6     return "hello fun";
 7 }
 8 
 9 var str1 = fun1();
10 var str2 = fun2();
11 
12 console.log(str1);  //输出undefined
13 console.log(str2);  //输出"hello fun"

在上面的例子中,函数fun1没有返回值,所有将fun1调用的结果赋值给str1,str1的值为undefined,函数fun2有返回值,返回值是"hello fun",所以当fun2被调用后,将函数运行的结果赋值给str2,str2的值就是"hello fun"

下面我们来编写一个函数,让函数来计算四则运算的结果

 1 function count(num1,sign,num2){
 2     var result = 0;
 3     switch(sign){
 4         case "+":result = num1 + num2;break;
 5         case "-":result = num1 - num2;break;
 6         case "*":result = num1 * num2;break;
 7         case "/":result = num1 / num2;break;
 8         default:console.log("请输入真确的操作符")
 9     }
10     return result;
11 }
12 console.log(count(10,"*",20));

四、函数表达式

1 var functionName=function(arg){
2       //函数体
3 }

这种形式看起来好像是常规的变量赋值语句,即创建一个函数并将它赋值给变量functionName。这种情况下创建的函数叫做匿名函数。因为function关键字后面没有标识符。

函数表达式与其他表达式一样,在使用之前必须先赋值;如下面代码就会导致错误;

1 helloworld(); //错误,还未赋值,函数不存在
2 
3 var helloworld=function(){
4     console.log("hello world");
5 }

有了函数表达式,我们就可以给函数表达式赋值了;如下面代码:

 1 var helloworld; //声明
 2 if(condition){ //条件
 3    helloworld=function(){ //赋值
 4        console.log("hello world"); 
 5    }
 6 }
 7 else{
 8     helloworld=function(){ //赋值
 9        console.log("你好,世界");
10     }
11 }

五、函数声明提升

1 func()
2 function func () {
3 }

上例不会报错,正是因为 ‘函数声明提升’,即将函数声明提升(整体)到作用域顶部(注意是函数声明,不包括函数表达式),实际提升后结果同下:

1 // 函数声明提升
2 function func () {
3 }
4 func()

六、作用域

在 JavaScript 中, 对象和函数同样也是变量。 在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。 JavaScript 函数作用域: 作用域在函数内修改。

局部作用域

变量在函数内声明,变量为局部作用域。 局部变量:只能在函数内部访问。

1 // 此处不能调用 carName 变量
2 function myFunction() {
3     var carName = "Volvo";
4     // 函数内可调用 carName 变量
5 }

因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。 局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。

全局变量

变量在函数外定义,即为全局变量。 全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

1 var carName = " Volvo";
2  
3 // 此处可调用 carName 变量
4 function myFunction() {
5     // 函数内可调用 carName 变量
6 }

如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。 以下实例中 carName 在函数内,但是为全局变量。

1 // 此处可调用 carName 变量
2  
3 function myFunction() {
4     carName = "Volvo";
5     // 此处可调用 carName 变量
6 }

七、课后练习
  1. 定义一个函数,参数为x,返回值为1至x(包括x)之间所有正整数的加和。
  2. 定义一个函数 参数为x, 返回值为1至x(包括x)之间所有奇数的加和。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【融职培训】Web前端学习 第3章 JavaScript基础教程6 函数基础

    函数是一个可执行的语句块,定义的时候不执行,调用的时候执行,使用"函数名()"的形式可以调用函数, 语法如下所示:

    学习猿地
  • Python模块化编程-高阶函数#学习猿地

    > 如果在一个函数中要求传递的参数是一个函数作为参数,并且在函数中使用了传递进来的函数,那么这个函数我们就可以称为是一个回调函数

    学习猿地
  • Python模块化编程-高阶函数#学习猿地

    > 如果在一个函数中要求传递的参数是一个函数作为参数,并且在函数中使用了传递进来的函数,那么这个函数我们就可以称为是一个回调函数

    学习猿地
  • 前端学习(33)~js学习(十):函数

    从方式二的举例中可以看出:所谓的“函数表达式”,其实就是将匿名函数赋值给一个变量。

    Vincent-yuan
  • 【融职培训】Web前端学习 第3章 JavaScript基础教程6 函数基础

    函数是一个可执行的语句块,定义的时候不执行,调用的时候执行,使用"函数名()"的形式可以调用函数, 语法如下所示:

    学习猿地
  • C语言之函数

      结构化程序设计主张按功能来分析需求,主要原则自顶向下,逐步求精,模块化等。 主张按功能把软件系统逐步细分,每个功能都负责对数据进行一次处理,每个功能接收一些...

    互联网金融打杂
  • 函数

    在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。

    星辰_大海
  • 学会使用函数式编程的程序员(第1部分)

    在这篇由多部分组成的文章中,接下来将介绍函数式编程的一些概念,这些概念对你学习函数式编程有所帮助。如果你已经懂了什么是函数式编程,这可以加深你的理解。

    前端小智@大迁世界
  • Kotlin学习之高阶函数和Lambda表达式的基础用法

    Kotlin学习之高阶函数和Lambda表达式的基础用法 一、定义和调用高阶函数的写法 kotlin.collections._Arrays.kt中的mapTo...

    企鹅号小编
  • 机器学习中的数学:为什么对数如此重要

    当然,如果你是一个忙碌的人,没有时间去健身房,把楼梯当作是有氧运动的简易版,那么走楼梯会更好。但是除此之外,你更可能选择乘电梯。

    deephub

扫码关注云+社区

领取腾讯云代金券