5.JS基础的学习——05day

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

目录

 

1.break和continue的使用

2.质数的补充练习

3.对象的简介

4.属性名和属性值

5.基本数据类型和引用数据类型

6.对象字面量

7.函数

8.函数的返回值类型

9.立即执行函数

10.对象(方法)

11.枚举类型对象中的属性

总结


 

1.break和continue的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			/*
			 break关键字可以用来退出switch或循环语句
			 * 不能再if语句中使用break和continue
			 * break关键字,会立即终止离他最近的循环语句
			 * 
			 * 
			 * */
			/*for( var i = 0 ; i<5 ; i++)
			{
				console.log(i);//0-4
				//break;//0
				if(i==2){
					break;//for到2就退出
					//并且它是对for起的作用,而不是if
				}
					
			}*/
			
			/*
			 可以为循环语句创建一个label(自定义的),来标识当前的循环(给循环语句起名)
			 * 语法
			 * 		label(自定义):循环语句
			 *
			 * 使用的break语句时,可以再break后面跟着一个label
			 * 		这样break将会结束指定的循环,而不是(就)最近的
			 * 
			 * 
			 */
			
			
			/*
			 * 复习:是由于break一搬只对内层循环起作用,但是现在想让它对外层循环起作用
			 * 		 那么方法就是先给外层循环起名字,然后再在内部break outer;就可以了
			 */
			/*outer://给for循环起名
			for ( var i=0 ; i<5 ; i++) {
				console.log("@外层循环"+i);
				for (var j = 0 ; j<5 ; j++) {
					//break;//只对离它最近的循环产生影响,跳出循环
					break outer;
					console.log("内层循环"+j);
					
				}
			}*/
			
			
			/*
			 continue 关键字可以用来跳过当次循环
			 * 同样continue也只默认只会对离它最近的循环产生影响
			 * 
			 * 如果想要对远(外)层循环产生影响,那就起名,用名就好了
			 * 
			 * 
			 * */
			
			
			
			
			
			
			//outer:想对外层循环产生影响就起名字
			for (var i=0 ; i<5 ;i++) {
				for(var j=0 ; j<5 ; j++){
					if (i==2) {
					continue;//跳出当次循环,其他还执行
					//跳出内层循环的当次循环,其他的都没影响
					//continue outer;
					}
				}
				console.log(i);
			}
			
			
			
			
		</script>
	</head>
	<body>
		
	</body>
</html>

2.质数的补充练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 1.性能的提升60s-10s(优化)
			 * 怎么办:
			 * 		在程序执行前,开启计时器
			 * 		console.time("计时器的名字");可以用来开启一个计时器
			 * 		他需要一个字符串作为参数,这个字符串将会作为计时器的标识
			 * 		但是:有开始计时console.time,也有结束console.timeEnd计时,不能一直开着
			 * 		
			 * */
			/*浏览器执行代码就可以看见*/
			
			
			
			
			
			
			//开启计时器
			console.time("test");
			for ( var i = 2 ; i<=10000 ; i++) {
				//document.write(i);
				//外循环一个数字,内循环判断一次
				//i2=2j,i3=2j,i4=2j3j
				var flag=true;//为什么是放这里,假设;2-100的都为质数
				for (var j = 2 ; j<=Math.sprt(i) ; j++) {//=也就是还得等于当前那个数=
					if (i%j==0) {
						flag=false;//不属于质数
						//在比较的时候是不断的去2-i去余
						//但是还可以更优化
						//假设i=100,j=2,现在还余2-100之间的数
						//但是其实100%2==0就可以得出该数不是质数了,不用再去比较前面的数了
						//所以执行break退出就可以
						break;
						
						//不加break 269ms
						//加break   32ms
						//优化将近10倍
						//优化j<=i的值
						//也就优化了10倍

					}
				}
				//循环输出所有的质数
				if(flag){
					//在测试性能的时候不用输出语句
					//document.write(" "+i);
				}
			}
			//终止计时器
			//console.timeEnd("传谁放谁");用来停止一个计时器,需要一个计时器的名字作为参数
			console.timeEnd("test");
			
			/*
			 	总结:开启计时器
					  console.time("test");
			 * 			程序
			 * 		  终止计时器
			 *	     console.timeEnd("传谁放谁");test
			 * 
			 * 
			 */
			
			
			
			
			
			
			/*
			 联想到因子
			 优化i,因为i设置的过大,所以只能设置到开根号就不用再执行后面的数了,刚好到开根号
			 * 36
			 * 1  36
			 * 2  18
			 * 3  12
			 * 4   9
			 * 6   6
			 //中线原则
			 * 
			 * 后面的对于36就不用就再乘了,因为得出得值比较大
			 * 7
			 * 8
			 * 9
			 * 10
			 * */
			/*
			 可以Math.sprt();对一个数进行开根号
			 * */
			
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

