首页 > 编程语言 >【前端】JavaScript入门及实战51-55

【前端】JavaScript入门及实战51-55

时间:2024-07-21 13:54:01浏览次数:11  
标签:function return 函数 55 JavaScript 51 console 实参 log

文章目录

51 函数

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		函数:
			1. 函数也是一个对象
			2. 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
			3. 函数中可以保存一些代码在需要的时候调用
			4. 使用typeof检查一个函数对象时,会返回function		
	*/
	
	{
		console.log("我是第一行");
		console.log("我是第二行");
		console.log("我是第三行");
	}
		
	// 我们在实际开发中很少使用构造函数来创建一个函数对象
	// 创建一个函数对象
	// 可以将要封装的代码以字符串的形式传递给构造函数
	var fun = new Function("console.log('hello 这是第一个函数');");
	
	// 封装到函数的代码不会立即执行
	// 函数中的代码会在函数调用的时候执行
	// 调用函数:语法:函数对象()
	// 当调用函数时,函数中封装的代码会按照顺序执行
	fun();
	
	fun.hello = "你好";
	
	/*
		使用函数声明来创建一个函数([]代表可选的)
		语法:function 函数名([形参1,形参2,...,形参N]){
					语句。。。
		
			  }
	*/
	
	function fun2(){
		console.log("hello 这是第二个函数");
		alert("哈哈哈");
		document.write("啦啦啦");
	}
	
	// console.log(log2);
	fun2();
	
	/*
		使用函数表达式来创建一个函数
		var 函数名 = function([形参1,形参2,...,形参N]){
				语句。。。		
		}
	*/
	
	// 匿名函数
	function(){
		console.log("我是匿名函数");
	}
	
	// 给变量赋值(函数)
	var fun3 = function(){
		console.log("我是匿名函数");
	};
	
	fun3();
</script>
<style>
</style>
</head>
<body>
</body>
</html>

52 函数的参数

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		定义一个用来求两个数和的函数
		可以在函数的()中指定一个或多个形参(形式参数)
		多个形参之间使用“,”隔开,声明形参就相当于在函数内部声明了对应的变量
		但是并不赋值		
	*/
	
	function sum(a, b){
		console.log(a + b);
	}
	
	/*
		在调用函数时,可以在()中指定实参(实际参数)
		实参将会赋值给函数中对应的实参
	*/
	sum(1, 1);

	/*
		调用函数时解析器不会检查实参的类型
		要注意,是否有可能接收到非法的参数,如果有可能则需要对参数进行类型的检查
		函数的实参可以是任意的数据类型
	*/
	sum(123, "hello"); // 123hello
	sum(true, false); // 1
	
	/*
		调用函数时,解析器也不会检查实参的数量
		多余实参不会被赋值
		如果实参的数量少于形参的数量,则没有对象实参的形参将是undefined
	*/
	sum(123, 456, true, null);
	sum(123); // NaN,123 + undefined
</script>
<style>
</style>
</head>
<body>
</body>
</html>

53 返回值

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		创建一个函数,用来计算三个数的和
		
		可以使用return设置函数的返回值
		语法:return 值
		
		return后的值将会作为函数的执行结果返回
		可以定义一个变量来接收该结果
		
		在函数中return后的语句都不会执行
		如果return语句后不跟任何值就相当于返回一个undefined
		如果函数中不写return,则也会返回undefined
	*/
	
	function sum(a, b, c){
		//alert(a + b + c);
		var d = a + b + c;
		return d;
	}
	
	// 调用函数
	// 变量res的值就是函数的执行结果
	// 函数返回什么res的值就算什么
	var res = sum(4, 8, 9);
	
	var result = alert("hello"); // 没有返回值,返回undefined
</script>
<style>
</style>
</head>
<body>
</body>
</html>

54 练习

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		定义一个函数,判断一个数字是否是偶数,如果是返回true,否则返回false	
	*/
	
	function judge(a){
		return a % 2 == 0;
	}
	
	var res = judge(2);
	
	/*
		定义一个函数,可以根据半径计算一个圆的面积,并返回计算结果
	*/
	
	function s(r){
		return r * r * Math.PI;
	}
	
	/*
		创建一个函数,可以在控制台中输出一个人的信息
		可以输出人的name age gender address
		
		实参可以是任意的数据类型,也可以是一个对象
		当我们的实参过多时,可以将参数封装到一个对象中,然后通过对象传递
	*/
	
	function sayHello(name, age, gender, address){
		console.log("我是 "+ name + ",今年我" + age + "岁了," + "我是一个" + gender + "人," + "我住在" + address);
	}
	sayHello("猪八戒", 28, "男", "高老庄");
	
	//创建一个对象
	var obj = {
		name: "孙悟空",
		age: 18,
		gender: "男",
		address: "花果山"
	};
	
	function sayHello(o){
		console.log("我是 "+ o.name + ",今年我" + o.age + "岁了," + "我是一个" + o.gender + "人," + "我住在" + o.address);
	}
	
	sayHello(obj);
	
	/*
		实参可以是一个对象,也可以是一个函数
	*/
	
	function fun(a){
		//a(obj);
		console.log(a);
	}
	
	fun(sayHello);
	
	fun(function(){alert("hello")})
	
	fun(s); // s:函数对象
	fun(s(10)); //s():调用函数,函数返回值作为参数传入
