本章目标能说出 Math 对象的3个方法和方法的作用能说出 Array 对象的3个方法和方法的作用能说出 Date 对象的3个方法和方法的作用能说出 String 对象的3个方法和方法的作用理解简单类型和复杂类型的区别本章任务能够实现一个随机生成n-m之间数字的函数能够实现一个格式化日期的函数能够实现一个求两个日期差的函数能够使用数组方法完成相应任务能够使用字符串方法完成相应任务内置对象

所谓内置对象，就是 JavaScript 语言本身自带的一些功能对象，里面提供了很多常用、实用的属性和方法，我们需要做的就是学习这些属性和方法怎么使用，在需要用的时候直接用就行。未来我们还将要学习浏览器给我们提供的对象以及自定义对象。

我们已经用过两个内置对象：Math、Date，Object 也是一个内置对象。接下来我们会分别学习以下几个内置对象：

MathDateArrayStringNumberBoolean

学习方法查询文档

内置对象的成员有很多，现在我们只需要掌握内置对象提供的常用的方法，使用的时候需要查询文档。

常用的文档：

MDN 推荐Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。菜鸟教程W3School

使用 MDN 查询 Math 对象的 random 方法的使用

如何学习一个方法

查询你要学习的方法的功能了解方法的参数的含义和类型了解方法的返回值的含义和类型编写 demo 进行测试

Math

Math 是一个内置对，Math 对象不是构造函数，它拥有一些数学常用属性和数学函数方法。

Math 中常用成员

Math.PI属性，返回圆周率Math.random()方法，生成 0~1 (不包含1)之间的随机数Math.floor()/Math.ceil()向下取整：舍去小数位数向上取整：只要有小数部分就向上进一Math.round()四舍五入取整Math.abs()取绝对值Math.max()/Math.min()求任意个参数的最大值/最小值Math.power()/Math.sqrt()求指数次幂/求平方根Math.sin()/Math.cos()正弦/余弦

案例

实现一个函数返回 10~30 (30可以取到)之间的随机数实现一个函数返回 n~m (m可以取到)之间的随机数随机生成颜色的 RGB 值RGB值：0~255 之间的数字要求函数返回 rgb(随机 r 的值, 随机 g 的值, 随机 b 的值)自己实现一个方法，模拟实现 Math.max() 的效果Date

创建 Date 对象用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。

创建日期对象

Date 是一个构造函数，需要通过 new 来调用，返回一个日期对象。

获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数let now = new Date();// Thu Oct 28 2021 12:37:52 GMT+0800 (中国标准时间)console.log(now);

在打印日期对象的时候，先通过 now.toString() 方法把日期对象转换成字符串再打印字符串内容

在打印对象的时候，经常会隐士调用对象的 toString() 方法然后再输出转换后的字符串，通过 console.dir() 可以打印对象的原始形式

console.dir(now);

打印的结果：

Date 构造函数的参数

通过 new Date() 创建的是当前时间的日期对象，可以给 Date() 函数传入不同类型的参数，获取指定时间的日期对象。

传入数值，日期的毫秒数例如：1635395872862传入字符串(日期格式的字符串)。'1989-06-04'传入年、月、日、时、分、秒的数值1991，1，1

let day1 = new Date(1635395872862);let day2 = new Date('1989-06-04');let day3 = new Date(1991, 1, 1);

获取日期的指定部分

date.getTime()  	  // 返回毫秒数和valueOf()结果一样date.getMilliseconds() date.getSeconds()  // 返回0-59date.getMinutes()  // 返回0-59date.getHours()    // 返回0-23date.getDay()      // 返回星期几 0周日   6周6date.getDate()     // 返回当前月的第几天date.getMonth()    // 返回月份，***从0开始***date.getFullYear() //返回4位的年份  如 2016

返回当前时间的毫秒值，还可以用以下两种方式

// HTML5中提供的方法，有兼容性问题var now = Date.now();	// 不支持HTML5的浏览器，可以用下面这种方式var now = +new Date();

案例

写一个函数，格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式计算时间差，返回相差的天/时/分/秒Array

创建数组对象

创建数组对象跟创建对象，一样有两种方式：

数组字面量new Array()

// 1 使用构造函数创建数组对象let arr1 = new Array();// 2 使用数组字面量let arr2 = [];

数组的常用方法

push()/pop() 栈操作，先进后出push()把一个或多个元素追加到数组最后，并修改length属性pop()取出数组中最后一个元素，并修改length属性shift()/unshift() 队列操作，先进先出shift()取出数组中的第一个元素，并修改length 属性unshift()在数组最前面插入项，返回数组的长度，并修改length 属性join()把数组中的多个元素使用指定的分隔符(默认是英文状态的逗号)拼接成字符串返回reverse()翻转数组中的元素，返回一个新数组indexOf()/lastIndexOf()indexOf(item)从前往后找数组中的第一个匹配元素，并返回匹配元素的索引，找不到返回-1lastIndexOf()从后往后找数组中的第一个匹配元素，并返回匹配元素的索引，找不到返回-1concat()把参数拼接到当前数组的末尾splice()删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)sort()对数组进行排序，默认是从小到大的顺序清空数组

let arr = [1, 2, 3];// 方式1arr = []// 方式2arr.length = 0;// 方式3arr.splice(0, arr.length);

案例将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”将一个字符串数组的元素的顺序进行反转。['a', 'b', 'c', 'd'] -> [ 'd', 'c', 'b', 'a']。工资的数组[1500, 1200, 2000, 2100, 1800],把工资超过2000的删除['c', 'a', 'z', 'a', 'x', 'a']找到数组中每一个a出现的位置去掉一个数组的重复元素，['c', 'a', 'z', 'a', 'x', 'a']对数组元素进行排序

