对象简介
面向对象简介
面向对象:可以创建自定义的类型,很好的支持继承和多态。
面向对象的特征:封装、继承、多态。
对象的概念
在 JavaScript 中,对象是一组无序的相关属性和方法的集合。
对象的作用是:封装信息。比如Student类里可以封装学生的姓名、年龄、成绩等。
对象具有特征(属性)和行为(方法)。
为什么需要对象
保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。
js中的对象:
例:
var person = {};
person.name = '王二';
person.age = 35;
person.sex = '男';
person.height = '180';
对象和数据类型之间的关系
数据类型分类
- 基本数据类型(值类型):String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
- 引用数据类型(引用类型):Object 对象。
基本数据类型:
基本数据类型的值直接保存在栈内存中,值与值之间是独立存在,修改一个变量不会影响其他的变量。
对象:
只要不是那五种基本数据类型,就全都是对象。
如果使用基本数据类型的数据,我们所创建的变量都是独立的,不能成为一个整体。
对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。
对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间。变量保存的是对象的内存地址(对象的引用)。
换而言之,对象的值是保存在堆内存中的,而对象的引用(即变量)是保存在栈内存中的。
如果两个变量保存的是同一个对象引用,当一个通过一个变量修改属性时,另一个也会受到影响。
对象的分类
1.内置对象:
- 由ES标准中定义的对象,在任何的ES的实现中都可以使用
- 比如:Object、Math、Date、String、Array、Number、Boolean、Function等。
2.宿主对象:
- 由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象。
- 比如 BOM DOM。比如
console
、document
。
3.自定义对象:
- 由开发人员自己创建的对象
通过 new 关键字创建出来的对象实例,都是属于对象类型,比如Object、Array、Date等。
内置对象:就是指这个语言自带的一些对象,供开发者使用,这些对象提供了一些常用或者最基本而必要的功能(属性和方法)。
JavaScript的内置对象:
内置对象 | 对象说明 |
Arguments | 函数参数集合 |
Array | 数组 |
Boolean | 布尔对象 |
Math | 数学对象 |
Date | 日期时间 |
Error | 异常对象 |
Function | 函数构造器 |
Number | 数值对象 |
Object | 基础对象 |
RegExp | 正则表达式对象 |
String | 字符串对象 |
查找字符串(String)
1、indexOf()/lastIndexOf():获取字符串中指定内容的索引
语法 1:
索引值 = str.indexOf(想要查询的字符串);
注:indexOf()
是从前向后查找字符串的位置。同理,lastIndexOf()
是从后向前寻找。
解释 :可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容,则会返回其第一次出现的索引;如果没有找到指定的内容,则返回 -1。
- 如果获取的索引值为 0,说明字符串是以查询的参数为开头的。
- 如果获取的索引值为-1,说明这个字符串中没有指定的内容。
语法 2:
这个方法还可以指定第二个参数,用来指定查找的起始位置。语法如下:
索引值 = str.indexOf(想要查询的字符串, [起始位置]);
indexOf 举例
案例:查找字符串"qianguyihao"中,所有 a
出现的位置以及次数。
思路:
(1)先查找第一个 a 出现的位置。
(2)只要 indexOf 返回的结果不是 -1 就继续往后查找。
(3)因为 indexOf 只能查找到第一个,所以后面的查找,可以利用第二个参数,在当前索引加 1,从而继续查找。
代码实现:
var str = 'qianguyihao';
var index = str.indexOf('a');
var num = 0;
while (index !== -1) {
console.log(index);
num++; // 每打印一次,就计数一次
index = str.indexOf('o', index + 1);
}
console.log('a 出现的次数是: ' + num);
2、search():获取字符串中指定内容的索引(参数里一般是正则)
语法:
索引值 = str.search(想要查找的字符串);
索引值 = str.search(正则表达式);
备注:search()
方法里的参数,既可以传字符串,也可以传正则表达式。
3、includes():字符串中是否包含指定的内容
语法:
布尔值 = str.includes(想要查找的字符串, [position]);
解释:判断一个字符串中是否含有指定内容。如果字符串中含有该内容,则会返回 true;否则返回 false。
参数中的 position
:如果不指定,则默认为0;如果指定,则规定了检索的起始位置。
4、startsWith():字符串是否以指定的内容开头
语法:
布尔值 = str.startsWith(想要查找的内容, [position]);
解释:判断一个字符串是否以指定的子字符串开头。如果是,则返回 true;否则返回 false。
参数中的position(includes()和startsWith()):
- 如果不指定,则默认为0。
- 如果指定,则规定了检索的起始位置。检索的范围包括:这个指定位置开始,直到字符串的末尾。即:[position, str.length)
5、endsWith():字符串是否以指定的内容结尾
语法:
布尔值 = str.endsWith(想要查找的内容, [position]);
解释:判断一个字符串是否以指定的子字符串结尾。如果是,则返回 true;否则返回 false。
参数中的position( endsWith() ):
- 如果不指定,则默认为 str.length。
- 如果指定,则规定了检索的结束位置。检索的范围包括:从第一个字符串开始,直到这个指定的位置。即:[0, position)
- 或者你可以这样简单理解:endsWith() 方法里的position,表示检索的长度。
注意:startsWith() 和 endsWith()这两个方法,他们的 position 的含义是不同的,请仔细区分。
内置对象 Number 的常见方法
Number.isInteger() 判断是否为整数
语法:
布尔值 = Number.isInteger(数字);
toFixed() 小数点后面保留多少位
语法:
字符串 = myNum.toFixed(num);
内置对象 Math 的常见方法
Math 和其他的对象不同,不是一个构造函数,不需要创建对象。所以不需要 通过 new 来调用,直接使用里面的属性和方法即可。
Math属于一个工具类,里面封装了数学运算相关的属性和方法:
方法 | 描述 | 备注 |
Math.PI | 圆周率 | Math对象的属性 |
Math.abs() | 返回绝对值 | |
Math.random() | 生成0-1之间的随机浮点数 | 取值范围是 [0,1) |
Math.floor() | 向下取整(往小取值) | |
Math.ceil() | 向上取整(往大取值) | |
Math.round() | 四舍五入取整(正数四舍五入,负数五舍六入) | |
Math.max(x, y, z) | 返回多个数中的最大值 | |
Math.min(x, y, z) | 返回多个数中的最小值 | |
Math.pow(x,y) | 乘方:返回 x 的 y 次幂 | |
Math.sqrt() | 开方:对一个数进行开方运算 |
Math.abs():获绝对值
方法定义:返回绝对值。
代码举例:
console.log(Math.abs(2)); // 2
console.log(Math.abs(-2)); // 2
// 先做隐式类型转换,将 '-2'转换为数字类型 -2,然后再调用 Math.abs()
console.log(Math.abs('-2'));
console.log(Math.abs('hello')); // NaN
注意:
- 参数中可以接收字符串类型的数字,此时会将字符串做隐式类型转换,然后再调用 Math.abs() 方法。
Math.random() 方法:生成随机数
方法定义:生成 [0, 1) 之间的随机浮点数。
【重要】生成 [x, y]之间的随机整数
也就是说:生成两个整数之间的随机整数,并且要包含这两个整数。
Math.floor(Math.random() * (max - min + 1)) + min;
pow():乘方
Math.pow(a, b);
如果想计算数值a的开二次方,可以使用如下函数:
Math.sqrt(a);//或使用Math.pow(a,0.5)
内置对象:Date
Date 对象在实际开发中,使用得很频繁,且容易在细节地方出错,需要引起重视。
内置对象 Date 用来处理日期和时间。
需要注意的是:与 Math 对象不同,Date 对象是一个构造函数 ,需要先实例化后才能使用。
创建Date对象
创建Date对象有两种写法:
- 写法一:如果Date()不写参数,就返回当前时间对象
- 写法二:如果Date()里面写参数,就返回括号里输入的时间对象
写法一:不传递参数时,则获取系统的当前时间对象
代码举例:
var date1 = new Date();
console.log(date1);
console.log(typeof date1);
代码解释:不传递参数时,表示的是获取系统的当前时间对象。也可以理解成是:获取当前代码执行的时间。
写法二:传递参数
传递参数时,表示获取指定时间的时间对象。参数中既可以传递字符串,也可以传递数字,也可以传递时间戳。
通过传参的这种写法,可以把时间字符串/时间数字/时间戳,按照指定的格式,转换为时间对象。
Date对象的方法
Date对象 有如下方法,可以获取日期和时间的指定部分:
方法名 | 含义 | 备注 |
getFullYear() | 获取年份 | |
getMonth() | 获取月: 0-11 | 0代表一月 |
getDate() | 获取日:1-31 | 获取的是几号 |
getDay() | 获取星期:0-6 | 0代表周日,1代表周一 |
getHours() | 获取小时:0-23 | |
getMinutes() | 获取分钟:0-59 | |
getSeconds() | 获取秒:0-59 | |
getMilliseconds() | 获取毫秒 | 1s = 1000ms |
获取时间戳
时间戳的定义和作用
时间戳:指的是从格林威治标准时间的1970年1月1日,0时0分0秒
到当前日期所花费的毫秒数(1秒 = 1000毫秒)。
计算机底层在保存时间时,使用的都是时间戳。时间戳的存在,就是为了统一时间的单位。
getTime():获取时间戳
getTime()
获取日期对象的时间戳(单位:毫秒)。(常用)
// 方式一:获取 Date 对象的时间戳(最常用的写法)
const timestamp1 = +new Date();
console.log(timestamp1);
// 方式二:获取 Date 对象的时间戳(较常用的写法)
const timestamp2 = new Date().getTime();
console.log(timestamp2);
利用时间戳检测代码的执行时间
我们可以在业务代码的前面定义 时间戳1
,在业务代码的后面定义 时间戳2
。把这两个时间戳相减,就能得出业务代码的执行时间。
定时器的常见方法
- setInterval():循环调用。将一段代码,每隔一段时间执行一次。(循环执行)
- setTimeout():延时调用。将一段代码,等待一段时间之后再执行。(只执行一次)
备注:在实际开发中,二者是可以根据需要,互相替代的。
setInterval() 的使用
setInterval()
:循环调用。将一段代码,每隔一段时间执行一次。(循环执行)
参数:
- 参数1:回调函数,该函数会每隔一段时间被调用一次。
- 参数2:每次调用的间隔时间,单位是毫秒。
返回值:返回一个Number类型的数据。这个数字用来作为定时器的唯一标识,方便用来清除定时器。
定义定时器
方式一:匿名函数
每间隔一秒,将 数字 加1:
let num = 1;
setInterval(function () {
num ++;
console.log(num);
}, 1000);
方式二:
每间隔一秒,将 数字 加1:
setInterval(fn,1000);
function fn() {
num ++;
console.log(num);
}
清除定时器
定时器的返回值是作为这个定时器的唯一标识,可以用来清除定时器。具体方法是:假设定时器setInterval()的返回值是参数1
,那么clearInterval(参数1)
就可以清除定时器。
setTimeout() 的使用
setTimeout()
:延时调用。将一段代码,等待一段时间之后再执行。(只执行一次)
参数:
- 参数1:回调函数,该函数会每隔一段时间被调用一次。
- 参数2:每次调用的间隔时间,单位是毫秒。
返回值:返回一个Number类型的数据。这个数字用来作为定时器的唯一标识,方便用来清除定时器
setTimeout() 举例:5秒后关闭网页两侧的广告栏
假设网页两侧的广告栏为两个img标签,它们的样式为:
<style>
...
...
</style>
5秒后关闭广告栏的js代码为:
<script>
window.onload = function () {
//获取相关元素
var imgArr = document.getElementsByTagName("img");
//设置定时器:5秒后关闭两侧的广告栏
setTimeout(fn,5000);
function fn(){
imgArr[0].style.display = "none";
imgArr[1].style.display = "none";
}
}
</script>