3.对象的简介

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 - String  字符串
			 - Number  数值
			 - Boolean 布尔值
			 - Null    空值
			 - Undefined 未定义
			 	- 以上这五种类型属于基本数据类型,以后我们看到的值
			 		只要不是上边五种,全部都是对象
			 
			 - Object 对象
			 * 
			 * 
			 * 基本数据类型都是单一的值:"hello" 123 true
			 * 		值和值之间没有任何联系。
			 * 
			 * 在JS中来表示一个人的信息(name gender age)
			 * 		var name = "孙悟空";
			 * 		var gender = "男" ;
			 * 		var age  = 18;
			 * 如果使用基本数据类型的数据,那么我们所有的建的变量都是独立的,不能成为一个整体
			 * 
			 * 将数据的都放在一个塑料袋里面,作为一个有联系的数据类型
			 * 对象属于一种复合的数据类型,在对象中可以保存多个不同的数据类型的属性(把不同类型的东西放到一个对象里,让他们有联系起来)
			 *   优势:如果是独立的话就得调用三次或者n次才能使用这几个数据; 但是如果有object,就可以把他们放到一起,调用一次就可以了
			 * 
			 * 
			 * 
			 * 对象就是塑料袋(塑料袋里面放数据类型,明确说是放值)
			 * 
			 * 对象的分类:
			 * 	  1.内建的对象
			 * 			- 由ES标准中定义的对象,在任何的ES的实现中都可以使用
			 * 			- 例如:Math String Number Boolean Function Object(就像是系统定义的你直接使用就可以)
			 * 
			 * 	  2.宿主对象
			 * 			- 由JS的运行环境提供的对象,目前主要来讲是指浏览器提供的对象
			 * 			- 比如BOM(浏览器对象模型 一组) DOM(文档对象模型 一组)指的是两组对象,组里面又有很多对象
			 * 
			 * 	  3.自定义对象
			 * 			- 由开发人员自己创建的对象
			 * 
			 * */
			/*
			 创建对象
			 * 
			 * 使用new关键字(运算符)调用的函数,就是构造函数constructor
			 * 	   构造函数就是专门用来创建对象的函数
			 * 也就是说,使用构造函数来创建对象(调用对象函数)返回一个结果赋值给obj
			 * var obj = new Object();
			 * 使用typeof检查一个对象时,会返回object
			 * 
			 * */
			var obj = new Object();
			/*向对象添加属性
			 	在对象中保存的值称为属性
			 		语法:对象属性 = 属性值
			 * */
			
			//向obj中添加一个name属性
			obj.name = "孙悟空";
			//向obj中添加一个gender属性
			obj.gender = "男";
			//向obj中添加一个age属性
			obj.age= 18;
			//直接使用一个obj就可以调出三个
			//console.log(obj);
			
			/*
			 读取对象中的属性
			 	语法:对象.属性名
			 * 
			 * 
			 * 如果读取对象中没有的属性,那么不会报错,但是会得出一个未定义Undefined
			 * */
			//console.log(obj.name);//显示孙悟空
			//console.log(obj.hello);//显示Undefined
			
			/*
			 修改对象中的属性
			 * 		语法:对象.属性名=新的值(覆盖之前的值)
			 * */
			obj.name = "tom";//孙悟空变为tom
			
			
			/*
			 删除对象的属性,
			 		语法:delect 对象.属性名
			 * 
			 * 
			 * */
			delete obj.name;
			
			
			/*
			 总结:对象像一个容器,用着方便(将一样的值放到不同的对象里面。方便使用)
			 	1.新建对象 var obj = new Object();
			 	2.添加对象 obj.name=值;obj.gender=值………………
			 	3.读取对象 (全部console.log(obj))、单个console.log(obj.name);
			 	4.修改对象  obj.name = 命重名;
			 	5.删除对象  delete 对象.属性名
			 * 
			 * 
			 * */
			
		</script>
	</head>
	<body>
	</body>
