JavaScript函数及应用

简介: JavaScript函数及应用

函数


什么是函数


把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用


函数的作用就是封装一段代码,将来可以重复使用


函数的定义


  • 函数声明


function 函数名(){
  // 函数体
}


  • 函数表达式


var fn = function() {
  // 函数体
}


  • 特点:


函数声明的时候,函数体并不会执行,只要当函数被调用的时候才会执行。


函数一般都用来干一件事情,需用使用动词+名词,表示做一件事情 tellStorysayHello


函数的调用


  • 调用函数的语法:


函数名();


  • 特点:


函数体只有在调用的时候才会执行,调用需要()进行调用。


可以调用多次(重复使用)


代码示例:


// 声明函数
function sayHi() {
  console.log("吃了没?");
}
// 调用函数
sayHi();
// 求1-100之间所有数的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 调用
getSum();


函数的参数


  • 为什么要有参数


function getSum() {
  var sum = 0;
  for (var i = 1; i <= 100; i++) {
    sum += i;
  }
  console.log();
}
// 虽然上面代码可以重复调用,但是只能计算1-100之间的值
// 如果想要计算n-m之间所有数的和,应该怎么办呢?


  • 语法:


// 函数内部是一个封闭的环境,可以通过参数的方式,把外部的值传递给函数内部
// 带参数的函数声明
function 函数名(形参1, 形参2, 形参...){
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3);


形参和实参


形式参数:在声明一个函数的时候,为了函数的功能更加灵活,有些值是固定不了的,对于这些固定不了的值。我们可以给函数设置参数。这个参数没有具体的值,仅仅起到一个占位置的作用,我们通常称之为形式参数,也叫形参。


实际参数:如果函数在声明时,设置了形参,那么在函数调用的时候就需要传入对应的参数,我们把传入的参数叫做实际参数,也叫实参。


var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
  console.log(a + b);
}
//x,y实参,有具体的值。函数执行的时候会把x,y复制一份给函数内部的a和b,函数内部的值是复制的新值,无法修改外部的x,y


函数的返回值


当函数执行完的时候,并不是所有时候都要把结果打印。我们期望函数给我一些反馈(比如计算的结果返回进行后续的运算),这个时候可以让函数返回一些东西。也就是返回值。函数通过return返回一个返回值


返回值语法:


//声明一个带返回值的函数
function 函数名(形参1, 形参2, 形参...){
  //函数体
  return 返回值;
}
//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3);


函数的调用结果就是返回值,因此我们可以直接对函数调用结果进行操作。


返回值详解:


如果函数没有显示的使用 return语句 ,那么函数有默认的返回值:undefined


如果函数使用 return语句,那么跟再return后面的值,就成了函数的返回值


如果函数使用 return语句,但是return后面没有任何值,那么函数的返回值也是:undefined


函数使用return语句后,这个函数会在执行完 return 语句之后停止并立即退出,也就是说return后面的所有其他代码都不会再执行。


推荐的做法是要么让函数始终都返回一个值,要么永远都不要返回值。


arguments的使用


JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有的实参。arguments是一个伪数组,因此及可以进行遍历


案例

求任意个数的和


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$永远的24k纯帅$</title>
  <script>
    //计算两个数字的和
//    function f1(x, y) {
//      return x + y;
//    }
//    //计算三个数字的和
//    function f2(x, y, z) {
//      return x + y + z;
//    }
//    //计算四个数字的和
//    function f3(x, y, z, k) {
//      return x + y + z + k;
//    }
//    //计算五个数字的和
//    function f4(a, b, c, d, e) {
//      return a + b + c + d + e;
//    }
//    //计算六个数字的和
//    function f5(a, b, c, d, e, f) {
//      return a + b + c + d + e + f;
//    }
    //计算n个数字的和
    //定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传了几个参数,没办法计算,但是如果在函数中知道了参数的个数,也知道了,每个参数的值.可以
    //定义
//    function f1() {
//      //获取的是函数在调用的时候,传入了几个参数
//      //console.log(arguments.length);
//      //使用arguments对象可以获取传入的每个参数的值
//      console.log(arguments);
//    }
//
//    f1(10,20,30,40,100,200);//调用
    function f1() {
      //arguments----->数组使用------伪数组---
      var sum=0;
      for(var i=0;i<arguments.length;i++){
        sum+=arguments[i];
      }
      return sum;
    }
    console.log(f1(10,20,30));
  </script>
</head>
<body>
</body>
</html>


函数其它


匿名函数


匿名函数:没有名字的函数


匿名函数如何使用:


将匿名函数赋值给一个变量,这样就可以通过变量进行调用
匿名函数自调用


关于自执行函数(匿名函数自调用)的作用:防止全局变量污染。


自调用函数


匿名函数不能通过直接调用来执行,因此可以通过匿名函数的自调用的方式来执行


(function () {
  alert(123);
})();


函数是一种数据类型


function fn() {}
console.log(typeof fn);


  • 函数作为参数


因为函数也是一种类型,可以把函数作为两一个函数的参数,在两一个函数中调用


  • 函数做为返回值


因为函数是一种类型,所以可以把函数可以作为返回值从函数内部返回,这种用法在后面很常见。


function fn(b) {
  var a = 10;
  return function () {
    alert(a+b);
  }
}
fn(15)();


代码规范


1.命名规范  
2.变量规范   
  var name = 'zs';  
3.注释规范
  // 这里是注释
4.空格规范
5.换行规范
  var arr = [1, 2, 3, 4];
  if (a > b) {
  }
  for(var i = 0; i < 10; i++) {
  }
  function fn() {
  }
相关文章
|
2月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
196 77
|
11天前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
39 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
|
2月前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
143 62
|
5天前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
25 8
|
2月前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
80 31
|
2月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
2月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
49 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
2月前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
2月前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
56 3
|
2月前
|
Web App开发 JSON JavaScript
Node.js 中的中间件机制与 Express 应用
Node.js 中的中间件机制与 Express 应用