js基础知识汇总06

最新推荐文章于 2023-09-04 11:05:08 发布
最新推荐文章于 2023-09-04 11:05:08 发布
阅读量131 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AnalogElectronic/article/details/108573740
版权

返回值

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

在这里插入图片描述

练习

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

在这里插入图片描述

return

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			function fun(){
				alert("函数要执行了~~~~");
				
				for(var i=0 ; i<5 ; i++){
					
					
					if(i == 2){
						//使用break可以退出当前的循环
						//break;
						
						//continue用于跳过当次循环
						//continue;
						
						//使用return可以结束整个函数
						//return;
					}
					
					console.log(i);
				}
				
				alert("函数执行完了~~~~");
			}
			
			//fun();
			
			/*
			 * 返回值可以是任意的数据类型
			 * 	也可以是一个对象，也可以是一个函数
			 */
			function fun2(){
				
				//返回一个对象
				return {name:"沙和尚"};
			}
			
			var a = fun2();
			
			//console.log("a = "+a);
			
			function fun3(){
				//在函数内部再声明一个函数
				function fun4(){
					alert("我是fun4");
				}
				
				//将fun4函数对象作为返回值返回
				return fun4;
			}
			
			a = fun3();
			//console.log(a);
			//a();
			fun3()();
			
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

立即执行函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			
			//函数对象()
			/*
			 * 立即执行函数
			 * 	函数定义完，立即被调用，这种函数叫做立即执行函数
			 * 	立即执行函数往往只会执行一次
			 */
			/*(function(){
				alert("我是一个匿名函数~~~");
			})();*/
			
			(function(a,b){
				console.log("a = "+a);
				console.log("b = "+b);
			})(123,456);
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个对象
			 */
			var obj = new Object();
			
			//向对象中添加属性
			obj.name = "孙悟空";
			obj.age = 18;
			
			//对象的属性值可以是任何的数据类型，也可以是个函数
			obj.sayName = function(){
				console.log(obj.name);
			};
			
			function fun(){
				console.log(obj.name);
			};
			
			//console.log(obj.sayName);
			//调方法
			obj.sayName();
			//调函数
			//fun();
			
			/*
			 * 函数也可以称为对象的属性，
			 * 	如果一个函数作为一个对象的属性保存，
			 * 	那么我们称这个函数时这个对象的方法
			 * 	调用这个函数就说调用对象的方法（method）
			 * 
			 * 但是它只是名称上的区别没有其他的区别
			 * 
			 */
			
			var obj2 = {
				
				name:"猪八戒",
				age:18,
				sayName:function(){
					console.log(obj2.name);
				}
				
			};
			
			obj2.sayName();
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

枚举对象中的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var obj = {
						name:"孙悟空",
						age:18,
						gender:"男",
						address:"花果山"
					 };
					 
			//枚举对象中的属性
			//使用for ... in 语句
			/*
			 * 语法：
			 * 	for(var 变量 in 对象){
			 * 	
			 *  }
			 * 
			 * for...in语句 对象中有几个属性，循环体就会执行几次
			 * 	每次执行时，会将对象中的一个属性的名字赋值给变量
			 */
			
			for(var n in obj){
				console.log("属性名:"+n);
				
				console.log("属性值:"+obj[n]);
			}
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

作用域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 作用域
			 * 	- 作用域指一个变量的作用的范围
			 * 	- 在JS中一共有两种作用域：
			 * 		1.全局作用域
			 * 			- 直接编写在script标签中的JS代码，都在全局作用域
			 * 			- 全局作用域在页面打开时创建，在页面关闭时销毁
			 * 			- 在全局作用域中有一个全局对象window，
			 * 				它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用
			 * 			- 在全局作用域中：
			 * 				创建的变量都会作为window对象的属性保存
			 * 				创建的函数都会作为window对象的方法保存
			 * 			- 全局作用域中的变量都是全局变量，
			 * 				在页面的任意的部分都可以访问的到
			 * 
			 * 		2.函数作用域
			 * 
			 */
			
			var a = 10;
			var b = 20;
			//var c = "hello";
			
			//console.log(window.c);
			
			function fun(){
				console.log("我是fun函数");
			}
			
			//window.fun();
			
			//window.alert("hello");
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

