JavaScript(数学对象Math)

谁践踏了优雅 2023-10-07 00:28 18阅读 0赞

## 一、数学对象 ##

数学对象提供基本的数学函数和常数

数学对象不需要使用new运算符

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:center;width:196px;"><strong>属性</strong></td> 
   <td style="text-align:center;width:302px;"><strong>说明</strong></td> 
  </tr> 
  <tr> 
   <td style="width:196px;">LN10</td> 
   <td style="width:302px;">返回10的自然对数</td> 
  </tr> 
  <tr> 
   <td style="width:196px;">LN2</td> 
   <td style="width:302px;">返回2的自然对数</td> 
  </tr> 
  <tr> 
   <td style="width:196px;">LOG10E</td> 
   <td style="width:302px;">返回以10为底的e的对数</td> 
  </tr> 
  <tr> 
   <td style="width:196px;">LOG2E</td> 
   <td style="width:302px;">返回以2为底的e的对数</td> 
  </tr> 
  <tr> 
   <td style="width:196px;">PI</td> 
   <td style="width:302px;">返回圆周率，约3.141592653...</td> 
  </tr> 
  <tr> 
   <td style="width:196px;">SQRT1_2</td> 
   <td style="width:302px;">返回0.5的平方根</td> 
  </tr> 
  <tr> 
   <td style="width:196px;">SQRT2</td> 
   <td style="width:302px;">返回0.2的平方根</td> 
  </tr> 
  <tr> 
   <td style="width:196px;">E</td> 
   <td style="width:302px;">返回自然常量E，约2.718</td> 
  </tr> 
 </tbody> 
</table>

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:center;"><strong><span style="color:#0d0016;">方法</span></strong></td> 
   <td style="text-align:center;"><strong><span style="color:#0d0016;">说明</span></strong></td> 
  </tr> 
  <tr> 
   <td>abs(x)</td> 
   <td>返回x的绝对值</td> 
  </tr> 
  <tr> 
   <td>cos(x)/acos(x)</td> 
   <td>返回x的余弦/反余弦值</td> 
  </tr> 
  <tr> 
   <td>sin(x)/asin(x)</td> 
   <td>返回x的正弦/反正弦值</td> 
  </tr> 
  <tr> 
   <td>atan（x)</td> 
   <td>返回x的反正切值</td> 
  </tr> 
  <tr> 
   <td>ceil(x)/floor(x)</td> 
   <td>对数进行上/下舍入</td> 
  </tr> 
  <tr> 
   <td>exp(x)</td> 
   <td>返回e的指数</td> 
  </tr> 
  <tr> 
   <td>log(x)</td> 
   <td>返回数的自然对数（底为e）</td> 
  </tr> 
  <tr> 
   <td>max(x,y)/min(x,y)</td> 
   <td>返回x和y中的最大/最小值</td> 
  </tr> 
  <tr> 
   <td>pow(x,y)</td> 
   <td>返回x的y次幂</td> 
  </tr> 
  <tr> 
   <td>random()</td> 
   <td>返回0-1之间的随机数。(0,1)</td> 
  </tr> 
  <tr> 
   <td>round(x)</td> 
   <td>把数四舍五入</td> 
  </tr> 
  <tr> 
   <td>sqrt(x)</td> 
   <td>返回数的平方根</td> 
  </tr> 
 </tbody> 
</table>

示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			console.log(Math.max(1,20,3,50))//最大值输出结果为：50
    			console.log(Math.pow(2,3))//2的3次方
    			console.log(Math.random())
    			//随机0-10以内的任意数
    			//[0,1]*10 [0,11]
    			console.log(Math.floor(12.6))//小于这个数的最大整数
    			console.log(Math.ceil(12.3))//大于这个数的最小整数
    			console.log(Math.round(12.6))//把数进行四舍五入
    			console.log(Math.floor(Math.random()*11))
    		</script>
    	</body>
    </html>

动态时钟实现代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<span id="time"></span>
    		<script type="text/javascript">
    			setInterval(function() {
    				var date = new Date()
    				console.log(date)
    				var year = date.getFullYear() //获取年份
    				var month = date.getMonth() + 1 //0-11 获取月份
    				console.log(year, month)
    				var day = date.getDate() //获取日
    				console.log(day)
    				var hours = date.getHours() //获取小时
    				var minutes = date.getMinutes() //获取的是分钟
    				var seconds = date.getSeconds() //获取的是秒数
    		
    				month = month > 9 ? month : "0" + month
    				day = day > 9 ? day : "0" + day
    				hours = hours > 9 ? hours : "0" + hours
    				minutes = minutes > 9 ? minutes : "0" + minutes
    				seconds = seconds > 9 ? seconds : "0" + seconds
    				var result = year + "年" + month + "月" + day + "日" + hours + ":" + minutes + ":" + seconds
    				document.getElementById("time").innerHTML=result
    			}, 1000)
    		</script>
    	</body>
    </html>