</script>
<style>
</style>
</head>
<body>
</body>
</html>

55 return

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		使用break可以退出当前循环
		使用continue可以跳过当次循环
		使用return可以结束整个函数
	*/
	
	/*
		返回值可以是任意的数据类型
		也可以是一个对象,也可以是一个函数
	*/
	
	function fun(){
		var obj = {name: "沙和尚"};
		return obj
	}
	var a = fun();
	console.log(a.name); // 沙和尚
	
	function fun2(){
		//在函数内部声明一个函数
		function fun3(){
			alert("我是fun3");
		}
		//fun3();
		return fun3;
		//return fun3(); // 返回alert()也就是undefined
	}
	a = fun2(); // a是fun3()
	
	a(); // 执行alert
	fun2()(); // 同上	
</script>
<style>
</style>
</head>
<body>
</body>
</html>

标签:function,return,函数,55,JavaScript,51,console,实参,log
From: https://blog.csdn.net/weixin_45980065/article/details/140586879

相关文章

  • 【JavaScript】王者荣耀英雄卡牌动画切换效果
    动画呈现  代码详解<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>王者英雄卡牌......
  • JavaScript - jSignature移动端手写签名
    <html><head><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jSignature/2.1.3/jSignature.min.js"></script>......
  • javascript条件判断语句。
    if语句条件满足就执行,不满足就不执行if(条件){语句}ifelse语句条件满足,执行语句1,条件不满足,执行语句2if(条件){语句1}else{语句2}ifelseifelseif… if(条件1){ 语句1 }else{ 语句2 }if(条件2){ 语句2 }el......
  • 【I²C协议】STC89C51单片机IIC通信(代码+原理)
    STC89C51单片机IIC通信什么是I²C协议特点构成通信协议开始信号、结束信号、应答信号数据传输代码示例什么是I²C协议IIC,即I²C,全称Inter-IntegratedCircuit,字面上的意思是集成电路之间,它其实是I²CBus简称,所以中文应该叫集成电路总线,是由PHILIPS公司在80年......
  • 2517. 礼盒的最大甜蜜度
    题目链接:最小化最大值\(\longrightarrow\)二分答案找左性质的右边界,所以最后二分结束后返回的是\(l-1。\)猜一个答案\(x\),两件商品价格相差\(\geqslantx\)表示差距的最小值维持在\(x\),可以选择当前商品。统计选择的商品数量,若商品数量小于\(k\),说明不满足甜蜜度的定义......
  • Deepin 20.9在GTX 1060显卡上安装Nvidia 550.100驱动
    1下载对应版本的显卡驱动下载地址:https://www.nvidia.com/Download/index.aspxhttps://www.nvidia.cn/geforce/drivers/https://www.nvidia.cn/drivers/lookup/https://developer.nvidia.cn/cuda-gpushttps://developer.nvidia.com/cudnnwgethttps://cn.download.nvidi......
  • JavaScript 基本语法
    JavaScript基本语法1、简介1.1、概念1.2、JavaScript的组成部分1.3、前端三大件2、编写及运行3、关键字(具有特殊作用的字)4、变量4.1、声明变量的关键字:var4.2、命名规范4.3、经典的变量命名法5、运算符5.1、赋值运算符5.2、加性运算符5.3、乘性运算5.4、一元运算符5.5......
  • P5520 [yLOI2019] 青原樱
    原题链接题解设花为1,花盆为0,我们先确保花之间有空隙,即\(1010....0101\)接下来再插入\(n-m-(m-1)\)个花盆进入1与1之间则有\(C_{n-m+1}^{m}\)种插法(相当于m个黑球,n个白球有几种排列方法)再乘上\(A_m\),即花与花之间排列所以答案为\(A_{n-m+1}^m\)注意,什么是A排......
  • JavaScript Program to print pyramid pattern (打印金字塔图案的程序)
     编写程序打印由星星组成的金字塔图案 例子: 输入:n=6输出:    *    **    ***    ****    *****    ******     *****    ****    ***    **    ......
  • Javascript 在我的本地服务器上运行,但在 WordPress 上不起作用
    大家好,我有一个问题。我有一个在本地服务器中完美运行的模板/主题,但是当我将其移动到Wordpress时,根据我的研究,我得到了“jQuery不兼容”的信息。 我附上了代码的图像。你能帮我一下吗,一切看起来都很完美,在我看来一切都很完美,但在Wordpress中却不然。提前谢谢你!......