JavaScript入门(part9)--函数

学习笔记，仅供参考，有错必纠

参考自：pink老师教案

文章目录

JavaScript入门
- 函数
- - 函数的概念
  - 函数的使用
  - 函数的参数
  - 函数的返回值
  - arguments的使用
  - 函数的两种声明方式

JavaScript入门

函数

函数的概念

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

函数的使用

声明函数

// 声明函数
function 函数名() {//函数体代码
}

调用函数

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

注意，声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

函数的封装

函数的封装就是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口，封装类似于将电脑配件整合组装到机箱中。

函数的参数

形参与实参

形参，形式上的参数，是函数定义时设置的，可以简单理解为：不用声明的变量，形参的默认值为undefined；

实参，实际上的参数，是函数调用时传入的真实数据。

参数的作用

在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

函数参数的运用

// 带参数的函数声明
function 函数名(形参1, 形参2, 形参3...) { // 可以定义任意多的参数，用逗号分隔// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

调用的时候实参值是传递给形参的，实参和形参的多个参数之间用逗号,分隔。

函数形参与实参数量不匹配

函数的返回值

return语句

函数执行完成后，可以利用return语句将指定数据返回.

// 声明函数
function 函数名(){...return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

在使用return语句时，函数会停止执行，并返回指定的值；如果函数没有return，返回的值是undefined。

break ,continue ,return 的区别

break ：结束当前的循环体；

continue ：跳出本次循环，继续执行下次循环；

return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码。

arguments的使用

当不确定有多少个参数传递的时候，可以用arguments来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点：

具有length属性
按索引方式储存数据
不具有数组的push , pop 等方法

注意！在函数内部使用该对象，用此对象获取函数调用时传的实参。

举个例子

HTML页面：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据类型</title><script>function demo1() {console.log(arguments);console.log(arguments.length);console.log(arguments[1]);}demo1(10, 20, 30);</script></head><body></body></html>

控制台：

函数的两种声明方式

自定义函数方式(命名函数)

利用函数关键字function自定义函数方式：

// 声明定义方式
function fn() {...}
// 调用
fn();

因为有名字，所以也被称为命名函数，调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面。

函数表达式方式(匿名函数)

利用函数表达式方式的写法如下：

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function() {...};
// 调用的方式，函数调用必须写到函数体下面
fn();

因为函数没有名字，所以也被称为匿名函数，这个fn里面存储的是一个函数，函数表达式方式原理跟声明变量方式是一致的，函数调用的代码必须写到函数体后面。

JavaScript入门(part9)--函数相关推荐

BCSP-玄子前端开发之JavaScript+jQuery入门CH02_JavaScript函数
BCSP-玄子前端开发之JavaScript+jQuery入门CH02_JavaScript函数 4.2 函数 4.2.1 什么是函数类似于Java中的方法,是完成特定任务的代码语句块特点使用更 ...
JavaScript高阶函数快速入门
高阶函数 (Higher-Order Functions) A function that accepts and/or returns another function is called a hi ...
《jQuery与JavaScript入门经典》——第 1 章　动态Web编程简介 1.1理解Web服务器浏览器范式...
本节书摘来自异步社区<jQuery与JavaScript入门经典>一书中的第1章,第1.1节,作者:[美]Brad Dayley著,更多章节内容可以访问云栖社区"异步社区&quo ...
javascript入门 - 1
首先要分清:javascript是用于网页的一种脚本语言,Java是一种编程语言:Java一般俗称用于后端,javascript用于前端(页面上): 看一下基本的javascript程序: <! ...
JavaScript入门(part12)--内置对象
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门内置对象 Math对象日期对象数组对象字符串对象 JavaScript入门内置对象 Math对象 ...
JavaScript入门(part11)--对象
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门对象创建对象的三种方式利用字面量创建对象利用 new Object 创建对象利用构造函数创建对象 n ...
JavaScript入门(part10)--作用域
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门作用域作用域概述全局作用域局部作用域变量的作用域全局变量局部变量全局变量和局部变量的区别作用 ...
JavaScript入门(part4)--简单数据类型
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门简单数据类型数字型number 数字型范围数字型三个特殊值函数isNaN 字符串型string 布尔型 ...
Javascript学习之函数(function)
http://www.cnblogs.com/royalroads/p/4418587.html 在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例,而且都与其 ...