JavaScript对象的创建和使用（非常详细）

在 JavaScript 程序中，数组保存并处理一批数据时，数据只能通过索引值访问，开发者需要清楚地知道数据的索引值才能准确地获取数据，但是当数据量庞大时，记忆所有数据的索引值将变得很困难。

和数组相比，对象类型可以更好地存储一批数据，它为每项数据设置了属性名称，使得数据结构清晰，方便开发者使用，因此对象在 JavaScript 中应用十分广泛。

JavaScript 中的对象是一组无序的相关属性和函数的集合，它的表现形式是一组无序的键/值对，其中的键包括属性名和函数名，值可以是 JavaScript 任意数据类型。对象中的函数也被称为方法。

示例如下：

var bdd = {
    name: '冰墩墩',
    sayHi: function () {
        alert('大家好啊~我是2022年北京冬季奥运会的吉祥物');
    }
};

上述代码创建了一个名为“bdd”的对象，它包括 1 个 name 属性和 1 个 sayHi 方法。

JavaScript对象的创建

JavaScript 创建对象的常用方式有两种，一种是使用对象直接量创建对象，另一种是使用 new Object() 方法创建对象。

1) 使用对象直接量创建对象

使用对象直接量创建对象是一种简洁、易阅读的方式。对象直接量是由若干键/值对组成的映射表，每对键/值对中的键和值之间使用冒号分隔，不同键/值对用逗号分隔。整个映射表用“{}”括起来。

示例如下：

var obj = {}; // 创建一个名为 obj 的空对象
var xrr = { // 创建一个名为 xrr 的对象
    name: '雪容融', // name 是属性名
    sayHi: function () { // sayHi 是方法名
        alert('大家好啊~我是2022年北京冬季残奥会的吉祥物');
    }
};

2) 使用new Object()方法创建对象

Object 是 JavaScript 的一种数据类型，用于存储各种键值集合和更复杂的实体。

new 运算符用于创建对象。语法格式如下：

new constructor[([arguments])]

其中 constructor 是一个指定类型的类或函数，arguments 是一个用于被 constructor 调用的参数列表。

对象可以通过 new Object() 方法创建，示例如下：

var obj = new Object(); // 创建一个名为 obj 的空对象
var srr = new Object(); // 创建一个名为 srr 的空对象
srr.name = '雪容融'; // 增加属性 name
srr.sayHi = function () { // 增加方法 sayHi
    alert('大家好啊~我是2022年北京冬季残奥会的吉祥物');
};

new 运算符会进行如下操作：

创建一个空的、简单的 JavaScript 对象；
为新创建的对象添加属性 __proto__，将该属性链接至构造函数的原型对象；
将新创建的对象作为 this 的上下文；
如果该函数没有返回对象，则返回 this。

下面是两个使用 new 运算符创建内置对象的示例。

var date = new Date(); // 创建日期对象
var arr = new Array(); // 创建数组对象

对象里面的变量称为属性，不需要声明，用来描述该对象的特征。对象里面的函数称为方法，不需要声明，用来描述该对象的行为。

JavaScript对象的访问

访问对象中的属性和方法可以使用以下 3 种方式。

1) 点号访问方式

语法格式如下：

对象实例名.属性名或对象实例名.方法名(实参列表)

2) 方括号访问方式

语法格式如下：

对象实例名['属性名']
对象实例名['方法名'](实参列表)

【实例】访问对象。

var tank = { // 坦克对象
    position: { // 位置坐标
        XPosition: 0, // x 坐标
        YPosition: 0 // y 坐标
    },
    BombNum: 2, // 炮弹数
    shot: function () { // 发射炮弹
        console.log("坦克发射炮弹");
    },
    move: function () { // 坦克移动
        console.log("坦克移动");
    }
}

console.log(tank.position.XPosition, tank['BombNum']);
console.log(tank.move(), tank['shot']());

程序中定义了对象 tank，它包含两个属性 position 和 BombNum，两个方法 shot() 和 move()。可以使用 tank.position.XPosition 和 tank['BombNum'] 访问 XPosition 和 BombNum 的值；使用 tank.move() 和 tank['shot']() 执行移动和发射炮弹的动作。

在 Chrome 浏览器控制台中的运行结果为：

0 2
坦克移动
坦克发射炮弹

使用for-in遍历对象

遍历对象是对对象的每一个属性进行访问。JavaScript 使用 for in 语句进行遍历。语法格式如下：

for (var key in object) {
    循环代码块;
}

每次迭代时，key 代表不同的成员名，object 代表被迭代的对象。

【实例】使用 for in 语句遍历 tank 对象。

for (var key in tank) {
    console.log(key + ":" + tank[key]);
}

程序使用 for in 语句遍历对象 tank，key 代表每一个属性值，tank[key] 访问当前属性的值。在 Chrome 浏览器控制台中的运行结果为：

position:[object Object]
BombNum:2
shot:function () { console.log("坦克发射炮弹"); }
move:function () { console.log("坦克移动"); }

JavaScript对象的创建和使用（非常详细）