函数(总) - JS

基本语法

  1. function 关键字;
  2. 函数名,应简明扼要且具有描述性,没有函数名就是匿名函数
  3. 参数列表,个数≥0,小括号不能省略;
  4. 函数体。
/* 基本语法 */
function 函数名(参数) { 函数体 }

声明与调用

  1. 通过 function 声明创建一个函数,基本语法如上所示;
  2. 通过 函数名(相应参数) 进行调用。
function isPrime(n) {for (let i = 2; i < n / 2; i++) {if ( n % i == 0) return false;}return true;
}isPrime(11)
isPrime(111)

返回值

  1. 通过 return needed 返回需要的数据;
  2. 通过 return ; 返回空,空也是一个数据,null/undefined,严格来说是未定义undefined
  3. 函数体执行完 return 语句后,立即结束调用并返回数据。
function one() { return 1; }
function nothing() { return ; }		// 亦或是 function nothing() {  }
one() === 1				// true
nothing() == null		// true
nothing() === undefined	// true 严格等于

匿名函数

  1. 没有函数名的函数,一般声明后立即调用;
  2. 通过函数表达式赋值给一个变量,后续调用;
  3. 常用于响应事件触发(如按钮点击事件)。
myButton.onclick = function () { alert('Push'); }	// myButton 需先建立

函数表达式 - 另一种函数的创建方式

  1. 通过 function 引导的函数表达式(同时也就是匿名函数);
  2. 箭头函数也是一个函数表达式;
  3. 将函数表达式赋值给一个变量,这个变量就成为了可以被调用的函数了;
  4. 无论哪一种函数创建的方式,得到的函数,都是一个“值”:
    • 既可以被赋值等操作;
    • 也可以作为函数的参数,称为回调函数(回调)。
/* 下面三种函数的创建是等效的 */
function f() { return 1; }
let f = function () { return 1; }
lst f = () => { return 1; }
f()		// 1let g = f;/* 函数作为参数 */
function showYourFunc(n, fn) {if (fn !== undefined) alert(fn);else alert(n)
}
showYourFunc(111, )		// 弹窗显示111
showYourFunc(111, function() { /* 这是一个回调,但是没有内容只有注释 */ })	// 弹窗显示回调函数

箭头函数 - 一个特别的函数表达式

一个创建函数的更加简洁的方式,基本语法如下:

表达式可执行,所以是一个语句;
语句有值(undefined),所以也是一个表达式。

/* 函数体只有一个语句 */
() => 单个语句
单个参数 => 单个语句
(单个参数) => 单个语句
(参数1, 参数2) => 单个语句
/* 函数体有多个语句,使用{} */
() => { 多个语句 }
单个参数 => { 多个语句 }
(单个参数) => { 多个语句 }
(参数1, 参数2) => { 多个语句 }
  1. 箭头函数也是一个函数表达式,只能通过赋值给一个变量,后续才能被调用;
  2. 不需要 function 的引导,关键部分是箭头 =>,这是一个复合符号,中间不能有空格;
  3. 注意点:
    • 箭头前不能换行;
    • 参数只有一个时,() 可以省略;
    • 参数零个或多个时,()不能省略;
    • 函数体只有一个语句时,{} 可以省略;
    • 函数体有多个语句时,{} 不能省略;
    • 不能用作方法,没有参数对象,this 指向外层的对象;
    • 不能用作构造函数;
    • 不能用作生成器。
let f1 = () => alert('这是一个箭头函数');
let f2 = n => n * 2;
let f3 = (n) => n * 2;
let f4 = (...[a, b, c]) => a + b + c	// 解构: ...[a, b, c] == a, b, c
f1() === undefined	// true
f2(5) == 10 			// = f3(5)
f4(1, 2, 3)let g1 = () => { alert('111'); console.log('111'); }
let g2 = n => { if (n <= 2) return 1; else return g2(n-1) + g2(n-2); }	// 斐波那契数列
let g3 = (n) => { if (n <= 2) return 1; else return g2(n-1) + g2(n-2); }// 斐波那契数列
let g4 = (a, b) => {if (a == b) return a;else if (a < b) return g4(a, b - a);else return g4(a - b, b)											// 辗转相除法
}																		// 求最大公约数
g1() === undefined	// true
g2(4) == 3			// = g3(4)
g4(121, 11)			// 11

