day03JS-函数

于 2024-08-19 19:51:19 发布
阅读量460 收藏 4
点赞数 10
分类专栏： JavaScript 文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kwj258036/article/details/141333069
版权

1. 什么是函数

  • 函数具有某种特定功能的代码块。
  • 函数其实本质也是一种数据，属于对象数据类型。

2. 为什么要有函数

  • 解决代码的冗余问题，形成代码复用。
  • 可以把整个代码项目，通过函数模块化。
  • 封装代码，让函数内部的代码对外部不可见。

3. 函数的组成

函数的声明：

function 函数名（参数1，参数2，...）{
		执行代码；
        return 返回值；
}

函数的调用：

函数名（参数1，参数2，...);

函数由如下部分组成：

  1. 函数名，命名规则同变量名一致。

  2. 函数体， 函数的内容，代码块。

  3. 参数， 分为形参和实参。

  4. 返回值， 函数调用表达式的结果。

4. 定义函数的三种方式

4.1 function关键字方式/字面量方式

无参：
function 函数名() {

}

有参：
function 函数名(参数) {

}

4.2 表达式方式

无参：
var 函数名 = function(){

}

有参：
var 函数名 = function(参数) {

}

表达式方式 --- 匿名函数 ---匿名函数具名化

没有函数名字的函数就是匿名函数。

4.3 Function构造函数方式

var 函数名 = new Function('函数体');

var 函数名 = new Function('参数', '函数体')

5. 函数调用

        在函数名后面加上 () 就是对函数的调用，函数内的代码会执行。

        函数名后面不加() 不会调用函数，函数内的代码也不会执行；函数名本质上是个变量名，通过函数名可以引用到函数本身。

6. 函数的返回值

6.1 返回值

  • 函数名() 被称之为函数调用表达式， 表达式的值就是函数的返回值。
  • 在函数体内，return 右边的表达式（或变量、直接量）便是函数的返回值。
  • 函数体内没写 return 或者 return 的右边是空的，默认会返回 undefined。
  • return 除了设置返回值外，还可以结束函数的执行，return 之后的代码不会执行。

6.2 那些函数需要些返回值

什么样的函数需要写返回值？

如果函数的作用是进行某种计算，得到的计算结果最后以返回值的形式返回。

什么样的函数不需要返回值？

函数的功能是实现某个具体的操作（界面操作），无需返回值。

7. 函数的参数

7.1 形参和实参

形参： 声明函数的时候，给的参数， 类似于变量名；在声明函数的时候，参数是没有值。

实参：调用函数是给的参数； 实参会按照顺序赋值给形参。

7.2 形参和实参的数量问题

正常情况下，实参数量应该等于形参数量。

如果实参数量大于形参数量， 多出来的实参，将被忽略。

如果实参数量小于形参数量， 有的形参没有对应的实参，取默认值 undefined。

7.3 形参的默认值

JS函数允许形参有默认值，有默认值的形参，在调用函数的时候，可以没有与之对应的实参！

如何实现形参的默认值？

function demo(a, b=默认值) { } 
注意： 有默认值的形参一定要放在后面！

7.4 arguments

用途：如计算所有参数和，取参数中的最大值，取参数中的最小值，求所有参数平均数。

<script>
	//求最大值
    function getMax() {
		let max = arguments[0];
		for (let i = 1; i < arguments.length; i++) {
			max = max > arguments[i] ? max : arguments[i];
		}
		console.log(max);//20
	}
	getMax(10, 20, 0, 4, 6);

	//求和
	function getSum() {
		let sum = 0;
			for (let i = 0; i < arguments.length; i++) {
				sum += arguments[i];
			}
			return sum;
		}
		let sum = getSum(10, 20, 0, 4, 6);
		console.log(sum);//40
</script>

 8. 函数的嵌套

函数体内是可以再嵌套函数的。

	<body>
		<script>
			function fnn() {
				var a = 10;

				function change() {
					a = 20;
				}
				change();
				console.log(a);//20
			}
			fnn();
		</script>
	</body>

9. 自调用函数 IIFE

9.1 匿名函数

function() {
    //匿名函数
}

匿名函数声明完之后要立即调用，否则没有意义。

9.2 自调用函数

        函数声明完立即调用，称之为自调用函数，也叫立即调用函数，英文简称 IIFE，英文全称 Immediately Invoked Function Expression。

自调用函数语法：

匿名函数自调：
1.无参
(function(){
	
})();

2.有参
(function(形参1，形参2，...){
	
})(实参1，实参2，...);

有名字的函数自调： 

