JavaScript 内置对象

目录

目标

内置对象

查文档

MDN

学习对象中的方法步骤

Math 对象

案例：封装数学对象

Math 概述

Math 绝对值和取整方法

绝对值

取整

随机数方法

案例1：随机点名

案例2：猜数字游戏

Date 对象

Date 概述

Date() 方法的使用

获取当前时间

Date() 构造函数的参数

日期格式化

getFullYear()

输出当前日期和星期

封装一个函数，返回当前时间的时分秒

Date 总的毫秒数（时间戳） 

获取日期的总的毫秒形式

案例：倒计时效果

Array 对象

检测是否为数组

添加删除数组元素 

添加数组元素

删除数组元素

案例：筛选数组

数组排序

数组索引方法

案例：数组去重

数组转换为字符串

String 对象

基本包装类型

字符串的不可变

根据字符返回位置

案例：返回字符位置

根据位置返回字符（重点）

案例：返回字符位置

字符串操作方法（重点）

替换字符串

字符串转换数组

转换大写

转换小写

---

目标

• 能够说出什么是内置对象
• 能够根据文档查询指定 API 的使用方法
• 能够使用 Math 对象的常用方法
• 能够使用 Date 对象的常用方法
• 能够使用 Array 对象的常用方法
• 能够使用 String 对象的常用方法

内置对象

• JavaScript 中的对象分为 3 种：自定义对象、内置对象、浏览器对象
• 自定义对象和内置对象是 JS 基础内容，属于 ECMAScript；浏览器对象属于 JS 独有的，通常指各种 API
• 内置对象指 JS 语言自带的一些对象，这些对象供开发者直接使用，并提供了一些常用的或最基本而必要的功能（属性和方法）
• 内置对象最大的优点：帮助我们更快速、高效地开发
• JavaScript 提供了多个内置对象：Math、Date、Array、String 等

查文档

MDN

• 学习一个内置对象的使用，只要学会其常用成员的使用即可
• 可以通过查阅文档学习，通过 MDN / W3C 来查询
• Mozilla 开发者网络（MDN）提供了有关开发网络技术（Open Web）的信息
• 包括 HTML、CSS 和万维网及 HTML5 应用的 API
• MDN 网址：http://developer.mozilla.org/zh-CN

学习对象中的方法步骤

1. 输入 MDN 网址点击进入，在搜索框中输入要查阅对象的方法名
2. 查阅该方法的功能（例如：max()）
3. 查看该方法参数的意义和类型
4. 查看返回值的意义和类型
5. 通过 demo 进行测试

Math 对象

• 可以通过 MDN 查询 Math 对象常用的属性和方法

案例：封装数学对象

利用对象封装数学对象，里面有 PI 值，最大值，最小值

Math 概述

Math 对象不是构造函数，它具有数学常数和函数的属性和方法

和数学相关的运算（求绝对值、取整、最大值等）可以使用 Math 中的方法

Math 绝对值和取整方法

绝对值

取整

• 向下取整：Math.floor()，返回小于括号中数字的最大整数
• 向上整数：Math.ceil()，返回大于括号中数字的最小整数
• 四舍五入取整：当小数部分为 .5 时，无论该数的正负，遵循向上取整

随机数方法

• Math.random()
• 返回一个 0 到 1 之间的伪随机数
• 返回的是一个浮点数
• 返回的随机小数的取值范围：大于等于 0，小于 1
• 不能提供像密码一样安全的随机数字
• 不能使用它来处理有关安全的事情
• 处理安全事件应该使用 Web Crypto API 来代替，和更精确的 window.crypto.getRandomValues() 方法

案例1：随机点名

案例2：猜数字游戏

Date 对象

• Date 对象是一个构造函数，必须使用 new 来创建日期对象
• Date() 如果没有输入任何参数，则 Date 构造器会根据系统设置的当前时间来创建一个 Date 对象
• Date() 如果提供了至少两个参数，其余的参数均会默认设置为 1（如果没有提供 day 参数）或者 0

参数常用写法：

• 数字型：2021, 7, 16  （输出结果为 2021,8,16）
• 字符串型：'2021-07-16 22:51:20'

