百度360必应搜狗淘宝本站头条
mqtt服务器xftp6vscode使用技巧mybatiscollectionkeyerror
当前位置：网站首页 > 热门文章 > 正文

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

bigegpt 2025-03-02 16:14 7 浏览

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 特性进行删除，然后使用 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() 是否等于 "{}" 来实现；还可以先将 JSON 对象遍历成数组，再判断该数组的长度；当然还可以使用 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 对象的过程中，有时我们需要对 JSON 对象的值有排序的效果，如果这个 JSON 对象是包裹于数组中，则可以通过 sort() 来排序，但排序的属性需是 number 或 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'}]

场景七：

使用 localStorage 和 sessionStorage 缓存数据时，因为它们只能存储字符串，当我们需要缓存对象时，就可以使用 JSON.stringify() 来序列化成字符串再存储，而读取时可以使用 JSON.parse() 来还原回 JSON 对象。

// 存储
window.localStorage.setItem(key, JSON.stringify(object));

// 读取
JSON.parse(window.localStorage.getItem(key));

场景八：

想在路由（浏览器地址）上将对象作为参数传递时，可以使用 JSON.stringify() 来序列化成字符串再传递。

var object = {name: 'kevin', age: 18};
var url = 'http://blogif.cn?query=' + JSON.stringify(object);

场景九：

可以利用 JSON 的 key 具有唯一性的特性，和 JSON.parse() 可以将有效的 JSON 字符串转化为对应的对象或值实现数组的特性实现去重效果。

var arr = ['a', 'b', 'c', 'a']
console.log('000', arr); // 000 [ 'a', 'b', 'c', 'a' ]
var arr2 = []
arr.forEach(item => {
  arr2[JSON.stringify(item)] = item
})
console.log('111', arr2); // 111 [ '"a"': 'a', '"b"': 'b', '"c"': 'c' ]
var arr3 = []
Object.keys(arr2).forEach(key => {
  arr3.push(JSON.parse(key));
})
console.log('222', arr3); // 222 [ 'a', 'b', 'c' ]

相关推荐

5分钟调色大片的方法（5分钟调色大片的方法有哪些）

哈喽大家好。在大家印象中一定觉得ps非常难学非常难。大家不要着急，小编的教学都是针对ps零基础的同学的，而且非常实用哦。只要大家跟着图文练习一两遍，保证大家立马学会~！好了，废话少说，下面开始我们今天...

闪白特效原来是这么用的（闪白特效怎么使用）

作者|高艳侠订阅|010-86092062闪白特效是影视作品中应用比较多的效果之一，那么具体该在哪些场景使用闪白特效？具体该如何操作？下面就以AdobePremiere（以下简称PR）为例，...

ppt常用小图标去哪里找?3个矢量素材网站推荐!

ppt是一个注重可视化表达的演示载体，除了高清图片，ppt中另一类常用的素材是各种小图标，也叫矢量图标，巧妙运用小图标能提升整体美观度和表现力，那么ppt常用小图标去哪里找呢？为方便各位快速找到合适的...

有什么好用的截图录屏工具?试试这9款

经常有朋友反馈苦于缺乏截屏和录屏的趁手工具，本期我们分享几个相当好用的截屏和录屏工具，希望能帮到大家。ScreenToGifScreenToGif是一款免费且开源的录屏工具。此款工具最大的特点是可以...

配色苦手福音!专业快速色环配色PS插件

今天橘子老师给的大家介绍的是一款快速配色的插件，非常强大配色苦手福音来啦！（获取方式见文末）【插件介绍】配色在后期设计中占有主导地位，好的配色能让作品更加抢眼Coolorus这款专业的配色插件，能够...

如何用PS抠主体?（ps怎么抠主体）

1.主体法抠图-抠花苞和花梗导入一张荷花苞的照片，点击上图中顶部“选择”菜单栏，下拉单击“主体”。可以看到，只有花苞被选中，但是花梗并没有被选中。接下来单击上图中左侧工具栏的“快速选择工具”，上图中顶...

2799元的4K电视，有保障吗?（买4k电视机哪个品牌好）

在上一期《电脑报》的3·15专题报道中，我们揭露了一款不靠谱的42英寸4K智能电视——TCLD42A561U。这款售价2699元的4K智能电视不仅4K画质方面存在严重问题，而且各种功能和应用体验也不理...

苹果电脑的Touch Bar推出一段时间了 这款工具可以帮你开发适用于它的APP

距离苹果推出带有TouchBar的MacBookPro已经有一段时间了，除了那些像Adobe、Google和Microsoft大公司在开发适用于TouchBar的应用之外，其实还有很多独立的开...

如魔法般吸取颜色的桌灯（如魔法般吸取颜色的桌灯叫什么）

色彩为生活带来的感官刺激，逐渐被视为理所当然。一盏桌灯运用它的神奇力量，将隐藏于物件中的颜色逐一释放，成为装点环境的空间魔法师。ColorUp是一款可以改变颜色的吸色台灯，沿用传统灯泡的造型，融入了拾...

一篇文章带你用jquery mobile设计颜色拾取器

【一、项目背景】现实生活中，我们经常会遇到配色的问题，这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。我们可以通过jquerymobile去设计颜色的拾取器...

ps拾色器快捷键是什么?（ps2019拾色器快捷键）

ps拾色器快捷键是什么?文章末尾有获取方式，按照以下步骤就能自动获得！学会制作PS特效需要一定程度的耐心和毅力。初学者可以从基本的工具和技术开始学习，逐渐提高他们的技能水平。同时，观看更多优秀的特效作...

免费开源的 Windows 截图录屏工具，支持 OCR 识别和滚动截图等

功能很强大、安装很小巧的免费截图、录屏工具，提供很多使用的工具来帮我么能解决问题，推荐给大家。关于ShareXShareX是一款免费的windows工具，起初是一个小巧的截图工具，经过多年的迭...

入门到精通系列PS教程:第13篇 · 拾色器、颜色问题说明及补充

入门到精通系列PS教程：第13篇·拾色器、颜色问题说明及补充作者|侯潇问题说明我的第12篇教程里，有个小问题没有说清楚。要说是错误，又不算是错误，只是没有说准确。写完那篇教程后，因为已经到了深...

PS冷知识:用吸管工具吸取屏幕上的任意颜色

今天，我们给大家介绍PS中的一个冷知识：用吸管工具可以吸取屏幕上的任意颜色。其实，操作起来是非常简单的。大多数情况下，我们认为，PS的吸管工具只能吸取PS软件作图区域范围内的颜色，最多加上画布四周的...

Windows 11 将提供内置颜色选择器工具

Windows11内置了颜色选择器，可以扫描并识别屏幕上的颜色并生成颜色代码。此外，微软还利用人工智能技术，让屏幕上的文本扫描和选择变得更加便捷。这两项功能均已在SnippingToolv1...

一周热门
最近发表
标签列表