首页 > 编程笔记 > JavaScript笔记
阅读:9
JavaScript对象的创建和使用(非常详细)
在 JavaScript 程序中,数组保存并处理一批数据时,数据只能通过索引值访问,开发者需要清楚地知道数据的索引值才能准确地获取数据,但是当数据量庞大时,记忆所有数据的索引值将变得很困难。
和数组相比,对象类型可以更好地存储一批数据,它为每项数据设置了属性名称,使得数据结构清晰,方便开发者使用,因此对象在 JavaScript 中应用十分广泛。
JavaScript 中的对象是一组无序的相关属性和函数的集合,它的表现形式是一组无序的键/值对,其中的键包括属性名和函数名,值可以是 JavaScript 任意数据类型。对象中的函数也被称为方法。
示例如下:
示例如下:
new 运算符用于创建对象。语法格式如下:
对象可以通过 new Object() 方法创建,示例如下:
new 运算符会进行如下操作:
下面是两个使用 new 运算符创建内置对象的示例。
【实例】访问对象。
在 Chrome 浏览器控制台中的运行结果为:
【实例】使用 for in 语句遍历 tank 对象。
和数组相比,对象类型可以更好地存储一批数据,它为每项数据设置了属性名称,使得数据结构清晰,方便开发者使用,因此对象在 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("坦克移动"); }