Skr-Eric的Javascript课堂（四）——JS的内置对象

JS的内置对象

1. 对象 ：

对象由属性和方法组成，可以使用点语法访问对象的

属性和方法

et :

var arr = [1,2,3];

arr.length; //访问属性

arr.push(100); //访问方法

 

2. 对象分类 ：

1. 内置对象 ：

由ECMAScript规定，例如数组 字符串 Math Date...

2. BOM 对象 ：

浏览器对象模型，由浏览器各大厂商制定，提供

一系列与浏览器操作相关的对象

3. DOM 对象 ：

文档对象模型，提供一系列规范的操作文档的对象

4. 自定义对象

 

3. 内置对象分类 ：

1. String 对象

1. 创建 ：

var str1 = "hello";

var str2 = new String("world");

2. 属性和方法

1. 属性 ：

length : 获取字符串长度

var s = "hello";

var s2 = "h e l l o";

s.length; //5

s2.length;//9

2. 方法 ：

1. 英文字符串的大小写转换

1. toUpperCase()转换全大写字母

2. toLowerCase()转换全小写字母

注意 ：

该方法会返回新的字符串，不影响原始字符串

练习 ：

1. 创建数组，保存数字和字母

2. 生成随机6位的验证码

从数组中随机抽取6位元素，组成验证码

随机数 ：Math.random();

生成[0,1)之间的随机数

3. 将生成的验证码提示给用户输入

4. 验证用户输入是否正确

在不区分大小写的情况下，只要输入

正确，都提示"验证成功"

2. 获取字符或字符编码

1. 获取指定位置的字符

charAt(index);

2. 获取指定位置的字符对应的编码

charCodeAt(index);

3. 检索字符串

1. indexOf(value[,fromIndex])

作用 ：获取指定字符的下标

参数 ：

1. value : 必填，设置查找字符

2. fromIndex : 可选参数，设置从哪个下标

位置开始查找，默认值为0

返回值 ：

返回value第一次出现的下标位置,查找失败，

返回-1

2. lastIndexOf(value[,fromIndex])

作用 ：查找指定字符的下标

返回值 ：value最后一次出现的下标

注意 ： 大小写敏感

4. 截取字符串

1. substring(startIndex,endIndex)

根据下标截取字符串 [startIndex,endIndex)

et :

var a = "hello";

a.substring(0,1);

返回下标范围内的字符串

注意 ：

endIndex可以省略,省略时,截至字符串末尾

练习 1：

从给定的邮箱 ：

zhangsan@sina.com

1. 提取用户名

2. 提取服务商

练习 2：

从给定的身份证号中，提取出生年月日

100233186012057663

5. 分割字符串

1. split(param)

参数 ：指定分割符

返回值 ：返回数组，存放分割完成后的小字符串

注意 ：

指定的分隔符必须是字符串中存在字符，否则

不会对原字符串分割。

练习 ：

1045_5&2033_6&0112_10

分割商品数量与ID

商品ID  商品数量

1045 5

6. 模式匹配

1. 配合正则表达式实现查找和替换字符串的作用

2. 正则表达式

语法 ：/正则格式/修饰符

修饰符 ：

i : ignorecase 忽略大小写

g : global 全局匹配

et :

var reg1 = /长高/ig ;

var reg2 = /\d/ig;

3. 字符串方法 ：

1. replace(substr/RegExp,newStr)

根据给出的substr或RegExp查找对应字符串，

并将其替换为newStr;

返回值:返回替换后的新字符串,不影响原始

数据

2. match(substr/RegExp)

根据指定的substr或RexExp匹配对应字符串

返回数组，数组中存放匹配结果

 

练习 ：

微软是一家国际大公司，Microsoft的官网上

有自己公司microsoft的logo。MicRosoft的官网上

有自己公司microsoft的logo

将所有的Microsoft都使用中文表示，

输出替换了多少次

2. 正则表达式对象 RegExp

RegExp : Regualr Expression

1. 语法 ：

var reg1 = /微软/ig;

var reg2 = new RegExp('匹配模式','修饰符');

2. 属性 ：

lastIndex : 可读可写，表示下一次匹配的起始索引

注意 ：

1. 默认情况下，正则表达式对象不能重复调用方法，

如果重复调用，结果会出错：

由于lastIndex保存再一次匹配的起始下标，

重复调用时，不能保证每次都从下标0开始

验证，可以手动调整lastIndex为0.

2. 只有正则对象设置全局匹配 g ，该属性

才起作用

3. 方法 ：

test(str) :验证字符串中是否存在满足正则匹配模式

的内容，存在则返回true,不存在返回false

参数为要验证的字符串

3. Math 对象

1. Math对象主要提供一些列数学运算的方法

2. 属性 ：

1. 圆周率 : Math.PI

2. 自然对数 : Math.E

3. 方法 ：

1. 三角函数

Math.sin(x)

Math.cos(x)

Math.tan(x)

