Web基础——JavaScript的内置对象

1.String 对象

	   	1. 定义方式1: String  str=new String("abckdddd");
	       定义方式2:var  str="我爱你爱你";
	
	    2. 属性:length: 字符串的长度

	
		3. 方法:
			charAt() 返回在指定位置的字符。 
				例子:var v="abcd";
				          var a=v.charAt(2);   
 
			concat() 连接字符串。 
				例子:var v="ab";  var a="cd";
					var z=v.concat(a);
				
			indexOf() 根据字符检索此符在字符串中的索引。 
				例子:var v="abcde";
					var z=v.indexOf("c");			

			lastIndexOf() 从后向前搜索字符串。 
			substring() 提取字符串中两个指定的索引号之间的字符。 
				var v="abcde";
				var z=v.substring(0,3); 含头不含尾

			toLowerCase() 把字符串转换为小写。
 		例子:
			 var str = "Hello World!";
			 document.write(str.toLocaleLowerCase());


		    toUpperCase() 把字符串转换为大写。 

			replace() 替换字符串。
				例子: 
				var v="abceaaaa";
				var z=v.replace("a","h");  参1:被替换的字符/或字符串   参数2:替换成哪个字符/或字符串

			split() 把字符串分割为字符串数组。
 				例子: 
				var v="a#b#c#d";
				var z=v.split("#");

			trim():去除字符串两端的空格
				例子: 
                var v="  abcd     ";
				var z=v.trim();
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// String 对象
			// String 对象用于处理文本(字符串)。
			//创建的对象的方式
			//方式1
			//当 String() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 String 对象,存放的是字符串 s 或 s 的字符串表示。
		 var str=new String("hello");
		  //方式2
		  //当不用 new 运算符调用 String() 时,它只把 s 转换成原始的字符串,并返回转换后的值。
		 var s=String("abc");
		 //方式3
		 var ss="abc"
		// instanceof 判断一个引用是不是该类型的一个引用
		alert(str instanceof String); //true
		alert(s instanceof String); //false
		//查看原始数据类型
		alert(typeof str); //object
		alert(typeof  s); //string
		</script>
	</head>
	<body>
	</body>
</html>

2.Number对象

定义方式:   var num=new Number(555.6666);
			var num1=Number(5694);
		
方法:
			toString()  把数字类型转成字符串类型
			  例子:
			      var v=Number(695444);
			      var z=v.toString();

			toPrecision()  把数字格式化为指定的长度。也就是小数后面保留几位
			  例子:
			      var v=Number(3.5999999999999);
       		      var z=v.toPrecision(4);
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//Number 对象
			//Number 对象是原始数值的包装对象。
			//类似于Java中的 Integer Double 包装类
			//创建 Number 对象的语法:
			//当 Number() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 Number 对象
			var myNum=new Number(1000);
			//如果不用 new 运算符,把 Number() 作为一个函数来调用,它将把自己的参数转换成一个原始的数值,并且返回这个值(如果转换失败,则返回 NaN)。
			var myNum2=Number("3.25");
			alert(myNum instanceof Number); //true
			alert(myNum2 instanceof Number); //false
			alert(typeof myNum); //object
			alert(typeof myNum2); //number
			//静态属性
			//MAX_VALUE 可表示的最大的数。 、
			//MIN_VALUE 可表示的最小的数。 
			var max=Number.MAX_VALUE;
			var min=Number.MIN_VALUE;
			//方法
			var v=new Number(3.58585858585);
			//保留有效的五位数字,包含整数部分在内,返回的是 字符串类型的数字
			//var strNum=v.toPrecision(5);
			//alert(strNum);
			//toFixed 把数字转换为字符串,结果的小数点后有指定位数的数字。 
			var ss=v.toFixed(5);
			alert(ss);
			//把字符串的数字,转成数字
			var yy="100";
			var n=yy*1;
			var n2=+yy;
			var n3=Number(yy);
		</script>
	</head>
	<body>
	</body>
</html> 

3.Date 对象

定义方式:  var  myDate=new Date();
		
