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 条评论
登录 后参与评论

相关文章

来自专栏web前端-

JavaScript基础概述

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

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

Golang学习笔记 方法和接口

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

2388
来自专栏运维小白

9.3 grep(下)

grep用法 grep 'r.o' test.txt grep 'oo*' test.txt grep '.*' test.txt grep 'o{2}' /e...

1855
来自专栏Golang语言社区

浅析Go语言中的Range关键字

前言 相信用过Range的朋友们都知道,Go语言中的range关键字使用起来非常的方便,它允许你遍历某个slice或者map,并通过两个参数(index和val...

3639
来自专栏云霄雨霁

追踪分析解决办法

1400
来自专栏与神兽党一起成长

前序遍历树

代码来自:pickle and cPickle – Python object serialization 首先树的结构,如图

1472
来自专栏C/C++基础

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

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

1292
来自专栏函数式编程语言及工具

Scalaz(2)- 基础篇:随意多态-typeclass, ad-hoc polymorphism

  scalaz功能基本上由以下三部分组成: 1、新的数据类型,如:Validation, NonEmptyList ... 2、标准scala类型的延伸类型,...

2177
来自专栏GreenLeaves

JS框架设计之对象类型判断一种子模块

Javascript有两套数据类型,一套是基础数据类型,一套是对象数据类型。基础数据类型包括5种基本数据类型,分别是null,bool,undefined,nu...

1958
来自专栏PHP在线

12个非常实用的JavaScript小技巧

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

3518

扫码关注云+社区