JavaScript进阶--JavaScript对象

叁歲伎倆 2022-05-14 02:04 315阅读 0赞

#### 一、JavaScript对象 ####

**1. JavaScript String对象**

常用属性:
    	length	字符串的长度  string.length
    
    常用方法:	
    	charAt()	返回在指定位置的字符     str.charAt(str.length-1);
    	concat()	连接两个或更多字符串,并返回新的字符串          str1.concat(str2);
    	indexOf()	返回某个指定的字符串值在字符串中首次出现的位置   str1.indexOf(str2);
    	lastIndexOf()	从后向前搜索字符串,并从起始位置（0）开始计算返回字符串最后出现的位置
    
    	replace()	在字符串中查找匹配的子串,并替换与正则表达式匹配的子串。
    		str.replace(str1,str2);  str1是str里的部分字符串，用str2替换str1,仅替换一次
    	
    	substr()	从起始索引号提取字符串中指定数目的字符
    		substr() 的参数指定的是子串的开始位置（从0开始）和长度
    	substring()	提取字符串中两个指定的索引号之间的字符
    		substring() 方法用于提取字符串中介于两个指定下标之间的字符
    		substring(from索引从0，to不包括结束)
    		substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符
    
    	match()	查找找到一个或多个正则表达式的匹配   
    		var str="The rain in SPAIN stays mainly in the plain"; 
    		var n=str.match(/ain/gi);     结果: ain,ain,ain
    	
    	search() 查找与正则表达式相匹配的值,返回检索位置
    	var str="Visit Runoob!";    var n=str.search("Runoob");
    		输出结果：6
    
    	toLowerCase()	把字符串转换为小写(全部)  str.toLowerCase()
    	toUpperCase()	把字符串转换为大写   str.toUpperCase()
    	trim()	去除字符串两边的空白
    	valueOf()	返回某个字符串对象的原始值

**2. JavaScript Data对象**

常用方法:
    	getDate()	    从 Date 对象返回一段时间中的某一天 (1 ~ 31)   time.getDate()
    	getFullYear()	从 Date 对象以四位数字返回年份             new Date().getFullYear();
    	getMonth()	    从 Date 对象返回月份 (0 ~ 11)
    	getDay()	    从 Date 对象返回一周中的某一天 (0 ~ 6)
    	getHours()	    返回 Date 对象的小时 (0 ~ 23)
    	getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
    	getSeconds()	返回 Date 对象的秒数 (0 ~ 59)
    	getMilliseconds()	  返回 Date 对象的毫秒(0 ~ 999)
    
    	parse()	    返回1970年1月1日午夜到指定日期（字符串）的毫秒数
    	setDate()	设置 Date 对象中月的某一天 (1 ~ 31)
    		get换成set，则变成设置函数，设置某段时间的年月日秒
    	toJSON()	以 JSON 数据格式返回日期字符串
    	toString()	把 Date 对象转换为字符串

**3. JavaScript Array对象**

常用属性:
    	length	设置或返回数组元素的个数
    	
    常用方法:
    
    	toString()	把数组转换为字符串，并返回结果
    	concat()	连接两个或更多的数组，并返回结果
    	every()	    检测数值元素的每个元素是否都符合条件
    	fill()	使用一个固定值来填充数组
    		    array.fill(value, start, end)
    			value	必需,填充的值   start	  可选,开始填充位置,从0开始
    			end	可选,停止填充位置 (默认为 array.length)
    
    	filter()	 检测数值元素，并返回符合条件所有元素的数组
    	find()	     方法返回通过测试（函数内判断）的数组的第一个元素的值。
    	findIndex()	 返回符合传入测试（函数）条件的数组元素索引
    	includes() 	 判断一个数组是否包含一个指定的值  true/false
    	indexOf()	搜索数组中的元素，并返回它所在的位置  返回索引,从0开始 
    	
    	isArray()	判断对象是否为数组   Array.isArray(obj)
    	join()	    把数组的所有元素放入一个字符串
    	map()	    通过指定函数处理数组的每个元素，并返回处理后的数组   array.map(Math.sqrt);
    	push()	    向数组的末尾添加一个或更多元素，并返回新的长度     fruits.push("xigua")
    	pop()	    删除数组的最后一个元素并返回删除的元素
    	shift()	    删除并返回数组的第一个元素
    
    	sort()	    对数组的元素进行排序
    	splice()	从数组中添加或删除元素
    		start	可选,规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置
    					也就是说，-1 指最后一个元素，-2 指倒数第二个元素
    		end	    规定从何处结束选取,该参数是数组片断结束处的数组下标。如果没有指定该参数，那么
    			        切分的数组包含从 start 到数组结束的所有元素

1.every()
    	var ages = [32, 33, 16, 40];
    		function checkAdult(age) { 
    		    return age >= 18;
    		}
    		function myFunction() { 
    		    document.getElementById("demo").innerHTML = ages.every(checkAdult);
    		}
    	结果: false
    
    2.filter()
    	var ages = [32, 33, 16, 40];
    	function checkAdult(age) { 
    	    return age >= 18;
    	}
    
    	function myFunction() { 
    	    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
    	}
    	结果: 32,33,40
    
    3.find()
    	var ages = [3, 10, 18, 20];
    	function checkAdult(age) { 
    	    return age >= 18;
    	}
    	function myFunction() { 
    	    document.getElementById("demo").innerHTML = ages.find(checkAdult);
    	}
    	结果: 18