## 二、数组对象 ##

数组对象是一系列有序的值的集合，可以存放任何类型的数据，建议只存放一种类型数据

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:center;width:167px;"><strong>方法</strong></td> 
   <td style="text-align:center;width:331px;"><strong>说明</strong></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:167px;">concat()</td> 
   <td style="text-align:center;width:331px;">将两个数组连接成新数组</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:167px;">join()</td> 
   <td style="text-align:center;width:331px;">将数组中的所有元素连接成字符串</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:167px;">pop()</td> 
   <td style="text-align:center;width:331px;">移除数组的最后一个元素</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:167px;">push()</td> 
   <td style="text-align:center;width:331px;">在数组最后添加一个元素</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:167px;">unshift()</td> 
   <td style="text-align:center;width:331px;">在数组开始添加一个元素</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:167px;">reverse()</td> 
   <td style="text-align:center;width:331px;">反转数组元素，倒叙</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:167px;">shift()</td> 
   <td style="text-align:center;width:331px;">移除数组的第一个元素</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:167px;">silce()</td> 
   <td style="text-align:center;width:331px;">获取子数组</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:167px;">splice()</td> 
   <td style="text-align:center;width:331px;">插入，删除或替换数组中的元素</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:167px;">sort()</td> 
   <td style="text-align:center;width:331px;">对数组排序</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			//数组对象
    			var arr_1=new Array()
    			arr_1[0]="张三"
    			arr_1[1]="李四"
    			console.log(arr_1.length)
    			
    			var arr_2=new Array(5)
    			arr_2[5]="移动5班"
    			console.log(arr_2.length)
    			
    			var arr_3=["张三","李四","王五","赵六"]
    			for(var i=0;i<arr_3.length;i++){
    				console.log(arr_3[i])
    			}
    			
    			for(var i in arr_3){
    				console.log(arr_3[i])
    			}
    			
    			var str=""
    			for(var i=0;i<arr_3.length;i++){
    				str+=arr_3[i]+"*"
    			}
    			console.log(str)
    			
    			var result=arr_3.join("*")//使用*号分隔符进行分割
    			console.log(result)
    			arr_3.push("张里")//在数组最后添加一个元素
    			for(var i in arr_3){
    				console.log(arr_3[i])
    			}
    			console.log("------------------------------")
    			var arr_4=["张三","李四","王五","赵六"]
    			arr_4.push("张里")//在数组最后添加一个元素
    			arr_4.unshift("张硕")
    			arr_4.pop()
    			arr_4.shift()
    			for(var i in arr_4){
    				console.log(arr_4[i])
    			}
    			
    			var result_1=arr_4.splice(1,3)
    			console.log(result_1)
    			
    			var result_2=arr_4.reverse()
    			console.log(result_2)
    			
    			
    		</script>
    	</body>
    </html>

JavaScript不支持多维数组，但可以使用，例如：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			//数组对象
    			
    			var citys=new Array()
    			//citys["河南"]=["郑州","开封","焦作","商丘"]
    			citys[0]=["郑州","开封","焦作","商丘"]
    			//citys[0][0]
    			citys[1]=["武汉","天门","黄石","赤壁"]
    			for(var i=0;i<citys.length;i++){
    				for(var j=0;j<citys[i].length;j++){
    					console.log(citys[i] [j])
    				}
    			}
    		</script>
    	</body>
    </html>

## 三、正则表达式 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td colspan="2" style="text-align:center;"> <h4><strong>正则表达式</strong></h4> </td> 
  </tr> 
  <tr> 
   <td style="width:129px;">中文字符</td> 
   <td style="width:369px;">/^[\u4e00-\u9fa5]{2,4}$/</td> 
  </tr> 
  <tr> 
   <td style="width:129px;">邮箱</td> 
   <td style="width:369px;">/^[0-9a-zA-Z_]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z_]+$/</td> 
  </tr> 
  <tr> 
   <td style="width:129px;">电话</td> 
   <td style="width:369px;">/^(\d{3,4}-)?\d{7,8}$/</td> 
  </tr> 
  <tr> 
   <td style="width:129px;">月份</td> 
   <td style="width:369px;">/^((0?[1,9])|1[0-2])$/</td> 
  </tr> 
  <tr> 
   <td style="width:129px;">天数</td> 
   <td style="width:369px;">/^((0?[1-9])|(1|2)[0-9])|30|31)$/</td> 
  </tr> 
 </tbody> 
