当前位置：首页 > 全部内容 > 正文

JavaScript 操作 JSON 对象：增删改查与常见应用场景详解

作者：小括号

时间：2026-10-31

浏览：300

本文详细介绍JavaScript中JSON对象的增删改查操作，包括使用点符号和方括号访问、修改、添加及删除属性。同时深入解析JSON.stringify与JSON.parse在深拷贝、过滤undefined值、函数序列化及对象判空排序等实际开发场景中的应用，帮助开发者高效处理前端数据。

文章目录

js如何给json对象添加、删除、修改属性

<script type="text/javascript">
        //json对象
        var json={ "firstName":"Bill" , "lastName":"Gates"};
        //给json对象添加新的属性并赋值
        json.sex="man";
        //也可以如下添加新的属性并赋值
        json["sex"]="man";


        //删除json对象的firstName属性
        delete json.firstName;
        //也可以如下删除firstName属性的值
        delete json["firstName"];


        //修改json对象的firstName属性的值
        json.firstName="Thomas";
        //也可以如下修改firstName属性的值
        json["firstName"]="Thomas";
    </script>

JSON 对象的这些操作和使用场景你知道多少？

JSON 对象在前端开发中极为常见，使用频率极高。本文旨在总结对 JSON 对象进行各类操作的方法及其在实际开发中的典型应用场景。

1、添加 JSON 的属性

可以通过点（.）或方括号（[]）语法向 JSON 对象中添加新的属性。

const data = {};
// 第一种方式：
data.name = "kevin";
// 第二种方式：
data['age'] = 18;
console.log(data); // {name: "kevin", age: 18}

2、访问 JSON 的值

同样支持通过点（.）或方括号（[]）语法来读取 JSON 对象中的属性值。

const data = {
  name: "kevin",
  age: 18
};
// 第一种方式：
console.log(data.name); // "kevin"
// 第二种方式：
console.log(data["name"]); // "kevin"

3、修改 JSON 的值

利用点（.）或方括号（[]）语法，可以直接更新 JSON 对象中现有属性的值。

const data = {
  name: "kevin",
  age: 18
};
// 第一种方式：
data.name = "kevin2";
// 第二种方式：
data['age'] = 20;
console.log(data); // {name: "kevin2", age: 20}

4、删除 JSON 的属性

使用 delete 关键字可以从 JSON 对象中移除指定的属性。

// 第一种方式：通过 delete 删除
const data = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
delete data.c;
delete data['d'];
console.log(data); // {a: 1, b: 2}
 
 
// 第二种方式：通过 JSON.stringify() 的特性删除
const data = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
data.c = undefined;
data['d'] = undefined;
const newData = JSON.parse(JSON.stringify(data))
console.log(newData); // {a: 1, b: 2}

5、嵌套 JSON 对象

myObj = {
    "name":"",
    "age":18,
    "like": {
        "fruit1":"banner",
        "fruit2":"orange",
        "fruit3":"apple"
    }
}

6、遍历 JSON 对象

// 1、for...in...
const myObj = { "name":"kevin", "age":18, "sex":"男" };
for (key in myObj) {
    console.log(key, myObj[key]);
}
/*
name kevin
age 18
sex 男
*/
 
// 2、Object.getOwnPropertyNames(obj).forEach(myObj)
const myObj = { "name": "kevin", "age": 18, "sex": "男" };
Object.getOwnPropertyNames(myObj).forEach(function(key){
  console.log(key, myObj[key]);
})
/*
name kevin
age 18
sex 男
*/
 
// 3、Reflect.ownKeys(obj).forEach(myObj)
const myObj = { "name": "kevin", "age": 18, "sex": "男" };
Reflect.ownKeys(myObj).forEach(function (key) {
  console.log(key, myObj[key]);
})
/*
name kevin
age 18
sex 男
*/
 
// 4、Object.keys(obj).forEach(myObj)
const myObj = { "name":"kevin", "age":18, "sex":"男" };
Object.keys(myObj).forEach(key => {
  console.log(key, myObj[key]);
})
/*
name kevin
age 18
sex 男
*/
 
// 5、JSON.parse(JSON.stringify(myObj)
const myObj = { "name": "kevin", "age": 18, "sex": "男" };
JSON.parse(JSON.stringify(myObj), (key, value) => {
  console.log(key, value)
  return value
});
/*
name kevin
age 18
sex 男
{name: "kevin", age: 18, sex: "男"}
*/
 
// 6.1、Object.values(obj).forEach()
const myObj = { "name": "kevin", "age": 18, "sex": "男" };
Object.values(myObj).forEach(function(value){
  console.log(value);
})
/*
kevin
18
男
*/
 
// 6.2、Object.keys(obj)
const myObj = { "name": "kevin", "age": 18, "sex": "男" };
console.log(Object.keys(myObj));
/*
["name", "age", "sex"]
*/
 
// 6.3、Object.values(obj)
const myObj = { "name": "kevin", "age": 18, "sex": "男" };
console.log(Object.values(myObj));
/*
["kevin", 18, "男"]
*/

7、JSON 对象 API 的使用场景

场景一：

在实际开发中，为了避免修改原始数据，通常需要创建一份深拷贝供后续操作。利用 JSON.stringify() 将对象序列化为字符串，再通过 JSON.parse() 解析回对象，即可实现深拷贝。

