05-JavaScript基础⑤（内置对象、简单数据类型和复杂数据类型）

1. 内置对象

1.1 内置对象

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

前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发

JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

1.2 查文档

Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN:https://developer.mozilla.org/zh-CN/

1.3 Math对象

属性、方法名	功能
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs()	绝对值
Math.max()/Math.min()	求最大和最小值
Math.random()	获取范围在[0,1)内的随机值

得到一个两数之间的随机整数:

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}

得到一个两数之间的随机整数，包括两个数在内:

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
}

1.4 日期对象

Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。

//创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象
var now = new Date();
var date1 = new Date(2021,12,23);
var date2 = new Date(2021-12-23 15:05:00);

Date实例的方法和属性：

方法名	说明
getFullYear()	获取该年份
getMonth)	获取该月（0-11）
getDate()	获取该日期
getDay()	获取该星期（0-6，周日是0）
getHours()	获取时
getMInutes()	获取分
getSeconds()	获取秒

获取总毫秒数： 基于1970年1月1日（世界标准时间）起的毫秒数

// 实例化Date对象
var date = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())	
console.log(date.getTime())	
// 2. 简单写可以这么做
var now = +new Date();			
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();

倒计数效果：

function countDown(time) {
	var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
	var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
	var times = (inputTime - nowTime) / 1000; // 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;
	return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-1-1 00:00:00'));
var date = new Date();
console.log(date);

1.5 数组对象

创建数组的两种方式：

// 1. 利用数组字面量
var arr1 = [1, 2, 3];
// 2. 利用new Array()
var arr2 = new Array();  // 创建了一个空的数组
var arr3 = new Array(2);  // 创建了长度为2的空数组
var arr4 = new Array(1,2,3); // 等价于数组[1,2,3] 

检测是否为数组：

var arr = [1, 23];
var obj = {};
//instanceof 可以判断一个对象是否是某个构造函数的实例
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
//Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

添加删除数组元素：

方法名	说明	返回
push(参数1,参数2…)	向数组的末尾添加一个或多个元素，修改原数组	返回添加后的长度
unshift(参数1,参数2…)	向数组的开头添加一个或多个元素，修改原数组	返回添加后的长度
pop()	删除数组的最后一个元素，数组长度减1，无参数，修改原数组	返回删除元素的值
shift()	删除数组的第一个元素，数组长度减1，无参数，修改原数组	返回删除元素的值

数组排序：

var arr = [13, 4, 77, 1, 7];
// 1. reverse() 翻转数组 无参数
console.log(arr.reverse());//[7, 1, 77, 4, 13]
// 2. 数组排序（冒泡排序）
//升序
arr.sort(function(a, b) {
	return a - b;
});
console.log(arr);//[1, 4, 7, 13, 77]
//降序
arr.sort(function(a, b) {
	return b - a;
});
console.log(arr);//[77, 13, 7, 4, 1]

数组索引方法：

方法名	说明	返回
indexOf()	查找数组中给定元素的第一个索引	存在返回索引号，否则返回-1
lastIndexOf()	查找数组中给定元素的最后一个索引	在返回索引号，否则返回-1

数组转换为字符串：

方法名	说明	返回
toString()	把数组转换为字符串，逗号分隔每一项	返回一个字符串
join(‘分隔符’)	把数组转换为字符串，指定分隔符分隔每一项	返回一个字符串

其他：

方法名	说明	返回
concat()	连接两个或多个数组，不影响原数组	返回一个新的数组
slice()	浅拷贝，数组截取slice(begin,end)不包含end，不影响原数组	返回由被截取部分组成的新数组
splice()	数组删除splice(第几个开始,要删除的个数)，会改变原数组	返回被删除部分组成的新数组

1.6 字符串对象

基本包装类型：
为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。

基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

var str = 'andy';
console.log(str.length);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js 会把基本数据类型包装为复杂数据类型，其执行过程如下 ：

// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

字符串的不可变：
当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中；重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。
由于字符串的不可变，在大量拼接字符串的时候会有效率问题

根据字符返回位置：
（字符串的所有方法都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串）

方法名	说明	返回
indexOf(‘要查找的字符’, [起始的位置])	从给定位置开始查找字符串中给定元素的第一个索引，没有给定位置则从头开始查找	存在返回索引号，否则返回-1
lastIndexOf()	查找字符串中给定元素的最后一个索引	在返回索引号，否则返回-1

根据位置返回字符：

方法名	说明	使用
charAt(index)	返回指定位置的字符（index为字符串的索引号）	str.charAt(0)
charCodeAt(index)	返回指定位置的字符的ASCII码	str.charCodeAt(0)
str[index]	获取指定位置的字符	HTML5,IE8+支持

字符串操作方法：

方法名	说明
concat(str1,str2,…)	用于拼接多个字符串
substr(start,length)	从start位置开始（索引号），取length个数
slice(start,end)	从start位置开始，截取到end位置（不包含end）
substring(start,end)	从start位置开始，截取到end位置（不包含end），不接受负值

replace()方法：
replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下： （只替换第一个）

字符串.replace(被替换的字符串， 要替换为的字符串);

split()方法：
split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。其使用格式如下：

字符串.split('分割字符');

2. 简单数据类型和复杂数据类型

2.1 简单数据类型

简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null（空对象）。

2.2 复杂数据类型

复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等。

2.3 堆栈

• 堆栈空间分配区别：

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

• 简单数据类型的存储方式：

值类型变量的数据直接存放在变量（栈空间）中

• 复杂数据类型的存储方式：

引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

2.4 简单数据类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

2.5 复杂数据类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。