变量的声明提前

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			
			/*
			 * 变量的声明提前
			 * 	- 使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），
			 * 		但是如果声明变量时不适用var关键字，则变量不会被声明提前
			 * 
			 * 函数的声明提前
			 * 	- 使用函数声明形式创建的函数 function 函数(){}
			 * 		它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数
			 * 	   使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用	
			 */
			/*console.log("a = "+a);
			
			var a = 123;*/
			
			//fun();
			
			
			//函数声明，会被提前创建
			function fun(){
				console.log("我是一个fun函数");
			}
			
			//函数表达式，不会被提前创建
			var fun2 = function(){
				console.log("我是fun2函数");
			};
			
			fun2();
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

函数作用域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 函数作用域	
			 * 	- 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
			 * 	- 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
			 * 	- 在函数作用域中可以访问到全局作用域的变量
			 * 		在全局作用域中无法访问到函数作用域的变量
			 * 	- 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
			 * 		如果没有则向上一级作用域中寻找，直到找到全局作用域，
			 * 		如果全局作用域中依然没有找到，则会报错ReferenceError
			 * 	- 在函数中要访问全局变量可以使用window对象
			 */
			
			//创建一个变量
			var a = 10;
			
			function fun(){
				
				var a = "我是fun函数中的变量a";
				var b = 20;
				
				//console.log("a = "+a);
				
				function fun2(){
					console.log("a = "+window.a);
				}
				
				fun2();
				
			}
			
			//fun();
			//console.log("b = "+b);
			
			/*
			 * 在函数作用域也有声明提前的特性，
			 * 	使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
			 * 	函数声明也会在函数中所有的代码执行之前执行
			 */
			
			function fun3(){
				
				fun4();
				
				//console.log(a);
				
				var a = 35;
				
				function fun4(){
					alert("I'm fun4");
				}
				
			}
			
			//fun3();
			
			
			var c = 33;
			
			/*
			 * 在函数中，不适用var声明的变量都会成为全局变量
			 */
			function fun5(){
				//console.log("c = "+c);
				//c = 10;
				
				//d没有使用var关键字，则会设置为全局变量
				d = 100;
			}
			
			fun5();
			
			//在全局输出c
			//console.log("d = "+d);
			
			var e = 23;
			
			/*
			 * 定义形参就相当于在函数作用域中声明了变量
			 */
			function fun6(e){
				alert(e);
			}
			
			fun6();
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			alert(d);
			
			var a = 10;
			
			var b = "hello";
			
			c = true;
			
			function fun(){
				alert("hello");
			}
			
			var d = 35;
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

this

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 解析器在调用函数每次都会向函数内部传递进一个隐含的参数,
			 * 	这个隐含的参数就是this，this指向的是一个对象，
			 * 	这个对象我们称为函数执行的 上下文对象，
			 * 	根据函数的调用方式的不同，this会指向不同的对象
			 * 		1.以函数的形式调用时，this永远都是window
			 * 		2.以方法的形式调用时，this就是调用方法的那个对象
			 */
			
			function fun(){
				//console.log("a = "+a+", b = "+b);
				console.log(this.name);
			}
			
			//fun();
			
			//创建一个对象
			var obj = {
				name:"孙悟空",
				sayName:fun
			};
			
			var obj2 = {
				name:"沙和尚",
				sayName:fun
			};
			
			//console.log(obj.sayName == fun);
			var name = "全局的name属性";
			//obj.sayName();
			//以函数形式调用，this是window
			//fun();
			
			//以方法的形式调用，this是调用方法的对象
			//obj.sayName();
			obj2.sayName();
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

