鲁达 JSON 对象对应前端的同学一定不陌生，使用地非常频繁和常见，在这里顺便总结一下对 JSON 对象的操作和使用场景。
1、添加 JSON 的属性
可通过 . 或 [] 的方式对 JSON 内容的增加。
const data = {}; // 第一种方式： da = "kevin"; // 第二种方式： data['age'] = 18; con(data); // {name: "kevin", age: 18}2、访问 JSON 的值
可通过 . 或 [] 的方式对 JSON 内容的访问。
const data = { name: "kevin", age: 18 }; // 第一种方式： con(da); // "kevin" // 第二种方式： con(data["name"]); // "kevin"3、修改 JSON 的值
可通过 . 或 [] 的方式对 JSON 内容的修改更新。
const data = { name: "kevin", age: 18 }; // 第一种方式： da = "kevin2"; // 第二种方式： data['age'] = 20; con(data); // {name: "kevin2", age: 20}4、删除 JSON 的属性
可通过 delete 对 JSON 的属性进行删除。
// 第一种方式：通过 delete 删除 const data = { a: 1, b: 2, c: 3, d: 4 }; delete da; delete data['d']; con(data); // {a: 1, b: 2} // 第二种方式：通过 JSON.stringify() 的特性删除 const data = { a: 1, b: 2, c: 3, d: 4 }; da = undefined; data['d'] = undefined; const newData = JSON.parse(data)) con(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) { con(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){ con(key, myObj[key]); }) /* name kevin age 18 sex 男 */ // 3、Re(obj).forEach(myObj) const myObj = { "name": "kevin", "age": 18, "sex": "男" }; Re(myObj).forEach(function (key) { con(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 => { con(key, myObj[key]); }) /* name kevin age 18 sex 男 */ // 5、JSON.parse(myObj) const myObj = { "name": "kevin", "age": 18, "sex": "男" }; JSON.parse(myObj), (key, value) => { con(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){ con(value); }) /* kevin 18 男 */ // 6.2、Object.keys(obj) const myObj = { "name": "kevin", "age": 18, "sex": "男" }; con(myObj)); /* ["name", "age", "sex"] */ // 6.3、Object.values(obj) const myObj = { "name": "kevin", "age": 18, "sex": "男" }; con(myObj)); /* ["kevin", 18, "男"] */7、JSON 对象 API 的使用场景
场景一：
实际开发中，有时怕影响原数据，我们就需要深拷贝出一份数据做任意操作，其实使用JSON.stringify() 与 JSON.parse() 来实现深拷贝。
// 深拷贝 function deepClone(data) { return JSON.parse(data)); }; // 测试 let arr = [1,2,3], _arr = deepClone(arr); arr[0] = 2; con(arr, _arr); // [2, 2, 3] [1, 2, 3]场景二：
判断数组是否包含某对象，或者判断对象是否相等。
// 判断数组是否包含某对象 const data = [ {name:'Kevin1'}, {name:'Kevin2'}, {name:'Kevin3'}, ]; const val = {name:'Kevin3'}; JSON.stringify(data).indexOf(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.(); var myJSON = JSON.stringify(obj); var obj = JSON.parse(myJSON); obj.fn = eval("(" + obj.fn + ")"); con(obj); /* 输出 { fn: f(), name: "Kevin"} */场景四：
需要删除 JSON 对象中的某个元素的时候，通过 JSON.stringify() 的会忽略 值为 undefined 的 key 和 value 特性进行删除，然后使用 JSON.parse() 将其转换会 JSON 对象。
const data = { a: 1, b: 2, c: 3, d: 4 }; da = undefined; data['d'] = undefined; const newData = JSON.parse(data)) con(newData); // {a: 1, b: 2}场景五：
JSON 对象在实际开发中非常常见，就不免的需要判断对象是否为空。我们可以通过 JSON.stringify() 是否等于 "{}" 来实现；还可以先将 JSON 对象遍历成数组，再判断该数组的长度；当然还可以使用 for 循环的方式。
// 1、JSON.stringify() 的方式 const data = {} con(data) === "{}"); // true // 2、遍历成数组的方式 const myObj = {}; con(myObj).length); // 0 const myObj = {}; con(myObj).length); // 0 const myObj = {}; con(myObj).length); // 0 const myObj = {}; con(ReObject.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' } ]; con(data); // [{name: 'user2', id: 3}, {name: 'user3', id: '6'}, {name: 'user1', id: '1'}] // 排序之后 // 第一种方式： da(function (a, b) { return a.id - b.id }) con(data); // [{name: "user1", id: '1'}, {name: "user2", id: 3}, {name: "user3", id: '6'}] // 扩展部分： // 第二种方式： // 根据汉字首字母排序 localeCompare() 是js内置方法 da((a, b) => b.name.localeCompare, 'zh')); //z~a 排序 da((a, b) => a.name.localeCompare, 'zh')); //a~z 排序 con(data); // [{name: "user1", id: '1'}, {name: "user2", id: 3}, {name: "user3", id: '6'}] // 第三种方式： // 根据英文排序 比较 首字母ASCLL码 da((a, b) => b.name.charCodeAt(0) - a.name.charCodeAt(0)); //z~a 排序 da((a, b) => a.name.charCodeAt(4) - b.name.charCodeAt(4)); //a~z 排序 // 或（动态获取'name'字段的长度） da( (a, b) => a.name.charCodeAt('name'.length) - b.name.charCodeAt('name'.length)); //a~z 排序 con(data); // [{name: "user1", id: '1'}, {name: "user2", id: 3}, {name: "user3", id: '6'}]场景七：
使用 localStorage 和 sessionStorage 缓存数据时，因为它们只能存储字符串，当我们需要缓存对象时，就可以使用 JSON.stringify() 来序列化成字符串再存储，而读取时可以使用 JSON.parse() 来还原回 JSON 对象。
// 存储 window.localS(key, JSON.stringify(object)); // 读取 JSON.parse(key));场景八：
想在路由（浏览器地址）上将对象作为参数传递时，可以使用 JSON.stringify() 来序列化成字符串再传递。
var object = {name: 'kevin', age: 18}; var url = '; + JSON.stringify(object);场景九：
可以利用 JSON 的 key 具有唯一性的特性，和 JSON.parse() 可以将有效的 JSON 字符串转化为对应的对象或值实现数组的特性实现去重效果。
var arr = ['a', 'b', 'c', 'a'] con('000', arr); // 000 [ 'a', 'b', 'c', 'a' ] var arr2 = [] arr.forEach(item => { arr2[JSON.stringify(item)] = item }) con('111', arr2); // 111 [ '"a"': 'a', '"b"': 'b', '"c"': 'c' ] var arr3 = [] Object.keys(arr2).forEach(key => { arr3.pu(key)); }) con('222', arr3); // 222 [ 'a', 'b', 'c' ]