JavaScript 之函数

最新推荐文章于 2024-08-11 18:40:36 发布

盈盈、伊秋水

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量85

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/qq_56511517/article/details/126073500

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的函数，包括函数的概念、为何使用函数、何时使用函数、函数的特点、创建函数的方式（函数声明和函数表达式）、函数的调用、参数和返回值。函数用于封装重复代码，提高代码复用，通过return语句可以返回执行结果。函数参数允许传入外部数据，而返回值则可以为函数调用提供结果。

摘要由CSDN通过智能技术生成

JS中函数的概念

把一段需要重复使用的代码，用function语法封装起来，形成独立的调用单元，方便重复调用，实现比较复杂的逻辑。
简单来说，函数是一段代码，封闭的代码集合。
使用函数可以对具体实现进行隐藏/封装，只需调用函数关注结果，而不用关注函数的具体实现。
函数也叫方法。

为什么要使用函数:

将重复的代码放入函数内，在调用的时候只需要考虑调用的位置即可
将相同功能的代码写成函数，根据参数的不同，执行结果也不同，例如求和、求平方...

在什么情况下使用函数:

需要多次调用的代码
具有相同功能的代码

函数的特点:

先声明后调用
声明的位置不重要，可以在内部也可以外部，调用的位置决定了它的执行时间

函数的创建

JS中创建函数的两种方式：函数声明 和 函数表达式。

函数声明

函数声明的格式：

function 函数名 () { 
  函数体 
}

function：声明函数的关键字
函数名：函数名可包含字母、数字、下划线_ 和美元符号$（命名规则与变量名相同）。
() ：参数列表，可包括由逗号分隔的参数 (参数1, 参数2, ...)，参数是当调用函数时由函数接收的真实的值
{}：函数体，由函数执行的代码被放置在花括号中

函数表达式

函数表达式：创建一个函数，再把它赋值给一个变量（把变量名当做函数名来使用）。这样创建的函数是一种匿名函数。

匿名函数：没有名字的函数。

函数表达式的格式：

var 变量名 = function () { 
  函数体  
}

//匿名函数
(function(){
    console.log("匿名函数自执行");
})();

函数的使用

创建函数之后，函数本身并不会执行代码，只有调用函数，函数体中的代码才能执行。

调用函数

一个函数创建之后，可以被调用多次，调用函数的一般格式：函数名（）;

在事件、定时器中调用函数不需要添加()

函数之间的调用：

//如果一个函数内部直接调用自己，会产生死循环。
function enter(){
  console.log('enter函数');
  // enter();
}
enter();

// 一个函数的内部可以调用另外一个函数，但是两个函数之间不要相互调用，否则会产生死循环
function f1(){
  // f2();
  console.log("f1执行了");
}

function f2(){
  f1();
  console.log("f2执行了");
}
f2();

两种函数的区别

调用函数时，函数声明和函数表达式调用方式是一样的，不过，二者也有区别：

函数声明创建的函数，可以在任何位置调用，既可以在函数声明之前调用，也可以在函数声明之后调用
函数表达式创建的函数，只能在函数创建之后调用，否则程序会报错

我们可以把函数表达式理解为是一种变量的声明，变量声明之后才能使用，如果想要知道其区别的根本原因，需要知道函数声明提升。

// 函数声明
add(); // 调用add函数，正常执行
function add(){}
add(); // 调用add函数，正常执行


// 函数标表达式
sum(); // 调用sum函数，会报错
var sum = function (){}
sum(); // 调用sum函数，正常执行

函数的参数

函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数。

function square(x) {
  return x * x;
}

square(2) // 4
square(3) // 9

上式的x就是square函数的参数。每次运行的时候，需要提供这个值，否则得不到结果。

在创建函数时，可以在函数的参数列表中添加参数，这些参数被称为形参。
在调用函数时，需要传递相应的参数，这些参数被称为实参。
不管是函数声明还是函数表达式，都可是带参数的函数，在参数列表中写入参数
参数可以是一个，也可以是多个，多个参数之间用 , 隔开。
参数名随便起（命名规则与变量名相同）

// 创建函数
function 方法名 (参数1,参数2, ...) { 
  函数体 
}

var 变量名 = function (参数1,参数2, ...) { 
  函数体  
}

// 调用函数
函数名(参数1,参数2, ...);

函数的返回值

函数的返回值是函数执行之后的返回结果。

return语句

函数的返回值需要在函使中用return语句返回一个结果

// 创建函数
function 函数名（）{
    ...
    return  需要返回的值；
}

// 调用函数
函数名();    // 此时调用函数就可以得到函数体内 return 后面的值

// 调用具有返回值的函数，可以用一个变量来接受返回值
var result = 函数名();//result 就是函数体内 return 后面的值

默认情况下，函数是返回 undefined 的。想要返回一个其他的值，函数必须通过一个 return 语句指定返回值。
在函数中，return后定义返回值，返回值只能有一个
在函数中，return之后的代码无效，程序也不会再执行
return只能用于函数内，用在其他地方会报错

函数返回值为undefined的情况：

在函数中不添加return语句，函数返回值默认是 undefined
在函数添加了return语句，但是return后面没有跟任何返回值，函数返回值也是 undefined，这种情况相当于 return undefined;

function add(x, y) {
  return x + y;
  
  console.log("Hello world"); // 不会执行
  //注意：return之后的代码无效代码，程序也不会执行
}

var result = add(3, 4);
console.log('result：' + result);

return的作用

return只能使用在函数中，一般有两个作用：

在return后面添加返回值，函数执行到return语句会结束函数，并返回return后面的返回值
在return后面没有返回值，函数执行到return语句会结束函数，并返回 undefined。这种用法最常用于提前终止函数执行，并不是为了返回值。

所以在函数中使用return，不管是否添加了返回值，return都有结束函数的作用。

return的作用可以总结为：return是用在函数中：1、给函数添加返回值并结束函数；2、结束函数

break continue return 的区别

区别一：

break 和 continue 都是用在循环语句中（如 for、while）
return 是使用在函数中

区别二：

continue：跳出当次循环，继续执行下次循环
break：结束整个循环，走循环语句块之后的代码
return：返回 return 语句中的值，同时还可以结束当前的函数体内的代码

return注意事项

JS不允许在return关键字和表达式之间换行

function add(x, y) {
  return x + y;// 这样写返回值是对的
}

function add(x, y) {
  return 
  x + y;
  // 这种写法，程序会把return当成一个语句来执行，然后结束函数，后面的 x + y; 再也不会执行
}

var result = add(3, 4);
console.log('result：' + result);