JavaScript常用内置对象Date、Number、String、Array、Boolean、Math

一、Date

1、创建Date对象的方式

创建方式	描述
var d = new Date()	以当前时间创建日期对象，可以用于获取当前系统时间
var d = new Date(milliseconds)	返回从 1970 年 1 月 1 日至今的毫秒数,var d = new Date(1000),会返回1970年1月1日08:00:01，参数单位是毫秒
var d = new Date(dateString)	dateString的格式为"2020-6-16 00:00:00"或者"6 18 2020 00:00:00"
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds)	这种方式传入的month是从0开始计数的

2、Date对象常用方法

方法	描述
getFullYear()	从 Date 对象以四位数字返回年份，比如“1970”
getMonth()	返回月份，该方法返回的月份是从0开始计数的，当要获取当前月份应：d.getMonth()+1
getDate()	返回日期对象中一个月的某一天，从1到31
getDay()	返回日期对象中一周中的某一天的英文单词，从0-6，0代表的是星期日
getTime()	返回1970年1月1日至创建的日期对象的毫秒数，可以通过计算获取两个时间之间的时间差

3、Date对象使用实例之倒计时

制作一个倒计时，其中倒计天、小时、分钟和秒，步骤如下：
（1）在页面放一个div用于显示倒计时：

<div class="time">
    <span class="day">a </span>天
	<span class="hour">a </span>:
	<span class="minuts"> a</span>:
	<span class="seconds">a </span>
</div>

（2）获取到div中的span元素：

let time_day = document.querySelector(".day");
let time_hour = document.querySelector(".hour");
let time_minuts = document.querySelector(".minuts");
let time_seconds = document.querySelector(".seconds");

（3）创建截止时间，获取当前时间：

let end = new Date('2020-6-18 00:00:00');//截止时间
let currentTime = new Date();//当前时间

（4）计算当前时间与截止时间的时间差：

let time = end - currentTime;//以毫秒数返回时间差

（5）通过时间差计算出天、小时、分钟、秒：

let day = Math.floor(time / 1000 / 60 / 60 / 24 % 24);//天数
//以得到的总小时数/24换算成天数进行显示
let hour = Math.floor(time / 1000 / 60 / 60 % 24);//小时
//以得到的总分钟/60换算成小时数，再对24取余得到不足一天的小时数作为相差小时数显示
let minuts = Math.floor(time / 1000 / 60 % 60);//分钟
//以得到的总秒数/60换算成总共的分钟，再对60取余获取不足一小时的分钟数作为相差的分钟数显示
let seconds = Math.floor(time / 1000 % 60);//秒
//time / 1000计算出总共的秒数，60秒一分钟，对60取余获取不足一分钟的秒数作为相差的秒数显示

（6）将计算得到的天、小时、分钟、秒显示再页面上：

time_day.innerHTML = day;
time_hour.innerHTML = hour;
time_minuts.innerHTML = minuts;
time_seconds.innerHTML = seconds;

（7）设置每一秒钟计算一次时间，让倒计时动态显示：需要用到定时器setIntervall(要执行的代码，间隔时间)，它会根据设置的间隔时间无限执行设置的执行代码，这里将获取当前时间和计算时间差和天数、小时、分钟、秒以及显示在页面上的代码都放进来。

setInterval(function() {
	let currentTime = new Date();
	let time = end - currentTime;
	let day = Math.floor(time / 1000 / 60 / 60 / 24 % 24);
	let hour = Math.floor(time / 1000 / 60 / 60 % 24);
	let minuts = Math.floor(time / 1000 / 60 % 60);
	let seconds = Math.floor(time / 1000 % 60);
	time_day.innerHTML = day; 
	time_hour.innerHTML = hour; 
	time_minuts.innerHTML = minuts; 
	time_seconds.innerHTML = seconds; 
}, 1000);

