JavaScript对象（1

最新推荐文章于 2022-10-16 11:25:22 发布

dai316

最新推荐文章于 2022-10-16 11:25:22 发布

阅读量740

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/hhdai1/article/details/120208486

版权

对象简介

面向对象简介

面向对象：可以创建自定义的类型，很好的支持继承和多态。

面向对象的特征：封装、继承、多态。

对象的概念

在 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>