JavaScript内置对象与数据类型
1、包装类
1.1、原始类型的包装类
- JavaScript的原始类型并非对象类型，所以从理论上来说，它们是没有办法获取属性或者调用方法的。
- 但是，在开发中会看到，我们会经常这样操作：
- 那么，为什么会出现这样奇怪的现象呢？（悖论）
- 原始类型是简单的值，默认并不能调用属性和方法；
- 这是因为JavaScript为了可以使其可以获取属性和调用方法，对其封装了对应的包装类型；
- 常见的包装类型有：String、Number、Boolean、Symbol、BigInt类型
1.2、包装类型的使用过程
默认情况，当我们调用一个原始类型的属性或者方法时，会进行如下操作：
- 根据原始值，创建一个原始类型对应的包装类型对象；
- 调用对应的属性或者方法，返回一个新的值；
- 创建的包装类对象被销毁；
- 通常JavaScript引擎会进行很多的优化，它可以跳过创建包装类的过程在内部直接完成属性的获取或者方法的调用。
我们也可以自己来创建一个包装类的对象：
- name1是字面量（literal）的创建方式，name2是new创建对象的方式；
注意事项：null、undefined没有任何的方法，也没有对应的“对象包装类”；
2、Number类的补充
- 前面我们已经学习了Number类型，它有一个对应的数字包装类型Number，我们来对它的方法做一些补充。
- Number属性补充：
- Number.MAX_SAFE_INTEGER：JavaScript 中最大的安全整数 (2^53 - 1)；
- Number.MIN_SAFE_INTEGER：JavaScript 中最小的安全整数 -(2^53 - 1)
- Number实例方法补充：
- 方法一：toString(base)，将数字转成字符串，并且按照base进制进行转化
- base 的范围可以从 2 到 36，默认情况下是 10；
- 注意：如果是直接对一个数字操作，需要使用..运算符；
- 方法二：toFixed(digits)，格式化一个数字，保留digits位的小数；
- digits的范围是0到20（包含）之间；
- 方法一：toString(base)，将数字转成字符串，并且按照base进制进行转化
- Number类方法补充：
- 方法一：Number.parseInt(string[, radix])，将字符串解析成整数，也有对应的全局方法parseInt；
- 方法二：Number. parseFloat(string)，将字符串解析成浮点数，也有对应的全局方法parseFloat；
- 更多Number的知识，可以查看MDN文档：Number - JavaScript | MDN
3、内置对象
3.1 内置对象
JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象 前面两种对象是JS 基础内容，属于 ECMAScript； 第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发
JavaScript 提供了多个内置对象：Math、 Date 、Array、String等
3.2 查文档
- 查找文档：学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
- Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
- MDN:MDN Web Docs
3.3 Math对象
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
| 属性、方法名 | 功能 |
|---|---|
| Math.PI | 圆周率 |
| Math.floor() | 向下取整 |
| Math.ceil() | 向上取整 |
| Math.round() | 四舍五入版 就近取整 注意 -3.5 结果是 -3 |
| Math.abs() | 绝对值 |
| Math.max()/Math.min() | 求最大和最小值 |
| Math.random() | 获取范围在[0,1)内的随机值 |
注意：上面的方法使用时必须带括号
Math - JavaScript | MDN
获取指定范围内的随机整数：
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}3.4 日期对象
（1）创建Date对象
在JavaScript中我们使用Date来表示和处理时间。
- Date的构造函数有如下用法：
Document
（2）dateString时间的表示方式
- 日期的表示方式有两种：RFC 2822 标准 或者 ISO 8601 标准。
- 默认打印的时间格式是RFC 2822标准的：
我们也可以将其转化成ISO 8601标准的：
- YYYY：年份，0000 ~ 9999
- MM：月份，01 ~ 12
- DD：日，01 ~ 31
- T：分隔日期和时间，没有特殊含义，可以省略
- HH：小时，00 ~ 24
- mm：分钟，00 ~ 59
- ss：秒，00 ~ 59
- .sss：毫秒
- Z：时区
（3）Date获取信息的方法
| 方法名 |
说明 |
| getFullYear() |
获取年份（4 位数）； |
| getMonth() |
获取月份，从 0 到 11 |
| getDate() |
获取当月的具体日期，从 1 到 31（方法名字有点迷） |
| getHours() |
获取小时 |
| getMinutes() |
获取分钟 |
| getSeconds() |
获取秒钟 |
| getMilliseconds() |
获取毫秒 |
| getDay() |
获取一周中的第几天，从 0（星期日）到 6（星期六） |
Document
（4）Date设置信息的方法（了解）
- setFullYear(year, [month], [date])
- setMonth(month, [date])
- setDate(date)
- setHours(hour, [min], [sec], [ms])
- setMinutes(min, [sec], [ms])
- setSeconds(sec, [ms])
- setMilliseconds(ms)
- setTime(milliseconds)
（5）Date获取Unix时间戳
- Unix 时间戳：它是一个整数值，表示自1970年1月1日00:00:00 UTC以来的毫秒数。
- 在JavaScript中，我们有多种方法可以获取这个时间戳：
- 方式一：new Date().getTime()
- 方式二：new Date().valueOf()
- 方式三：+new Date()
- 方式四：Date.now()
- 获取到Unix时间戳之后，我们可以利用它来测试代码的性能：
Document
（6）Date.parse方法
- Date.parse(str) 方法可以从一个字符串中读取日期，并且输出对应的Unix时间戳。
- Date.parse(str) ：
- 作用等同于 new Date(dateString).getTime() 操作；
- 需要符合 RFC2822 或 ISO 8601 日期格式的字符串；
- 比如 YYYY-MM-DDTHH:mm:ss.sssZ
- 其他格式也许也支持，但结果不能保证一定正常；
- 如果输入的格式不能被解析，那么会返回NaN；
Document
3.5 数组对象
（1）创建数组的两种方式
方式一：字面量方式
var arr = [1,"test",true];方式二：new Array()
var arr = new Array();注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数
参数传递规则如下：
-
如果只传入一个参数，则参数规定了数组的长度
-
如果传入了多个参数，则参数称为数组的元素
（2）访问数组：
访问数组中的元素：
- 通过中括号[]访问
- arr.at(i)：
- 如果 i >= 0，则与 arr[i] 完全相同。
- 对于 i 为负数的情况，它则从数组的尾部向前数。
- 修改数组中的元素
- 删除和添加元素虽然也可以通过索引来直接操作，但是开发中很少这样操作。
Document
（3）检测是否为数组
方式一：instanceof 运算符，instanceof 可以判断一个对象是否是某个构造函数的实例
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false方式二：Array.isArray()：Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法
var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false（4）添加删除数组元素的方法
数组中有进行增加、删除元素的方法，部分方法如下表
| 方法名 | 说明 | 返回值 |
| push(参数1...) | 末尾添加一个或多个元素，注意修改原数组 | 并返回新的长度 |
| pop() | 删除数组最后一个元素，把数组长度减1 无参数、修改原数组 | 返回它删除的元素的值 |
| unshift(参数1...) | 向数组的开头添加一个或更多元素，注意修改原数组 | 并返回新的长度 |
| shift() | 删除数组的第一个元素，数组长度减1无参数、修改原数组 | 并返回第一个元素的值 |
注意：push、unshift为增加元素方法；pop、shift为删除元素的方法
Document
（5）数组排序：
数组中有对数组本身排序的方法，部分方法如下表
| 方法名 | 说明 | 是否修改原数组 |
| reverse() | 颠倒数组中元素的顺序，无参数 | 该方法会改变原来的数组，返回新的数组 |
| sort() | 对数组的元素进行排序 | 该方法会改变原来的数组，返回新的数组 |
注意：sort方法需要传入参数来设置升序、降序排序
-
如果传入“function(a,b){ return a-b;}”，则为升序
-
如果传入“function(a,b){ return b-a;}”，则为降序
Document
（6）数组索引方法
数组中有获取数组指定元素索引值的方法，部分方法如下表
| 方法名 | 说明 | 返回值 |
| indexOf() | 数组中查找给定元素的第一个索引 | 如果存在则返回索引号，不存在则返回-1 |
| lastIndexOf() | 在数组中查找给定元素，最后一个的索引 | 如果存在则返回索引号，不存在则返回-1 |
Document
（7）数组转换为字符串
数组中有把数组转化为字符串的方法，部分方法如下表
| 方法名 | 说明 | 返回值 |
| toString() | 把数组转化成字符串，逗号分隔每一项 | 返回一个字符串 |
| join('分隔符') | 方法用于把数组中的所有元素转换成一个字符串 | 返回一个字符串 |
注意：join方法如果不传入参数，则按照 “ , ”拼接元素
Document
（8）其他方法
| 方法名 | 说明 | 返回值 |
| concat() | 连接两个或多个数组，不影响原数组
|
返回一个新的数组 |
| slice() | 数组截取slice(begin,end)，包含bigin元素，但是不包含end元素 | 返回被截取项目的新数组 |
| splice() | 添加，删除和替换元素
|
返回被删除项目的新数组，注意：这个会影响原数组 |
Document
（9）length属性
- length属性用于获取数组的长度：
- 当我们修改数组的时候，length 属性会自动更新。
- length 属性的另一个有意思的点是它是可写的。
- 如果我们手动增加一个大于默认length的数值，那么会增加数组的长度。
- 但是如果我们减少它，数组就会被截断。
- 所以，清空数组最简单的方法就是：arr.length = 0;。
var names = ["abc", "cba", "nba", "mba"]
// 属性length
// 获取数组的长度length
console.log(names.length) // 4
// length属性可写的(扩容)
names.length = 10
console.log(names)
// // 设置的length小于原来的元素个数
names.length = 0
console.log(names)（10）数组的遍历
- 普通for循环遍历：
- for..in 遍历，获取到索引值：
- for..of 遍历，获取到每一个元素：
// 数组的遍历
// 1. 普通的for循环
for (var i = 0; i < names.length; i++) {
console.log(names[i])
}
// 2. for..in
for (var index in names) {
console.log(index, names[index])
}
// 3. for..of
for (var item of names) {
console.log(item)
}（11）查找元素
arr.indexOf方法： 查找某个元素的索引
- 从fromIndex开始查找，如果找到返回对应的索引，没有找到返回-1；
- 也有对应的从最后位置开始查找的 lastIndexOf 方法
arr.includes方法：判断数组是否包含某个元素
- 从索引 from 开始搜索 item，如果找到则返回 true（如果没找到，则返回 false）。
find 和 findIndex 直接查找元素或者元素的索引（ES6之后新增的语法）
var students = [
{id: 100, name: "why", age: 18},
{id: 101, name: "kobe", age: 30},
{id: 102, name: "james", age: 25},
{id: 103, name: "why", age: 22}
]
var stu = students.find(function (item) {
if (item.id === 101) return true
})
console.log(stu)（12）数组的其他高阶方法
arr.forEach
- 遍历数组，并且让数组中每一个元素都执行一次对应的方法；
arr.map
- map() 方法创建一个新数组；
- 这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成；
arr.filter
- filter() 方法创建一个新数组；
- 新数组中只包含每个元素调用函数返回为true的元素；
arr.reduce
- 用于计算数组中所有元素的总和；
- 对数组中的每个元素按序执行一个由您提供的 reducer 函数；
- 每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值；
Document
3.6 字符串对象
String - JavaScript | MDN
（1）基本包装类型
- 为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。
- 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
// 下面代码有什么问题？
var str = 'andy';
console.log(str.length);按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js 会把基本数据类型包装为复杂数据类型，其执行过程如下 ：
// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;（2）字符串的不可变
- 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
- 当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。
- 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
（3）根据字符返回位置
字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法：
| 方法名 | 说明 |
| indexOf('要查找的字符', 开始的位置) | 返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是 index 索引号 |
| lastIndexOf() | 从后往前找，只找第一个匹配的 |
Document
（4）根据位置返回字符
字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：
| 方法名 | 说明 | 使用 |
| charAt(index) | 返回指定位置的字符（index字符串的索引号） | str.charAt(0) |
| charCodeAt(index) | 获取指定位置处字符的ASCII码（index索引号） | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5, IE8+支持和charAt()等效 |
在上述方法中，charCodeAt方法返回的是指定位置上字符对应的ASCII码，ASCII码对照表如下：
案例：判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数
Document
（5）字符串操作方法
字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法：
| 方法名 | 说明 |
| concat(str1, str2, str3...) | concat()方法用于连接两个或多个字符串。拼接字符串，等效与 +, +更常用 |
| substr(start, length) | 从start位置开始（索引号），length 取的个数。重点记住这个 |
| slice(start, end) | 从start位置开始，截取到end位置，end取不到（他们两个都是索引号） |
| substring(start, end) | 从start位置开始，截取到end位置，end取不到，基本和slice相同，但是不接受负值 |
（6）其他方法
| 方法名 | 说明 |
| replace(被替换的字符串， 要替换为的字符串) | 用于在字符串中用一些字符替换另一些字符 |
| split("分割字符") | 用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。 |
| toLowerCase() |
将英文字符串转换为小写 |
| toUpperCase() | 将英文字符串转换为大写 |
Document
4、简单数据类型和复杂数据类型
简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null
复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；
4.1、堆栈
堆栈空间分配区别：
- 栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；（简单数据类型存放到栈里面）
- 堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
简单数据类型的存储方式（值类型变量的数据直接存放在变量（栈空间）中）：
复杂数据类型的存储方式（引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中）：
4.2、简单类型传参
函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
function fn(a) {
a++;
console.log(a);
}
var x = 10;
fn(x);
console.log(x)；运行结果如下：
4.3、复杂数据类型传参
函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。
function Person(name) {
this.name = name;
}
function f1(x) { // x = p
console.log(x.name); // 2. 这个输出什么 ?
x.name = "张学友";
console.log(x.name); // 3. 这个输出什么 ?
}
var p = new Person("刘德华");
console.log(p.name); // 1. 这个输出什么 ?
f1(p);
console.log(p.name); // 4. 这个输出什么 ? 运行结果如下：
