编程笔记 html5&css&js 082 JavaScript 函数-程序员宅基地

技术标签: html5  青少年编程  # HTML+CSS+JavaScript笔记  css3  javascript  少年工程师  

函数(function)是一种可重复使用的代码块,它封装了一组为了完成特定任务而组织的语句和表达式。

一、函数

在JavaScript以及大多数编程语言中,函数(function)是一种可重复使用的代码块,它封装了一组为了完成特定任务而组织的语句和表达式。函数可以接受输入参数(parameters),处理这些参数,并可能返回一个输出结果(return value)。通过定义函数,开发者可以将复杂操作逻辑抽象出来,提高代码的复用性和可维护性。

JavaScript中的函数定义通常包括以下部分:
函数声明关键字:使用function关键字开始定义。
函数名:紧跟在function关键字之后,用于标识函数的一个名称。函数名遵循变量命名规则,可以包含字母、数字、下划线和美元符号,但不能以数字开头。
参数列表:括号()内列出的是函数需要的参数,多个参数之间用逗号分隔。调用函数时传递的实际值会赋给对应的参数变量。
函数体:由一对大括号{}包裹,其中包含了执行特定任务的一系列JavaScript语句。

二、函数的定义

在JavaScript中,函数是可重用的代码块,可以接受输入(参数)并产生输出(返回值)。以下是JavaScript中定义和调用函数的不同方式:

(一)、函数声明:

// 函数声明方式
function add(a, b) {
    
  return a + b;
}

在此模式下,函数名称add、参数列表(a, b)和函数体{ return a + b; }一起构成了一个完整的函数。函数可以在其声明后的任何地方被调用。

(二)、函数表达式(匿名函数赋值):

// 函数表达式
var add = function(a, b) {
    
  return a + b;
};

这种方式下,函数像变量一样被赋值给一个标识符(这里是add),同样可以接收参数并返回结果。匿名函数表达式可以立即赋值也可以在执行流到达该行代码时才赋值。

(三)、箭头函数表达式(ES6新增特性):

// 箭头函数表达式
const add = (a, b) => a + b;

箭头函数提供了简洁的语法,并且它对于 this 的绑定有特殊规则(总是捕获其所在上下文的 this 值,而不是创建自己的 this 值)。

三、函数的调用

作为普通函数调用:

// 调用函数声明的函数
console.log(add(10, 2)); // 输出:12
// 调用函数表达式的函数
var multiply = function(a, b) {
     return a * b; };
console.log(multiply(5, 3)); // 输出:15

作为对象的方法调用:

var calculator = {
    
  add: function(a, b) {
    
    return a + b;
  },
  subtract: function(a, b) {
    
   return a - b;
  }
};
console.log(calculator.add(5, 7)); // 输出:12

使用call或apply调用: 这些方法允许你改变函数内部 this 的指向,并传递数组形式或逗号分隔的参数。

function greet(name, greeting) {
    
  console.log(`${
      greeting}, ${
      name}!`);
}
let user = {
     name: 'Alice' };
greet.call(user, 'Alice', 'Hello'); // 输出:"Hello, Alice!"
greet.apply(user, ['Alice', 'Hi']); // 输出:"Hi, Alice!"

构造函数调用: 当使用new关键字调用函数时,它会创建一个新的对象实例,并将其this指向新创建的对象。

function Person(name) {
    
  this.name = name;
}
var person = new Person('Bob');
console.log(person.name); // 输出:"Bob"

每种调用方式都会影响函数内部 this 的值,这取决于函数是如何被调用的。例如,在方法调用模式下,this 是调用该方法的对象;在构造函数调用时,this 指向新创建的对象实例;而在普通函数调用时(非严格模式下),this 在全局作用域指向全局对象(浏览器环境中为window,Node.js中为global),在严格模式下或者使用箭头函数时,this 则会绑定到封闭词法作用域。

四、函数的参数

在JavaScript中,函数参数是传递给函数进行处理的值或变量。函数可以通过定义一组形参(formal parameters)来接收这些值,并在函数体内使用它们。下面是一些关于JavaScript函数参数的关键特性:

定义函数参数: 在定义函数时,可以在函数名后面的圆括号内声明参数。多个参数之间用逗号分隔。

function calculateArea(width, height) {
    
  return width * height;
}

上述函数calculateArea接受两个参数:width和height。

参数数量的灵活性: JavaScript支持可变数量的参数。这意味着你可以在调用函数时传递任意数量的参数,即使它们没有在函数定义时明确指定。这种情况下可以使用arguments对象访问所有传入的参数。

