系列文章目录

前端系列文章——传送门
JavaScript系列文章——传送门

文章目录

• 系列文章目录
• • 前言
  • 1、概念
  • 2、定义
  • 3、对象的基本操作
  • • 3.1、给对象添加属性（增）
    • 3.2、删除对象中的键值对（删）
    • 3.3、修改对象中的键值对（改）
    • 3.4、访问对象中键的值（查）
  • 4、对象的遍历：
  • 5、方法概念

前言

程序员没对象，那就new一个对象出来！

1、概念

如果我们存储一个人信息的姓名和年龄，需要两个变量：

var name = '张三'
var age = 12

如果存储另一个人的信息，需要再次定义两个变量，但是变量名不能重复，因为重复会覆盖掉上面的变量：

var name1 = '李四'
var age1 = 13

从上面4个变量，可以看出来，每个变量都是独立的，互相之间是没有联系的，如果要将多个变量组合在一起去描述一个人的信息，变量之间没有关系是很容易弄错的。

为了让多个值之间有联系，确保多个值就是用来描述一个人的，就需要对象这种数据来处理。

在学习数据类型的时候，学习过对象这种数据类型，他的表现形式：

var arr = [];
var obj = {};
var none = null;

这三种不同的表现形式指的都是对象。我们让多个不同的值描述一个人，重点看使用{}定义的对象。

2、定义

var obj = {};

这样定义的对象是空数据，其中什么也没有。对象中的值，是由键值对组成。

键值对是指在描述一个事物的时候，需要一个名字，对应一个值，例如：

姓名:张三 // 姓名是键，张三是值
width:100px // width是键，100px是值
border=1 // border是键，1是值

定义有数据的对象，键和值之间使用冒号隔开，键值对之间使用逗号隔开：

var obj = {name:"张三",age:12
}

对象有一个特性，第一次打开的时候，只能看到Object，再次刷新页面， 会显示里面的数据：

对象中键值对的数量没有限制，可以有任意多个：

var obj = {name:"张三",age:12,height:180,weight:150
};

对象中的键都是字符串，只是正常情况下可以省略引号，但如果键中包含连字符，就不能省略引号了：

var obj = {"name":"张三",age:12,height:180,"province-name":"山东省"
};
console.log(obj);

从输出的结果中能看到，书写顺序和显示的顺序是不同的，因为对象中的键值对是没有顺序的。

3、对象的基本操作

3.1、给对象添加属性（增）

var obj = {};
console.log(obj);
obj.name = '李四';
obj["age"] = 12;
console.log(obj);

3.2、删除对象中的键值对（删）

delete 对象.键
delete 对象[键]

例：

var obj = {name:"张三",age:12,height:180
};
console.log(obj);
delete obj.name;
console.log(obj);
delete obj['age']
console.log(obj);

3.3、修改对象中的键值对（改）

如果设置的属性名是对象中已经存在的呢？

var obj = {name:"张三",age:12
}
console.log(obj);
obj.age = 15;
console.log(obj);

3.4、访问对象中键的值（查）

对象.键 # 这种方式的属性名不用加引号
# 或
对象[键] # 这种方式的属性名必须加引号

例：

var obj = {name:"张三",age:12
};
console.log(obj.name);
console.log(obj["age"]);

4、对象的遍历：

遍历的意思就是将每一个值都访问一遍。

js提供了专门用来遍历对象的操作语法：

for(var attr in obj){# 这里的attr代表对象属性名# obj表示这个对象
}

例：

var obj = {name:"张三",age:12,height:180
};
for(var i in obj){ // 这里的i表示对象的属性名，是一个字符串console.log(i,obj[i]);
}

注意：遍历对象时，输出对象中的值，必须使用对象[代表键的变量]这种形式来输出。

因为，如果使用.来访问的话，是有歧义的：

var obj = {name:"张三",age:12,height:180
};
// 输出张三
console.log( obj.name );

如果使用一个变量来代替name这个键：

var obj = {name:"张三",age:12,height:180
};
// 输出张三
console.log( obj.name );
var a = 'name'
console.log( obj.a ); // undefined

此时，浏览器会将obj.a识别为：我们正在访问obj中键为a的值，.后面的内容，表示对象中的键的名称，所以此时只能使用[]的形式来访问：

var obj = {name:"张三",age:12,height:180
};
// 输出张三
console.log( obj.name );
var a = 'name'
console.log( obj[a] ); // 张三

此时[]中的a是一个变量，因为没有加引号，代表['name']。

5、方法概念

对象中值的类型是没有限制的，可以是任意类型。当值不是函数的时候，我们将这个键值对叫做对象的属性，当值是一个函数的时候，我们将这个键值对叫做对象的方法。

var obj2 = {name:'王五',study:function(){console.log("在学习");}
}
console.log(obj2);

name就是对象obj2的属性，study就是对象obj2方法

方法的访问和属性是一样的：

console.log(obj2.study)
obj2.study(); // 因为函数执行需要调用，所以需要加小括号