</table>

正则表达式主要用于表单验证，如手机号、邮箱、身份证等

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>匹配符</td> 
   <td>说明</td> 
  </tr> 
  <tr> 
   <td>\b</td> 
   <td>匹配单词边界</td> 
  </tr> 
  <tr> 
   <td>\d</td> 
   <td>匹配单个数字字符</td> 
  </tr> 
  <tr> 
   <td>\f</td> 
   <td>匹配单个换页符</td> 
  </tr> 
  <tr> 
   <td>\n</td> 
   <td>匹配单个换行符</td> 
  </tr> 
  <tr> 
   <td>\r</td> 
   <td>匹配单个回车符</td> 
  </tr> 
  <tr> 
   <td>\s</td> 
   <td>匹配任何空白符</td> 
  </tr> 
  <tr> 
   <td>\t</td> 
   <td>匹配单个制表符</td> 
  </tr> 
  <tr> 
   <td>\v</td> 
   <td>匹配单个垂直制表</td> 
  </tr> 
  <tr> 
   <td>\w</td> 
   <td>匹配包含下划线的</td> 
  </tr> 
  <tr> 
   <td>^、$</td> 
   <td>匹配字符串的开始和结束位置</td> 
  </tr> 
  <tr> 
   <td>*</td> 
   <td>匹配前面的子表达式0-多次</td> 
  </tr> 
  <tr> 
   <td>+</td> 
   <td>匹配前面的子表达式1-多次</td> 
  </tr> 
  <tr> 
   <td>?</td> 
   <td>匹配前面的子表达式0-1次</td> 
  </tr> 
  <tr> 
   <td>{n,m}</td> 
   <td>匹配前面的子表达式n-m次</td> 
  </tr> 
  <tr> 
   <td>.</td> 
   <td>匹配除 "\n" 之外的任意字符</td> 
  </tr> 
  <tr> 
   <td>(x|y)</td> 
   <td>匹配x或y</td> 
  </tr> 
  <tr> 
   <td>[]</td> 
   <td>匹配所包含的任意一个字符</td> 
  </tr> 
  <tr> 
   <td>[^]</td> 
   <td>匹配非包含的任意一个字符</td> 
  </tr> 
  <tr> 
   <td>[-]</td> 
   <td>匹配指定范围内的任意一个字符</td> 
  </tr> 
 </tbody> 
</table>

一.在使用正则表达式之前你，首先要创建正则表达式对象，JavaScript提供了两种构建方法：

1.使用正则标识字符串：var reg=/pattern/\[flags\]

2.使用内置正则表达式对象：var reg=new RegExp("pattern",\["flags"\])

pattern表示要使用的正则表达式模式，也就是由的特殊字符或普通字符所组成的表达式。

flags标志位，课选项，有g（全文查找），i（忽略大小写），m（多行查找）三种

二.方法

compile()方法：把正则表达式编译为内部格式，从而执行更快 ，使用新正则去替换旧正则，主要用于提升比较复杂和耗时的处理过程的性能，一般情况下很少用。

exec()方法：用正则表达式在字符串中查找，并返回包含结果的一个数组。不仅用于判断给定的字符串是否匹配，而且会返回匹配结果的详细信息

test()方法：返回一个bool值：它指出被查找的字符串是否匹配给定的模式。使用频繁，主要用于匹配测试。匹配成功返回true，否则返回false。

test()方法的使用：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<input type="text" name="pwd" id="pwd" value="" />
    		<input type="button" name="checkpwd" id="checkpwd" value="验证" />
    		<script type="text/javascript">
    			//正则表达式
    			//密码长度至少为6位，且只能是数字、字母、下划线
    			document.getElementById("checkpwd").onclick=function(){
    				//实现密码的验证
    				//编写正则表达式
    				var reg=/^[0-9a-zA-Z_]{6,}$/
    				var pwd=document.getElementById("pwd").value
    				var isPwd=reg.test(pwd)
    				if(isPwd){
    					alert("密码格式正确")
    				}else{
    					alert("密码格式不正确")
    				}
    			}
    		</script>
    	</body>
    </html>