基本类型包装对象

除了 null 和 undefined之外，所有基本类型都有其对应的包装对象，这里我们要来学习以下三种：

StringNumberBoolean

上面三种类型都可以作为构造函数进行调用。当作为构造函数被调用时会创建对应的对象。我们拿 String 来举例，例如：

let s = new String('I Love YOU');// 打印的是 object// 所有复杂类型都来源于 Objectconsole.log(typeof s);

这里的 s 是字符串对象，注意这里的字符串对象和字符串值是不一样的。

我们知道对象是由属性和方法组成，也就是现在的 s 对象是拥有属性和方法的，我们可以直接调用。而字符串值，例如： 'I Love YOU' 这是基本类型的字符串值，是没有属性和方法的。这是字符串对象和字符串值之间的区别。

下面我们快速演示通过字符串对象，获取字符串的长度，以及对字符串进行截取。

let s = new String('I Love YOU');// 打印字符串长度 10console.log(s.length);// 截取字符串中的 YOUlet y = s.substr(7);console.log(y)

接下来我们再来验证下字符串值，是否能访问 length 和 substr()。

let s = 'I Love YOU';// 打印字符串长度 10console.log(s.length);// 截取字符串中的 YOUconsole.log(s.substr(7));

神器的事情发生了，字符串值也可以使用属性和方法。这和刚刚说的明显有冲突，字符串对象有属性和方法，字符串值没有属性和方法。

这究竟是为什么呢？下面我们来解释。

当调用字符串值的属性和方法时经历了以下几个步骤：

首先把字符串值包装成字符串对象调用字符串对象的属性和方法销毁临时创建的字符串对象(设置为 null)

代码示意：

let s1 = 'I Love YOU';let s2 = s1.substr(7);// 执行过程如下：let s1 = 'I Love YOU';let tmp = new String(s1);let s2 = tmp.substr(7);tmp = null;

Number 和 Boolean 这两个基本类型包装对象基本不会使用，使用的话可能会引起歧义。

// 创建基本包装类型的对象let num = 18;  				//数值，基本类型let num = Number('18'); 	//类型转换let num = new Number(18); 	//基本包装类型，对象// Number和Boolean基本包装类型基本不用，使用的话可能会引起歧义。例如：let b1 = new Boolean(false);let b2 = b1 && true;		// 结果是什么

String 对象

在学习 String 对象之前，我们首先来了解下字符串的不可变性，这本身跟字符串对象没有关系，只是放到这里来讲

字符串不可变

JavaScript 字符串是不可更改的。这意味着字符串一旦被创建，就不能被修改。

let str = 'abc';str = 'hello';// 当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题

虽然字符串不可变，但是可以基于对原始字符串的操作来创建一个新的字符串，例如：

let s1 = 'I Love YOU';// substr() 方法无法修改s1的值，而是创建了一个新的字符串返回let s2 = s1.substr(7);

了解了字符串的不可变性，我们就知道接下来要学习的所有字符串方法，都不会修改源字符串，如果需要会生成一个新的字符串。

字符串常用方法

通过查询文档掌握常用方法：concat()、substr()、indexOf()、trim()、toUpperCase()/toLowerCase()

// 1 字符方法charAt()    	// 获取指定位置处字符charCodeAt()  	// 获取指定位置处字符的ASCII码str[0]   		// HTML5，IE8+支持 和charAt()等效// 2 字符串操作方法concat()   		// 拼接字符串，等效于+，+更常用slice()    		// 从start位置开始，截取到end位置，end取不到substring() 	// 从start位置开始，截取到end位置，  end取不到substr()   		// 从start位置开始，截取length个字符// 3 位置方法indexOf()   	// 返回指定内容在元字符串中的位置lastIndexOf() 	// 从后往前找，只找第一个匹配的// 4 去除空白   trim()  		// 只能去除字符串前后的空白// 5 大小写转换方法to(Locale)UpperCase() 	//转换大写to(Locale)LowerCase() 	//转换小写// 6 其它search() replace()split()

案例截取字符串'我爱中华人民共和国'，中的'中华'（substr）'abcoefoxyozzopp' 查找字符串中所有o出现的位置（indexOf）把字符串中所有的o替换成!，'abcoefoxyozzopp' （replace）手机通讯录导出的格式一般为 csv，通过英文逗号来区分每一项，例如：张三,18910440604,1989-06-04,goddlts，请你从这段字符串中获取到手机号码。(split)把字符串中的所有空白去掉 ' abc xyz a 123 '（split和join）作业

实现一个函数返回 n~m (m取不到)之间的随机数自己实现一个方法，模拟实现 Math.min() 的效果将一个字符串数组输出为|分割的形式，比如：'刘备|张飞|关羽'将一个字符串数组的元素的顺序进行反转。['a', 'b', 'c', 'd'] -> ['d', 'c', 'b', 'a']补充作业

自己实现一个函数，实现如下功能：将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”自己实现一个函数，实现如下功能：将一个字符串数组的元素的顺序进行反转。['a', 'b', 'c', 'd'] -> [ 'd', 'c', 'b', 'a']。自己实现一个函数：对数组元素进行排序统计一个字符串中每个字符出现的次数，并求出现次数最多的字符串，abcoefoxyozzopp获取url中?后面的内容，并转化成对象的形式。例如：期望得到的结果：{name: 'zs', age: '18', a: '1', b: '2'}