方法:
			getTime()   获取从1970-01-01 00:00:00   到当前的毫秒值
			toLocaleString()  将时间转化成本地格式 利于阅读

			例子
			var myDate=new Data();
			var time=myDate.getTime();
			var localTime=time.toLocaleString();
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// Date 对象
			// Date 对象用于处理日期和时间。
			// 创建 Date 对象的语法:
			// var myDate=new Date()
			//注释:Date 对象会自动把当前日期和时间保存为其初始值。
			var myDate=new Date();
			var year=myDate.getFullYear();
			//从0开始数月份
			var month=myDate.getMonth();
			//获取的是星期
			var day=myDate.getDay();
			//获取日
			var d=myDate.getDate();
			//获取时
			var hour=myDate.getHours()
			var minu=myDate.getMinutes();
			var sec=myDate.getSeconds();
			//getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 
			var time=myDate.getTime();
			alert(year)
			alert(month);
			alert(day)	
			alert(d)
			alert(hour);
			alert(minu);
			alert(sec)
			alert(time)
			// 2022-01-05 10:27:30  自己单独获取出来拼接成自己要的的格式
			//获取当前日期字符串  2022/1/5 上午10:32:30 
			var localTime=myDate.toLocaleString();
			document.write(localTime);
			//alert(localTime);
		</script>
	</head>
	<body>
	</body>
</html>

4.使用第三方的工具类来处理日期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入这个工具类 -->
		<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//格式化现在的日期
			var dateStr = moment().format('YYYY-MM-DD HH:mm:ss');
			alert(dateStr);
			//把指定的毫秒值毫秒值,格式化成日期字符串。
			var time = new Date().getTime(); //获取当前的毫秒值
			var dateStr2 = moment(time).format('YYYY-MM-DD HH:mm:ss');
			document.write("<h1>" + dateStr2 + "</h1>");
			//把日期字符串转换成毫秒值 unix()
			var a = moment('2019-08-22 12:30:23').unix()
			//1566448223
			alert(a);
		</script>
	</head>
	<body>
	</body>
</html>

5.Math 对象

特点: 该对象不需要创建 直接对象名点上方法

Math.random();随机产生0----1 之间的随机数 var num=Math.random()*100;
Math.round(2.36); 对小数进行四舍五入 得到一个整数 var n=Math.round(Math.random()*100);
Math.min(15,25); 取最小值
Math.max(15,25);取最大值
Math. abs(-2) 返回数的绝对值。
Math.floor(2.6);向下取整
Math.ceil(3.82);向下取整

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//Math 对象不用new 直接使用对象名Math来调用方法接口
			/* Math.random();随机产生0----1 之间的随机数      var  num=Math.random()*100;
			      Math.round(2.36); 对小数进行四舍五入  得到一个整数    var n=Math.round(Math.random()*100);
			       Math.min(15,25); 取最小值
			      Math.max(15,25);取最大值
			      Math. abs(-2) 返回数的绝对值。 
			      Math.floor(2.6);向下取整
			      Math.ceil(3.82);向下取整 */
				 // Math.random();
				// 生成 1-100 之间的随机整数
				//生成 6位随机验证码 	  
		</script>
	</head>
	<body>
	</body>
</html>

6.全局函数

functions
全局对象只是一个对象,而不是类。既没有构造函数,也无法实例化一个新的全局对象。

全局对象是预定义的对象,作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象,可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性,所以它没有名称。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//全局函数,直接使用
			//==判别不出来NaN
			//判断是不是NaN用方法判断
			var b=isNaN(NaN);
			alert(b);
			var b1=isNaN("abc"*1);
			alert(b1);
			//把字符串的数字转换成数字
			//把字符串的数字,转成数字
			var yy="100";
			var n=yy*1;
			var n2=+yy;
			var n3=Number(yy);
			//使用全局函数来转换
			//从左向右依次查找,每一位是否是数字,直到遇到不是数字为止。将前边的值转为数字
			var num=parseInt("100abc");
			alert(num);
			var num2=parseFloat("3.25abc");
			alert(num2);
		</script>
	</head>
	<body>
	</body>
</html>

7.数组对象

定义方式:  var arr=new Array(2,6,8);
		   var  arr1=[6,"a",6];
属性:  length  数组的长度
特点:
		 在js中数组可以存储任意类型元素
		 在js中数组的长度可变
