JS中对象分为3种:1.自定义对象 2.内置对象 (1、2都是JS基础对象,属于ECMAScript)
3.浏览器对象(JS独有的)。
内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)。
最大的优点:帮助我们快速开发。
JS提供了多个内置对象:Math、Date、Array、String等
一:Math 数学对象,不是构造函数,直接使用
//案例:猜数字游戏 //程序随机生成一个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;//退出整个循环 } }
Math案例
//案例:猜数字游戏 //程序随机生成一个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;
slice(n,m) 从索引n 查找到索引m 但不包括m,slice可以取负值
substring(n,m) 从索引n 查找到索引m ,但不包括m, 不可以取负值
substr(n,m) 从索引n开始截取m 个
split(切割形式) 把一个字符串分割成字符串数组。
toUpperCase()转大写字母 toLowerCase() 转小写字母