js之对象详解

Mark in HangZhou

2019-01-16

导语:今天说一下有关对象操作方法的文章。

# 目录

什么是对象
创建对象
对象的属性
作为关联数组的对象
Object的属性和方法

# 什么是对象

在js中数据类型分为两类，一个是基本数据类型，另一个是引用数据类型。基本数据类型包括文本字符串string、布尔boolean、数字number、未定义nudefined、空值null,而引用数据类型就是对象，包括普通的Object、数组Array、函数function、日期Date、正则表达式RegExp、字符串对象String、数字对象Number、布尔对象Boolean。今天要说的就是Object,普通的对象。

你可以把它当成一种无序的属性的集合，每个属性都有自己的名字和值，这个值可以是数组，也可以是对象，其他的也可以。

# 创建对象

创建对象有很多种方法，今天介绍常见的几种方法。

# 直接量创建

例如：

var obj = {
  name: 'guan',
  age: 21,
  sex: 'man'
};

1
2
3
4
5

# 使用new运算符创建

例如:

var obj = new Object();

1

# 对象的属性

对象有很多的的属性和属性的值，属性用.来表示。在.左边的是要访问其属性的对象的引用名，它不能是字符串或者是表达式；在.右边的是属性名。

# 定义一个对象

直接量定义简单方便，直接在一个花括号里面写属性和值，属性之间用逗号隔开。

例如：

var obj = {
  name: 'guan',
  age: 21,
  sex: 'man'
};
var name = obj.name;
console.log(name); // 'guan'

1
2
3
4
5
6
7

# 增加一个对象的属性和值

直接在对象里面添加属性即可，或者使用.定义一个新的属性值。

例如：直接拿上面的示例。

var obj = {
  name: 'guan',
  age: 21,
  sex: 'man',
  address: '浙江杭州'
};
obj.telephone = '0571-12340001';

1
2
3
4
5
6
7

# 修改一个对象的属性和值

使用.可以改变一个新的属性值。

例如：直接拿上面的示例。

var obj = {
  name: 'guan',
  age: 21,
  sex: 'man'
};
obj.name = 'mark';

1
2
3
4
5
6

# 循环对象的属性和值

在js中,使用for/in方法可以遍历对象的属性和属性值。

例如：

var obj = {
  name: 'guan',
  age: 21,
  sex: 'man'
};

for (var key in obj) {
  console.log(key + '=' + obj[key]); //name=guan age=21 sex=man
}

1
2
3
4
5
6
7
8
9

# 检测对象的属性是否存在

用in或者undefined判断，但是in运算符不常用，如果差不多会返回undefined。

var obj = {
  name: 'guan',
  age: 21,
  sex: 'man'
};
// 1. 用in
if ('name' in obj) {
  obj.name = 'lee'; //lee
}
console.log(obj.name); //lee

//2.用判断
if (obj.name !== undefined) {
  obj.name = 'lee';
}
console.log(obj.name); //lee

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 删除对象的属性和属性值

可以用delete运算符删除对象的属性，实际上是彻底从对象中删除这个属性，删除以后for/in方法和in运算符都不会找到该属性，如果打印该属性，会的到一个undefined。

例如：

var obj = {
  name: 'guan',
  age: 21,
  sex: 'man'
};
delete obj.name;

console.log(obj.name); //undefined

1
2
3
4
5
6
7
8

# 作为关联数组的对象

在js中，数组是一种特殊的对象，所以也可以用对象来关联数组。

以下表示方法是相等的:

object.property
object['property']

1
2

例如：

var obj = {
  name: 'guan',
  age: 21,
  sex: 'man'
};

var name = obj['name'];

console.log(obj.name == name); //true

1
2
3
4
5
6
7
8
9

# Object的属性和方法

在js中，所有的对象都继承自Object类，所以它们都有通用的方法和属性。

# constructor属性

在js中，每一个对象都有一个constructor属性,所以可以根据这个来检测某个数据是否属于对象。

例如：

var arr = [1,2,3];
console.log(arr.constructor == Array); //true

//还可以这样判断
function isArray(arr) {
  if (typeof arr == 'object' && arr.constructor == Array) {
    console.log('arr is array');
  }
}
isArray(arr); //arr is array

1
2
3
4
5
6
7
8
9
10

# instanceof运算符

instanceof运算符可以检查constructor的值

因此上面可以写成。

例如：

var arr = [1,2,3];
console.log(arr instanceof == Array); //true

//还可以这样判断
function isArray(arr) {
  if (typeof arr == 'object' && arr instanceof Array) {
    console.log('arr is array');
  }
}
isArray(arr); //arr is array

1
2
3
4
5
6
7
8
9
10

# toString()方法

这个方法没有参数，可以把对象转换为一个字符串。

例如：

var obj = {x:1,y:1};
var str = obj.toString();
console.log(str); // [object Object]

1
2
3

# toLocaleString()方法

这个方法返回对象的一个本地化的字符串。

例如：

var now = new Date();
var str = now.toLocaleString();
console.log(str); //  2019/1/16 下午9:45:55

1
2
3

# hasOwnProperty()方法

这个方法是检测对象的某个属性是否是自身的属性，而不是继承的属性。

例如：

var obj = {
  name: 'guan',
  age: 21,
  sex: 'man'
};

console.log(obj.hasOwnProperty('name')); //true
console.log(obj.hasOwnProperty('address')); //false

1
2
3
4
5
6
7
8

# valueOf()方法

这个方法把对象转化为某个基本数据类型，也就是一个数字，而不是字符串的时候才会调用的方法。

# 最后总结

对象的使用方法就是这些，最常用也是最基本的属性和方法。

版权声明：博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：js之对象详解

如需转载，请注明《js之对象详解》转自，原作者Mark