方法:
			concat() 连接两个或更多的数组,并返回结果。  
				例子:var v=[1,2];  var v2=[3,4];
					var z=v.concat(v2);
			join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 
				var v=[1,2,3];
				var z=v.join("-");  给数组元素之间添加分隔符
			pop() 删除并返回数组的最后一个元素 
				例子:
				var arr = [1, 6, 20];
			                alert(arr.pop());
			push() 向数组的末尾添加一个或更多元素,并返回新的数组长度。 
				例子:var arr = [1, 6, 20];
				         alert(arr.push(28));
			reverse() 颠倒数组中元素的顺序。
			sort() 对数组的元素进行排序  从小到大
				默认排序方式:字典顺序
				要想实现自己的比较方式,需要传入比较器方法对象
				例子:var arr = [1, 6, 20, 100];
			                  alert(arr.sort(bijiao));
			function bijiao(a, b) {
				if(a > b) {
					return 1;
				} else if(a == b) {
					return 0;
				} else {
					return -1;
				}
				//return a-b;
			}
	遍历数组:
			forEach() 	数组每个元素都执行一次回调函数。

Array 对象创建、遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//Array 对象
			//Array 对象用于在单个的变量中存储多个值。类似于我们Java中的ArrayList
			//创建 Array 对象的语法:
			//new Array();
			//new Array(size);
			//new Array(element0, element1, ..., elementn);
			//1. JS中的数组对象,他的长度是可变,没有角标越界的异常。
			//2.JS中的数组,可以存储多种数据类型的元素。
			var arr=new Array();
			//通过角标来存元素
			arr[0]=10;
			arr[1]=20;
			arr[2]=30;
			arr[3]=40;
			arr[4]=50;
			var ele=arr[arr.length-1];
			alert(ele);
			//获取不到就是 	undefined 不会报角标越界
			var ele2=arr[10];
			alert(ele2);
			//定义数组的方式2 可以定义数组的长度,但是你超过了也不报错
			var arr2=new Array(3);
			arr2[0]=20;
			arr2[1]=30;
			arr2[2]=40;
			arr2[3]=200;
			alert(arr2[3]);
			//方式3:定义数组的时候,直接存储元素
			var arr3=new Array(10,false,"abc",304,3.25);
			//方式4:简写方式 注意是中括号
			var arr4=[10,false,"abc",304,3.25];
			//数组的遍历
			for(let i=0;i<arr4.length;i++){
				console.log(arr4[i])
			}
		</script>
	</head>
	<body>
	</body>
</html>

8.数组对象常用方法

concat() 连接两个或更多的数组,并返回连接好的新数组。
join() 把数组的所有元素拼接成一个字符串。
pop() 删除并返回数组的最后一个元素。
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr=[10,20,30,40,50,60];
			var arr2=[100,200,300,400,500,600];
			//concat() 连接两个或更多的数组,并返回连接好的新数组。
			 var newArr=arr.concat(arr2,arr2);
			 console.log(newArr);
			 //join() 把数组的所有元素拼接成一个字符串。"10-20-30"
			 var str=arr.join("-"); //10-20-30-40-50-60
			 console.log(str);
			 //不要分隔符,就给个空串
			 var str2=arr.join("");
			  console.log(str2);
			  
			  //pop() 删除并返回数组的最后一个元素
			  var arr3=[100,200,300,400,500,600];
			  var ele=arr3.pop();
			  ele=arr3.pop();
			  ele=arr3.pop();
			  ele=arr3.pop();
			  console.log(arr3);
			  console.log(ele);
			  
			 // push() 向数组的末尾添加一个或更多元素,并返回新的长度。 
			 var arr4=[]; //定义一个空数组
			 arr[0]=10; //使用角标存元素
			 arr4.push(20);
			 arr4.push(100,200,300);
			 console.log(arr4);
		
			 //reverse() 颠倒数组中元素的顺序。 
			 console.log(arr4.reverse());
			 
			// shift() 删除并返回数组的第一个元素 
			var arr5=[100,200,300,400,500,600];
			var ele2=arr5.shift();
			ele2=arr5.shift();
			ele2=arr5.shift();
			console.log(ele2);
			console.log(arr5);
		</script>
	</head>
	<body>
	</body>
</html>

slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//slice() 从某个已有的数组返回选定的元素 
			var arr = [100, 200, 300, 400, 500, 600];
			//根据起始索引和终止索引,截取原数组一部分元素,到新数组中,含头不含尾。
			var newArr = arr.slice(0, 3);
			console.log(newArr);
			
			//sort() 对数组的元素进行排序 
			var arr2 = [10, 2, 38, 4, 50, 600];
			//arr2.sort(); //默认按照元素的字典顺序来拍的。
			//如果我们要按照元素的大小来排序,需要传入比较函数
			var bjq=function(a,b){
				return a-b; //按照返回值的 正 负 0 进行排序
			}
			arr2.sort(bjq);
			alert(arr2);
		</script>
	</head>
	<body>
	</body>
</html>

pop() 删除并返回数组的最后一个元素
shift() 删除并返回数组的第一个元素
splice() 删除元素,并向数组添加新元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		    //pop() 删除并返回数组的最后一个元素 
			//shift() 删除并返回数组的第一个元素 
			//splice() 删除元素,并向数组添加新元素。 
			var arr = [100, 200, 300, 400, 500, 600];
			//从2索引处开始,删除1个元素
			arr.splice(2,1);
			console.log(arr);
			var arr2 = [100, 200, 300, 400, 500, 600];
			//从2索引处开始,删除2个元素
			arr2.splice(2,2);
			console.log(arr2);
			//替换功能 
			var arr3 = [100, 200, 300, 400, 500, 600];
			//从2索引开始删除一个元素,在插入进去一个i7000
			arr3.splice(2,1,7000);
			console.log(arr3)
			//替换功能
			var arr4 = [100, 200, 300, 400, 500, 600];
			//从2索引开始删除一个元素,在插入进去多个 元素 7000  8000 9000
			arr4.splice(2,1,7000,8000,9000);
			console.log(arr4)
		</script>
	</head>
	<body>
	</body>
</html>

9.ES6中数组对象新增的方法

every() 检测数值元素的每个元素是否都符合条件。
find() 返回符合传入测试(函数)条件的数组元素。
findIndex() 返回符合传入测试(函数)条件的数组元素索引。
forEach() 数组每个元素都执行一次回调函数。
indexOf() 搜索数组中的元素,并返回它所在的位置。
查找该元素第一次出现的索引,如果找不到返回 -1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		//es6 数组新增额方法,可以参考下面网址
		 //https://www.runoob.com/jsref/jsref-obj-array.html
			//every() 	检测数值元素的每个元素是否都符合条件。
			//判断数组中的元素,是不是都是偶数
			var arr = [10, 20, 30, 50, 50];
			var b = arr.every(function(ele) {
				return ele % 2 == 0;
			});
			alert(b);
			//filter() 	检测数值元素,并返回符合条件所有元素的数组。

			//把数组中所有的偶数过滤出来,放到新数组中
			var arr2 = [10, 20, 30, 50, 60, 4, 3, 1, 7, 8, 11, 13, 52];
			var newArr=arr2.filter(function(ele){
				return ele%2==0; //true 表示符合条件,false表示不符合
			});
			alert(newArr);
			//find() 	返回符合传入测试(函数)条件的数组元素。
			//findIndex() 	返回符合传入测试(函数)条件的数组元素索引。
			//获取数组中第一个符合条件的元素
			var arr3 = ["张三","李四","王五","王老虎","王百万"];
			//获取数组中王开头的第一个元素
			var name=arr3.find(function(ele){
				return ele.startsWith('王');
			});
			alert(name);
			//遍历数组
			//forEach() 	数组每个元素都执行一次回调函数。
			arr2.forEach(function(ele,index){
				console.log(index,ele);
			})
			//indexOf() 	搜索数组中的元素,并返回它所在的位置。
			var arr3 = [10, 10,20, 30, 50, 50];
			//查找该元素第一次出现的索引,如果找不到返回 -1
			var index=arr3.indexOf(100);
			alert(index);
		</script>
	</head>
	<body>
	</body>
</html>

isArray() 判断是不是数组对象
map() 通过指定函数处理数组的每个元素,并返回处理后的数组。
reduce()把数组中的元素累加起来 total 上次累加的结果,num 数组的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = [10, 10,20, 30, 50, 50];
			//判断是不是数组对象
			var b=Array.isArray(arr);
			alert(b);
			alert(arr instanceof Array);
			//map() 	通过指定函数处理数组的每个元素,并返回处理后的数组。
			var arr2 = ["abc","hello","index","hehe","haha"];
			//把数组中的元素变为大写,放到一个新数组中
			var newArr=arr2.map(function(ele){
				return ele.toUpperCase();
			});
			console.log(newArr);
			var numbers = [65, 44, 12, 4,10];
			//把数组中的元素累加起来 total 上次累加的结果,num 数组的元素
			var sum=numbers.reduce(function(total, num,index,arr) {
				console.log("元素索引",index)
			    return total + num;
			},10);
			alert(sum);
		</script>
	</head>
	<body>
	</body>
