脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js给json对象添加、删除、修改属性

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

 更新时间：2023年10月25日 09:38:27   作者：LLL_LH  
这篇文章主要介绍了js如何给json对象添加、删除、修改属性问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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 特性进行删除，然后使用 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'}]

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript 继承的实现

    JavaScript 继承的实现

    正因为JavaScript本身没有完整的类和继承的实现，并且我们也看到通过手工实现的方式存在很多问题， 因此对于这个富有挑战性的任务网上已经有很多实现了
    2009-07-07
  • Javascript节流函数throttle和防抖函数debounce

    Javascript节流函数throttle和防抖函数debounce

    这篇文章主要介绍了Javascript节流函数throttle和防抖函数debounce,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • javascript陷阱 一不小心你就中招了(字符运算)

    javascript陷阱 一不小心你就中招了(字符运算)

    看似简单的加法运行，却有很多问题，一定要注意字符与数字的运算，注意使用js的强制类型转换，否则会出现很多问题。我们在编写js的过程中，最好通过alert逐行测试
    2013-11-11
  • 微信小程序实现星级评价

    微信小程序实现星级评价

    这篇文章主要为大家详细介绍了微信小程序实现星级评价，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解

    js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解

    今天小编就为大家分享一篇关于js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • IE与Firefox在JavaScript上的7个不同句法分享

    IE与Firefox在JavaScript上的7个不同句法分享

    尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去，偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行
    2011-10-10
  • JS写的贪吃蛇游戏(个人练习)

    JS写的贪吃蛇游戏(个人练习)

    本文为大家介绍的是使用JS写的贪吃蛇游戏,个人练习之用，感兴趣的额朋友可以参考下哈，希望对大家学习js有所帮助
    2013-07-07
  • 微信小程序聊天功能的示例代码

    微信小程序聊天功能的示例代码

    这篇文章主要介绍了微信小程序聊天功能的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • js回文数的4种判断方法示例

    js回文数的4种判断方法示例

    这篇文章主要给大家介绍了关于js回文数的4种判断方法，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • javascript中setInterval的用法

    javascript中setInterval的用法

    这篇文章主要介绍了javascript中setInterval的用法的相关资料,需要的朋友可以参考下
    2015-07-07

最新评论