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 进行测试

JavaScript 内置对象_第1张图片

JavaScript 内置对象_第2张图片

JavaScript 内置对象_第3张图片JavaScript 内置对象_第4张图片

JavaScript 内置对象_第5张图片

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()
    

你可能感兴趣的:(JavaScript 内置对象)