JS-内置对象(Math、Date、Array、String)

目录

一：Math 数学对象，不是构造函数，直接使用

二：Date 日期对象 是构造函数，需实例化后使用

倒计时重点案例！！！

三：Array 数组对象

Array对象常用方法总结：

四：String 字符串对象 

字符串方法总结：

---

JS中对象分为3种：1.自定义对象       2.内置对象         (1、2都是JS基础对象，属于ECMAScript)

3.浏览器对象(JS独有的)。

内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)。

最大的优点：帮助我们快速开发。

JS提供了多个内置对象：Math、Date、Array、String等

一：Math 数学对象，不是构造函数，直接使用

            //Math数学对象，不是构造函数，直接使用
			//Math对象属性
			console.log(Math.E);//约等于2.718
			console.log(Math.PI);//返回圆周率
			console.log(Math.LOG2E);//返回以2为底的e的对数（约等于1.414）
			console.log(Math.LN10);//返回10的自然对数（约等于2.302）
			console.log(Math.SQRT1_2);//返回2的平方根的倒数（约等于0.707）
			console.log(Math.SQRT2);//返回2的平方根（约等于1.414）
			
			//Math对象方法
			console.log(Math.max(2,5,8));//取最大值  结果8
			console.log(Math.pow(2,2));//返回x的y次幂 结果4
			console.log(Math.random());//0-1之间的随机数
			console.log(parseFloat(3.14));//结果3.14
			console.log(parseInt(3.14));//结果3
			console.log(Math.round(4.6));//四舍五入，结果5
			
			//利用对象封装自己的数学对象 里面有PI最大值和最小值
			var myMath={
				PI:3.141592653,
				max:function(){
					var max = arguments[0];
					for(var i=1;i<arguments.length;i++){
						if(arguments[i]>max){
							max=arguments[i];
						}
					}
					return max;
				},
				min:function(){
					var min = arguments[0];
					for(var i=1;i<arguments.length;i++){
						if(arguments[i]<min){
							min=arguments[i];
						}
					}
					return min;
				}
			}
			console.log(myMath.PI);
			console.log(myMath.max(3,7,999,5,15555));
			console.log(myMath.min(3,7,999,5,15555));
			
			//1.绝对值方法
			console.log(Math.abs(1));//1
			console.log(Math.abs(-1));//1
			console.log(Math.abs("-1"));//1 隐式转换 会把字符串型-1转换为数字型
			console.log(Math.abs("XY"));//NaN
			
			//2.三个取整方法
			//(1)Math.floor() 地板 向下取整 往最小了取值
			//(2)Math.ceil() 天花板 向上取值 往最大了取值
			//(3)Math.round() 四舍五入 .5比较特殊往大了取
			console.log(Math.floor(1.6));//1
			console.log(Math.floor(-1.6));//-2
			console.log(Math.ceil(1.2));//2
			console.log(Math.ceil(-1.2));//-1
			console.log(Math.round(1.2));//1
			console.log(Math.round(-1.2));//-1
			console.log(Math.round(1.5));//2
			console.log(Math.round(-1.5));//-1

            //1.Math对象随机数方法 random()返回一个随机的小数 0=< x <1
			//2.这个方法里面不跟参数
			//3.代码验证
			console.log(Math.random());
			//4.我们想要得到两个数之间的随机整数并且包含这两个整数
			//Math.floor(Math.random()*(max-min+1))+min;
			function getRandom(min,max){
				return Math.floor(Math.random()*(max-min+1))+min;
			}
			console.log(getRandom(1,10));
			//5.随机点名
			var arr=['刘诗诗','易烊千玺','迪丽热巴','李易峰'];
			console.log(arr[getRandom(0,3)]);

            //案例：猜数字游戏
			//程序随机生成一个1-10之间的数字，并让用户输入一个数字
			//1.如果大于该数字，就提示，数字大了，继续猜；
			//2.如果小于该数字，就提示数字小了，继续猜；
			//3.如果等于该数字，就提示猜对了，结束程序
			function getSuiji(min,max){
				return Math.floor(Math.random()*(max-min+1)+min);
			}
			//console.log(getSuiji(1,10));
			var suiji=getSuiji(1,10);
			while(true){//死循环
				var num=prompt('你来猜：输入1-10之间的一个数字');
				if(num>suiji){
					alert('猜大了');
				}else if(num<suiji){
					alert('猜小啦');
				}else if(num==suiji){
					alert('你猜对啦');
					break;//退出整个循环
				}
			}