（8）整体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-color: #eee;
				color: #333;
				font-size: 20px;
				text-align: center;
				line-height: 50px;
			}
		</style>
		
	</head>
	<body>
		<div class="time">
			<span class="day">a </span>天
			<span class="hour">a </span>:
			<span class="minuts"> a</span>:
			<span class="seconds">a </span>
		</div>
		<script type="text/javascript">
			function countDown() {
				let end = new Date('2020-6-18 00:00:00');
				let time_day = document.querySelector(".day");
				let time_hour = document.querySelector(".hour");
				let time_minuts = document.querySelector(".minuts");
				let time_seconds = document.querySelector(".seconds");
				setInterval(function() {
					let currentTime = new Date();
					let time = end - currentTime;
					let day = Math.floor(time / 1000 / 60 / 60 / 24 % 24);
					let hour = Math.floor(time / 1000 / 60 / 60 % 24);
					let minuts = Math.floor(time / 1000 / 60 % 60);
					let seconds = Math.floor(time / 1000 % 60);
					time_day.innerHTML = day;
					time_hour.innerHTML = hour; 
					time_minuts.innerHTML = minuts; 
					time_seconds.innerHTML = seconds;
				}, 1000);
			}
			countDown();
		</script>
	</body>
</html>

二、Nnumber

1、创建方式

var num = new Number();

2、常用方法

方法	描述
toString()	以指定进制数将数字转换为字符串，不传参时默认十进制，当调用该方法的对象不是 Number 时抛出 TypeError 异常
valueOf()	以字符串的形式返回数字，当调用该方法的对象不是 Number 时抛出 TypeError 异常

3、Number的使用方法

使用Number时，通常不会使用new关键字，而是使用Number()构造函数，它可以将参数转换为数字并返回，当无法转换为数字是返回NaN；调用Number()构造函数的可以是对象也可以是原始的数值。

//变量形式传参进行转换
let str1 = '1234';
let num1 = Number(str1);
console.log(num1);//1234
let str2 = '1234num';
let num2 = Number(str2);
console.log(num2);//NaN
//字面量形式传参
let num3 = Number('234');
console.log(num3);//234
let num4 = Number('osjd');
console.log(num4);//NaN
//转换对象
console.log(Number([]));//0空数组转换为0
console.log(Number(['123']));//123
//数组有一个元素转换第一个元素能够转换返回数值,反之NaN
console.log(Number(['1','2']));//NaN数组中有多个原属返回NaN
console.log(Number({}));//NaN,空对象反回NaN
console.log(Number({name:'Tom'}));//NaN,非空对象返回NaN

三、String

1、创建方式

创建方式	描述
new String(str)	返回一个String对象，对象中存放了str的值
String(s)	将s转换为字符串并返回

String对象有length属性，可以返回字符串的长度，同时，通过var str = 'abc’方式创建的字符串也可以访问length属性获取字符串长度。

var str1 = 'abcdefg';
console.log(str1.length);//7
var str2 = new String('defgtg');
console.log(str2.length);//6
var str3 = String('jdoshfhsgfh');
console.log(str3.length);//11

2、常用方法

方法	描述
charAt()	返回指定位置的字符
indexOf()	返回指定字符的下标
charCodeAt()	返回指定位置字符的Unicode编码
fromCharCode()	根据编码返回对应的字符
toUpperCase()	将字符串转换为大写
toLowerCase()	将字符串转换为小写
substring()	从字符串中截取指定的两个下标之间的字符串，下标遵循左闭右开原则
match()	根据正则表达式所规定的规则在字符串中查找字符，返回第一次找到的字符的下标
replace()	替换与正则表达式匹配的子串
split()	根据指定的分割规则，把字符串分割为字符串数组。
trim()	去除字符串首尾的空格

3、String实例之去除字符串中所有的空格

正则表达式规则中，使用/ /来包裹正则表达式，/ /g表示在某个对象中全面匹配，/ /i表示只匹配一次，找到即可，在本例中，要去掉所有的空格，需要用到全局匹配，正则表达式中\s表示空格，并使用replace()方法将找到的空格后将空格替换为空字符：

