前端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)); //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"] 以&号为分隔符

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值