9.JS基础的学习——09day

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

 


1.函数的call和apply

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			/*
			 
			 * call()和apply() 
			 * 		- 这两方法都是函数对象的方法,需要通过函数对象来调用
			 * 		- 当对函数调用call()和apply()都会调用函数执行
			 * 	- 不同的的是:
			 * 		- 在调用call()和apply()可以将一个对象指定为第一个参数
			 * 			此时这个对象将会成为函数执行时的this
			 * 		- call()方法可以将实参在对象之后依次传递
			 * 		- apply()方法需要将实参封装到一个数组中统一传递
			 * 
			 * - this的情况:
			 * 		1.以函数形式调用时,this永远都是window;fun()====window.fun()
			 * 		2.以方法的形式调用时,this是调用方法的对象; 
			 * 		3.以构造函数的形式调用时,this是新创建的那个对象
			 * 		4.使用call和apply调用时,this是指定的第一个参数的那个对象
			 * 
			 * 
			 * 
			 */		
			 
			 /*
			  * 三者相同:
			  	fun.apply();
			  * fun.call();
			  * fun();
			  */
			 /*function fun(){
			 	alert(this);
			 }*/
			 
			 /*var obj = {};
			 var obj2 ={};*/
/*指定(传)谁就是谁*/ //这里指的是:参数传的对象是谁,this的指向就是谁
					//fun.call(obj);
					//1.fun.apply(obj); var obj = {};
					//fun.apply(obj2);//这里的this1就是obj2
	/*this就只能指定的是window*/
			 		//fun();
			 
/*二,方法使用的时候:*/
			function fun(a,b){
			 	//alert(this);
			 	console.log("a = "+a);
			 	console.log("b ="+ b);
			}
			
			 var obj = {
			 	this.name="obj1";
			 	this.sayName = function(){
			 		alert(this.name);
			 	}
			 };
			 var obj2 ={
			 	this.name="obj2";
			 };
		/*call的时候*/
			obj.sayName.call(obj,2,3);//后面可以传递实参
			 
			 
		/*apply的时候*/	 
		//指定执行的对象方法,参数是谁,this就是谁
			// obj.sayName.apply(obj2);
			//obj.sayName.apply(obj,2,3);//参数错误
		//怎么解决:需要将实参封装到一个数组中统一传递
		obj.sayName.apply(obj,[2,3]);//使用[]封装到数组


			 
			 
		</script>
	</head>
	<body>
		
	</body>
</html>

2.arguement实参列表和参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 2.封装实参的对象arguments
			 *  	- arguments是一个类数组对象,它可以通过索引来操作数据,也可以获取长度
			 * 		- 在调用函数时,我们所传递的实参都会在arguments中保存
			 * 		- arguments.lenght可以用来获取实参的长度
			 * 		- 我们即使不定义形参,可以通过argumengt来使用实参
			 * 			只不过比较麻烦
			 * 				arguments[0]表示第一个实参
			 * 				arguments[1]表示第二个实参
			 * 		- 它这里面有一个属性叫做callee
			 * 			这属性对应一个函数对象,就是当前正在指向的函数对象
			 * 
			 */
		/*无形参的时候:*/
		/*function fun(a,b)有形参的时候arguments也一样*/
			function fun(){
				//console.log(arguments instanceof Array);
				//console.log(Array.isArray(argument));
				//console.log(arguments.length);
				//console.log(arguments[1]);//arguments[2]
				//console.log(arguments.callee);
				console.log(arguments.callee == fun);//显示true
			}
			
			fun("hello",true);
			
			
			
			
			
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