二：Date 日期对象 是构造函数，需实例化后使用

            //Date()日期对象 是一个构造函数 必须使用new来调用
			var arr = new Array(); //创建一个数组对象
			var obj = new Object(); //创建一个对象实例
			//1.使用Date 如果没有参数 返回当前系统的当前时间
			var date = new Date();
			console.log(date);
			//2.参数常用的写法 数字型 2021,10,06或者是字符串型'2021-10-6 6:6:6'
			var date1 = new Date(2021, 10, 6);
			console.log(date1); //返回11月不是10月
			var date2 = new Date('2021-10-6 6:6:6');
			console.log(date2);
			//总结一下：Date对象和Math对象不一样，它是构造函数，需要对象实例化后才能使用，用来        处理日期和时间

			//格式化日期 年月日
			var date = new Date();
			console.log(date.getFullYear()); //返回当前日期的年
			console.log(date.getMonth() + 1); //返回月，月份加一呦
			console.log(date.getDate()); //返回几号
			console.log(date.getTime()); //获取时间

			//写2021年10月10日 星期日
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var dates = date.getDate();
			var days = date.getDay();
			console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + '星期' + days); //自己写的不大行哦
			//采用数组整一波
			var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			i = date.getDay();
			console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[i]); //还是自己写的，结果满意过程和pink不一样
			console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[days]); //最好版

			//格式化日期 时分秒
			var date = new Date();
			console.log(date.getHours()); //时
			console.log(date.getMinutes()); //分
			console.log(date.getSeconds()); //秒
			//要求分装一个函数返回当前的时分秒 格式06:06:06
			function getTime() {
				var time = new Date();
				var h = time.getHours();
				h = h > 10 ? h : '0' + h; //这一步我想不到耶
				var m = time.getMinutes();
				m = m > 10 ? m : '0' + m;
				var s = time.getSeconds();
				s = s > 10 ? s : '0' + s;
				return h + ':' + m + ':' + s;
			}
			console.log(getTime());

			//获得Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1日过了多少毫秒数
			//1.通过valueOf()  getTime()
			var date = new Date();
			console.log(date.valueOf()); //就是我们现在时间距离1970.1.1总的毫秒数
			console.log(date.getTime());
			//2.简单写法（最常用的写法）
			var date1 = +new Date(); //+new Date()返回的就是总的毫秒数
			console.log(date1);
			//3.H5新值的 获得总的毫秒数
			console.log(Date.now());

            //倒计时案例 是个重点哦！！！！！！！！！！！！！！！！
			//①核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的。
			//②用时间戳来做，用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数
			//③把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）
			//转换公式如下：
			//· d=parseInt(总秒数/60/60/24);//计算天数
			//· h=parseInt(总秒数/60/60%24);//计算小时
			//· m=parseInt(总秒数/60%60);//计算分数
			//· s=parseInt(总秒数%60);//计算当前秒数
			function countDown(time){
				var nowTime= +new Date();//返回的是当前时间总的毫秒数
				var inputTime= +new Date(time);//返回的是用户输入时间总的毫秒数、
				var times=(inputTime - nowTime)/1000;//time是剩余时间总的秒数
				var d=parseInt(times/60/60/24);//计算天数
				d = d<10?'0'+d:d;
				var h=parseInt(times/60/60%24);//计算小时
				h = h<10?'0'+h:h;
				var m=parseInt(times/60%60);//计算分数
				m = m<10?'0'+m:m;
				var s=parseInt(times%60);
				s = s<10?'0'+s:s;
				return d+'天'+h+'时'+m+'分'+s+'秒';
			}
			console.log(countDown('2021-10-11 18:00:00'));
			var date =new Date();
			console.log(date);

倒计时重点案例！！！

