十二、对象

12.1 对象的相关概念

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的。

• 属性：事物的特征，在对象中用属性来表示（常用名词）

• 方法：事物的行为，在对象中用方法来表示（常用动词）
  

为什么需要对象？

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。

如果要保存一个人的完整信息呢？

例如，将法外狂徒“张三”的个人的信息保存在数组中的方式为：

var arr = ['张三', '男', 18 ,165];

上述例子中用数组保存数据的缺点是：数据只能通过索引值访问，开发者需要清晰的记住所有的数据的顺序才能准确地获取数据，而当数据量庞大时，不可能做到记忆所有数据的索引值。

为了让更好地存储一组数据，对象应运而生：对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。

使用对象记录上组数据为：

var obj = {
    name:"张三",
    sex:"男",
    age:18,
    height:165
}

JS中的对象表达结构更清晰，更强大。

12.2 创建对象的三种方式

12.2.1 利用字面量创建对象

用花括号 {} 包含了表达这个具体事物（对象）的属性和方法；{} 里面采取键值对的形式表示

• 键：相当于属性名

• 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

  示例代码如下：

  var star = {
      name : '张三',
      age : 18,
      sex : '男',
      sayHi : function(){
          alert('大家好');
      }
  };
  

  上述代码中 star即是创建的对象。

12.2.2 利用 new Object 创建对象

1. 创建空对象

var andy = new Object();

通过内置构造函数Object创建对象，此时andy变量已经保存了创建出来的空对象

2. 给空对象添加属性和方法

通过对象操作属性和方法的方式，来为对象增加属性和方法

示例代码如下：

andy.name = '张三';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('大家好啊~');
}

注意：

• Object() ：第一个字母大写
• new Object() ：需要 new 关键字
• 使用的格式：对象.属性 = 值;

12.2.3 利用构造函数创建对象

构造函数：构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

构造函数抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）

构造函数的封装格式：

function 构造函数名(形参1,形参2,形参3) {	//构造函数名首字母要大写
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}

对象实例化

利用构造函数，通过 new 关键字创建对象的过程，称为对象实例化

var obj = new 构造函数名(实参1，实参2，实参3)

以上代码中，obj即接收到构造函数创建出来的对象。

使用new调用构造函数时发生了什么事情？

1. 在构造函数代码开始执行之前，在内存中国创建一个空对象；
2. 修改this的指向，把this指向创建出来的空对象，可以通过构造函数中的this访问这个对象；
3. 执行构造函数的代码，通过this.属性/行为的形式，为对象添加属性或行为
4. 在构造函数代码执行完成之后，返回this，即将新创建的对象作为返回值返回

注意事项

1. 构造函数约定首字母大写。
2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
3. 构造函数中不需要 return 返回结果。
4. 当我们创建对象的时候，必须用 new 来调用构造函数。

12.3 对象的使用

1. 对象的属性

   对象中存储具体数据的 "键值对"中的 "键"称为对象的属性，即对象中存储具体数据的项

2. 对象的方法

   对象中存储函数的 "键值对"中的 "键"称为对象的方法，即对象中存储函数的项

访问对象的属性

• 对象里面的属性调用对象.属性名 ，这个小点 . 就理解为“ 的 ”

• 对象里面属性的另一种调用方式 : 对象['属性名']，注意方括号里面的属性必须加引号

  示例代码如下：

  console.log(star.name)     // 调用名字属性
  console.log(star['name'])  // 调用名字属性
  

调用对象的方法

​ 对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

示例代码如下：

star.sayHi();              // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

12.4 遍历对象 for in

for…in 语句用于对数组或者对象的属性进行循环操作。

其语法如下：