Date 概述

• Date 对象和 Math 对象不一样，它是一个构造函数，因此需要使用 new 实例化后才能使用
• Date 实例用来处理日期和时间

Date() 方法的使用

获取当前时间

Date() 构造函数的参数

• 如果括号内有一个参数，且此参数为时间，就返回参数里面的时间
• 参数常用写法：数字型：2021, 7, 16；字符串型：'2021-07-16 22:51:20'

日期格式化

通过以下方法可以得到日期的指定部分

方法名	说明
getFullYear()	获取当前日期的年份
getMonth()	获取当前日期的月份（0~11）
getDate()	获取当前日期
getDay()	获取当前日期的星期（周日0 到周六 6）
getHours()	获取当前日期的小时
getMinutes()	获取当前日期的分钟
getSeconds()	获取当前日期的秒数

getFullYear()

• 根据本地时间返回指定日期的年份
• 括号内没有参数

输出当前日期和星期

封装一个函数，返回当前时间的时分秒

Date 总的毫秒数（时间戳） 

获取日期的总的毫秒形式

• Date 对象是基于 1970 年 1 月 1 日（世界标准时间）起的毫秒数
• 计算时间经常使用总的毫秒数，因为它更精确

案例：倒计时效果

核心算法：

• 输入的时间减去现在的时间就是剩余的时间，即倒计时
• 不是拿时分秒分别相减
• 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数
• 将剩余时间总的毫秒数转换为 天、时、分、秒（时间戳转换为时分秒）

转换公式如下：

• date = parseInt（总秒数 / 60 / 60 / 24）；  // 计算天数
• hours = parseInt（总秒数 / 60 / 60 % 24）； // 计算小时
• minutes = parseInt（总秒数 / 60 % 60）； // 计算分钟
• seconds = parseInt（总秒数 % 60）； // 计算秒数 

Array 对象

创建数组对象的两种方式：

• 字面量方式
• new Array()

使用new Array() 创建数组时：

• 括号内没有参数，表示创建了一个空数组
• 括号内有一个参数 n，表示创建了一个长度为 n 的数组，里面含有 n 个 empty 元素
• 括号中有至少两个参数时，表示此数组中的元素为括号中的参数

检测是否为数组

检测是否为数组的两种方式：

• instanceof 运算符
• Array.isArray(参数)

两种方式的区别：

• 当检测 Array 实例时， Array.isArray() 优于 instanceof ，因为 Array.isArray() 能检测 iframes
• Array.isArray() 是 H5 新增的方法，IE9 以上才支持

添加删除数组元素 

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

添加数组元素

添加数组元素的方法：

• push()
• unshift()

push() 和 unshift()

• 在数组的末尾添加一个或多个数组元素，push：推
• 参数直接写要添加的数组元素
• 原数组会发生变化，同时数组长度增加
• log(arr.push(参数)) 或 log(arr.unshift(参数))，返回值为添加数组元素完毕后的数组长度

删除数组元素

删除数组元素的方法：

• pop()
• shift()

pop() 和 shift()

• 删除数组的第一个元素
• 一次只能删除一个元素
• pop() 没有参数
• 删除元素后原数组发生变化，长度减 1
• log(arr.pop()) 或 log(arr.shift())，返回值为 删除的数组元素

案例：筛选数组

数组排序

方法名	说明	是否修改原数组
reverse()	颠倒数组中元素的顺序，无参数	修改，返回新数组
sort	对数组中的元素进行排序（冒泡排序）	修改，返回原数组

使用 sort() 方法应注意：

• 使用 sort() 方法进行排序时，会对排序的数字从首位开始进行排序
• 因此对排序的数字中存在两位及以上数字时，需要对 sort() 方法进行操作添加
• 升序排序 return a - b；
• 降序排序 return b - a；

数组索引方法

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

案例：数组去重

思路：

• 目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个
• 核心算法：遍历旧数组，将旧数组中的元素与新数组中的元素相匹配
• 如果新数组中没有该元素，则将旧数组中的该元素添加到旧数组中
• 如果新数组中存在该元素，则将该元素舍弃。继续匹配下一元素
• 利用 indexOf(旧数组元素)，如果返回 -1，则该元素在新数组中不存在，添加；否则舍弃
• newArr.indexOf(arr[i] === -1)

