JavaScript对象概述

1 初识对象

1.1 什么是对象

在JavaScript中，对象是一种数据类型，它是由属性和方法组成的一个集合。属性是指事物的特征，使用“对象.属性名”访问；方法是指事物的行为，使用“对象.方法名()”进行访问。

对象用“{}”表示，在“{}”中包裹了对象的成员（包括属性和方法）。以“key:value”(键-值对)方式存储各成员。"key"是成员名,"value"是成员的值。

在面向对象中，把“属性”称为对象的成员（成员变量），把“方法”称为成员方法（成员函数）

示例：定义了一个手机对象p1

var p1 = {
    color: "粉色",//属性，颜色是粉色
    weight: "188g",//属性，重量
    screenSize: "6.5",//属性，尺寸
    call: function (num) {//打电话方法
        console.log("打电话给" + num);
    },
    sendMessage: function (num, message) {//发短信方法
        console.log("给" + num + "发短信，短信内容是：" + message);
    },
    playVideo: function () {//播放视频方法
        console.log("播放视频");
    },
    playMusic: function () {//播放音乐方法
        console.log('播放音乐');
    }
}
//访问p1的属性和方法
console.log(p1.color);//输出手机颜色
console.log(p1.weight);//输出手机重量
console.log(p1.screenSize);//输出手机尺寸
p1.call("123");//调用打电话方法
p1.sendMessage("123", "hello");//调用发短信方法
p1.playVideo();//调用播放视频方法
p1.playMusic();//调用播放音乐方法

1.2 利用字面量创建对象

对象的字面量就是用花括号“{ }”来包裹对象中的成员，每个成员使用“key: value”的形式来保存，key表示属性名或方法名，value表示对应的值。多个对象成员之间用“,”隔开。

创建一个空对象：

var obj = {};

创建一个学生对象：

var stu = {
    name: "小明",//属性，姓名
    age: 18,//属性，年龄
    sex: "男",//属性，性别
    sayHello: function () {//方法，打招呼
        console.log("Hello");
    }
}

1.3 访问对象的属性和方法

创建好学生对象之后，接下来访问该对象的属性和方法，以上一步创建的学生对象为例：

（1）访问学生对象的属性

// 方式1
stu.name;
// 方式2
stu["name"];

注意：只是访问并不能输出属性的值，如果要输出属性的值，需要使用console.log()，例如：

console.log(stu.name);

输出结果为：小明

（2）访问学生对象的方法

// 方法1
stu.sayHello();
// 方法2
stu["sayHello"]();

输出结果：Hello

（3）当对象成员中包含特殊字符时，可以用字符串来表示

示例：

var obj = {
    "name-age": "小明-18"
};
console.log(obj["name-age"]);

输出结果：小明-18

（4）手动赋值属性或方法来添加成员

例如，先创建一个空对象：

var stu = {};

为对象增加name属性：

stu.name = "小明";

为对象增加introduce方法：

stu.introduce = function () {
    console.log("我的名字是：", this.name);
}

接下来访问name属性和introduce方法：

console.log(stu.name);
stu.introduce();

输出结果为：
小明
我的名字是： 小明

完整代码如下：

var stu = {};//定义一个空对象
stu.name = "小明";//为对象添加name属性
stu.introduce = function () {//为对象添加introduce方法
    console.log("我的名字是：", this.name);//this代表当前对象
}
console.log(stu.name);//输出name属性
stu.introduce();//调用introduce方法

1.4 用new Object创建对象

格式为：

var obj = new Object();//创建一个空对象

示例：

var obj = new Object();	// 创建了一个空对象
obj.name = '小明';// 创建对象后，为对象添加成员
obj.age = 18;
obj.sex = '男';
obj.sayHello = function () {
    console.log('Hello');
};

1.5 利用构造函数创建对象

使用构造函数创建对象的语法为“new 构造函数名()”，在小括号中可以传递参数给构造函数，如果没有参数，小括号可以省略。

语法：

// 编写构造函数
function 构造函数名() {
    this.属性 = 属性;
    this.方法 = function () {
        // 方法体
    }
}
// 使用构造函数创建对象
var obj = new 构造函数名();

1.6 遍历对象的属性和方法

使用for…in语法可以遍历对象中的所有属性和方法，示例代码如下：

// obj为待遍历的对象
var obj = { name: '小明', age: 18, sex: '男' };
// 遍历obj对象
for (var k in obj) {
    // 通过k可以获取遍历过程中的属性名或方法名
    console.log(k);// 输出：name、age、sex
    console.log(obj[k]);// 输出：小明、18、男
}

使用in运算符判断一个对象中的某个成员是否存在

var obj = { name: 'Tom', age: 16 };
console.log('age' in obj);// 输出：true，表示对象成员存在
console.log('gender' in obj);  // 输出：false ，表示对象成员不存在

1.7 返回对象的属性值的数组Object.values()

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同（区别在于 for-in 循环枚举原型链中的属性）。

语法：

Object.values(obj)//obj：被返回可枚举属性值的对象。

示例：

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

1.8 返回由对象的属性组成的数组Object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

语法：

Object.keys(obj)// obj：要返回其枚举自身属性的对象。

示例：

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

2 内置对象

JavaScript提供了很多常用的内置对象，包括数学对象Math、日期对象Date、数组对象Array以及字符串对象String等。

示例：封装自己的数学对象
【案例要求】封装一个数学对象myMath，实现求出数组中的最大值。

var myMath = {
    max: function (arr) {//arr为形参，代表一个数组
        var max = arr[0];//假设max是数组中的第一个元素
        for (var i = 1; i < arr.length; i++) {//从第二个数开始遍历该数组
            if (arr[i] > max) {//如果遍历到的数比设定的max大
                max = arr[i];//将遍历到的数赋值给max
            }
        }
        return max;//最后返回max的值
    }
}
var a = [1, 2, 3, 4, 5];
console.log(myMath.max(a));

输出结果为：5