this

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//创建一个name变量
			var name = "全局";
			
			//创建一个fun()函数
			function fun(){
				console.log(this.name);
			}
			
			//创建两个对象
			var obj = {
					name:"孙悟空",
					sayName:fun
			};
			
			var obj2 = {
					name:"沙和尚",
					sayName:fun
			};
			
			//我们希望调用obj.sayName()时可以输出obj的名字
			//obj.sayName();
			
			obj.sayName();
			
		
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个对象
			 */
			var obj = {
					name:"孙悟空",
					age:18,
					gender:"男",
					sayName:function(){
						alert(this.name);
					}
			};

			/*
			 * 使用工厂方法创建对象
			 * 	通过该方法可以大批量的创建对象
			 */
			function createPerson(name , age ,gender){
				//创建一个新的对象 
				var obj = new Object();
				//向对象中添加属性
				obj.name = name;
				obj.age = age;
				obj.gender = gender;
				obj.sayName = function(){
					alert(this.name);
				};
				//将新的对象返回
				return obj;
			}
			
			/*
			 * 用来创建狗的对象
			 */
			function createDog(name , age){
				var obj = new Object();
				obj.name = name;
				obj.age = age;
				obj.sayHello = function(){
					alert("汪汪~~");
				};
				
				return obj;
			}
			
			var obj2 = createPerson("猪八戒",28,"男");
			var obj3 = createPerson("白骨精",16,"女");
			var obj4 = createPerson("蜘蛛精",18,"女");
			/*
			 * 使用工厂方法创建的对象，使用的构造函数都是Object
			 * 	所以创建的对象都是Object这个类型，
			 * 	就导致我们无法区分出多种不同类型的对象
			 */
			//创建一个狗的对象
			var dog = createDog("旺财",3);
			
			console.log(dog);
			console.log(obj4);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

构造函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 创建一个构造函数，专门用来创建Person对象的
			 * 	构造函数就是一个普通的函数，创建方式和普通函数没有区别,
			 * 	不同的是构造函数习惯上首字母大写
			 * 
			 * 构造函数和普通函数的区别就是调用方式的不同
			 * 	普通函数是直接调用，而构造函数需要使用new关键字来调用
			 * 
			 * 构造函数的执行流程：
			 * 	1.立刻创建一个新的对象
			 * 	2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
			 * 	3.逐行执行函数中的代码
			 * 	4.将新建的对象作为返回值返回
			 * 
			 * 使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。
			 * 	我们将通过一个构造函数创建的对象，称为是该类的实例
			 * 
			 * this的情况：
			 * 	1.当以函数的形式调用时，this是window
			 * 	2.当以方法的形式调用时，谁调用方法this就是谁
			 * 	3.当以构造函数的形式调用时，this就是新创建的那个对象
			 * 
			 */
			function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				this.sayName = function(){
					alert(this.name);
				};
			}
			
			function Dog(){
				
			}
			
			var per = new Person("孙悟空",18,"男");
			var per2 = new Person("玉兔精",16,"女");
			var per3 = new Person("奔波霸",38,"男");
			
			var dog = new Dog();
			
			/*console.log(per);
			console.log(dog);*/
			
			/*
			 * 使用instanceof可以检查一个对象是否是一个类的实例
			 * 	语法：
			 * 		对象 instanceof 构造函数
			 * 如果是，则返回true，否则返回false
			 */
			//console.log(per instanceof Person);
			//console.log(dog instanceof Person);
			
			/*
			 * 所有的对象都是Object的后代，
			 * 	所以任何对象和Object左instanceof检查时都会返回true
			 */
			//console.log(dog instanceof Object);
			
			
		</script>
	</head>
	<body>
	</body>