var str = "    hello    every    body     ";
// \s 表示空格 g表示替换所有的空格
var newStr = str.replace(/\s/g, "")
console.log(newStr);
//helloeverybody

4、String实例之获取不定长度的子字符串

通过substring()方法截取被indexOf()方法检索到的指定字符串的下标之间的字符串：

var str = "temp30water160purple二级win一级end";
// [a, b)
var wen = str.substring(str.indexOf("temp")+4,   str.indexOf("water"));
console.log(wen);

四、Array

1、创建方式

创建方法	描述
new Array()	返回一个空数组对象，可以在该数组中动态添加元素
new Array(size)	返回一个长度为size、元素都为empty的数组，也可以在数组中动态添加元素
new Array(ele1, ele2…)	返回一个以参数组成的数组

注意new Array(ele1, ele2…)中的参数不能写成：new Array(ele1, ele2, , elen)

2、常用方法

方法	描述
conca()	连接两个或多个字符串，返回一个新的数组
jion()	将数组转换为字符串
pop()	弹栈，删除栈顶即数组末尾元素并返回该元素的值
push()	压栈，添加栈顶元素即数组末尾元素并返回新的长度
shift()	删除并返回栈底即数组开头的元素
unshift()	在栈底即数组开头添加元素并返回新的长度
splice()	删除元素，并向数组添加新的元素，可以用于实现替换数组元素(先删除该元素，在该元素位置添加一个新元素)
sort()	对数组元素进行排序，当元素为字符时根据Unicode编码排序，当元素为数字类型时，需要传递一个函数作为参数，函数是排序规则
reverse()	反转数组元素

注意：

shift、unshift、pop、push、reverse、splice直接更改数组，不会创建一个新的数组
join方法不会改变原来的数组，会返回数组元素组成的字符串

五、Boolean

1、创建方式

创建方法	描述
new Boolean(value)	使用构造函数方式创建Boolean对象，返回true/false
Boolean(value)	转换函数方式，将value转换为Boolean类型，返回true/false

通过Boolean()可以转换为false的几个值：0、-0、0.0、undefined、null、""、false
除了以上几种，剩余的其他值转换为Boolean类型均为true，比如[],{}

六、Math

1、Math

Math对象没有构造函数，不需要通过new关键字来创建对象，使用时只需Math.函数名或Math.属性名
Math常用属性为PI，Math.PI返回圆周率

2、Math常用方法

方法	描述
random()	返回[0,1)的随机数
floor()	对一个数向下取整
ceil()	对一个数向上取整

例如：

console.log(Math.random()); //获得0~1之间的随机浮点数
console.log(Math.random()*10); //获得0~10之间的随机浮点数
console.log(Math.floor(Math.random()*10)); //获得0~10之间的随机整数

3、Math对象使用实例之切换图片

点击按钮去切换的图片，可以随机切换也可以按顺序切换，实现思路：

（1）将图片存放在一个数组中，通过数组下标去访问图片，每次点击是通过随机生成下标实现随机切换

（2）点击顺序切换时，获取当前下标，对下标加1得到下一个图片，显示在页面上

<button onclick="changeImg()">点击随机切换图片</button>
<button onclick="changeImgOrder()">点击顺序切换图片</button>
<br/>
<img src="图片地址" >
<script type="text/javascript">
function changeImg() {
    //定义数组存放图片地址
    var imgArr = [元素为图片地址的一些字符串];
	//获取img元素			
    var img = document.querySelector("img");
	//随机生成数组下标		
    var index = Math.floor(Math.random()*imgArr.length);
    console.log(index);
    //显示随机位置的图片
    img.src = imgArr[index];
}
			
var index = 0;
function changeImgOrder() {
    ////定义数组存放图片地址
	var imgArr = [元素为图片地址的一些字符串];
	//获取img元素				
	var img = document.querySelector("img");
	//得到下一个图片下标
	index++;
	//显示图片
	img.src = imgArr[index%imgArr.length];
}