3.Date对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 Date对象
			 *  - 在JS中使用Date对象来表示一个时间
			 * 
			 */
			//创建一个Date对象
			//如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
			//var d = new Date();
			//console.log(d);//显示当前的北京时间
			
			/*自定义时间*/
			/*创建一个指定的时间对象*/
			/*需要在构造函数中传递一个表示时间的字符串作为参数*/
			/*字符串日期格式:月份/日/年 时:分:秒*/
			var d2 = new Date("12/19/1997 18:30:30");
			
			//console.log(d2);
			
			/*Date的方法*/
			/*
			 * getDate();
			 * 获取当前日期对象是几日*/
			//var date = d.getDate(); 25号
			//var date = d2.getDate();//19号
			
			/*
			 *	getDay(); 
			 * 	输出今天是周几
			 * 		0表示周日
			 */
			/*var dateday = d2.getDay();
			console.log(dateday);//5*/
			
			/*
			 *	getMonth(); 
			 * 		输出今天是第几月
			 * 		会返回0-11的数字
			 * 		0表示1月
			 * 		1表示2月
			 */
			/*var month = d2.getMonth();
			console.log(month);*/
			
			/*
			 * getFullYear();
			 * 		输出的是年份
			 	
			 * */
			/*var year = d2.getFullYear();
			console.log(year);*/
			
			/*
			 * getTime();
			 * 		- 获取当前日期对象的时间戳
			 * 		- 时间戳:指的是从格林威治标准时间的1970年1月1日,0时0分0秒
			 * 			到当前日期所花费的毫秒数(可以转换为小时)
			 * 			(1s = 1000毫秒)
			 * 
			 * 注意:var timejiange = d2.getTime("1/1/1970 0:0:0");这个是北京时间
			 * 		和格林时间相差8个小时
			 * 		所以输出-28000000
			 * 
			 * 
			 	
			 * */
			/*var timejiange = d2.getTime();
			//console.log(timejiange/1000/60/60/24/365);
			console.log(timejiange);*/
			
			
			/*获取当前的时间戳*/
			//表示这79行代码执行的当前时间
			/*time = Date.now();
			console.log(time);*/
			
			/*用途:测试程序性能:
			 	开始头部放一个时间戳
			 	结束尾部放一个时间戳
			 	相减:得出时间
			 */
			/*var start = Date.now();
				for(var i=0 ; i<100 ; i++)
				{
					console.log(i);
				}
				var end  = Date.now();
				console.log("执行了:"+(end - start)+"毫秒");*/
			
			
			
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

