使用对象

JavaScript的设计是一个简单的基于对象的范式。一个对象就是一系列属性的集合,一个属性包含一个键和一个值。

对象和属性

一个JavaScript对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性定义对象的特征,可以使用点符号.访问对象的属性:

1
Object.propertyName

一个对象的属性名可以是任何有效的JavaStript字符串,或者可以被转换成字符串的任何类型,包括空字符串。如果不是一个有效的标识符只能通过方括号标记访问:

1
2
3
4
5
6
let obj = {
a: 1,
"a b": 2
}
console.log(obj.a); // 1
console.log(obj['a b']); // 2

方括号中的所有键都将转换为字符串类型,对象只能使用String类型作为键。可以在for...in语句中使用方括号标记以枚举一个对象的所有属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function showProps(obj, objName) {
let result = '';
for(let i in obj) {
if(obj.hasOwnProperty(i)) {
result += `${objName}.${i} = ${obj[i]}\n`;
}
}
return result;
}
let obj = {
a: 1,
b: 2,
c: 'test'
}
console.log(showProps(obj, 'obj')); // obj.a = 1
// obj.b = 2
// obj.c = test

枚举一个对象的所有属性

从ES5开始,有三种原生的方法用于列出或枚举对象的属性:

  • for...in循环:该方法依次访问一个对象及其原型链中所有可枚举的属性
  • Object.keys(o):该方法返回对象o自身包含(不包含原型链)的所有可枚举属性的名称的数组
  • Object.getOwnPropertyNames(o):该方法返回对象o自身包含(不包含原型链)的所有属性(无论是否可枚举)的名称的数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let obj = {
a: 1,
b: 'test',
c: true
}
// for...in循环
for(let i in obj) {
console.log(obj[i]);
}

// Object.keys;
let keys = Object.keys(obj);
keys.forEach(key => {
console.log(obj[key]);
})

// Object.getOwnPropertyName;
let names = Object.getOwnPropertyNames(obj);
names.forEach(name => {
console.log(obj[name]);
})

创建一个新对象

可以使用对象字面量和构造函数来创建新对象。

对象字面量

  • 语法
1
2
3
let obj = {
property: value
}

构造函数

使用构造函数创建对象需要两步:

  1. 通过创建一个构造函数来定义对象的类型,通常构造函数的函数名首字母会大写。
  2. 通过new创建对象实例。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
this.oil = 100;
// 定义方法
addOil = function(value) {
this.oil += value
}
// 等价于下面的方式
// addOil(value) {
// this.oil += value
// }
}
Car.prototype.color = 'red'; // 为对象添加属性
let myCar = new Car('China', 'Test', 2020); // myCar是Car对象的一个实例,拥有make model year三个属性
myCar.money = 100000; // 为实例添加属性
myCar.run = function() { // 为实例添加方法
console.log('running');
}
console.log(myCar.color); // red
console.log(myCar.money); // 100000
myCar.run(); // running

使用Object.create()方法

该方法允许在创建对象时选择一个原型对象且不用定义构造函数:

1
2
3
4
5
6
7
8
9
10
11
12
let Animal = {
type: 'Invertebrates',
displayType: function() {
console.log(this.type);
}
}
let animal1 = Object.create(Animal); // 创建新动物 animal1
animal1.displayType(); // Invertebrates

let fish = Object.create(Animal); // 创建新动物fish
fish.type = 'fish';
fish.displayType(); // fish

定义getters和setters

getter是获取某个特定属性值的方法,setter是设置某个属性值的方法。定义getter和setter可以使用对象字面量方式添加,或使用添加方法的方式添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let obj = {
a: 7,
get b() {
return this.a + 1;
}
set c(c) {
this.c = c /2;
}
}
console.log(o.a); // 7
console.log(o.b); // 8
o.c = 50;
console.log(o.c); // 5


// 为定义好的类添加getter和setter
let d = Date.prototype;
Object.defineProperty(d, 'year', {
get: function() {return this.getFullYear()},
set: function(year) {this.setFullYear(year)}
})

let now = new Date(); // 创建一个Date对象的实例
console.log(now.year); // 2020
now.year = 2021;
console.log(now.year); // 2021

删除属性

delete操作符可以删除一个不是继承而来的属性:

1
2
3
4
5
6
7
8
9
10
let obj = {
a: 5,
b: 12
}
delete obj.a;
console.log(obj); // {b: 12}

// 如果一个全局变量不是使用var声明的也可以使用delete删除(默认是全局对象上的属性)
a = 1;
delete a;

比较对象

在JavaScript中objects是一种引用类型。两个独立声明的对象永远不会相等,只有在比较一个对象和这个对象的引用时才会返回true。

1
2
3
4
5
6
7
8
9
let fruit = {name: 'apple'};
let fruit1 = {name: 'apple'};
console.log(fruit == fruit1); // false
console.log(fruit === fruit1); // false

let fruit = {name: 'apple'};
let fruit1 = fruit;
console.log(fruit == fruit1); // true
console.log(fruit === fruit1); // true

本文参考资料

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!

扫一扫,分享到微信

微信分享二维码
  • © 2019-2021 musi

请我喝杯咖啡吧~

支付宝
微信