注意 ：参数为角度

角度换算 ：

Math.PI / 180 ：

Math.PI也可以表示180度

Math.PI / 180 表示 1度

2. 计算函数

Math.sqrt(x);  表示对x开平方

Math.log(x);  求对数

Math.pow(x,y); 求x的y次方

3. 数值操作

Math.abs(x);  求x的绝对值

Math.max(x1,...xn); 求一组数据的最大值

Math.min(x1,...xn); 求一组数据的最小值

最常用的操作 ：

Math.random(); 生成0-1之间的随机数

Math.ceil(x); 对x向上取整,忽略小数位,整数位+1

Math.floor(x);对x向下取整,舍弃小数位,保留整数位

Math.round(x);对x四舍五入取整数

4. Date 对象

1. 提供操作日期和事件的方法

2. 创建Date对象

1. var date1 = new Date(); //获取当前的日期时间

2. 创建指定日期的对象

 var date2 = new Date("2011/11/11");

 var date3 = new Date("2011/11/11 11:11:11");

3. 方法：

1. 读取或设置当前时间的毫秒数

1. getTime()

会返回当前日期时间距1970-01-01 00:00:00

之间间隔的毫秒数

2. setTime(s)

根据指定的毫秒数s,计算日期

2. 获取时间分量

1. getFullYear()

 获取当前日期对象中四位的年份信息

2. getMonth()

 获取当前日期对象中的月份信息

 返回值范围 0-11 对应12个月，在使用时

 需要手动调整

3. getDate()

 获取当前日期对象中的天数（某日）

4. getDay()

 获取当前日期对象中的星期数

 返回值范围 0-6 对应星期天 - 星期六，

 星期天需要特殊处理

5. getHours()

 获取当前日期对象中的小时数

6. getMinutes()

 获取分钟数

7. getSeconds()

 获取秒数

8. getMilliseconds()

 获取毫秒数

3. 设置日期的显示方式

1. toString();

2. toLocaleString();

根据本地时间将date对象转换为字符串，返回

以本地规则格式化后的日期

3. toLocaleTimeString();

4. toLocaleDateString();

  练习 ：

1. 获取当前系统时间

2. 将系统时间以以下格式输出 ：

xxxx年xx月xx日 xx时xx分xx秒 星期x

 

4. BOM

1. BOM 与 DOM

BOM ：Browser Object Model 浏览器对象模型，

提供操作浏览器的相关方法

核心对象 window ,浏览器窗口对象,是JS

的顶层对象

DOM ：Document Object Model 文档对象模型，

提供操作文档的相关方法

核心对象 document ，操作文档

注意 ：

window -> document //window顶层对象包含document

document.write();

window.document.write();

2. window对象

1. 表示浏览器窗口对象

自定义的全局变量和全局函数，默认都是window

对象的属性和方法，使用时可以省略window

2. 对话框

1. window.alert();

普通警告框，参数为提示信息

2. window.prompt();

带有输入框的弹框，参数为提示信息，返回用户

输入的字符串

3. window.confirm();

带有 确定/取消 按钮的提示框，参数为提示信息

返回布尔值，true表示用户点击确定，其他一律为false

3. 定时器方法

 1. 分类 ：

1. 周期性定时器（间歇调用）

2. 一次性定时器（超时调用）

 2. 作用 ：

根据指定的时间间隔,周期性或一次性调用函数,执行代码

 3. 使用 ：

1. 间歇调用

1. 特点 ：每隔一段时间，自动执行某段代码

2. 语法 ：

window.setInterval(fun,duration);

参数 ：

1. fun : 表示要周期执行的代码

2. duration : 间隔时长

 默认以毫秒为单位

 1秒 = 1000毫秒

返回值 ：

返回当前定时器的ID，实际上就是整数值

取消定时器时，根据定时器ID进行取消

3. 取消间歇调用

语法 ：

clearInterval(timerID);

作用 ：取消周期性定时器

参数 ：

timerID 表示要取消的定时器ID

2. 超时调用

1. 特点：超过指定的时间间隔之后，执行一次

给定代码

2. 语法 ：

setTimeout(fun,duration);

参数 ：

fun : 要执行的代码段

duration : 间隔时长，默认毫秒为单位

返回值 ：定时器id

3. 取消超时调用

clearTimeout(timer);

参数 ：要取消的定时器ID

3. 注意 ：

在给定的时间间隔内，程序不会阻塞或等待，

而是向下执行其他语句

练习 1 ：

1. 创建按钮 开始和结束

2. 点击开始，开启定时器，每隔一秒在控制台

中输出当前的日期时间

3. 点击结束，停止定时器

练习 2 ：

1. 创建按钮

2. 按钮点击时，弹出确认框，提示是否需要

关闭窗口

3. 如果点击确定，则5秒后自动关闭当前窗口

window.close();

 

 

 

想要看更多的课程请微信关注SkrEric的编程课堂