1.无参
(function 函数名(){
	
})();

2.有参
(function 函数名(形参1，形参2，...){
	
})(实参1，实参2，...);

案列：

// 函数允许匿名，但是匿名的函数要立即使用
// 自调用函数，立即调用函数
(function(){
console.log('哈哈哈，我被调用了');
})();

// 自调用函数 传参
(function(a, b){
console.log(a+'和'+b+'跳舞');
})('小明', '小王');


// 当然不匿名的自调用函数也是可以的，不过没有意义
(function fn(){
  console.log('fn 被调用了');
})();


 (function(){})();

  ~function(){}();

  +function(){}();

  -function(){}();

  !function(){}();

注意：

  1. 自调用函数只能自己调用自己，也不能在外面调用。

  2. 自调用函数最后必须要加；。

  3. 有名字的自调用函数，已经被自己调用过了，后面在使用函数名调用也是无效的。

  4. 两个连续的自调用函数，之间必须加分号，告诉浏览器是不同的函数，否则会有语法错误。或者，在后面的自调用函数前加 ! 等没有副作用的一元运算符。

 9.3 练习

当点击不同的按钮的时候 让页面加载相应的颜色，改变屏幕的颜色 就是控制body的背景颜色。

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的练习</title>
</head>
</body>
	<body>
		<button id="redBox">红色</button>
		<button id="greenBox">绿色</button>
		<button id="blueBox">蓝色</button>
		<button id="pinkBox">粉色</button>
		<script>
			function chanheBg(myColor){
				document.body.style.backgroundColor = myColor;
			};
			
			let redColor = document.getElementById("redBox");
			redColor.onclick = function(){
				chanheBg("red");
			}
			
			let greenColor = document.getElementById("greenBox");
			greenColor.onclick = function(){
				chanheBg("green");
			}
			
			let blueColor = document.getElementById("blueBox");
			blueColor.onclick = function(){
				chanheBg("blue");
			}
			
			let pinkColor = document.getElementById("pinkBox");
			pinkColor.onclick = function(){
				chanheBg("pink");
			}
		</script>
	</body>
</html>

方法二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="redBox">red</button>
		<button id="greenBox">green</button>
		<button id="blueBox">blue</button>
		<button id="pinkBox">pink</button>
		<script>
			function chanheBg(myColor) {
				document.body.style.backgroundColor = myColor;
			};

			let redColor = document.getElementById("redBox");
			redColor.onclick = function() {
				let value = redColor.innerText;
				chanheBg(value);
			}

			let greenColor = document.getElementById("greenBox");
			greenColor.onclick = function() {
				let value = greenColor.innerText;
				chanheBg(value);
			}

			let blueColor = document.getElementById("blueBox");
			blueColor.onclick = function() {
				let value = blueColor.innerText;
				chanheBg(value);
			}

			let pinkColor = document.getElementById("pinkBox");
			pinkColor.onclick = function() {
				let value = pinkColor.innerText;
				chanheBg(value);
			}
		</script>
	</body>
</html>

10. 箭头函数es6新增

回调函数（callback）：一个函数作为另一个函数的参数。

箭头函数就是回调函数的简化版，箭头函数不能使用arguments。

箭头函数无参语法：（）=> { } ;

箭头函数有参语法：（形参1，...）=> { } ;

案列1：
<script>
	function fnn(){
		console.log("fff");
	}

	function fun(f){
		fnn();
	}
	//这里的实参是函数fnn			
	fun(fnn);//fff
</script>

案列2：
<script>
	let arr = [1,2,3];
	arr.map(function(){})
	//简化版
	arr.map(()=>{})
</script>

注意！！！

  1. 去掉function变成=> ,箭头在小括号与大括号之间。

  2. 只有一个形参可以省略小括号。

  3. 只有一条语句可以省略大括号。

  4. 如果只有一条语句并且是return语句，可以省略return语句。

  5. 箭头函数无法使用arguments，可以使用三个点（... args）代替arguments。

  6. 箭头函数不能new，因为它没有构造函数constructor。

  7. 箭头函数没有this，如果箭头函数内出现this，那这个this的作用是指向上级。

var fn=function(a,b){
    return a+b
}

将上面的函数改为为箭头函数为：
var fn=(a,b)=>{
    return a+b;
}

// 如果执行语句只有一条，return 也可以省去
var fn=(a,b)=> a+b;

// 如果参数只有一个，小括号也可以省去
var fn=a=>a+2;
fn(3)

var fun = (...args) => {
				console.log(...args);
			};
fun(12, 13, 14);