函数声明 VS 函数表达式

  1. 函数声明存在变量提升,所以可先调用,再声明,但不能重复声明,可以赋值给其他变量;
  2. 函数表达式必须创建后才能开始被调用,一般是即刻调用的场景,可以进行不同的或重复的赋值操作。

函数参数

  1. 在声明中,称 parameter,在调用时,argument
  2. 加入参数可以实现更复杂的逻辑功能;
  3. 参数可以是任何数据,包括对象、数组、函数等;
  4. 可以将函数体简化。
function calc(a, b, operator) {const ops = ['+', '-', '*', '/', '**', '%']if (ops.includes(operator)) {return eval(`${a}${operator}${b}`);}return a + b;
}

默认值

function name(parameter1=默认值1, parameter2=默认值2) { 函数体 }
  1. 旧 JS 需要在函数体里提供默认值,新 JS 可以在参数列表中直接给出;
  2. 没有自定义的话, 也有默认值,是 undefined
/* 旧 JS 的手段 */
function f(p) {if (p === undefined) p = 1;	// 以下两种亦可以// p = p || 1// p = p ?? 1
}/* 新 JS 的手段 */
function f(p = 1) {
}

剩余参数

  1. 语法:...restParameter,放在参数列表的最后一个;
  2. 注意:...解构作用的优先级高,所以 ...[c, d] 会被解构c, d,这样就失去意义了。
function f(a, b, ...restParameter) {	// restParameter只是一个名字,也可以叫其他的let s = 0;for (const rp of restParameter) {s += rp;}return a + b + s;
}
f(1, 2)			// 3
f(1, 2, 3)		// 6
f(1, 2, 3, 4)	// 10function g(a, b, ...[c, d]) {		// 等效于 function g(a, b, c, d)return a + b + c + d;
}
解构与解构赋值
  1. 解构与组构、解包与打包等成双成对的概念,举一反三是很简单的;
  2. 解构是一个动作,背后是一个函数;
  3. 理解常见的场景案例,更多语法。
/* 简单的解构赋值 */
let [a, b] = [1, 2]			// a==1	b==2/* 挑选的解构赋值 */
let [a, b] = [1, 2, 3]		// a==1	b==2	挑取前两个
let [a, , b] = [1, 2, 3]	// a==1	b==3	挑第一、三个/* 有默认值的解构赋值 */
let [a=1, b] = [, 2, 3]		// a==1	b==2	a有默认值
let [a=1, b] = [null, 2, 3]	// a==1	b==2	a有默认值
let [a=1, b] = [undefined,2]// a==1	b==2	a有默认值/* 带有剩余的解构赋值 */
let [a, b, ...rest] = [1, 2, 3, 4, 5]	// rest=[3, 4, 5]
let [a, ,b, ...rest] = [1, 2, 3, 4, 5]	// rest=[4, 5]/* 带有参数解构的解构赋值:...[c, d]先被解构成 c,d */
let [a, b, ...[c, d]] = [1, 2, 3, 4, 5] // c==3, d==4
let [a, ,b, ...[c, d]] = [1, 2, 3, 4, 5]// c==4, d==5/* 一般对象的解构赋值(数组是一个特别的对象) */
let {a, b} = { a: 1, b: 2 }			// a==1, b==2, 名字相同则取值,否则undefined
let {a1, b1} = { a: 1, b: 2 }		// a1==b1==undefined

作用域

  1. 局部变量:局部作用域里的变量;
  2. 全局变量:全局作用域里的变量,一般只有项目级的、公共的变量才会定义在全局;
  1. 内部变量:块内部的变量,像函数等一些块的内部变量,只能作用在块内;
  2. 外部变量:不被块限制的变量,常常是全局变量,也可以是从其他地方导入的变量,一般可以在块内部被操作,如循环体、函数体等都可以对外部变量进行操作。

给函数注释

  1. 函数专用的注释方法;
  2. 记录用法、参数和返回值。
