目录
检测是否为数组 instanceof Array.isArray()
什么是内置对象?
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)); //20
console.log(Math.max(-10,-20)); //-10
console.log(Math.min(1,2)); //1
console.log(Math.min(-1,-2)); //-2
//求绝对值 Math.abs()
console.log(Math.abs(5)); //5
console.log(Math.abs(-5)); //5
console.log(Math.abs('-5')); //隐式转换 把字符型的'-5'转换成数值型的-5
//小数取整 Math.floor()
//向下取整
console.log(Math.floor(1.1)); //1
console.log(Math.floor(1.9)); //1
console.log(Math.floor(-1.1)); //-2
console.log(Math.floor(-1.9)); //-2
//向上取整 Math.ceil()
console.log(Math.ceil(2.1)); //3
console.log(Math.ceil(2.9)); //3
console.log(Math.ceil(-2.1)); //-2
console.log(Math.ceil(-2.9)); //-2
//四舍五入 Math.round()
console.log(Math.round(3.4)); //3
console.log(Math.round(3.5)); //4
console.log(Math.round(-3.4)); //-3
console.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(2017,1,1,8,30,24);
console.log(date1); //Wed Feb 01 2017 08:30:24 GMT+0800 (中国标准时间) 数值型的参数返回的日期要比参数里写的大一个月
var date2 = new Date('2020-4-21 20:30:24');
console.log(date2); //Tue Apr 21 2020 20:30:24 GMT+0800 (中国标准时间) 年月日都与参数相同
格式化日期时间
- getFullYear() 获取年份
- getMonth() 获取月份
- getDate() 获取日期
- getDay() 获取星期
- getHours() 获取时
- getMinutes() 获取分
- getSeconds() 获取秒
//getFullYear()方法
console.log(date.getFullYear()); //返回年份2022
//getMonth() 该方法返回0~11的数值表示1~12月
console.log(date.getMonth()); //2 实际上此时是3月
//getDate() 日期
console.log(date.getDate()); //7
//getDay() 星期一至星期六用数值1~6返回,星期天返回数组0
console.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; //剩余的毫秒转化为秒 22440305516351
console.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('2022-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); //true
console.log(num instanceof Array); //false
console.log(Array.isArray(arr)); //true
console.log(Array.isArray(num)); //false
添加数组元素的方法
push() unshift()
- 都可以给数组添加元素,push()是在数组后面添加,unshift()是在前面添加
- 要添加的数组元素直接写在括号里
- 添加是直接改变原数组
- 添加完后,返回的结果都是最后数组的长度
//push()
var arr4 = [1,2,3,4];
console.log(arr4.push(5,'zero')); //6 返回添加后的数组长度length
console.log(arr4); //[1, 2, 3, 4, 5, "ocean"]
//unshift()
console.log(arr4.unshift('yury','ocean')); //8 也是返回添加后的数组长度length
console.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')); //1
console.log(arr7.indexOf('lin')); //-1
console.log(arr7.indexOf('ocean',1)); //2 从索引为1的元素开始向后找
//lastIndexOf()
console.log(arr7.lastIndexOf('zero')); //3
console.log(arr7.lastIndexOf('lin')); //-1
console.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,spike
console.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"] 以&号为分隔符
个人学习笔记,如有差误欢迎指正