编程笔记 html5cssjs 082 JavaScript 函数

编程笔记 html5&css&js 082 JavaScript 函数

  • 一、函数
  • 二、函数的定义
    • (一)、函数声明:
    • (二)、函数表达式(匿名函数赋值):
    • (三)、箭头函数表达式(ES6新增特性):
  • 三、函数的调用
  • 四、函数的参数
  • 五、函数的返回值
  • 小结

函数(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函数不仅是执行代码的基本单位,也是构建复杂应用程序的关键组成部分,对于保持代码整洁、高效、易于理解和扩展至关重要。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/687505.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

龙年第一天班

世事洞明皆学问&#xff0c;人情练达即文章。 有许多要学的东西多去学习&#xff0c;少一些紧张&#xff0c;多多的学习辩证法去应用到生活和学习中。

微服务调用组件FeignDubbo实战

RPC概述 思考&#xff1a; 微服务之间如何方便优雅的实现服务间的远程调用&#xff1f; RPC 全称是 Remote Procedure Call &#xff0c;即远程过程调用&#xff0c;其对应的是我们的本地调用。RPC 的目的是&#xff1a;让我们调用远程方法像调用本地方法一样。 //本地调用 R…

【大厂AI课学习笔记】【2.1 人工智能项目开发规划与目标】(3)数据准备初步

今天来学习数据准备。 一个AI项目要包括构建数据集、数据清理和数据融合、数据采集、特征工程、算法改进和其他步骤。 数据采集和数据清洗&#xff0c;也就是数据准备&#xff0c;要占到人工智能项目一半以上的工作量。 训练的数据量越大&#xff0c;模型越准确。 建立数据标…

C语言 extern关键字理解

一、问题 以下是C语言的程序&#xff1a; sumaa.h: extern int sumAA(int a, int b);sumaa.c: #include <stdio.h> #include "sumaa.h" int sumAA(int a, int b) {return ab; }two.h: void sayBye();two.c: #include "two.h" void sayBye() {print…

突破编程_C++_面试(基本数据类型)

面试题1&#xff1a;在32位和64位系统上&#xff0c;int、short、long、long long 和 char 类型通常分别占用多少字节 在 32 位和 64 位系统上&#xff0c;int、short、long、long long 和 char 类型的大小可能会有所不同&#xff0c;这取决于编译器和操作系统。但按照常见的约…

线程学习小结

线程&#xff1a;一个程序内部的一条执行流程 多线程&#xff1a;软硬件实行的多条执行流程的技术&#xff08;多线程由cpu负责调度执行&#xff09; 多线程的本质就是多个程序同时执行&#xff0c;但是进程同一时间只能有一个&#xff0c;所以线程会被cpu调度并且分配时间片…

使用redis-insight连接到服务器上的redis数据库

一、安装redis&#xff1a; 安装 Redis。你可以通过运行下面的命令来使用 yum 安装 Redis&#xff1a; sudo yum install redis 启动 Redis 服务。安装完成后&#xff0c;你可以通过运行下面的命令来启动 Redis 服务&#xff1a; sudo systemctl start redis 设置 Redis 服务…

g++编译--运行opencv步骤。

一&#xff1a;下载opencv源码库。 1 cmake -D CMAKE_BUILD_TYPERelease -D OPENCV_GENERATE_PKGCONFIGON -D WITH_FFMPEGON … 2 make -j 8 3 make install 二&#xff1a; 找到两个目录&#xff1a; include/ 所有头文件 lib/ 所哟库文件 三&#xff1a;编译运行代码&#xf…

定时器(基本定时器、通用定时器、高级定时器)

目录 一、基本定时器 二、通用定时器 三、高级定时器 一、基本定时器 1、作用&#xff1a;计时和计数。 二、通用定时器 1、除了有基本定时器的计时和计数功能外&#xff0c;主要有输入捕获和输出比较的功能&#xff0c;硬件主要由六大部分组成&#xff1a; ① 时钟源 ② 控…

前端架构: 脚手架框架之yargs的11种基础核心特性的应用教程

脚手架框架之yargs的基础核心特性与应用 1 &#xff09;概述 yargs 是脚手架当中使用量非常大的一个框架进入它的npm官网: https://www.npmjs.com/package/yargs 目前版本: 17.7.2Weekly Downloads: 71,574,188 (动态数据)最近更新&#xff1a;last month (github)说明这是一个…

【Webpack】处理图片资源

处理图片资源 过去在 Webpack4 时&#xff0c;我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了&#xff0c;我们只需要简单配置即可处理图片资源 1. 配置 const path require("path");modul…

美国突然致敬中本聪

作者&#xff1a;秦晋 有点看不懂美国的神操作。 2月16日&#xff0c;据《Bitcoin Magazine》报道&#xff0c;比特币的竞争对手、美国参议员伊丽莎白-沃伦对比特币的立场突然180度大转弯。由反对立场转为支持立场。让很多行业媒体出乎意料&#xff0c;甚至惊掉下巴。 报道称&a…

Web Components详解-HTML Templates

前言 在前面Web Components系列文章的插槽中&#xff0c;我们使用直接在body中写入html标签的形式来承载shadowDOM中的元素&#xff0c;这么做会使标签在DOM多渲染一次&#xff0c;不仅降低了性能&#xff0c;还使标签直接暴露在页面中&#xff0c;遵循组件的可重用性、隔离性…

Unity3D 九宫格地图加载逻辑详解

前言 Unity3D是一款强大的游戏开发引擎&#xff0c;拥有丰富的功能和工具&#xff0c;可以帮助开发者快速构建出各种类型的游戏。在游戏开发中&#xff0c;地图加载是一个非常重要的环节&#xff0c;九宫格地图加载是一种常用的地图加载方式&#xff0c;可以有效地提高游戏性能…

文件上传漏洞--Upload-labs--Pass01--前端绕过

一、前端绕过原理 通俗解释&#xff0c;我们将写有恶意代码的php后缀文件上传到网页&#xff0c;网页中的javascript代码会先对文件的后缀名进行检测&#xff0c;若检测到上传文件的后缀名为非法&#xff0c;则会进行alert警告。若想上传php后缀的文件&#xff0c;就要想办法对…

人工智能学习专栏文章汇总

人工智能大潮已来&#xff0c;stay hungry, stay foolish! 人工智能技术学习类文章汇总&#xff1a; 人工智能学习与实训笔记&#xff08;一&#xff09;&#xff1a;零基础理解神经网络-CSDN博客 人工智能学习与实训笔记&#xff08;二&#xff09;&#xff1a;神经网络之图…

Html的<figure><figcaption>标签

Html的<figure><figcaption>标签 示例一: <figure><figcaption>figcaption001, fig标题1 </figcaption><figcaption>figcaption002, fig标题2 </figcaption><div style"width:calc(100px*2); height:calc(100px*2); back…

力扣经典题:环形链表的检测与返回

1.值得背的题 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode *detectCycle(struct ListNode *head) {struct ListNode*fasthead;struct ListNode*slowhead;while(fast!NULL&&fast->…

解锁Spring Boot中的设计模式—03.委派模式:探索【委派模式】的奥秘与应用实践!

委派模式 文章目录 委派模式1.简述**应用场景****优缺点****业务场景示例** 2.类图3.具体实现3.1.自定义注解3.2.定义抽象委派接口3.3.定义具体执行者3.4.定义委派者(统一管理委派任务)3.5.定义委派者管理类 4.测试4.1.controller层4.2.测试不同场景4.2.1.测试生产部门计算费用…

html5移动端适配;检测浏览器信息函数

html5移动端适配 //动态改变font-size大小 (function changeFontSize() {let resizeEvt orientationchange in window ? orientationchange : resizeif (!isPC()) {let docEl document.documentElement;// recalc function () {let clientWidth docEl.clientWidth;docEl.…