/*** 返回 x 的 n 次幂的值。** @param {number} x 要改变的值。* @param {number} n 幂数,必须是一个自然数。* @return {number} x 的 n 次幂的值。*/
function pow(x, n) {...
}

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

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

相关文章

设计螺栓长度的基本原理和细节考虑——SunTorque智能扭矩系统

螺栓长度通常是指从螺栓头部到底部的整体长度。在选择或设计螺栓长度时&#xff0c;需要考虑多个因素&#xff0c;如被连接件的材料、厚度、螺栓间距以及预紧力等。设计螺栓长度应注意哪些原则和细节&#xff0c;SunTorque智能扭矩系统和大家一起来了解。设计螺栓长度的基本原则…

条款46:需要类型转换时请为模板定义非成员函数

1.前言 条款24讨论过为什么只有non-member函数才有能力“在所有实参身上实施隐式类型转换”&#xff0c;该条款并以Rational class的operator*函数为例operator*函数为例。而本条款的改变在于将Rational和operator*模板化了&#xff1a; template<typename T> class Ra…

每日一题——LeetCode1304.和为零的N个不同整数

方法一 个人方法 n为偶数&#xff0c;只要同时放入一个数的正数和负数&#xff0c;那么和总为0&#xff0c;n是奇数就放入一个0&#xff0c;剩下的当偶数看待 var sumZero function(n) {let res[]if(n%2!0){res.push(0)n--}nn/2for(let i1;i<n;i){res.push(i)res.push(-i…

Sci Transl Med | 自体中和抗体在早期抗逆转录病毒治疗中增加

今天给同学们分享一篇实验文章“Autologous neutralizing antibodies increase with early antiretroviral therapy and shape HIV rebound after treatment interruption”&#xff0c;这篇文章发表在Sci Transl Med期刊上&#xff0c;影响因子为17.1。 结果解读&#xff1a; …

vue3自定义按钮点击变颜色实现(多选功能)

实现效果图&#xff1a; 默认选中第一个按钮&#xff0c;未选中按钮为粉色&#xff0c;点击时颜色变为红色 利用动态类名&#xff0c;当定义isChange数值和下标index相同时&#xff0c;赋予act类名&#xff0c;实现变色效果 <template><div class"page"&…

Elastic Search 8.12:让 Lucene 更快,让开发人员更快

作者&#xff1a;来自 Elastic Serena Chou, Aditya Tripathi Elastic Search 8.12 包含新的创新&#xff0c;可供开发人员直观地利用人工智能和机器学习模型&#xff0c;通过闪电般的快速性能和增强的相关性来提升搜索体验。 此版本的 Elastic 基于 Apache Lucene 9.9&#xf…

re:从0开始的HTML学习之路 2. HTML的标准结构说明

1. <DOCTYPE html> 文档声明&#xff0c;用于告诉浏览器&#xff0c;当前HTML文档采用的是什么版本。 必须写在当前HTML文档的首行&#xff08;可执行代码的首行&#xff09; HTML4的此标签与HTML5不同。 2. <html lang“en”> 根标签&#xff0c;整个HTML文档中…

如何本地部署虚VideoReTalking

环境&#xff1a; Win10专业版 VideoReTalking 问题描述&#xff1a; 如何本地部署虚VideoReTalking 解决方案&#xff1a; VideoReTalking是一个强大的开源AI对嘴型工具&#xff0c;它是我目前使用过的AI对嘴型工具中效果最好的一个&#xff01;它是由西安电子科技大学、…

数据结构学习1 初识泛型

装箱和拆箱 装箱/装包: 把一个基本数据类型转变为包装类型 拆箱/拆包: 把一个包装类型转变为一个基本数据类型 int a 1;Integer i a;// 自动装箱int b i;// 自动拆箱Integer ii Integer.valueOf(a);// 手动装箱&#xff0c;推荐使用 Integer.valueOf() 而不是 new Integer(…

安卓之导致ANR的原因分析,问题定位以及解决方案