</html>
AnalogElectronic
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础知识总结
qq_56756602的博客
08-21 492
基本语法（数量，数据类型和运算符）、逻辑分支语句、IF 条件分支结构、SWITCH 条件分支结构、三元运算（扩展）等、程序的三种结构、循环语句（while 、do-while 、for）及跳转语句（break与countinue的区别 ）计数器和break与continue的连用、document.write()等、JavaScript的函数、函数的封装（有参、无参、有无返回值的基本用法）、预解析、函数的作用域、变量使用规则、作用域链、递归函数以及简单的了解对象,数组的运用
最新Javascript 基础知识全总结(持续更新)
weixin_66092620的博客
04-17 8245
本人目前在黑马程序员培训,现将所学的知识整理出来,希望能帮到零基础的初学者,后续会持续更新~~~ 一,JavaScript 是什么 1, JavaScript 是什么 JavaScript 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果 2, 作用 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js) 3, JavaScript的组成 E...
JS基础-06-函数
HZ~的博客
07-25 141
函数的介绍 函数：就是将一些功能或语句进行封装，在需要的时候，通过调用的形式，执行这些语句。 函数也是一个对象 使用typeof检查一个函数对象时，会返回function 函数的作用： 将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动。 简化编程，让编程模块化。 来看个例子： console.log("你好"); sayHello(); // 调用函数 // 定义函数 function sayHello(){ console.log("
JavaScript基础(10)_实参/return返回值可以是任何值、立即执行函数
no15870678621的博客
11-07 315
js实参，返回值，立即执行函数
JS-立即执行函数(function(){...})() && (function(){...})()
若末lan的博客
06-29 344
在学习闭包的过程中遇到了（立即执行），之前见到(function(){...})() &amp;&amp; (function(){...}())这种写法，就没有去知其所以然，也不会去写这种函数。所以一直害怕js,但还是要学习了解的，基本概念一定都要知道，才能自己造轮子，而不是一味地使用他人的，这篇借鉴了别人的，但已经都get了，因此，记个笔记，让自己记得更牢，包括之后的闭包，调用。javascr...
JS基础知识点总结
u011280778的博客
07-04 394
NaN 与任何值相比较 都是false (包括它自己 如NaN == NaN =>false)，可以理解为它连自己的不认识 parseInt("123abc") 计算机是从头到尾读字符串，如果不是数字就截断，直接返回 parseFloat同理 num = 123.1456789 num.toFixed(3) 科学计数 四舍五入 3指的是保留三位小数点 j...
Javascript 基础知识学习
岳来的博客
11-23 6490
javascript 基础学习
JS基础知识点大汇总
wth33的博客
11-14 8276
JavaScript基础知识汇总 1、js的简介 JavaScript 是⼀种客户端脚本语⾔（脚本语⾔是⼀种轻量级的编程语⾔，语法和java类似。 JavaScript 通常被直接嵌⼊ HTML ⻚⾯，由浏览器解释执⾏ JavaScript 是⼀种解释性语⾔（就是说，代码执⾏不进⾏预编译）。 特点：弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征) JavaScript语⾔中包含三个核⼼：ECMAScript基本语法、DOM、BOM 2、 前端Web技术的组成 HTML、CSS、JavaScr
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
node.js基础知识汇总
10-14
主要介绍了node.js基础知识，帮助大家更好的理解和学习node.js，感兴趣的朋友可以了解下
JavaScript基础知识总结.xmind
02-23
通过思维导图的方式，快速了解掌握JavaScript的基本内容
JavaScript基础知识之方法汇总结
10-22
本文给大家分享了javascript基础知识，包括数组的方法，函数的方法，数字的方法，对象的方法，字符串的方法，常规方法，正则表达式方法，本文介绍的非常详细，具有参考价值特此分享供大家参考
Javascript基础知识盲点总结之函数
10-22
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。这篇文章主要介绍了Javascript基础知识盲点总结之函数的相关资料
7个JS基础知识总结
10-26
主要介绍了7个JS基础知识,需要的朋友可以参考下
基于微信小程序做了个交友小程序
AnalogElectronic的博客
06-01 3179
实现的功能是用户上传自己的资料，给大家看。其实就是一个交友、婚恋、相亲的免费广告平台。 先看效果 主要代码： 01列表页 <!--index.wxml--> <!-- <form bindsubmit="formSubmit"> <input name="name" placeholder="请输入名字"></input> <button form-type="submit">submit</button> </
jQuery学习笔记05
AnalogElectronic的博客
09-27 1798
常见效果 01__表格隔行变色.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01__表格隔行变色</title> <style> div, span, p { width: 140px; height: 140px; margin: 5px; backg
微信小程序十二时辰时钟
AnalogElectronic的博客
06-27 1466
微信小程序十二时辰时钟
js+html实现打字游戏v2
最新发布
AnalogElectronic的博客
09-04 1110
/单词生成速度，可以根据当前得分来设置，得分越高速度越快，比如当得分大于200时速度设为2，大于300百是速度设为3。，在此基础之上增加了从文件读取到的单词，随机选取10个单词。//从文件读取到的单词，随机选取10个单词。附录：englishg words.txt。//这里可以使用固定单词。//清除全部打出的一行。
node.js基础知识
07-28
Node.js的基础知识包括了如何执行另一个模块中的功能。例如，在一个模块中使用require函数引入另一个模块，然后可以调用该模块中的功能。例如，如果有一个b.js模块和一个first.js模块，可以在first.js模块中使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值