</html>

4.属性名和属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var obj = new Object();
			/*
			 向对象中添加属性
	属性名:
			 * 	  - 对象的属性名不强烈要求遵守标识符的规范
			 * 	  - 什么乱七八糟的名字都可以使用,想用什么就用什么
			 * 		- 但是使用的时候还是尽量按照标识符的规范去做
			 */
			/*
		 方式一:
			 name属性名 = "孙悟空"属性值
			 * */
			obj.name = "孙悟空";
			//obj.var = "hello"; 可以用
			
			
			/*
		方式二:
			乱七八糟的用法:(看完就忘就行)
			 如果要使用特殊的属性名,不能采用.的方式来使用操作
			 	需要使用另一种方式:
			 		语法:对象["属性名"] = 属性值
			 * 	读取的时候也要采用这种方式 console.log(obj["123"]);
			 * 
			 * 优势:
			 * 		使用[]这一种形式去操作属性,更加的灵活
			 * 		在[]中可以直接去传递一个变量,这样变量值是多少就会读取那个属性
			 * 
			 * 
			 * */
			/*优势举例:*/
			obj["123"] = 789;
			obj["nihao"] = "你好";
			var n = "123";//var n = "nihao";中间变量,是其变得灵活
			console.log(obj[n]);//console.log(obj["123"]);
			/*概括:就是说通过设置一个
			 * 变量n=指定属性名"123"=属性值 789,
			 * 		输出变量n=“123” 找到该变量名n=“123”的对象名 “123”=789  就可以输出该对象名包含的值
			 * 总的来说是,方便传值使用obj["属性名"]=属性值; 灵活
			 */
		/*
	属性值:
		 * 	JS对象的属性值,可以是任意的数据类型
		 * 		甚至是一个对象(就是说塑料袋里再套一个塑料袋),可以无限套塑料袋
		 * 
		 * 总结:也就是说,将别人的对象放到自己的对象当中去
		 * */
		//创建一个对象
			var obj2 = new Object();
			
			obj2.name="猪八戒";
			
			//套用: 把obj2一整个对象放在 obj对象的test属性名里面
			obj.test = obj2;//obj2.name="猪八戒";
			
			console.log(obj.test.name);//层层套用,输出猪八戒
			
		/*
	in 运算符
		   - 通过该运算符可以检查一个对象中是否含有指定的属性
		   		如果有则返回true,没有返回false
		   	- 语法:
		   		"属性名" in 对象
		 */
		//检查obj中是否含有test2属性
			//console.log("test2" in obj); 显示false
			console.log("test" in obj);//显示true
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