11. 三个点（... args）有两种运算

... args有两种运算方法：

1. 展开运算：将数组变成单个单个的个体。

2. 剩余运算：将单个单个的个体变成一个数组。

案列1：
var fun = (...args) => {
				console.log(...args);
			};
fun(12, 13, 14);//[12, 13, 14]

案列2：
var fun = (a, ...args) => {
				console.log(a, args);
			};
fun(12, 13, 14); //a=12,args=[13, 14]

12. caller 和 callee

函数的宿主环境：函数在哪里被调用。

function outer() {
  console.log(outer.caller)//当前这个函数的宿主环境是全局，所以是null
  inner()；
}
outer();//null---全局


function inner() {
  //这里指的是当前这个函数的宿主函数
  console.log(inner.caller)//outer函数
  console.log(arguments.caller)//函数本身inner
  console.log(arguments.callee.caller)//相当于inner.caller
}
outer();

13. 选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    ul,ol{
        list-style: none;
    }
    .main{
        width:500px;
        margin:0 auto;
    }
    ul>li{
        width:100px;
        height:40px;
        line-height: 40px;
        text-align:center;
        border:1px solid #333;
        margin-right:10px;
        display:inline-block;
        position:relative;
        top:1px;
    }
    .main>div{
        height:300px;
        line-height: 300px;
        border:1px solid #333;
        text-align:center;
        display:none;
    }
    .main li.current{
        background:darkcyan;
        border-bottom-color:darkcyan;

    }
    .main div.current{
        background:darkcyan;
        display:block;
    }
    </style>
</head>
<body>
    <div class="main" id="main">
        <ul>
            <li class="current">音乐</li>
            <li>电视</li>
            <li>综艺</li>
        </ul>
        <div class="current">音乐内容</div>
        <div>电视内容</div>
        <div>综艺内容</div>
    </div>
</body>
</html>
<script>
  var main=document.getElementById("main");
  var lis=main.getElementsByTagName("li");
  var divs=main.getElementsByTagName("div");

  for(var i=0;i<lis.length;i++){
       lis[i].index=i;
       lis[i].onclick=function(){
           for(var i=0;i<lis.length;i++){
                 lis[i].className="";
                 divs[i].className="";
           }
           var index=this.index;
           lis[index].className="current";
           divs[index].className="current";
       }
  }

</script>