4.Math

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 	Math
			 		- Math和其他元素的对象不同,它不是一个构造函数
			 			它属于一个工具类不用创建对象,它里面封装了数学运算相关的属性和方法
			 * 		- 比如
			 * 			Math.PI 表示的圆周率  3.141593653589397
			 * 			abs绝对值
			 * 		Math.ceil(1.2);为2
			 * 			- 可以对一个整进行向上取整,小数位只要有值就自动进1
			 * 		Math.floor(1.6);为1
			 * 			- 可以对一个数进行向下取整,小数部分要被舍掉
			 * 		Math.round(1.4);为1
			 * 			- 可以对一个数进行四舍五入取整
			 * 
			 */
			//使用: Math.方法;
			
			/*
			 	Math.random();
			 * 		- 可以生成0-1之间的随机数:console.log(Math.random());
			 * 我如果要生成0-10之间的随机数
			 * 		- 生成一个0-10的随机数
			 * 		- 生成一个0-x之间的随机数
			 * 			Math.round(Math.random()*x);
			 * 			
			 * 那如果我想生成:1-10
			 * 生成一个x-y之间的随机数
			 * 		规律:console.log(Math.round(Math.random()*9)+1);
			 * 		Math.round(Math.random()*(y-x))+x
			 */
				/*for(var i = 0 ; i<10 ; i++){
					//console.log(Math.random()*10);//达到0-10的数,但是不会有0和10
					//那该怎么办呢!来一个四舍五入的方法:Math.round();
					console.log(Math.round(Math.random()*10));
					//document.write(Math.round(Math.random()*10));
				}*/
			//那如果我想生成:1-10     来解决它
				/*for(var i = 0 ; i<10 ; i++){
					//console.log(Math.round(Math.random()*9)+1);//1-10
					console.log(Math.round(Math.random()*8)+2);//2-10
					//可以向上取整:不行
					//document.write(Math.ceil(Math.random()*9)+1));报错
				}*/
			
			/*最大最小值:max和min*/
			/*
			 	
			 * max() 可以获取多个数中的最大值
			 * min() 可以获取多个数中的最小值
			 */
			/*var max = Math.max(10,45,30,100);
			var min = Math.min(10,45,30,100);
			console.log("max="+max);
			console.log("min="+min);*/
			
			/*
			 	Math.pow(x,y);
			 * 		返回x的y次幂
			 * Math.sqrt(x);
			 * 		对x进行开方运算
			 * 
			 */
			/*var sum = Math.pow(10,2);
			console.log(sum);//100s*/
			
			/*var sum = Math.sqrt(100);
			console.log(sum);//10
			*/
			
		</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中为我们提供了三个包装类,通过这三个包装类可以将基本的数据类型转换为对象
			 * 		(其实这三种都是构造函数)
			 * 		String()
			 * 			- 可以将基本数据类型字符串转换为String对象			
			 * 
			 * 
			 * 		Number()
			 * 			- 可以将基本数据类型字符串转换为Number对象	
			 * 
			 * 
			 * 		Boolean()
			 * 			- 可以将基本数据类型字符串转换为Boolean对象	
			 * 
			 * 但是注意:对象比较的时候,因为对象比较的时候,里面的值比较的是地址
			 * 			地址不会一样,所以就会造成两个一样的数组,出现false的情况
			 * 		
			 * 注意:我们在实际应用中不会使用基本数据类型的对象
			 * 		如果使用基本数据类型对象,在做一些比较时可能会带来一些不可以预期的结果
			 * 
			 */
			//创建了一个Number类型的对象
			var num = new Number(3);
			/*console.log(typeof num);//object*/
			
			//创建了一个String类型的对象
			var str = new String("hello");
			/*console.log(typeof str);显示:object
			*/
			//创建了一个Boolean类型的对象
			var bool = new Boolean(true);
			/*console.log(typeof bool);显示:object
			*/
			
			/*问题:基本数据类型的功能强大还是对象的功能强大?*/
			
			//向num对象中添加一个属性
			num.name = "abcdefg";
			console.log(num.hello);//输出abcdefg
			
			//向数据类型中添加一个属性
			var a = 3 ;
			a.hello = "你好";
			console.log(a.hello);//输出:undefined
		/*所以说:基本对象比基本数据类型更加强大*/
		
		/*比较:比较两个对象的数的时候,就会出现false*/
		var num2 = new Number(3);
		console.log(num1 == num2);//显示false
		
		
		/*
		 	比较的时候,不适合用对象
		 * 
		 */
			var b = new Boolean(false);//在这里还是会执行该结果
			if(b){
				alert("我我运行了~~~");
			}
			/*
			 原因就是因为:Boolean转成一个对象都是返回true,所以返回的b = true
			 * */
			
			/*
			 	方法和属性只能添加给对象,不能添加给基本的数据类型
			 * 		当我们对一些基本数据类型的值去调用属性和方法的时候
			 * 		浏览器会先临时使用包装类将基本数据类型转换为对象,然后在调用对象的属性方法
			 * 		调用完以后,在将其转换为基本的数据类型
			 * 
			 * 
			 * 
			 */
			/*举例:
			 	基本数据类型不能使用属性和方法,都是使用第三方对象来保存使用
			 		调用完之后再将其转换为基本数据类型
			 * */
			var s = 123;
			//在这里先使用Number包装类,然后先使用对象来调用toString()方法,调用完以后,在将其转换为基本的数据类型
			s = s.toString();
			/*console.log(s);
			console.log(typeof s);*/
			s.hello ="hello";//第一个调用的对象,调用结束就销毁了
			console.log(s.hello);//第二次调用对象,调用结束就销毁了
			//他们两个对象不是同一个,而是不同对象的两次调用
			
			
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