for (变量 in 对象名字) {
    // 在此执行代码
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

示例

for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

12.5 内置对象

JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
​前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发

JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

学会查文档

查找文档：学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。

MDN

12.6 数学对象 Math

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员

示例：获取指定范围内的随机整数

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

12.7 日期对象 Date

Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间

使用Date实例化日期对象

1. 获取当前时间对应的日期对象

var now = new Date();	//

2. 获取指定时间的日期对象

var time = new Date('2019/5/1');

3. 使用Date实例的方法和属性

注意：获取月份是0开始的，即 获取到的月份需要加 1 才是实际的月份

示例：获取指定时间中的年、月、日

var time = new Date('2019/5/1');
console.log(time.getFullYear());	//2019
console.log(time.getMonth()+1);		//5
console.log(time.getDate());		//1

示例：通过Date实例获取总毫秒数

总毫秒数的含义:基于1970年1月1日（世界标准时间）起的毫秒数

以下两个方法，对于日期对象是等效的，都可以返回总毫秒数

object.valueOf():返回对象的原始值

Date.prototype.getTime()：返回一个时间的格林威治时间数值

另外，Date.now() 方法返回自 1970 年 1 月 1 日 00:00:00 (UTC) 到当前时间的毫秒数。

// 实例化Date对象
var now = new Date();

// 1. 用于获取对象的原始值
console.log(now.valueOf())	
console.log(now.getTime())	

// 2. 简单写可以这么做
var now = + new Date();	

// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();

12.8 数组对象 Array

12.8.1 创建数组的两种方式

1. 字面量方式：var arr = [3,"test",true];
2. 使用构造函数：var arr = new Array();

注意：上面代码中new Array创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数

参数传递规则如下：

• 如果只传入一个参数，则参数规定了数组的长度。如new Array(3)创建了一个长度为3的空数组

• 如果传入了多个参数，则参数称为数组的元素。如：new Array(3,"test",true)

12.8.2 检测是否为数组

1. instanceof 运算符

instanceof 可以判断一个对象是否是某个构造函数的实例

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false

2. Array.isArray()

Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

12.8.3 添加删除数组元素

数组中有进行增加、删除元素的方法，部分方法如下表

示例

var arr = [4, 5, 6]
arr.push(7,8)	//[4, 5, 6, 7, 8]
arr.pop()		//[4, 5, 6, 7]
arr.unshift(2,3)//[2, 3, 4, 5, 6, 7]
arr.shift()		//[3, 4, 5, 6, 7]

12.8.4 数组排序

数组中有对数组本身排序的方法，部分方法如下表

注意：

sort方法需要传入参数来设置升序、降序排序

• 如果传入“function(a,b){ return a-b;}”，则为升序
• 如果传入“function(a,b){ return b-a;}”，则为降序

示例

var arr = [9, 5, 6]
arr.sort(function (a, b) {
    return a - b;
})
console.log(arr);	//[5, 6, 9],升序

arr.reverse();
console.log(arr);	//[ 9, 6, 5 ]

12.8.5 查找指定元素在数组中的索引

示例

var arr = [9, 5, 6, 6, 9]
console.log(arr.indexOf(6));	// 2
console.log(arr.lastIndexOf(6));// 3

12.8.6 数组转换为字符串

数组中有把数组转化为字符串的方法，部分方法如下表

12.8.7 其他数组方法

详见 MDN

12.9 基本包装类型 String、Number 和 Boolean

12.9.1 基本包装类型

下面代码有什么问题？

var str = 'andy';
console.log(str.length);

按道理 基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为

js 会把基本数据类型包装为复杂数据类型，其执行过程如下 ：

// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

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

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

12.9.2 字符串对象 String

字符串的不可变性

字符串的不可变指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。
​由于字符串的不可变，在大量拼接字符串的时候会有效率问题

根据字符返回位置

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法

案例：查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数

1. 先查找第一个o出现的位置
2. 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
3. 因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找

var str = "abcoefoxyozzopp"
var sum = 0
for (var index = 0;; index++) {
    index = str.indexOf('o', index)
    if (index === -1) break
    sum += 1
    console.log(index);	// 3 6 9 12
}
console.log(`共${sum}个`);// 共 4 个

根据位置返回字符串

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：

在上述方法中，charCodeAt方法返回的是指定位置上字符对应的ASCII码，ASCII码对照表如下：

字符串操作方法

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法：

replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：

字符串.replace(被替换的字符串， 要替换为的字符串)；

split()方法

split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。

其使用格式如下：

字符串.split("分割字符")