傻虎贼头贼脑
关注
  • 10
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day03-js.zip
07-25
在“day03-js.zip”压缩包中，包含的五个练习项目展示了JavaScript在实际网页应用中的多种常见功能。以下是这些功能的详细说明： 1. **网页定时弹出广告**： 这个功能使用了JavaScript的`setTimeout`或`...
30-day-of-javascript-day-1
03-04
【标题】"30-day-of-javascript-day-1" 是一个关于JavaScript编程的学习计划，旨在帮助初学者在30天内逐步掌握JavaScript的基础知识。这个计划的第一天通常会涵盖JavaScript的入门概念，为后续的学习打下坚实的基础...
day03--JavaScript
qq_58478983的博客
08-14 890
js引用方式、输出语句、变量声明、数据类型、运算符、流程控制,js函数和常见事件，页面时间交互案例
JS学习day05--函数高级
weixin_43707498的博客
12-04 126
1、作用域 作用域指：变量或函数的有效使用范围，有全局作用域与局部作用域两种。 全局作用域：<script>标签下 局部作用域：函数域 全局变量和局部变量 全局变量：直接在 script 标签下声明的变量，任何地方都能访问，任何地方都能对其值进行改变。 局部变量：函数内部定义的变量，函数内能访问，出了函数的括号就不能访问（垃圾回收）。 js解析器如何工作： 1、预解析：找var 函数 参数。var找到之后给它赋一个值为undefined提到最前面，函数整体提到最前面，参数同var 遇
JS学习笔记DAY5--函数
qq_52014772的博客
03-10 136
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript"> /* *函数function * -函数也是一个对象 * -函数中可以封装，保存一些功能（代码），在需要时可以调用执行； * -使用typeof检查一个函数对象时，会返回function * -语法： * */ .
JavaScript高级day15-- 函数的prototype
maomaochong07的博客
07-06 617
js中的函数中的prototype原型1 函数的prototype属性2 给原型对象添加属性（一般是方法） 1 函数的prototype属性 每个函数都有一个prototype属性 ，默认指向一个object空对象（原型对象）； 原型对象中有一个属性construction，指向函数对象； <script type="text/javascript"> // 每个函数(例如Data函数)都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象) con
DAY04JS学习--函数
weixin_51040108的博客
08-18 96
DAY04JS学习--函数
Day4 JS基础-函数
2301_76534754的博客
03-05 553
' '，0，undefined，null，false，NaN转换为布尔值后都是false，其余则为true。函数表达式：将匿名函数赋值给一个变量，并通过变量名称进行调用，将这个称为函数表达式。方式1 (function() { console.log(11) }) ();方式2 (function() { console.log(11) }() );变量访问的原则：就近原则，在能够访问的情况下 先局部，局部没有再找全局。return只能返回一个值，如果想要返回多个值，则用数组的中括号。函数调用：函数名()
03 day1--javascript笔记pink老师-基础知识 看这一篇就够了！
小女不才
08-30 3326
内容 链接 day1 基础知识大总结 链接 day2 基础知识之函数与作用域 链接 day3 基础知识之对象与内置对象 链接 day4 进阶之DOM技术 链接 day5 进阶之BOM技术 链接 day6 提高之面向对象 链接 day7 提高之ES6 链接 1 初识JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来...
JS-Day-10 函数
い南秋乱港
06-15 132
Day-10 注： NaN不等于任何东西 无论变量名还是函数名多单词拼接，首个单词首字母小写，其余单词首字母大写。eg: theFirstName 实参形参数目对应，才会映射，俩个一块儿变 JS语句 toFixed() 科学计数法 var num =123.456789； document.write(num.toFixed(3)); // 科学计数法，保留三位有效数字，四舍五入，括号中是几，保留几位有效数字。 return 终止函数
day21- javascript中的函数
HAI6545的博客
12-16 1139
函数的定义： 函数就是JavaScript的基础模块单元，包含一组语句，用于代码的复用，信息隐藏 和 组合调用。 简单点说：函数就是把任意的一段代码放在一个盒子里面，在我想要执行这段代码的时候，直接执行这个盒子里面的代码就行来 函数的创建和结构 1.函数的创建 在JavaScript语言中，可以通过一下三种方式创建： - 函数声明//函数声明式创建函数 function f1 ( ) { //需要编写的代码 }// function...
JavaScript函数式编程-函数组合应用
李dayday
09-24 240
定义： **函数组合：**由若干个纯函数、偏函数、柯里化函数组合成一个新的函数，同时，形成数据传递。 用途： 挑选了一系列所需要的函数，把他们组合在一起，可以实现公共合作的效果 最基本的函数组合： function compose (fn,gn){ //fn gn 是两个函数 return function (xn){ return...
day03-js高级.zip
10-01
【标题】"day03-js高级.zip" 是一个关于JavaScript高级特性和技术的压缩包文件，其中涵盖了深入的JavaScript知识，旨在帮助学习者提升在JavaScript编程中的技能水平。JavaScript是一种广泛应用于网页和互联网应用的...
day03-js高级作业.zip
10-01
【标题解析】: "day03-js高级作业.zip" 这个标题暗示了这是一个与JavaScript高级编程相关的学习资料，可能是某课程的第三天作业。"zip"格式表明它是一个压缩包，里面可能包含一系列的文件，如代码、文档或者测试案例...
day03-js高级代码.zip
10-01
【标题】：“day03-js高级代码.zip”指的是一个压缩包文件，其中包含了与JavaScript（简称JS）高级编程相关的代码示例。这个压缩包可能是某个在线课程或学习资源的一部分，用于帮助学员深入理解和掌握JavaScript的...
网上商品订单转手系统bootpf
最新发布
weixin_43213064的博客
08-18 374
【代码】springboot网上商品订单转手系统bootpf
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 351
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1008
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1153
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
js封装格式化函数 yyyy-mm-dd格式
04-04
以下是一个JavaScript函数，可将日期格式化为yyyy-mm-dd格式： ```javascript function formatDate(date) { var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); // 如果月份或日期小于10，就在前面添加0 if (month < 10) { month = '0' + month; } if (day < 10) { day = '0' + day; } return year + '-' + month + '-' + day; } // 使用示例： var date = new Date(); var formattedDate = formatDate(date); // 格式化为yyyy-mm-dd格式 console.log(formattedDate); // 输出格式化后的日期字符串，例如：2021-01-01 ``` 该函数接受一个Date对象作为参数，并返回一个格式为yyyy-mm-dd的日期字符串。在函数中，我们使用Date对象的getYear、getMonth和getDate方法来获取年份、月份和日期。然后，我们检查月份和日期是否小于10，如果是，则在前面添加一个0。最后，我们将年份、月份和日期组合成一个字符串并返回它。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值