前端JS学习笔记——内置对象Math Date Array String

目录

1.Math常用方法

2.Date()方法

如何获取Date的时间戳

Date()方法的使用

格式化日期时间

格式化输出一串时间日期

倒计时功能

3.Array方法

创建数组对象的两种方法

检测是否为数组 instanceof Array.isArray()

添加数组元素的方法

删除数组元素的方法

数组排序

数组索引方法

数组去重案例

数组转化为字符串

合并数组

删除/插入数组元素

4.String对象

查找某个字符出现的位置

求某个字符出现的次数和位置

根据位置返回字符

统计出现次数最多的字符

截取字符

替换字符串

屏蔽敏感词功能

字符串转化为数值

什么是内置对象?

JavaScript中的对象分3种：自定义对象、内置对象、浏览器对象

自定义对象就是我们自己定义的对象，如var obj = { } ，浏览器对象是JS独有的，后面说到JS API再具体说

内置对象是JS自带的对象，提供了一些常用的属性和方法供开发人员使用，便于我们快速开发

JS提供的内置对象有：Math、Date 、Array、String等

1.Math常用方法

Math.max() 最大值

Math.min() 最小值

Math.abs() 绝对值

Math.floor() 向下取整

Math.ceil() 向上取整

Math.round() 四舍五入

Math.random() 随机数

//求最大最小值 Math.max() Math.min()console.log(Math.max(10,20)); //20console.log(Math.max(-10,-20)); //-10console.log(Math.min(1,2)); //1console.log(Math.min(-1,-2)); //-2//求绝对值 Math.abs()console.log(Math.abs(5)); //5console.log(Math.abs(-5)); //5console.log(Math.abs('-5')); //隐式转换 把字符型的'-5'转换成数值型的-5 //小数取整 Math.floor()//向下取整console.log(Math.floor(1.1)); //1console.log(Math.floor(1.9)); //1console.log(Math.floor(-1.1)); //-2console.log(Math.floor(-1.9)); //-2//向上取整 Math.ceil()console.log(Math.ceil(2.1)); //3console.log(Math.ceil(2.9)); //3console.log(Math.ceil(-2.1)); //-2console.log(Math.ceil(-2.9)); //-2//四舍五入 Math.round()console.log(Math.round(3.4)); //3console.log(Math.round(3.5)); //4console.log(Math.round(-3.4)); //-3console.log(Math.round(-3.5)); //-3 注意 .5 有点特殊，它在正负数中都是往大了取console.log(Math.round(-3.6)); //-4//随机数 Math.random() 返回一个随机的小数x 0 <= x < 1 //取一个两数之间的随机数function getRandomArbitrary(min,max){console.log(Math.random()*(max - min)+min); //min <= x <max}//取一个两数之间的随机整数function getRandomInt(min,max){min = Math.ceil(min);max = Math.floor(max);console.log(Math.floor(Math.random()*(max - min)+min)); //含最小值，不含最大值}//取一个两数之间的随机整数,包含最小值和最大值function getRandomIntInclusive(min,max){min = Math.ceil(min);max = Math.floor(max);console.log(Math.floor(Math.random()*(max - min + 1)+min));}

2.Date()方法

Date()是构造函数，创建Date对象要用new操作符。Date对象基于Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数

如何获取Date的时间戳

//valueOf() getTime()var timeStamp = new Date();console.log(timeStamp.valueOf());console.log(timeStamp.getTime());//简单的方法（最常用）var timeStamp1 = +new Date(); // +new Date()console.log(timeStamp1);//H5新增方法（注意兼容性问题）var timeStamp2 = Date.now(); //此方法不用new Date()console.log(timeStamp2);

Date()方法的使用

var dateString = Date(); //不适用new操作符，以函数形式调用Date对象console.log(dateString); //返回当前日期和时间，但是是字符串，并非对象var date = new Date();console.log(date); //无参数，则依据系统设置的当前时间来创建一个Date对象var date1 = new Date(,1,1,8,30,24); console.log(date1); //Wed Feb 01 08:30:24 GMT+0800 (中国标准时间) 数值型的参数返回的日期要比参数里写的大一个月var date2 = new Date('-4-21 20:30:24');console.log(date2); //Tue Apr 21 20:30:24 GMT+0800 (中国标准时间) 年月日都与参数相同

格式化日期时间

getFullYear() 获取年份getMonth()获取月份getDate()获取日期getDay()获取星期getHours()获取时getMinutes()获取分getSeconds()获取秒

//getFullYear()方法console.log(date.getFullYear()); //返回年份//getMonth() 该方法返回0~11的数值表示1~12月console.log(date.getMonth()); //2 实际上此时是3月//getDate() 日期console.log(date.getDate()); //7//getDay() 星期一至星期六用数值1~6返回，星期天返回数组0console.log(date.getDay()); //1//getHours() 时console.log(date.getHours()); //getMinutes() 分console.log(date.getMinutes());//getSeconds() 秒console.log(date.getSeconds());

