JavaScript 对象创建、访问与序列化详解

作者：青柠时间：2026-10-30 12:01:42浏览：317

本文详细讲解JavaScript中对象的多种创建方式，包括字面量与构造函数。深入解析点号与方括号两种属性访问机制，介绍关联数组概念及for/in遍历。同时涵盖hasOwnProperty判断、属性增删操作，以及ES5标准下JSON.stringify与JSON.parse实现对象序列化的完整流程。

JavaScript对象创建与访问基础

本文简要记录JavaScript中对象的基本使用方法。

一、创建对象


//创建一个空对象
  var o={};
  //创建一个含有两个属性的对象，x、y
  var o2={x:12,y:'12',name:'JS'};
  //此对象中的author属性的值还是一个对象
  var o3={x:12,author:{name:'JS',age:23,address:'china'}};
  //创建一个空对象和{}一样
  var o4=new Object();
  //给对象增加name属性
  o4.name='JS'

前文展示了两种对象创建方式：一是字面量写法，二是通过new关键字调用Object构造函数来实例化对象。

二、对象的访问

如上例所示，我们通过点号语法（对象名.属性名）为对象o4添加了name属性。访问对象属性主要有两种方式：使用点号（.）或使用方括号（对象名[属性名]）。


//创建一个空对象
  var o={};
  //创建一个含有两个属性的对象，x、y
  var o2={x:12,y:'12',name:'JS'};
  //此对象中的author属性的值还是一个对象
  var o3={x:12,author:{name:'JS',age:23,address:'china'}};
  //创建一个空对象和{}一样
  var o4=new Object();
  //给对象增加name属性
  o4.name='JS'
  /**访问对象的属性值
  */
  //1、使用点号的方式
  var x=o2.x;//12
  var authorOfName=o3.author.name;//JS
  var name=o4.name;//JS
  
  //2、使用数组的方式
  var x2=o2['x'];//12
  var authorOfName2=o3['author']['name'];//JS
  var name2=o4['name'];//JS

点号访问方式直观易懂，而方括号方式在理解上稍显复杂。在JavaScript中，所有对象本质上都是关联数组。这种访问形式虽类似数组索引，但实际使用的是字符串作为索引，因此被称为关联数组。

前述访问方式均基于已知属性名的情况。若需遍历未知属性的对象，可使用for/in循环来遍历对象中的所有属性值。


//创建一个含有两个属性的对象，x、y、name
  var o2={x:12,y:'12',name:'JS'};
  for(p in o2) {
    var property=p;
    var value=o2[p];
    console.log(property);
    console.log(value);
  }

运行上述代码后的打印结果如下：


x
12
y
12
name
JS

结果显示该对象包含三个属性，且各自的值均被成功打印输出。

若对象结构较复杂，可能需要判断特定属性是否存在。由于所有对象均继承自Object，可利用Object内置的hasOwnProperty()方法来检测对象自身是否包含某属性。该方法返回布尔值，需注意它仅检测对象自身的属性，不检查继承自原型的属性。


//创建一个含有两个属性的对象，x、y、name
  var o2={x:12,y:'12',name:'JS'};
  var b=o2.hasOwnProperty('name')//true
  var b2=o2.hasOwnProperty('age')//false

对象属性的增删与类型判断

三、新增、删除属性

前文已演示为对象o4添加name属性的过程，其本质与属性赋值相同。此外，还可以利用关联数组的语法格式来为对象新增属性。


//创建一个含有两个属性的对象，x、y、name
  var o2={x:12,y:'12',name:'JS'};
  //删除name属性
  delete o2.name;
  var b=o2.hasOwnProperty('name')//false
  //新增name属性
  o2['name']='javascript';
  //由于已经存在了name属性，这里是给name重新赋值
  o2.name='js';
  var b3=o2.hasOwnProperty('name');//true

上述代码首先删除了对象o2的name属性，随后通过关联数组语法重新添加name属性，最后使用点号语法对该属性进行了重新赋值。

对象序列化与JSON转换

四、对象和字符串之间的转化

ECMAScript5标准内置了对象与字符串相互转换的功能。目前主流浏览器均支持该标准；若环境不支持，可引入json2.js库文件以实现相关功能。

对象与字符串的相互转换过程称为对象序列化，即将对象状态转换为字符串，或将字符串还原为对象。此过程统一采用JSON（JavaScript Object Notation）作为数据交换格式。

将对象转换为字符串使用JSON.stringify()方法；将字符串转换为对象则使用JSON.parse()方法。


//定义一个对象
  var o={name:'JavaScript',age:24};
  //此种方式在转化为对象是报错，必须使用下面的方式
  //var str="{name:'JavaScript',age:24}";
  //正确的定义对象字符串
  var str='{"name":"JavaScript","age":24}';
  //把对象转化为字符串
  var str2=JSON.stringify(o);
  console.log('str2:'+str2+',类型：'+(typeof str2));//str2:{"name":"JavaScript","age":24},类型：string
  //把字符串转化为对象
  var o2=JSON.parse(str);
  console.log('o2:'+o2+',类型：'+(typeof o2));//o2:[object Object],类型：object

上述示例完整实现了对象与字符串之间的双向转换。

以上关于JavaScript对象使用的介绍到此结束，希望能为读者提供参考，并感谢大家的支持。

作者最新文章

ES6模块化中js文件怎么用import和export交互

2026-11-05 17:00:48

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53