**4. JavaScript Math对象**

常用方法:
    
    	abs(x)	返回 x 的绝对值
    	sqrt(x)	返回数的平方根
    	max(x,y,z,...,n)	返回 x,y,z,...,n 中的最高值
    	min(x,y,z,...,n)	返回 x,y,z,...,n中的最低值
    	random()	 返回 0 ~ 1 之间的随机数
    
    	round(x)	 把数四舍五入为最接近的整数
    	floor(x)	 对 x 进行下舍入
    	ceil(x)	     对数进行上舍入
    	pow(x,y)	 返回 x 的 y 次幂
    	exp(x)	     返回 e的x次幂
    	log(x)	     返回数的自然对数（底为e）
    	sin(x)	     返回数的正弦
    	cos(x)	     返回数的余弦
    	tan(x)	     返回角的正切

**5. JavaScript 全局函数**

常用函数:
    	
    	parseInt()	  解析一个字符串并返回一个整数
    	parseFloat()  解析一个字符串并返回一个浮点数
    	String()	  把对象的值转换为字符串
    	Number()	  把对象的值转换为数字
    	isNaN()	      检查某个值是否是数字

**6. JavaScript Number，Boolean，Regexp对象**

1.JavaScript Number
    	toString() 把一个 Number 对象转换为一个字符串，并返回结果
    	语法  NumberObject.toString(radix)  radix默认不填，表示的是进制

#### 二、JS Window ####

浏览器对象模型 BOM（Browser Object Model）使 JavaScript 有能力与浏览器“对话”

**Window 对象**

> 所有浏览器都支持 window 对象。它表示浏览器窗口  
> 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员  
> 全局变量是 window 对象的属性  
> 全局函数是 window 对象的方法  
> 甚至 HTML DOM 的 document 也是 window 对象的属性之一

**1.Window location**

对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

*  location.href 返回当前页面的URL
 *  location.hostname 返回 web 主机的域名
 *  location.pathname 返回当前页面的路径和文件名
 *  location.port 返回 web 主机的端口 （80 或 443）
 *  location.protocol 返回所使用的 web 协议（http:// 或 https://）

**2.Window history**

history.back()　　 - 加载历史列表中前一个 URL，与在浏览器上点击<–相同  
history.forward() 　- 加载历史列表中前一个 URL，与在浏览器上点击–>相同

**3.Window Timing**

setInterval() - 间隔指定的毫秒数不停地执行指定的代码
    	setTimeout() - 在指定的毫秒数后执行指定代码
    
    	1.setInterval() 
    	语法:
    		window.setInterval("javascript function",milliseconds)
    		可以不使用window前缀，直接使用函数setInterval()
    		setInterval() 第一个参数是函数（function）,第二个参数间隔的毫秒数
    	注意: 1000 毫秒是一秒
    	实例:
    		每三秒弹出 "hello" 
    		setInterval(function(){ alert("Hello")},3000)
    
    	2.clearInterval() 方法用于停止 setInterval() 方法执行的函数代码
    	语法:
    		window.clearInterval(intervalVariable)
    		可以不使用window前缀，直接使用函数clearInterval()
    		要使用 clearInterval() 方法, 在创建计时方法时必须使用全局变量
    		myVar=setInterval("javascript function",milliseconds)
    
    	3.setTimeout() 方法
    	语法:
    		myVar= window.setTimeout("javascript function", milliseconds)
    		setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中
    		假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它
    	实例:
    		等待3秒，然后弹出 "Hello":
    		setTimeout(function(){ alert("Hello")},3000)

#### 三、Remark：Date 日期格式化 ####

//获取当前日期 并格式化
    function formatDate(){ 
    	var nowDate=new Date();
    	
    	var nYear = nowDate.getFullYear();      	//年
    	var nMonth = nowDate.getMonth() + 1 ;		//月(从0开始，要加1)
    	var nDay = nowDate.getDate();				//日
    	var nDate = nowDate.getDay();				//星期几(0-6 星期日是0) 
    
    	var nHours = nowDate.getHours();			//时 
    	var nMinutes = nowDate.getMinutes();		//分
    	var nSecond = nowDate.getSeconds();			//秒
    	
        //var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1; 
        //var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate(); 
        // var hour = nowDate.getHours()< 10 ? "0" + nowDate.getHours() : nowDate.getHours(); 
        // var minute = nowDate.getMinutes()< 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes(); 
        // var second = nowDate.getSeconds()< 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds(); 
    	
    	var strDate=nYear+"-"+nMonth+"-"+nDate+" "+nHours+":"+nMinutes+":"+nSecond;
    	return strDate;
    }
    
    Java三元运算符
    	表达式1?true(表达式2):false(表达式3)
    
    //JSON date類型格式化
    function jsonDateFormat(jsonDate) { //json日期格式转换为正常格式
        try { 
            var date = new Date(parseInt(jsonDate.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            return date.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        } catch (ex) { 
            return "";
        }
    }