JavaScript 对象
发布时间：2023-02-16 14:19:28 所属栏目：Java 来源：互联网
导读：对象 指包含数据和用于处理数据的指令的数据结构. 对象有时也指现实世界中的一些事, 例如在赛车游戏当中一辆车或者一幅地图都可以是一个对象。 MDN JavaScript 中的对象由属性和方法组成。 属性可以是任意 JavaScript 中的数据类型，方法则是一个函数。 1.
|
对象 指包含数据和用于处理数据的指令的数据结构. 对象有时也指现实世界中的一些事, 例如在赛车游戏当中一辆车或者一幅地图都可以是一个对象。—— MDN JavaScript 中的对象由属性和方法组成。 属性可以是任意 JavaScript 中的数据类型，方法则是一个函数。 1. 创建对象 对象的格式如下： { prop1: 'value1', prop2: , prop3: {}, method1: function() { }, } 其中 prop1、prop2、prop3 都是属性，method1 是方法，属性是任意的数据类型，方法则是一个函数。 可以看到一个属性或者方法，在其名字与值中间采用冒号 : 分隔，属性和方法之间采用逗号 , 分隔。 通常属性和方法的名字会被称为属性名与方法名，属性的值称为属性值，方法的值则直接叫做 方法。 对象符合 key/value 的结构，一个 key 对应一个 value，这种结构也被称为键值对，属性名和方法名都是 key，他们的值都是 value。 注意：在 JavaScript 的对象中，方法和属性的表示其实是一样的。 一个属性的值如果是一个函数，则就把这个属性称之为方法，只是称呼上的不同。 对象最简单的创建方式就是使用对象字面量。 var person = {}; 以上创建了一个最简单的空对象。 对象在 JavaScript 中的应用范围非常广。 可以试想一下，如果需要用变量描述一个人的信息，包括名字、性别、年龄、双亲信息，同时就要表示这个人的一些行为，如说话。 显然数值、字符串、布尔类型这些数据类型是不太适合描述这样一个人的。 这个时候就可以考虑使用对象，也就是说当需要描述的事物变得复合（无法使用单一的数据类型描述的时候），就可以考虑使用对象存储数据。 var person = { 'name': '小明', 'age': , isAdult: false, sex: 'man', hobby: ['eat', 'sleep', 'play doudou'], parents: { mather: { name: '大红', }, father: { name: '大明', }, }, say: function() { console.log('我叫' + this.name + '，我今年' + this.age + '岁了。'); }, }; console.log(person); // 在控制台可以观察 person 对象 上面这个 person 变量就是一个对象，用于描述一个人，这个人具有 name、age 等属性与方法。 在控制台输出对象后，可以对其展开，观察他的内容。 其中部分属性在声明的时候，属性名上加上了引号，这在 JavaScript 中是被允许的，但一般情况下不会加上引号，原因之一是没有必要加，不应该与字符串混淆，另外一点就是可以消除初学者对 JSON 和 JavaScript 对象在理解上的歧义。 2. 操作对象 创建对象主要是为了设置、访问对象的属性值，调用对象的方法等。 2.1 访问对象的属性值 访问属性有 2 种方式： 对象.属性名 对象['属性名'] var obj = { key: 'value', say: function() { console.log('never 996'); }, }; console.log(obj.key); // 输出："value" console.log(obj['key']); // 输出："value" obj.say(); // 输出："never 996" obj['say'](); // 输出："never 996" 这两种方式都很常用。第二种通常会应用在需要用变量确定属性名的时候去使用。 var person = { age: , name: '鸽手', }; Object.keys(person).forEach(function(key) { console.log(person[key]); }); 以上就是使用第二种方式的场景之一，使用 Object.keys() 获取到 person 的所有属性名组成的数组，对数组做遍历拿到每一个属性名并放在一个变量中，再通过变量访问到对应的属性值。 当试图访问一个不存在的属性的时候，则会返回 undefined。 var obj = {}; console.log(obj.value); // 输出：undefined 2.2 设置对象的属性值 设置属性值也有 2 种方式： 对象.属性名 = 属性值 对象['属性名'] = 属性值 设置属性值的方式与访问值很相似，只是多了一个赋值操作。 设置属性值按照如下规则进行： 如果对象中不存在这个属性，则创建这个属性并赋值 如果对象中存在这个属性，则直接赋值 var person = { age: , }; person.name = '阿花'; person['hobby'] = ['eat', 'play doudou']; console.log(person); person.age = ; console.log(person); 3. 使用特殊的属性名 对象的属性名是可以用任意字符串表示的。 上面有提到，声明属性的时候可以带上引号。 如果不带引号，那属性名必须要符合变量命名的规则，使用引号包裹属性名，则可以使用任意字符串作为属性名。 var obj = { --^$@@@age: , }; 上面这样写是会报错的，如果非要使用这样的属性名，就可以加上一对引号，可以双引号，也可以是单引号，使用引号的规则和字符串一致。 var obj = { '--^$@@@age': , }; 这种特殊的属性名无法通过 对象.属性名 的形式访问。 var obj = { '--^$@@@age': , }; var val = obj.--^$@@@age; JavaScript 无法解析这种特殊的语法，所以要使用 对象['属性名'] 的形式访问。 var obj = { '--^$@@@age': , }; var val = obj['--^$@@@age']; console.log(val); // 输出：16 特殊的属性名场景比较少，如统计字符串的场景。 var counter = {}; var strs = [ '#@T%TGFDSgfdsgsf', '#@T%TGFDSgfdsgsf', '123fdafeafewa', '123fdafeafewa', '#@T%TGFDSgfdsgsf', ]; strs.forEach(function(item) { if (item in counter) { counter[item]++; } else { counter[item] = ; } }); console.log(counter); strs 是由字符串组成的数组，即需要统计的一组数据。 利用对象的特性来对字符串分类计数。 4. 其他创建对象的方法 除了字面量的方式，还有许多创建对象的方式。 4.1 使用 Object 对象 使用 new Object() 或者 Object() 的方式也可以创建一个对象 var obj1 = new Object(); var obj2 = new Object; // 如果没有参数 可以不带括号 var obj3 = Object(); 上面的方式都可以创建一个空对象。 比较有趣的是可以给 Object 传递一个对象字面量作为参数，返回的对象的属性与传入的对象字面量的属性一致。 var obj1 = new Object({ age: , name: '长睫毛', }); var obj2 = Object({ age: , name: '小酒窝', }); console.log(obj1, obj2); 4.2 构造函数 使用构造函数，也可以创建对象。 function Car(color, maxSpeed) { this.color = color; this.maxSpeed = maxSpeed; } Car.prototype.bibi = function() { console.log('哔哔！'); }; var car = new Car('red', ); console.log(car); 以上例子使用构造函数创建了一个速度超级快的车对象。 （编辑：莱芜站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