数组转换为字符串

方法名	说明	返回值
toString()	数组转换为字符串，逗号分隔每一项	返回一个字符串
join('分隔符')	用于把数组中的所有元素转换为一个字符串

方法名	说明	返回值
concat()	连接两个数组，不影响原数组	返回连接产生的新数组
slice()	数组截取 slice(begin, end)	返回被截取元素组成的数组
splice()	数组删除 splice(begin, deletCount, item1, item2 ...)	返回被删除元素组成的数组；将影响原数组

concat()

• var newArr = old_arr.concat(value1, value2, ...)
• value 可以是某个数组，也可以是值
• 将返回连接产生的新数组 newArr

slice()

• array.slice(start, end)
• 包括 begin 不包括 end
• begin，end 为正，从数组索引号为 0 开始截取或结束截取；为负，从数组索引号为 array.length - 1 开始截取或结束截取
• 返回被截取元素组成的数组
• 不会影响原数组

splice()

• array.splice(startIndex, deleteCount, item1, item2, ...)
• 参数 start: 正数，从 0 开始，索引号为 0 的数组元素为 0；负数，从 -1 开始，数组末尾为 -1
• deleteCount() 被省略，或 值 大于 array.length - start，则 start 之后的元素都将被删除 
• 如果值为 0 或 负数，不移除元素；且至少添加一个元素
• item 值可选
• 添加进数组的元素，从 start 位置开始;若不指定,则只删除元素
• 返回值：由被删除的元素组成的一个数组

slice() 和 splice() 目的基本相同，重点是 splice()

String 对象

基本包装类型

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

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

字符串的不可变

指的是里面的值不可变，虽然看上去可以改变的内容，但其实是地址发生了改变，内存中新开辟了一个内存空间用于存放改变后的地址

• 当给一个已经被赋值的字符串重新赋值时，原有的值并不会修改，引燃存在内存中
• 此时将重新在内存中开辟一个新的空间用于存放新的赋值
• 这被称为字符串的不可变
• 因为字符串的不可变，在大量拼接字符串时会存在效率问题

根据字符返回位置

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

方法名	说明
indexOf('要查找的字符', 开始的位置)	返回指定内容在原字符串中的位置，如果找不到就返回 -1，开始的位置是 index 的索引号
lastIndexOf()	从后往前找，只找第一个匹配的

案例：返回字符位置

查找字符串中某字符出现的所有位置及次数

根据位置返回字符（重点）

方法名	说明	使用
charAt(index)	返回指定位置的字符	str.charAt(0)
charCodeAt(index)	获取指定位置字符的 ASCII 码	str.chatCodeAt(0)
str[index]	获取指定位置的字符	H5，IE8支持，和charAt()等效

案例：返回字符位置

判断一个字符串中出现次数最多的字符，并统计其次数

字符串操作方法（重点）

方法名	说明
concat(str1, str2, ...)	该方法用于连接两个或多个字符串。即拼接字符串，等效于 + ，+ 更常用
substr(start, length)	从 start 位置开始（索引号），length 截取的个数（重点）
slice(start, end)	从 start 位置开始，截取到 end 位置
substring(string, end)	从 start 位置开始，截取到 end 位置。不接收负值

concat()

• var newStr = old_str.concat(value1, value2, ...)
• value 可以是某个数组，也可以是值
• 将返回连接产生的新字符串

substr()

• var newStr = old_str.substr('截取起始索引号', '截取字符个数')
• 截取起始索引号为负数时，表示该索引号为截取字符的结束索引号（不包括该索引好的字符） 
• 截取其实索引号为正数时，表示从该索引号开始截取 '截取字符个数' 的字符

替换字符串

• replace('被替换的字符', '替换的字符')

字符串转换数组

• split('分隔符')
• 方法中的分隔符必须与字符串中的分隔符相一致，且都为英文分隔符

转换大写

• toUpperCase()

转换小写

• toLowerCase()