三：Array 数组对象

            //创建数组的两种方式
			//1.利用数组字面量
			var arr = [1, 2, 3];
			console.log(arr[0]);
			//2.利用new Array()
			//var arr1=new Array();创建了一个空的数组
			//var arr1=new Array(2);//这个2表示数组的长度为2 里面有两个空的数组元素
			var arr1 = new Array(2, 3); //等价于[2,3] 这样写表示里面有2个数组元素是2和3
			console.log(arr1);

			//检测是否为数组
			//(1)instanceof 运算符 可以用来检测是否为数组
			var arr = [];
			var obj = {};
			console.log(arr instanceof Array);
			console.log(obj instanceof Array);
			//(2)Array.isArray(参数);H5新增方法ie9以上版本才支持
			console.log(Array.isArray(arr));
			console.log(Array.isArray(obj));

			//添加数组元素
			//1.push()在数组末尾添加一个或多个数组元素 push推
			var arr = [1, 2, 3];
			//arr.push(4,'XYY');
			console.log(arr.push(4, 'XYY')); //5
			console.log(arr);
			//push可以给数组追加新的元素
			//push()参数直接写 数组元素就可以
			//push完毕之后，返回的结果是新数组的长度
			//原数组也会发生变化
			//2.unshift 在数组开头添加一个或多个数组元素
			console.log(arr.unshift(0, 'hh'));
			console.log(arr);
			//unshift在数组前面追加新的元素
			//unshift()参数直接写 数组元素
			//unshift完毕后返回新数组的长度
			//原数组也会发生变化

			//添加数组元素总结：吼吼吼，push()和unshift()不就是一个后一个前嘛

			//删除数组元素
			//pop()删除数组最后一个元素，一次只能删除一个元素
			//pop()没有参数
			//pop完毕之后返回结果是删除的那个元素
			//原数组会发生变化
			console.log(arr.pop()); //XYY ,返回的结果是删除的那个元素
			console.log(arr);

			//shift()删除数组最后一个元素，一次只能删除一个元素
			//shift()没有参数
			//shift完毕之后返回结果是删除的那个元素
			//原数组会发生变化
			console.log(arr.shift());


			//筛选数组
			//有一个包含工资的数组[1500,1200,2000,2100,1800],要求把数组中工资超过2000的删除，剩余的放到新数组中
			var arr = [1500, 1200, 2000, 2100, 1800];
			var newArr = [];
			for (var i = 0; i <= arr.length - 1; i++) {
				if (arr[i] < 2000) {
					//newArr[newArr.length]=arr[i];
					newArr.push(arr[i]);
				}
			}
			console.log(newArr);

			//数组排序
			//翻转数组
			var arr1 = ['ha', 'hia', 'he'];
			arr1.reverse();
			console.log(arr1);
			//数组排序（冒泡排序）
			var arr2 = [3, 2, 1, 5, 4];
			arr2.sort();
			console.log(arr2);

			var arr3 = [13, 2, 11, 5, 4];
			arr3.sort(function(a, b) {
				return a - b; //升序
				return b - a; //降序
			});
			console.log(arr3);

			//获取数组元素索引
			//indexOf(数组元素)返回该数组元素的索引号 从前面开始查找
			//只返回第一个满足条件的索引号
			//如果在该数组里找不到元素，就返回-1
			var arr = [1, 2, 3, 4, 5, 6, 7, 8];
			console.log(arr.indexOf(8)); //返回7，果真不假呢
			console.log(arr.indexOf(0)); //返回-1
			//indexOf(数组元素)返回该数组元素的索引号 从后面开始查找
			console.log(arr.lastIndexOf(8));//7
			console.log(arr.indexOf(0)); //返回-1
			console.log(arr.lastIndexOf(6));//5
			
			//重点案例！！！！！！！！！！
			//数组去重数组[1,4,5,63,5,7,9]要求去掉重复元素
			//核心算法：遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加
			//如何知道该元素存不存在嘞？利用 新数组.indexOf(数组元素) 如果返回时 -1就说明新数组没有改元素
			//封装一个去重的函数 unique 独一无二
			function unique(arr){
				var newArr=[];
				for(var i=0;i<arr.length;i++){
					if(newArr.indexOf(arr[i])=== -1){
						newArr.push(arr[i]);
					}
				}
				return newArr;
			}
			var demo=unique([1,4,5,63,5,7,9]);
			console.log(demo);
			
			//数组转换为字符串
			//1.toString()将数组转为字符串
			var arr=[1,2,3];
			console.log(arr.toString());
			//2.join分隔符
			var arr1=['1','2','3'];
			console.log(arr.join());//1,2,3
			console.log(arr.join('-'));//1-2-3
			console.log(arr.join('&'));//1&2&3

Array对象常用方法总结：

unshift( ) 数组开头增加        shift( ) 数组开头删除一项

push( )  数组末尾增加        pop( )数组末尾删除一项

concat( ) 数组的拼接  arr1.concat( arr2,arr3....)

使用concat可以实现数组的克隆，concat（)中不传参数

splice（index, howmany, item1, ...itemx）

splice 可以根据参数实现数组的删除，增加，替换