5.基本数据类型和引用数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 基本数据类型
			 * 		String
			 * 		Number
			 * 		Boolean
			 * 		Null
			 * 		Undefined
			 * 引用数据类型
			 * 		Object
			 * 
			 * 
			通过栈和堆来观察数据类型的变化
			
			 * JS中的变量都是保存到栈内存当中的
			 * 		基本数据类型的值直接在栈内存中存储
			 * 		值与值之间具独立独立存在,修改一个变量不会影响其他的值
			 * 
			 * 
			 * 		引用数据类型(对象)是保存到堆内存当中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间
			 * 		而变量保存的是对象内存地址(对象的引用).如果两个变量保存的是同一个对象引用
			 * 		当一个通过一个变量修改属性值的时候,另一个也会受到影响
			 * 
			 * 
			 */
			
		/*举例1:先说明他们的区别(基本数据类型和引用数据类型)*/
			var a = 123;
			var b = a;
			a++;
			//console.log("a="+a); a=124
			//console.log("b="+b); b=123
			//他们的值是相互独立的,互不影响的
			//1.
			var obj = new Object();
			obj.name = "父亲";//父
			var obj2 = obj;
			
			//3.修改obj的name属性
			obj.name = "孩子";//子,覆盖之前的了
			console.log(obj.name);
			console.log(obj2.name);
			//2.两个显示为父亲
			//3.此时两个显示为孩子
		/*举例2
		 		obj2 = null;
		 		console.log(obj.name);//显示的是原来的地址
				console.log(obj2.name);//显示null
		*/
		/*
		 举例3:
		 		var c = 10 ;
		 		var d = 10 ;
		 		//console.log(c==d); 显示true
		 		原因:真值比较
		 */
		/*举例4:
		 		var obj3 = new Object();
		 		var obj4 = new Object();
		 		obj3.name = "沙和尚";
		 		obj4.name = "沙和尚";
		 		console.log(obj3==obj4); 显示的是false
		 		原因:地址比较,都是堆内单独的两块动态内存空间(由构造函数new分配)
		 说地址不一样,结果为false
		 * */
		
		//基本数据类型和引用数据类型的区别:
		/*
		 总结:当两个比较基本的数据类型的值的时候,就是比较值
		 	     而两个比较两个引用数据类型的时候,它是比较的对象的内存地址
		 * 			如果两个对象是一模一样,但是地址不同,返回的还是false
		 * 
		 * 
		 * (新的概念:指针指向:栈指向堆)
		 * */
		
		
		
		
			
			/*
			 通过栈和堆来观察数据类型的变化
			 * 
			 * 
			 * */
			
			
			
			
			
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

6.对象字面量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
				第一种方式创建:
					创建一个对象
					var obj = new Object();
			 */
			/*
			 	第二种方式创建:
			 		使用字面量来创建一个对象
			 */
			/*var obj = {};
			//console.log(typeof obj);
			obj.name = "孙悟空";
			console.log(obj.name);*/
			
			/*
			 	第三种方式创建:
			 		使用字面量来创建一个对象并且直接在大括号中指定对象和赋值
			 			语法:var obj ={属性名:属性值,属性名:属性值,………………};
					
					而且属性名可以加引号“name”:“猪八戒”,可以不加
					只是如果你想起特殊的名字,就得加上引号
					
					属性名和属性值时一组一组的名值对结构(键值对)
						名和值之间使用:连接,多个名值之间使用逗号隔开
						如果一个属性之后没有其他的属性了,就不要写逗号了,
			*/
			/*举例:*/
			//var obj ={name:"孙悟空",gender:"男",age:"女"};
			//清楚一些
			/*var obj ={
				name:"孙悟空",
				gender:"男",
				age:"23".
				};*/
			/*举例:嵌套的*/
			/*var obj ={
				name:"孙悟空",
				gender:"男",
				age:"25",
				test:{name:"沙和尚"}//test为属性=属性值name=沙和尚
				//这里不存在嵌套
				
				};*/
			
			
		</script>
	</head>
	<body>
	</body>
</html>

7.函数(待写)