</html>

10.正则表达式对象

RegExp(**):正则表达式对象



正则表达式
位置:
		^		开头
		$		结尾
次数:
		*		0或多个
		+		1或多个
		?		0或1个
		{n}		就是n个
		{n,}	至少n个
		{n,m}	最少n个,最多m个
通配符:
		\d		任意数字
		\D		任意非数字
		\s		任意空白
		\S		任意非空白
		.		任意字符(除'\n'外)
组合:
		[a-z]
		[0-9]
		等
组:
		(正则)		匹配括号中正则表达式对应的结果,并暂存这个结果。
		(?:正则)	匹配括号中正则表达式对应的结果,但不暂存这个结果。
		\数字		使用第n个组匹配的结果
使用正则的工具(RegExp类与相关方法)
创建:
		// 方式一
		var regex = new RegExp("正则表达式", "标志");
		// 方式二
		var regex = /正则表达式/标志
参数说明:
正则表达式:
	参见上面的规则 
标志:
	g (全文查找出现的所有 pattern) 
	i (忽略大小写) 
方法:
		Regexp.test( str )
		String.replace( regex, str )
正则表达式对象常用的方法:
	 test()  使用正则对象去匹配字符串  如果匹配成功返回ture,否则返回false.	
	 exec()  根据正则表达式去查找字符串符合规则的内容。
模式:
	g (全文查找出现的所有 pattern) 	
	i (忽略大小写)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// RegExp 对象
			// RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具。
			//1.直接量语法
			// /pattern/attributes
			//2.创建 RegExp 对象的语法:
			// new RegExp(pattern, attributes);
			//创建 RegExp 对象的语法:  "i" 可选参数,表示不区分大小写
			var regx=new RegExp("[a-b]+","i");
			//匹配的方法
			var flag=regx.test("ABC");
			alert(flag);
			//1.直接量语法,定义正则表达式对象 常用  /正则表达式/可选模式
			var regx2=/[a-b]+/i ;
			var flag2=regx2.test("ABC");
			alert(flag2);
		</script>
	</head>
	<body>
	</body>
</html>

11.JS中正则表达式注意的细节

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var str = "hello123";
			//^开头 $结尾 这里要加上 开头和结尾,防止部分匹配
			var reg = /^[A-Z0-9]+$/;
			alert("匹配吗?" + reg.test(str));
		</script>
	</head>
	<body>
	</body>
</html>

12.根据正则截取字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// exec()  根据正则表达式去查找字符串符合规则的内容。
			//查找出三个字符组成的单词。
			var str = "da jia YAO hao hao xue xi a";
			var reg = /\b[a-z]{3}\b/gi; //g 全文匹配,i 不区分大小写
			var s = reg.exec(str); //用来截取符合正则的字符串	
			alert(s);
			s = reg.exec(str); //用来截取符合正则的字符串
			alert(s);
			s = reg.exec(str); //用来截取符合正则的字符串
			alert(s);
			/* var line = "";
			while ((line = reg.exec(str)) != null) {
				document.write(line + "<br/>")
			} */
		</script>
	</head>
	<body>
	</body>
</html>

13.字符串对象关于正则的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var str="aaa=bbb=ccc=ddd=eee=AAA";//aaabbbccc
			//g 全文匹配
			var newStr=str.replace(/=/g,""); //根据正则替换,注意全文匹配
			alert(newStr);
		</script>
	</head>
	<body>
	</body>
</html>

14.Boolean对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* Boolean 对象
			Boolean 对象表示两个值:"true" 或 "false"。
			创建 Boolean 对象的语法:
			new Boolean(value);	//构造函数
			Boolean(value); */			var flag=Boolean("true");
			if(flag){
				alert(flag);
			}
		</script>
	</head>
	<body>
	</body>
</html>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Geek Li

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值