前两个参数 index 和 howmany 是必需的参数，后面的参数可选参数

splice（index,  0 ，item1， item2...)     增加

从索引 index 开始增加，增加的内容插入到索引 index 前面

splice(index, n)    删除

从索引 index 开始删除n个，如果只有一个参数splice（index），就是从索引  index  开始后面的内容全部删除

splice（index， n，item1，item2...）   替换

从索引 index开始替换 n 个，替换的内容为item1, item2....

slice（n，m）      截取

从索引 n 截取到索引 m 但不包括 m  ，原数组不发生改变

slice（0）或splice（）可以实现数组的克隆

reverse（）     数组翻转

返回值是翻转后的新数组，原数组发生改变

sort（）    数组排序

使用方法：sort（function （a，b）{return  a-b}）     从小到大排

               sort（function （a，b）{return  b-a}）     从大到小排

toString( )   数组转字符串

把数组转成以逗号分隔的字符串

join（拼接形式）    拼接

把数组拼接成以其他形式分割的字符串，配合eval（）可以实现数学运算        eval（join（‘+’））

数组常用但不兼容的方法：

indexOf（查找内容） 查找

arr.indexOf（查找内容）    查找数组中是否有某项，有的话返回该项的所引，没有话返回-1；

forEach（)遍历

forEach接收两个参数，一个callback，thisArg
callback接收三个参数：1）item 2）index 3）input
thisArg用来改变callback中的this指向；
forEach 没有返回值，但是map有返回值

map（）遍历

四：String 字符串对象 

            var str='xyyyyy';
			console.log(str.length);
			//对象才有属性和方法 复杂数据类型才有属性和方法
			//简单数据类型为什么会有length属性呢？
			//基本包装类型： 就是把简单数据类型包装成为了复杂数据类型
			//1.把简单数据类型包装成复杂数据类型
			var temp=new String('xyyyyy');
			//2.把临时变量的值给str
			str=temp;
			//3.销毁这个临时变量
			temp=null;
			
			//基本包装类型就是把简单数据类型包装成复杂数据类型，这样基本数据类型就有了属性和方法
			
			//案例：查找字符串‘abcoefoxyozzopp’中所有o出现的位置以及次数
			//①核心算法：先查找第一个o出现的位置
			//②然后只要indexOf返回的结果不是-1就继续往后查找
			//③因为indexOf只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找
			var str='abcoefoxyozzopp';
			var index=str.indexOf('o');
			var num=0;
			//console.log(index);
			while(index !== -1){
				console.log(index);
				num++;
				index=str.indexOf('o',index+1);
			}
			console.log('o出现次数：'+num);
			
			//根据位置返回字符
			//1.charAt(index)根据位置返回字符
			var str='XYY';
			console.log(str.charAt(2));//Y
			//遍历所有的字符
			for(var i=0;i<str.length;i++){
				console.log(str.charAt(i));
			}
			//2.charCodeAt(index)返回相应索引号的字符ASCII值 目的：判断用户按下了那个键
			console.log(str.charCodeAt(0));//88
			//3.str[index] H5新增
			console.log(str[0]);
			
			//字符串操作方法
			//1.concat('字符串','字符串2'···)
			var str='Xyy';
			console.log(str.concat('ing'));
			//2.substr('截取的起始位置','截取几个字符')；
			var str1='夏颖宇宙最帅';
			console.log(str1.substr(2,2));//宇宙
			//3.replace('被替换的字符'，'替换为的字符')只会替换第一个字符
			var str='Xying';
			console.log(str.replace('X','Y'));
			//4.字符串转换为数组 split('分隔符') 
			var str='red,pink,yellow';
			console.log(str.split(','));
			var str='red&pink&yellow';
			console.log(str.split('&'));

字符串方法总结：

charAt(index)      通过索引找字符

charCodeAt(index)      通过索引找到字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符串。

indexOf()      从前往后找，找到返回内容的索引，找不到返回-1；

lastIndexOf()      从后往前找，找到返回内容的索引，找不到返回-1；

concat()  拼接字符串

slice(n，m)       从索引n 查找到索引m  但不包括m，slice可以取负值

substring(n，m)      从索引n 查找到索引m ，但不包括m， 不可以取负值

substr(n，m)      从索引n开始截取m 个

split(切割形式)       把一个字符串分割成字符串数组。

replace() 用一个值替换原先的值

toUpperCase() 转大写字母        toLowerCase() 转小写字母