8.函数的返回值类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 函数的返回值return类型
			 * 
			 * 
			 * 
			 */
		/*先来一个三种的比较*/
			function fun(){
				alert("函数要执行了~~~~");
				
			for(var i=0 ; i<5 ; i++){
				
				if(i==2){
					//使用break可以退出当前的循环,但是还是执行后面的语句
					//break;//显示0 1 2 程序以及执行完了,后面3和4不执行
					
					//continue用于跳过当次循环    但是还是执行后面的语句
					//continue;//显示0 1 3 4 程序以及执行完了
					
					
					//return 可以退出整个函数
					//return;//显示0 1  当i=2的时候退出整个循环
					
				}
				console.log(i);
				
			}
			alert("程序以及执行完了");
		}
		//调用
		//fun();
			
			/*返回值可以是任意的数据类型
			 	也可以是一个对象object , 也可以是一个函数
			 * 
			 * 
			 * */
				function fun2(){
					
					//return null;//10 "hello" true null
					/*var obj = {
						name:"沙和尚"
					};
					return obj;*/
					
					//直接简写:同上
					return {name:"沙和尚"};
					
				}
				//var a = fun2();
				//console.log("a= "+a); 显示a=[object object]
				//console.log("a= "+a.name);//显示沙和尚
				
				
			//函数的嵌套
				/*function fun3(){
					//在函数内部再声明一个函数
					function fun4(){
						alert("我是fun4");
					}
					fun4();
				}
				fun3();*/
		//上下两种一样
				function fun3(){
					//在函数内部再声明一个函数
					function fun4(){
						alert("我是fun4");
					}
					return fun4;//将fun4作为值 返回到fun3函数里,也就是通过fun3调出fun4
				}
				a = fun3();//显示 fun4()
				console.log(a);
				//a();显示alert("我是fun4");
				//fun3()();显示alert("我是fun4");
			
		</script>
	</head>
	<body>
	</body>
</html>

9.立即执行函数(llFE)

<!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);
			//输出123,456 可以直接传值
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

10.对象(方法)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
	第一种方式:
			 */
			 /*
		调用方法 :先创建一个对象
			  */
			  var obj = new Object();
			  //向对象中添加属性
			  obj.name="孙悟空";
			  obj.age=18;
			  obj.gender="男";
			  //对象的属性值可以是任何的数据类型,也可以是一个函数
			  obj.sayName = function(){
			  		console.log("name= "+obj.name);//等于对象中的一个值
			  }
			  obj.sayName();//显示=孙悟空
			  /*
			   	说明:
			   		函数也可以称为对象的属性(sayName)
			   			如果一个函数作为一个对象的属性来保存
			   * 		那么我们称为这个函数时就叫做这个对象的方法
			   * 		调用这个函数就说调用对象的方法(method) obj.sayName();
			   */
			  /*个人解读;
			   * 就是一个对象里面有一个属性的属性值是一个函数,
			   * 	那么当调用这个属性值的时候就是使用了函数
			   * 	我们把这种调用函数被赋值给一个属性加方法的调用
			   * 	 obj.sayName();
			   * 注意:直接调用函数名才算是调用函数,而通过对象赋值函数,调用被赋值函数的叫调用方法
			   * */
		/*调用函数:*/
					function fun(){
			  			console.log("name= "+obj.name);
			  		}
			  		fun();
			  		
			  		
	/*
	 第二种方法调用:
	 * 
	 * */
					var obj2={
						name:"猪八戒",
						age:18;
						sayAge:function(){
							console.log(obj2.Age);
						}
					};//不要忘了加分号
					//调用方法
					obj2.sayAge();
		
		</script>
	</head>
	<body>
	</body>
</html>

11.枚举类型对象中的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 
			 * 
			 */
			var obj = {
				name:"孙悟空",
				age:18,
				gender:"男",
				address:"花果山"
			};
			/*就是说,我不知道obj里面有哪些属性,
			 * 		我需要知道一些属性,
			 * 		我就可以使用枚举
			 * */
			//枚举对象中的属性
			//使用for..... in 语句
			/*
			 语法:
			 * 	  for(var 变量 in 对象){
			 * 		
			 * 		}
			 *	for...in 语句中的 对象有几个属性,循环体就会执行几次
			 * 
			 * n:name     +n ————>取到属性名
			 * obj:对象名   +obj[n] ————>取到属性值
			 * */
			
				for(var n in obj){
					//console.log("hello");//此时显示4次
					console.log("属性名:" +n);
					console.log("属性值:" +obj[n]);//因为[n]可以传值 而obj.name不可以,它只能调用,不能传
				}
			/*复习
			 
			 * 枚举:一一列举出对象的的属性还有属性值
			 * 
			 * 
			 * */
			
			
		</script>
	</head>
	<body>
	</body>
</html>

 


总结

加油,努力,奋斗

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值