function sum() {
    
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 输出: 6
剩余参数语法(ES6): ES6引入了剩余参数(rest parameter)语法,允许将不定数量的参数收集到一个数组中。

function average(...numbers) {
    
  const sum = numbers.reduce((total, num) => total + num, 0);
  return sum / numbers.length;
}

console.log(average(4, 5, 6, 7)); // 输出: 5.5
默认参数值(ES6): 可以为函数参数提供默认值,当调用函数时如果没有提供该参数或者提供的值为undefined时,会使用默认值。

function greet(name = 'User') {
    
  console.log('Hello, ' + name);
}

greet(); // 输出: Hello, User
greet(‘Alice’); // 输出: Hello, Alice
解构赋值作为参数(ES6): 可以通过解构赋值的方式直接从函数调用处获取结构化的数据。

function processCoordinates({
      x = 0, y = 0 }) {
    
  console.log(`X coordinate is ${
      x} and Y coordinate is ${
      y}`);
}

processCoordinates({ x: 10, y: 20 }); // 输出: X coordinate is 10 and Y coordinate is 20
隐式类型转换: JavaScript是弱类型语言,不强制参数类型检查。因此,可以向函数传递任何类型的参数,JavaScript会根据上下文自动尝试进行类型转换。

综上所述,JavaScript函数的参数具有很大的灵活性,能够适应各种编程需求,并且随着ECMAScript标准的发展,提供了更多高级的方式来处理和管理函数参数。

五、函数的返回值

在JavaScript中,函数的返回值是通过使用return语句从函数内部传递给调用者的值。当函数执行到return语句时,它会停止执行函数体内剩余的代码,并将紧跟在return关键字后面的值(如果有的话)作为结果返回给函数调用者。

  1. 返回基本类型值
    当函数完成计算或处理后,可以返回一个数值、字符串、布尔值或其他基本类型的值。

    function add(a, b) {
          
      return a + b;
    }
    
    let result = add(5, 7);
    console.log(result); // 输出:12
    
  2. 返回复杂类型值
    函数也可以返回对象、数组、函数等复杂类型的值。

    function createPerson(name, age) {
          
      return {
           name: name, age: age };
    }
    
    let person = createPerson('Alice', 30);
    console.log(person); // 输出:{ name: 'Alice', age: 30 }
    
  3. 无返回值(隐式返回undefined)
    如果函数没有明确的return语句,或者return后面没有任何表达式,则函数默认返回undefined

    function greet(name) {
          
      console.log('Hello, ' + name);
    }
    
    let greeting = greet('Alice');
    console.log(greeting); // 输出:undefined (greet函数没有返回任何值)
    
  4. 提前返回
    在函数内部遇到满足条件的return语句时,函数会立即结束执行并返回指定的值。

    function checkAge(age) {
          
      if (age < 18) {
          
        return "Not allowed";
      } else {
          
        // 其他逻辑...
        return "Allowed";
      }
    }
    
    let status = checkAge(15);
    console.log(status); // 输出:"Not allowed"
    

总之,函数的返回值是其执行过程中产生的结果,对于函数功能的实现和数据交互至关重要。通过合理设计函数返回值,可以使得代码逻辑更加清晰且易于理解和维护。

小结

JavaScript函数的重要性体现在以下几个核心方面:

  1. 代码重用
    函数允许开发者将常用或复杂的任务封装为独立的可重复调用的代码块。这样,当需要执行相同操作时,无需重复编写相同的代码,只需调用相应的函数即可。

  2. 模块化与抽象
    通过函数,可以将大型程序划分为一系列功能明确的小模块,每个模块完成特定的任务。这有助于提高代码的可读性和可维护性,同时降低了复杂度,因为程序员可以专注于单独的逻辑单元。

  3. 数据封装
    函数内部可以定义和操作局部变量,保护了这些变量不受外部作用域的影响,实现了信息隐藏和数据安全性,这是面向对象编程中的一个重要原则。

  4. 控制结构增强
    函数不仅用于计算和处理数据,还可以作为其他控制结构(如循环、条件语句等)的一部分,增强了程序流程的控制能力。例如,在回调函数中处理异步操作,或者在递归函数中解决复杂的问题。

  5. 函数式编程基础
    JavaScript支持函数式编程范式,函数在该范式中被视为一等公民(first-class citizen),可以被赋值给变量、作为参数传递给其他函数,甚至从函数返回。这使得高阶函数、闭包、纯函数等高级特性得以实现。

  6. 异步编程支持
    在JavaScript中,回调函数是处理异步事件的主要方式之一,随着Promise、async/await等新特性的引入,函数更是成为了构建现代异步应用的核心手段。

  7. 面向对象编程
    虽然JavaScript是一种基于原型的面向对象语言,但函数在这里也扮演着构造器的角色,用于创建对象实例,并且可以通过方法属性来提供对象的行为。

  8. 模块系统
    在Node.js和现代浏览器环境中,模块化的JavaScript代码依赖于导出和导入函数,以组织和管理应用程序的不同部分。

综上所述,JavaScript函数不仅是执行代码的基本单位,也是构建复杂应用程序的关键组成部分,对于保持代码整洁、高效、易于理解和扩展至关重要。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40071585/article/details/136146456

智能推荐

分布式光纤传感器的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告_预计2026年中国分布式传感器市场规模有多大-程序员宅基地

文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势,分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括:FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大

07_08 常用组合逻辑电路结构——为IC设计的延时估计铺垫_基4布斯算法代码-程序员宅基地

文章浏览阅读1.1k次,点赞2次,收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的:估计模块间的delay,确保写的代码的timing 综合能给到多少HZ,以满足需求!_基4布斯算法代码

OpenAI Manager助手(基于SpringBoot和Vue)_chatgpt网页版-程序员宅基地

文章浏览阅读3.3k次,点赞3次,收藏5次。OpenAI Manager助手(基于SpringBoot和Vue)_chatgpt网页版

关于美国计算机奥赛USACO,你想知道的都在这_usaco可以多次提交吗-程序员宅基地

文章浏览阅读2.2k次。USACO自1992年举办,到目前为止已经举办了27届,目的是为了帮助美国信息学国家队选拔IOI的队员,目前逐渐发展为全球热门的线上赛事,成为美国大学申请条件下,含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学,越来越多的学生进入了康奈尔,麻省理工,普林斯顿,哈佛和耶鲁等大学,这些同学的共同点是他们都参加了美国计算机科学竞赛(USACO),并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学,高三学生也可以参加12月的第_usaco可以多次提交吗

MySQL存储过程和自定义函数_mysql自定义函数和存储过程-程序员宅基地

文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程

半导体基础知识与PN结_本征半导体电流为0-程序员宅基地

文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0

随便推点

【Unity3d Shader】水面和岩浆效果_unity 岩浆shader-程序员宅基地

文章浏览阅读2.8k次,点赞3次,收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画(无顶点位移),整个mesh由4个顶点构成。实现了水面效果(左图),不动代码稍微修改下参数和贴图可以实现岩浆效果(右图)。有要思路是1,uv按时间去做正弦波移动2,在1的基础上加个凹凸图混合uv3,在1、2的基础上加个水流方向4,加上对雾效的支持,如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader

广义线性模型——Logistic回归模型(1)_广义线性回归模型-程序员宅基地

文章浏览阅读5k次。广义线性模型是线性模型的扩展,它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为:其中g(μY)是条件均值的函数(称为连接函数)。另外,你可放松Y为正态分布的假设,改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后,便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下,线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是,有时候我们要进行非正态因变量的分析,例如:(1)类别型.._广义线性回归模型

HTML+CSS大作业 环境网页设计与实现(垃圾分类) web前端开发技术 web课程设计 网页规划与设计_垃圾分类网页设计目标怎么写-程序员宅基地

文章浏览阅读69次。环境保护、 保护地球、 校园环保、垃圾分类、绿色家园、等网站的设计与制作。 总结了一些学生网页制作的经验:一般的网页需要融入以下知识点:div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点,网页的风格主题也很全面:如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题,学生、新手可参考下方页面的布局和设计和HTML源码(有用点赞△) 一套A+的网_垃圾分类网页设计目标怎么写

C# .Net 发布后,把dll全部放在一个文件夹中,让软件目录更整洁_.net dll 全局目录-程序员宅基地

文章浏览阅读614次,点赞7次,收藏11次。之前找到一个修改 exe 中 DLL地址 的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和 代码中相对目录还有一些复制到目录的普通文件 等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录

BRIEF特征点描述算法_breif description calculation 特征点-程序员宅基地

文章浏览阅读1.5k次。本文为转载,原博客地址:http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出,BRIEF是对已检测到的特征点进行描述,它是一种二进制编码的描述子,摈弃了利用区域灰度..._breif description calculation 特征点

房屋租赁管理系统的设计和实现,SpringBoot计算机毕业设计论文_基于spring boot的房屋租赁系统论文-程序员宅基地

文章浏览阅读4.1k次,点赞21次,收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档,可以给应届毕业生提供格式撰写参考,也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文

推荐文章

热门文章

相关标签