// 深拷贝
function deepClone(data) {
    return JSON.parse(JSON.stringify(data));
};
// 测试
let arr = [1,2,3],
    _arr = deepClone(arr);
arr[0] = 2;
console.log(arr, _arr); // [2, 2, 3]  [1, 2, 3]

场景二：

该场景用于判断数组中是否包含特定对象，或者比较两个对象是否相等。

// 判断数组是否包含某对象
const data = [
    {name:'Kevin1'},
    {name:'Kevin2'},
    {name:'Kevin3'},
];
const val = {name:'Kevin3'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1; // true
 
//判断两数组/对象是否相等
let a = [1,2,3],
    b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b); // true

场景三：

有时需要在 JSON 对象中存储函数，但直接使用 JSON.stringify() 序列化时，包含函数的 key 和 value 会被忽略。

解决方法是将函数先转换为字符串进行存储，在读取数据时，再通过 eval() 方法将其还原为可执行的函数。

// 我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生：
var obj = { "name":"Kevin", "fn":function () {return { age: 18 };}};
obj.fn = obj.fn.toString();
var myJSON = JSON.stringify(obj);
 
var obj = JSON.parse(myJSON);
obj.fn = eval("(" + obj.fn + ")");
console.log(obj);
/* 输出
{ fn: f(), name: "Kevin"}
*/

场景四：

当需要删除 JSON 对象中的特定元素时，可以利用 JSON.stringify() 在序列化时自动忽略值为 undefined 的 key 和 value 这一特性。先将目标属性设为 undefined，序列化后再通过 JSON.parse() 转换回 JSON 对象，即可实现删除。

const data = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
data.c = undefined;
data['d'] = undefined;
const newData = JSON.parse(JSON.stringify(data))
console.log(newData); // {a: 1, b: 2}

场景五：

JSON 对象在开发中非常普遍，因此判断对象是否为空是一项常见需求。

可以通过判断 JSON.stringify() 的结果是否等于 "{}" 来实现；另一种方法是将对象遍历转换为数组后判断数组长度；此外，也可以使用 for 循环逐个检查属性。

// 1、JSON.stringify() 的方式
const data = {}
console.log(JSON.stringify(data) === "{}"); // true
 
// 2、遍历成数组的方式
const myObj = {};
console.log(Object.keys(myObj).length); // 0
 
const myObj = {};
console.log(Object.values(myObj).length); // 0
 
const myObj = {};
console.log(Object.getOwnPropertyNames(myObj).length); // 0
 
const myObj = {};
console.log(Reflect.ownKeysObject.values(myObj).length); // 0

场景六：

在对包裹于数组中的 JSON 对象进行排序时，可以使用 sort() 方法，但排序属性必须是 number 类型或其字符串形式。

对于非 number 类型的字符串排序，可以使用 localeCompare() 或 charCodeAt() 方法。其中 charCodeAt() 需要指定字符索引，使用相对不便。

纯 JSON 对象本身是无序的，通常无需排序。若需排序，应将其转换为数组对象，排序完成后再转换回 JSON 对象。

// 排序之前
var data = [
  {
    name: 'user2',
    id: 3
  },
  {
    name: 'user3',
    id: '6'
  },
  {
    name: 'user1',
    id: '1'
  }
];
console.log(data);
// [{name: 'user2', id: 3}, {name: 'user3', id: '6'}, {name: 'user1', id: '1'}]
 
 
// 排序之后
// 第一种方式：
data.sort(function (a, b) {
  return a.id - b.id
})
console.log(data);
// [{name: "user1", id: '1'}, {name: "user2", id: 3}, {name: "user3", id: '6'}]
 
 
 
// 扩展部分：
// 第二种方式：
// 根据汉字首字母排序 localeCompare() 是js内置方法
data.sort((a, b) => b.name.localeCompare(a.name, 'zh')); //z~a 排序
data.sort((a, b) => a.name.localeCompare(b.name, 'zh')); //a~z 排序
console.log(data);
// [{name: "user1", id: '1'}, {name: "user2", id: 3}, {name: "user3", id: '6'}]
 
 
// 第三种方式：
// 根据英文排序 比较 首字母ASCLL码
data.sort((a, b) => b.name.charCodeAt(0) - a.name.charCodeAt(0)); //z~a 排序
data.sort((a, b) => a.name.charCodeAt(4) - b.name.charCodeAt(4)); //a~z 排序
// 或（动态获取'name'字段的长度） data.sort( (a, b) => a.name.charCodeAt('name'.length) - b.name.charCodeAt('name'.length)); //a~z 排序
console.log(data);
// [{name: "user1", id: '1'}, {name: "user2", id: 3}, {name: "user3", id: '6'}]

总结

以上为个人经验总结，希望能为大家提供参考，也希望大家多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败

JavaScript常见SyntaxError语法错误排查与修复方法

JS中slice、substring和substr截取字符串的区别

JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型

为什么JS数组push后得到的是数字而不是数组？

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JavaScript常见SyntaxError语法错误排查与修复方法
JS 解压出现乱码或报错怎么解决？
JS动态构建复杂嵌套JSON对象的方法