JavaScript 函数

Unsplash

通常来说,一个函数就是一个可以被外部代码调用(或者函数本身递归调用)的"子程序",和程序本身一样,一个函数的函数体是由一系列的语句组成的,函数可以接收传入参数,也可以返回一个值

在 JavaScript 中,函数是第一等对象,不仅因为它既可以像普通对象一样拥有属性和方法,而且重要的是它可以被调用,简单来说它们是 Function 对象

1. 函数声明

函数不同于过程,函数总是会返回一个值,但是一个过程有可能返回一个值,也有可能不返回,如果一个函数中没有使用 return 语句,则它默认返回 undefined,要想返回一个特定的值,则函数必须使用 return 语句来指定一个所要返回的值(使用 new 关键字调用一个构造函数除外),return 之后的语句不再执行

name 函数名;param 传递给函数的参数的名称,一个函数最多可以有 255 个参数;statements 组成函数体的声明语句

使用函数名 + (),即可完成函数的调用,下面通过几个例子来加深对函数的理解

function name([param,[, param,[..., param]]]) {
  statements
}
//函数的声明
function say(name) {
    alert(name + "你好呀");
}
//函数调用
say("Nian糕");
var str = say("抹茶松糕");

运行结果 1

运行结果 2

绝对值

function abs(num) {
  if (num < 0) {
    return -num;
  }
  return num;
}
console.log(abs(-10));

运行结果

1 - 100 的累加

var result = 0;
function add(n) {
  for (var i = 0; i <= n; i++) {
    result = result + i;
  }
  return result;
}
console.log(add(100));

运行结果

2. 函数表达式

函数表达式和函数声明非常相似,它们甚至有相同的语法,不过,要记住的是,函数调用必须放在表达式赋值之后

name 函数名,可以省略,当省略函数名的时候,该函数就成为了匿名函数;param 传递给函数的参数的名称,一个函数最多可以有 255 个参数; statements 组成函数体的声明语句

function [name]([param] [, param] [..., param]) { statements }
//函数表达式
var say = function() {
  alert("Nian糕");
}

3. 函数提升

我们在上面提到,函数调用必须放在表达式赋值之后,那函数的调用是不是也要放在函数声明之后呢,我们来试试看

运行结果

在上面的这个例子中,我们先调用了函数,然后再对函数进行声明,而函数确实能够调用,并执行了里面的函数,至于为什么会这样,是因为在 JS 当中,不管函数在哪个位置,都默认将函数整体提升到作用域顶部,该作用域包括全局作用域、函数作用域,同样提升的还有变量,但是函数整体在变量整体的后面,不过,只有声明式函数才会被提升,字面量函数不会被提升

变量 / 函数提升

我们在定义左图的变量及函数时,它实际上的解析顺序是像右图那样的,先对变量进行声明,然后再赋值,并非声明的同时就赋值

左图 运行结果

右图 运行结果

我们再来看一个例子

变量 / 函数提升

左图 运行结果

右图 运行结果

4. 练习

接下来我们来设计一个函数,使其能够判断某一年份是否为闰年,符合下面两个条件之一的年份就是闰年:1. 能被 4 整除,但不能被 100 整除;2. 能被 4 整除,又能被 400 整除,因为能够被 400 整除一定能被 4 整除,所以,第二个条件可以简化为能够被 400 整除

function isLeapYear(num) {
  if ((num % 4==0 && num % 100!=0)||(num % 400==0)) {
    console.log(num + "是闰年");
  }else {
    console.log(num + "不是闰年");
  }
}

运行结果

接下来这个例子,我们通过使用函数,来完成一个块的隐藏跟显示的效果,这一效果在网页中的运用也是比较常见的

<style type="text/css">
  #box {
    height: 100px;
    width: 100px;
    background-color: lightblue;
  }
</style>
<button id="btn">显示/隐藏</button>
<div id="box"></div>
<script type="text/javascript">
  //获取元素节点
  var btn = document.getElementById("btn"); 
  var box = document.getElementById("box");

  btn.onclick = function () {
    if (box.style.display === "block") {
      box.style.display = "none";
    }else {
      box.style.display = "block";
    }
  }
</script>

运行结果

使用布尔值完成判断,照样能够实现 “显示/隐藏” 效果

var btn = document.getElementById("btn"); 
var box = document.getElementById("box");

var isShow = true; //控制 block 显示/隐藏的布尔值
btn.onclick = function () {
  isShow = !isShow;
  if (isShow) {
    box.style.display = "block";
  }else {
    box.style.display = "none";
  }
}

运行结果

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Golang指针与nil浅析

曾经听说过一句话,编程的本质就是指针和递归。那会刚开始编码,只是这两个的概念有个感性粗浅的认识。最早接触指针,莫过于C语言了,能否理解用好指针也成为一个合格C语...

31360
来自专栏Java进阶之路

Java8使用并行流(ParallelStream)注意事项

2.7K00
来自专栏C/C++基础

C/C++文字常量与常变量

在C/C++编程时,经常遇到以下几个概念:常量、文字常量、字面常量、符号常量、字符常量、常变量、字符串常量等,网上的资料描述的不尽相同,弄得大家云里雾里。本文将...

14820
来自专栏编程

从零开始学正则

问题:我怎么才能收到你们公众号平台的推送文章呢? 正则规范 正则表达式的英文是regular expression简称regex。正则表达式就是用事先定义好的一...

20080
来自专栏Golang语言社区

Golang方法和接口

在编程语言中,方法和函数的概念需要搞清楚。函数指的是一个封装的代码块,我们可以直接调用它,并返回结果。而方法其实也是一种函数,只不过方法需要和某个对象绑定。Go...

35450
来自专栏Golang语言社区

厚土Go学习笔记 | 18. 数组

数组由一组数据类型相同的值组成。 定义一个整数数组 var a [10]int 这个数组由10个整数组成的。 数组的长度是其类型的一部分,因此数组不能改变大小。...

35050
来自专栏乐百川的学习频道

Golang学习笔记 方法和接口

在编程语言中,方法和函数的概念需要搞清楚。函数指的是一个封装的代码块,我们可以直接调用它,并返回结果。而方法其实也是一种函数,只不过方法需要和某个对象绑定。Go...

24980
来自专栏web前端-

JavaScript基础概述

    1.常量: 常量就是在程序运行过程中,不会发生变化的量,常量通常用来表示固定不变的量,比如圆周率,万有引力常量

8620
来自专栏PHP在线

12个非常实用的JavaScript小技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。 使用!!操作符转换布尔值 有时候我们...

36080
来自专栏Golang语言社区

Golang方法和接口

在编程语言中,方法和函数的概念需要搞清楚。函数指的是一个封装的代码块,我们可以直接调用它,并返回结果。而方法其实也是一种函数,只不过方法需要和某个对象绑定。Go...

37170

扫码关注云+社区

领取腾讯云代金券