6.String字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*创建一个字符串*/
			//var str = "Hello Atguigu"
			
			/*
			 	在底层字符串是以字符数组的形式保存的
			 * 	["H","e","1",.......]
			 * 
			 * 
			 */
			//console.log(str.length); 显示13
			//console.log(str[5]);//用数组的方式取字符串
			
			
			/*
			 	charAt()
			 		- 可以返回字符串中指定位置的字符
			 * 		- 根据索引取字符
			 * 
			 */
			/*  var str = "Hello Atguigu"
			  var result = str.charAt(0);//str[0]=H
			  console.log(result);*/
			
			
			
			/*
			 	charCodeAt()
			 		- 或取该数的Unicode的编码
			 * 		
			 * 
			 */
			/*  var str = "Hello Atguigu"
			  var result = str.charCodeAt(0); 显示0的编码
			  console.log(result);*/
			 
			 
			 
			 
			/*
			 	concat();连接字符串
			 * 		- 可以用来连接两个或者多个字符串
			 * 		- 作用和+一样
			 */
			  /*var result = String.fromCharCode(72);
			 	  result = str.concat("你好","再见");
			 	  console.log(result);
			 //显示:H你好再见*/
			
			
			/*
			 	indexof("检索对象",从当前位置开始找)
			 * 		- 该方法可以检索该字符串中内容的索引
			 * 		- 如果字符串含有该内容,则会返回其第一次出现的索引
			 * 			如果没有找到指定的内容,在indexof会显示 -1
			 * 	- 可以指定一个第二个参数,指定开始查找的位置
			 * 
			 * lastIndexOf();
			 * 		- 该方法的用法和indexof()一样
			 * 			不同的是indexof从前往后找
			 * 			而lastIndexOf是从后往前找
			 * - 可以指定一个第二个参数,指定开始查找的位置
			 */
			/*var str = "Hello Atguigu"
			  //var result = str.indexOf("l");//显示2
			  var result = str.indexOf("l",3);//显示3
			  console.log(result);*/
			 
			 /*
			 	slice()
			 		- 可以从字符串中截取指定的内容
			  * 	- 不会影响原字符串,而是将截取到的内容返回
			  * 	- 参数:
			  * 		第一个,开始位置的索引(包括开始位置)
			  * 		第二个,结束位置的索引(不包括结束的位置)
			  * 				- 第二个可以省略,则会截取到后面所有的
			  * 			- 也可以传递一个负数作为参数,负数的话将会从后计算
			  * 
			  * 
			  */
			 /*str = "abcdefghujk";
			 
			 result = str.slice(1,4);//显示:bcd
			 result = str.slice(1,-1);//显示 : bcdefghuj
			 console.log(result);
			 */
			
			
			/*
			 	substring()
			 * 		- 可以用来截取一个字符串,可以slice()类似
			 * 			- 参数:
			 * 				第一个,开始位置的索引(包括开始位置)
			 * 				第二个,结束位置的索引(不包括结束的位置)
			 * 			- 不同的是这个方法不接受负值作为参数
			 * 				如果传来了一个负值,则默认使用0
			 * 			- 而且他还自动调整参数的位置,如果第二个参数小于第一个,则自动交换
			 */
			 //result = str.substring(1,4);//显示:bcd
				/*这俩相等:
				result = str.substring(1,0);//a
				result = str.substring(0,1);//a*/
			
			/*
			 	substr()
			 * 		- 用来截取字符串
			 * 		- 参数:
			 * 			1.截取开始位置的索引
			 * 			2.截取的长度
			 * result = str.substr(3,2).;
			 */
			
			/*
			 	split()
			 * 		- 可以将一个字符串拆分为一个数组
			 * 		- 参数:
			 * 			- 需要一个字符串作为参数,将会根据该字符串去拆分数组
			 * 
			 * 
			 * - 如果传递一个空串:那就是把每一个字符的分开
			 * 
			 * 
			 */
			/*str = "abc,bcd,efg,hij";
			
			result = str.split(",");//根据逗号拆分数组
			
			console.log(result);
			console.log(result[1]);//bcd
			//判断是不是数组
			console.log(Array.isArray(resul));//true
			* */
			/*字符串转换为大小写*/
			/*
			 	toUpperCase()
			 * 		- 将一个字符串转换为大写并返回
			 * 
			 * 	toLowerCase()
			 * 		- 将一个字符串转换为小写并返回
			 */
			str ="abcdefg";
			result = str.toUpperCase();
			str = "ABCDEFG";
			str.toLowerCase();
			
			
			
			
			
			 
			 
			 
	/*特别一些的*/
			/*
			 	fromCharCode();
			 		- Unicode的编码或者转换成字符
			 * 	String.fromCharCode();	
			 * 	使用字符串String调用的
			 */
			/*  var str = "Hello Atguigu"
			  var result = String.fromCharCode(72);//显示H
			  console.log(result);
			*/
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值