一、引言 在Android应用开发中&#xff0c;Application Not Responding&#xff08;ANR&#xff09;是一种常见的性能问题&#xff0c;它直接关系到用户体验的质量。当应用在特定时间段内无法及时响应用户的交互或者系统事件时&#xff0c;系统将会抛出ANR错误&#xff0c;提示…

本地读取Excel文件并进行数据压缩传递到服务器

在项目开发过程中&#xff0c;读取excel文件&#xff0c;可能存在几百或几百万条数据内容&#xff0c;那么对于大型文件来说&#xff0c;我们应该如何思考对于大型文件的读取操作以及性能的注意事项。 类库&#xff1a;Papa Parse - Powerful CSV Parser for JavaScript 第一步…

html中,元素width和height的单位px、cm、mm、in、pc、pt、ch、em、rem、vh、vw、vmin、vmax的含义

在 HTML 中&#xff0c;元素的 width 和 height 属性可以使用多种单位来表示尺寸。下面是这些单位的含义&#xff1a; 像素&#xff08;px&#xff09;&#xff1a;像素是最常见的单位&#xff0c;表示固定的像素值。例如&#xff0c;width: 200px; 表示元素的宽度为 200 像素。…

springboot116基于java的教学辅助平台

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的基于java的教学辅助平台 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四…

要编译 Qt 的 .pro 工程,可以使用 qmake 和 make 工具

要编译 Qt 的 .pro 工程&#xff0c;可以使用 qmake 和 make 工具。下面是一个基本的 Makefile 示例&#xff0c;用于编译 Qt 的 .pro 工程&#xff1a; # 指定编译器 CXX g # 指定 qmake 命令的路径 QMAKE qmake# 指定目标文件名和可执行文件名 TARGET myapp# 定义源代码文…

R语言入门——多变量移除

目录 0、引言1、单变量删除的例子2、多变量移除2.1 ls的用法 2.2多变量删除 0、引言 有很多小伙伴在运行程序的时候就想在每次循环结束时提出一些占用内存大且无用的数据或变量&#xff0c;或者仅仅保留一些数据&#xff0c;但是rm的语法在删除多变量时候需要和ls()函数联用。…

Java中的深拷贝与浅拷贝

深拷贝与浅拷贝 深拷贝和浅拷贝是编程中常用的两种对象复制方式&#xff0c;它们在复制对象时处理对象内部引用的方式上有所不同。 浅拷贝 浅拷贝&#xff08;Shallow Copy&#xff09;只复制对象的顶层结构&#xff0c;而不复制对象内部的引用对象。换句话说&#xff0c;浅…

基于光口的以太网 udp 回环实验

文章目录 前言一、系统框架整体设计二、系统工程及 IP 创建三、UDP回环模块修改说明四、接口讲解五、顶层模块设计六、下载验证前言 本章实验我们通过网络调试助手发送数据给 FPGA,FPGA通过光口接收数据并将数据使用 UDP 协议发送给电脑。 提示:任何文章不要过度深思!万事万…

从白子画到东方青苍,你选择谁来守护你的修仙之旅?

从白子画到东方青苍,你选择谁来守护你的修仙之旅? 在繁花似锦的修仙世界中&#xff0c;每一位追梦者都渴望有那么一位守护者&#xff0c;与你共患难&#xff0c;共成长。热血与浪漫交织的《花千骨》与《苍兰诀》&#xff0c;给我们带来了两位风华绝代的守护者&#xff1a;白子…

磁盘初始化会丢失文件吗?答案揭晓!

“由于我的电脑出现了一些问题&#xff0c;我就将磁盘初始化了&#xff0c;但是里面还有很重要的文件&#xff0c;磁盘初始化了文件会丢失吗&#xff1f;有什么方法可以恢复丢失的文件呢&#xff1f;” 当我们谈论磁盘初始化&#xff0c;通常是指对硬盘或固态驱动器&#xff08…

解决执行npm(或pnpm)时报:证书过期 certificate has expired问题

项目执行 pnpm install 初始化时报 reason: certificate has expired 错误。 解决方案 1、取消ssl验证&#xff1a;npm config set strict-ssl false这个方法一般就可以解决了。2、更换npm镜像源&#xff1a;npm config set registry http://registry.cnpmjs.org npm config …