（JavaScript）前端小白还没学JS吗？跟着本文开启JS的旅程吧！（三）：刨析JS对象的使用方法；带你玩转JS的Object对象如何使用以及更新！

凉凉心.

发布于 2025-10-13 17:33:53

1390

JavaScript对象

讲解对象之前我们先复习一下数据类型 JS中的数据类型：

String 字符
Number 数值
Boolean 布尔
Null 空值
Undefined 未定义
- 以上的5中数据类型为基本数据类型，以后我们看得到值只要不是以上的5中，都为对象 Object 对象

var name="张三";
var age=19;
var tel="13894558732";

如果我们使用基本数据类型，可以将一个人的信息保存下来，但是他们是独立的没有联系的数据

对象属于一种复合的数据类型，在对象中可以存储多个不同数据类型的属性

对象的分类：

内建对象
- 由ES标准中定义的对象，在任何ES的实现中都可以使用例如：Math String Number Boolean Function Object…
宿主对象
- 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
- 比如：BOM(浏览器对象模型) DOM(文档对象模型) 例如我们常用的console.log() 就是DOM 中的对象
自定义对象
- 由咱们开发人员自己定义的对象

创建对象

使用new关键字调用的函数，是构造函数constructor 构造函数是专门用来创建对象的函数

var obj=new Object();//创建对象 
console.log(obj);
console.log(typeof obj);

在对象中保存的值称为属性

添加与读取

向对象添加属性的语法：

对象.属性名=属性值
对象[“属性名”]=属性值

读取对象属性的语法:

对象.属性名
对象[“属性名”]

注意：如果对象中没有的属性，不会报错而是返回undefined

//为对象添加属性
obj.name="zhangsan";
obj.age=21;
obj.tel="13894558732";

console.log(obj);
//获取对象中的属性值
console.log(obj.tel);
console.log(obj.adress);
console.log(obj["name"]);
//修改对象的属性值
obj.age=22;
//删除对象的属性
delete obj.tel;
console.log(obj);

var obj1=new Object();
obj1["name"]="wangwu";
obj1["age"]=23;
obj1["tel"]="13856745678";
console.log(obj1);
console.log(obj1["tel"]);
console.log(obj1.tel);

对象_属性名与属性值

var person=new Object();
var obj=new Object();
obj.name="zhangsan";
obj.age=12;
obj.bl=false;
obj.nl=null;
obj.adress=undefined;
obj.person=person;
console.log(obj)
//	obj["name"]="wangwu";

属性名：

对象的属性名不强制要求遵守标识符规则
什么名称都可以，但是不允许这里使用，我们自己定义的使用都必须遵守标识符规则

//	obj["123"]=123;
//	console.log(obj["123"]);
var worker=new Object();
worker.name="小明";
worker.age=23;
worker.adress="九王庙兴业路八号";
console.log(worker);
console.log(worker.age);
console.log(worker.adress);

var boss=new Object();
boss.name="马云";
boss.age=40;
boss.staff=worker;
console.log(boss);
console.log(boss.name);
console.log(boss.staff.name);

in运算符

通过该运算符检查一个对象中是否含有指定的属性
如果含有则返回true，如果没有则返回false

语法：

“属性名” in 对象

console.log("adress" in boss);

基本数据类型与引用数据类型

基本数据类型：String Number Boolean Null Undefined
引用数据类型:Object
JS中的变量都是保存在栈内存中的基本数据类型的值直接在栈内存中存储值与值之间是独立存在的，修改一个变量不会影响到其他的变量

对象是保存在堆内存中的，每创建一个新的对象，就会在堆内存中开辟新的空间。而变量保存的是对象的内存地址(对象的引用)，如果两个变量保存的是同一个对象引用，当其中一个通过变量修改属性时，另外一个也会受到影响。

//基本数据类型与引用数据类型的区别
var a=12;
var b=a;
console.log("a="+a);
console.log("b="+b);
a++;
console.log("a="+a);
console.log("b="+b);

var obja=new Object();
obja.name="小明";
var objb=obja;
//	console.log(obja);
//	console.log(objb);
objb.name="小红";
//	console.log(obja);
//	console.log(objb);
//	obja=null;
objb.name="小蓝";
console.log(obja===objb);


var objc=new Object();
var objd=new Object();
objc.name="小路";
objd.name="小路";
console.log(objc);
console.log(objd);

console.log(objc===objd);

对象字面量

创建一个对象

var obj=new Object();

使用对象字面量来创建一个对象

var obj={};

字面量创建

var obj={};
console.log(typeof obj);

使用对象字面量，可以在创建对象时，直接指定对象中的属性

语法：{属性名1:属性值1,属性名2:属性值2,…}

对象字面量的属性名可以加引号，也可以不加，建议不加如果要使用一些特殊的属性名，则必须加上引号

属性名与属性值是一组键值对结构，键与值之间用":“冒号连接，对个键值对之间使用”,"逗号隔开

如果一个属性之后没有其他的属性了，就不要写","逗号

//	obj.name="zhangshan";
//	obj["123"]="123234234";
obj={
	name:"zhangdan",
	age:23,
	adress:"九王庙兴业路8号",
	"123":"helloworld"
};
console.log(obj["123"]);// helloworld
console.log(obj.name);// zhangdan

var boss={
	name:"马云",
	age:40,
	emp:{
		name:"小王",
		age:23,
		tel:"13509667867"
	}
};
console.log(boss.emp.tel);// 13509667867

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-07-13，如有侵权请联系 cloudcommunity@tencent.com 删除

数据类型