格式化输出一串时间日期

function getToday(){var now = new Date();var Y = now.getFullYear();var Month = now.getMonth();var date = now.getDate();var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];var Day = week[now.getDay()]; //getDay()用数值0~6表示星期日~星期六，根据这个特性设置数组var H = now.getHours();H = H < 10 ? '0'+ H : H; //数值小于10时用 01 02...的格式表示var Minute = now.getMinutes();Minute = Minute < 10 ? '0'+Minute : Minute;today = Y+'年'+Month+'月'+date+'日'+Day+H+':'+Minute;console.log(today);}getToday();setInterval(function(){getToday();},60000); //每分钟刷新一次

倒计时功能

做法：未来的时间戳减去当前的时间戳就是剩余的时间，然后把剩余的时间转化为天时分秒

function countdown(tt){var time1 = +new Date();var time2 = +new Date(tt);var times = (time2 - time1) / 1000; //剩余的毫秒转化为秒 22440305516351console.log(times);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;console.log(d+'天'+h+'时'+m+'分'+s+'秒');if(s<=0){clearInterval(timer);}}var timer = setInterval(function(){countdown('-3-8 16:10:00');},1000)

3.Array方法

创建数组对象的两种方法

字面量创建new Array()

var arr = [1,2,3]; //字面量创建var arr1 = new Array(); //是一个空数组var arr2 = new Array(2); //创建一个length为2的数组，里面有2个空的数组元素console.log(arr2); var arr3 = new Array(2,3); //[2, 3] 有两个以上参数时，会把所有参数作为数组元素创建一个数组console.log(arr3);

检测是否为数组 instanceof Array.isArray()

instanceof 这个是个运算符Array.isArray()方法 H5新增 ie9以上兼容

var num = 1;console.log(arr instanceof Array); //trueconsole.log(num instanceof Array); //falseconsole.log(Array.isArray(arr)); //trueconsole.log(Array.isArray(num)); //false

添加数组元素的方法

push() unshift()

都可以给数组添加元素，push()是在数组后面添加，unshift()是在前面添加要添加的数组元素直接写在括号里添加是直接改变原数组添加完后，返回的结果都是最后数组的长度

//push()var arr4 = [1,2,3,4];console.log(arr4.push(5,'zero')); //6 返回添加后的数组长度lengthconsole.log(arr4); //[1, 2, 3, 4, 5, "ocean"]//unshift()console.log(arr4.unshift('yury','ocean')); //8 也是返回添加后的数组长度lengthconsole.log(arr4); //["yury", "ocean", 1, 2, 3, 4, 5, "zero"]

删除数组元素的方法

pop() shift()

都不跟参数，pop()删除数组最后一个元素，shift()删除数组第一个元素删除都是直接改变原数组执行后的返回结果是它删除的那个元素

//pop()console.log(arr4.pop()); //zero pop()方法的返回结果是它删除的那个元素console.log(arr4); //["yury", "ocean", 1, 2, 3, 4, 5]//shift()console.log(arr4.shift()); //yury shift()方法的同样返回它删除的那个元素console.log(arr4); //["ocean", 1, 2, 3, 4, 5]

数组排序

reverse() 翻转数组sort() 数组排序（冒泡排序）

//reverse()var arr5 = [5,1,4,9,3];arr5.reverse(); //返回结果是翻转后的数组console.log(arr5); //[3, 9, 4, 1, 5] reverse()直接改变原数组//sort()arr5.sort(); //返回结果是排序后的数组console.log(arr5); //[1, 3, 4, 5, 9]var arr6 = [23,9,34,177];console.log(arr6.sort()); //[177, 23, 34, 9]

可以看到sort()方法在排序arr5（数值都小于10）时可以成功，但在排序arr6（有数值大于10）时出现错误，这是因为sort()排序是将元素转换为字符串，然后按各个字符的Unicode位点进行排序，字符'177'在Unicode顺序上比'23'要靠前，所以将177排在了前面

解决办法：在排序数值时，可以给sort()设一个比较函数，规定排序方式

console.log(arr6.sort(function(a,b){ //结果是[9, 23, 34, 177]return a - b; //a - b 是升序}))console.log(arr6.sort(function(a,b){ //结果是[177, 34, 23, 9]return a + b; //a + b 是降序}))

数组索引方法

indexOf() lastIndexOf()

都返回查找的元素的索引号，indexOf()是从前面开始找，lastIndexOf()是从后面开始找如果数组中有多个相同的元素，那么只返回第一个找到的元素的索引如果数组中不存在要查找的元素，那么这两个方法都会返回 -1

var arr7 = ['ocean','yury','ocean','zero','spike'];console.log(arr7.indexOf('yury')); //1console.log(arr7.indexOf('lin')); //-1console.log(arr7.indexOf('ocean',1)); //2 从索引为1的元素开始向后找//lastIndexOf()console.log(arr7.lastIndexOf('zero')); //3console.log(arr7.lastIndexOf('lin')); //-1console.log(arr7.lastIndexOf('ocean',1)); //0 从索引为1的元素开始向前找

数组去重案例

核心思想：遍历旧数组，在新数组里查找每一个旧数组的元素，如果在新数组里找不到这个元素，那就把该元素添加到新数组里

var oldArr = ['c','a','z','a','x','a','x','c','b'];function deduplicate(arr){ //封装一个去重函数var newArr = [];for(let i=0;i<arr.length;i++){if(newArr.indexOf(arr[i]) == -1){ //如果在新数组里找不到该元素newArr.push(arr[i]); //那就把该元素添加到新数组里}}return newArr;}var deduplication = deduplicate(oldArr);console.log(deduplication); //["c", "a", "z", "x", "b"]

数组转化为字符串

toString()join()

//toString()var arr8 = ['ocean','yury','zero','spike'];console.log(arr8.toString()); // ocean,yury,zero,spikeconsole.log(arr8); //["ocean", "yury", "zero", "spike"] 不改变原数组//join() 该方法的参数只能是字符串console.log(arr8.join()); //ocean,yury,zero,spike 无参数时，以逗号为分隔符console.log(arr8.join('')); //oceanyuryzerospike 如果是空字符串，那么元素没有间隔console.log(arr8.join('&')); //ocean&yury&zero&spike 以 & 为分隔符console.log(arr8); //["ocean", "yury", "zero", "spike"] 不改变原数组

合并数组

concat() 此方法不会更改现有数组，而是返回一个新数组

var arr9 = ['a','b','c'];var arr10 = [1,2,3];var arr11 = [4,5,6];var concat1 = arr9.concat(arr10);console.log(concat1); //["a", "b", "c", 1, 2, 3]var concat2 = arr9.concat(1, [2,3]);console.log(concat2); //["a", "b", "c", 1, 2, 3]var concat3 = arr9.concat(arr10, arr11);console.log(concat3); //["a", "b", "c", 1, 2, 3, 4, 5, 6]var concat4 = arr9.concat(); //无参数console.log(concat4); //["a", "b", "c"]

concat()在连接多个数组的时候，会将原始数组里的元素进行浅拷贝，复制到新数组里。如果原始数组里的引用数据类型（对象、数组）元素被复制到新数组里，那么在改变新数组里的这个元素时，原始数组的该元素也会受到改变

var arr12 = [['ocean'],'spike',0];var concat5 = arr12.concat(1,2,3);console.log(concat5); //[['ocean'], "spike", 0, 1, 2, 3]concat5[0].push('yury'); //concat5 = [["ocean", "yury"], "spike", 0, 1, 2, 3]console.log(arr12); //arr12 = [["ocean", "yury"], "spike", 0]

浅拷贝和深拷贝的原理可看这篇文章 深拷贝与浅拷贝的原理和区别

数组截取

slice(negin,end) 浅拷贝原数组的begin到end的元素（包括begin不包括end）返回一个新数组

var arr13 = ['ocean','yury','zero','spike','jet','faye','ed'];console.log(arr13.slice(2)); //["zero", "spike", "jet", "faye", "ed"] 只有begin，会一直提取到原数组末尾console.log(arr13.slice(0,2)); //["ocean", "yury"]console.log(arr13.slice(3,7)); //["spike", "jet", "faye", "ed"] end大于数组的长度，会一直提取到原数组末尾console.log(arr13.slice(-2)); //["faye", "ed"] begin = -2表示提取原数组中的倒数第二个元素到最后一个元素console.log(arr13.slice(2,-2)); //["zero", "spike", "jet"] 提取第三个到（不包括）倒数第二个console.log(arr13.slice()); //["ocean", "yury", "zero", "spike", "jet", "faye", "ed"] 无参数，从头取到尾

删除/插入数组元素

splice() 该方法直接改变原数组

var arr14 = ['a','b','c'];arr14.splice(2,1,'C'); //从索引2的位置开始删除1个元素，插入 'C'console.log(arr14); //["a", "b", "C"]arr14.splice(1,2,'B','c'); //从索引1的位置开始删除2个元素，插入值有2个分别为 'B' 'c'console.log(arr14); //["a", "B", "c"]arr14.splice(1,2,'d'); //从索引1的位置开始删除2个，只有1个插入值'd'，那么只会插入1个'd'console.log(arr14); //["a", "d"]arr14.splice(1,0,'c'); //从索引1的位置开始删除0个元素，那么会在原来索引1的元素前插入1个'c'，这个操作可以起到添加数组元素的作用console.log(arr14); //["a", "c", "d"]arr14.splice(4,0,'e'); //开始位置超出数组长度，会在数组最后添加元素console.log(arr14); //["a", "c", "d", "e"]arr14.splice(-2,1,'f'); //从倒数第二的位置开始删除1个元素，插入'f'console.log(arr14); //["a", "c", "f", "e"]arr14.splice(-5,1,'b'); //开始位置的值的绝对值大于length，则表示开始位置为第0位console.log(arr14); //["b", "c", "f", "e"]

4.String对象

在学习String对象之前，首先要明确一点，字符串是不可改变的，当给一个变量赋值字符串时，会在内存里存入这段字符，即使重新给该变量赋值也不会销毁原来的字符，而是在内存开辟一个新的空间存放新值，让该变量指向这个新值，原来的字符依然存在内存空间里

由于字符串的这个特性，在大量拼接字符串的时候需要谨慎，因为会有效率问

也是因为这个特性，字符串的所以方法都不会修改字符串本身，方法执行完都会返回一个新字符串

查找某个字符出现的位置

可用indexOf()和lastIndexOf()，使用方法和上面数组的用法一样

求某个字符出现的次数和位置

核心思想：先查找字符第一次出现的位置，如果不是-1，那就保存这个位置，并且继续查找

var str = 'ivajsksavjgyabvnjaamkdkoa';function find(string,str){var start = 0;var position = [];while (string.indexOf(str,start) != -1){start = string.indexOf(str,start);position.push(start);start++;}return [position,position.length];}var result = find(str,'a');console.log(result[0]); //[2, 7, 12, 17, 18, 24] 出现的位置console.log(result[1]); //6 出现的次数

根据位置返回字符

charAt(index)charCodeAt(index) 获取指定位置字符的ASCII码 实际中常用来判断用户按了哪个键str[index] H5新增，ie8+支持

//charAt()var str1 = 'ocean';console.log(str1.charAt(1)); //c//charCodeAt()console.log(str1.charCodeAt(2)); //101//str[index]console.log(str1[3]); //a

统计出现次数最多的字符

核心思想：遍历该字符串的每个字符，存进对象里，若对象尚未有该字符就创建一个与该字符同名的属性且赋值为1，若已有该属性那么属性值就+1，然后遍历对象，获得最大值及其属性名

var str2 = 'txnjaoxkzjovjavkxxciasja';function count(string) {var countobj = {}for (let i = 0; i < string.length; i++) {if (!countobj[string[i]]) { //如果不存在该属性countobj[string[i]] = 1; //添加属性且赋值1} else {countobj[string[i]]++; //如果存在该属性,就让值+1}}console.log(countobj);var temp = 0; //设一个临时变量var key = [];for (var k in countobj) {if (countobj[k] > temp) { //这个分支的作用是获得最多的次数和对应的那个字符temp = countobj[k]; //如果属性值比temp值大，那么temp获得该数值key = [k]; //并且纪律下对应的属性名}} else if (countobj[k] == temp) { //这个分支的作用是判断是否有多个字符出现的次数同样多key.push(k); //如果当前属性值与temp相等，那就在key数值上添加对应的属性名}}return [key, temp];}var res = count(str2);console.log(res) //[["x", "j", "a"], 4] 出现最多的是字符x、j、a，出现次数是4次

截取字符

substr()slice()

//substr(index,length) index开始的位置,length截取的长度（几个字符）var pome = '我喜欢你是寂静的。';console.log(pome.substr(0, 4)); //我喜欢你//slice(start,end) start开始位置，end结束位置（取不到end），用法与数组的用法一样console.log(pome.slice(3, 8)); //你是寂静的

替换字符串

replace(a,b) a是原字符 b是新字符 该方法只替换找到的第一个a

var str3 = 'nomadland';console.log(str3.replace('land', 'ocean')); //nomadocean

屏蔽敏感词功能

var str4 = 'go fuck yourself,you mother fucker'; //请文明用语，少说脏话function sayNoFuck(str) {while (str.indexOf('fuck') != -1) {str = str.replace('fuck', 'f***');}return str;}var cleanFuck = sayNoFuck(str4);console.log(cleanFuck); //go f*** yourself,you mother f***er

字符串转化为数值

split('分隔符') 与前面学过的数组转化为字符串的join()方法一起记忆

var str5 = 'ocean&yury';console.log(str5.split('&')); //["ocean", "yury"] 以&号为分隔符

个人学习笔记，如有差误欢迎指正