js如何給json對(duì)象添加、刪除、修改屬性
更新時(shí)間：2023年10月25日 09:38:27 作者：LLL_LH
這篇文章主要介紹了js如何給json對(duì)象添加、刪除、修改屬性問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
js給json對(duì)象添加、刪除、修改屬性
<script type="text/javascript">
//json對(duì)象
var json={ "firstName":"Bill" , "lastName":"Gates"};
//給json對(duì)象添加新的屬性并賦值
json.sex="man";
//也可以如下添加新的屬性并賦值
json["sex"]="man";
//刪除json對(duì)象的firstName屬性
delete json.firstName;
//也可以如下刪除firstName屬性的值
delete json["firstName"];
//修改json對(duì)象的firstName屬性的值
json.firstName="Thomas";
//也可以如下修改firstName屬性的值
json["firstName"]="Thomas";
</script>JSON 對(duì)象的這些操作和使用場景你知道多少？
JSON 對(duì)象對(duì)應(yīng)前端的同學(xué)一定不陌生，使用地非常頻繁和常見，在這里順便總結(jié)一下對(duì) JSON 對(duì)象的操作和使用場景。
1、添加 JSON 的屬性
可通過 . 或 [] 的方式對(duì) JSON 內(nèi)容的增加。
const data = {};
// 第一種方式：
data.name = "kevin";
// 第二種方式：
data['age'] = 18;
console.log(data); // {name: "kevin", age: 18}2、訪問 JSON 的值
可通過 . 或 [] 的方式對(duì) JSON 內(nèi)容的訪問。
const data = {
name: "kevin",
age: 18
};
// 第一種方式：
console.log(data.name); // "kevin"
// 第二種方式：
console.log(data["name"]); // "kevin"3、修改 JSON 的值
可通過 . 或 [] 的方式對(duì) JSON 內(nèi)容的修改更新。
const data = {
name: "kevin",
age: 18
};
// 第一種方式：
data.name = "kevin2";
// 第二種方式：
data['age'] = 20;
console.log(data); // {name: "kevin2", age: 20}4、刪除 JSON 的屬性
可通過 delete 對(duì) JSON 的屬性進(jìn)行刪除。
// 第一種方式：通過 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 對(duì)象
myObj = {
"name":"",
"age":18,
"like": {
"fruit1":"banner",
"fruit2":"orange",
"fruit3":"apple"
}
}6、遍歷 JSON 對(duì)象
// 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 對(duì)象 API 的使用場景
場景一：
實(shí)際開發(fā)中，有時(shí)怕影響原數(shù)據(jù)，我們就需要深拷貝出一份數(shù)據(jù)做任意操作，其實(shí)使用JSON.stringify() 與 JSON.parse() 來實(shí)現(xiàn)深拷貝。
// 深拷貝
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]場景二：
判斷數(shù)組是否包含某對(duì)象，或者判斷對(duì)象是否相等。
// 判斷數(shù)組是否包含某對(duì)象
const data = [
{name:'Kevin1'},
{name:'Kevin2'},
{name:'Kevin3'},
];
const val = {name:'Kevin3'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1; // true
//判斷兩數(shù)組/對(duì)象是否相等
let a = [1,2,3],
b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b); // true場景三：
在實(shí)際開發(fā)中，有時(shí)需要在 JSON 對(duì)象中包含函數(shù)，但 JSON.stringify() 序列化時(shí)會(huì)將其 key 和 value 忽略掉。
我們可以將函數(shù)轉(zhuǎn)換為字符串存儲(chǔ)，讀取時(shí)再通過 eval() 方法將其還原。
// 我們可以在執(zhí)行 JSON.stringify() 函數(shù)前將函數(shù)轉(zhuǎn)換為字符串來避免以上問題的發(fā)生：
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"}
*/場景四：
需要?jiǎng)h除 JSON 對(duì)象中的某個(gè)元素的時(shí)候，通過 JSON.stringify() 的會(huì)忽略 值為 undefined 的 key 和 value 特性進(jìn)行刪除，然后使用 JSON.parse() 將其轉(zhuǎn)換回 JSON 對(duì)象。
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 對(duì)象在實(shí)際開發(fā)中非常常見，就不免的需要判斷對(duì)象是否為空。
我們可以通過 JSON.stringify() 是否等于 "{}" 來實(shí)現(xiàn)；還可以先將 JSON 對(duì)象遍歷成數(shù)組，再判斷該數(shù)組的長度；當(dāng)然還可以使用 for 循環(huán)的方式。
// 1、JSON.stringify() 的方式
const data = {}
console.log(JSON.stringify(data) === "{}"); // true
// 2、遍歷成數(shù)組的方式
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 對(duì)象的過程中，有時(shí)我們需要對(duì) JSON 對(duì)象的值有排序的效果，如果這個(gè) JSON 對(duì)象是包裹于數(shù)組中，則可以通過 sort() 來排序，但排序的屬性需是 number 或 number 的字符串類型。
非 number 的字符串排序可以通過 localeCompare()、charCodeAt() 來排序，但 charCodeAt() 方法需要指定第幾個(gè)字符，不是很方便。
純 JSON 對(duì)象的排序好像沒有沒事必要，因?yàn)閷?duì)象是無序的，如果想排序就只能轉(zhuǎn)換為數(shù)組對(duì)象排好序再轉(zhuǎn)回 JSON 對(duì)象了。
// 排序之前
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'}]
// 擴(kuò)展部分：
// 第二種方式：
// 根據(jù)漢字首字母排序 localeCompare() 是js內(nèi)置方法
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'}]
// 第三種方式：
// 根據(jù)英文排序 比較 首字母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 排序
// 或（動(dòng)態(tài)獲取'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'}]總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
document.compatMode的CSS1compat使用介紹
這篇文章主要介紹了document.compatMode的CSS1compat使用,需要的朋友可以參考下2014-04-04
原生js實(shí)現(xiàn)類似彈窗抖動(dòng)效果
這篇文章主要介紹了原生js實(shí)現(xiàn)類似彈窗抖動(dòng)效果的相關(guān)資料,推薦給大家，需要的朋友可以參考下2015-04-04
使用Javascript實(shí)現(xiàn)復(fù)制粘貼功能的示例代碼
本篇文章記錄如何通過js代碼實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板,之后可以粘貼到需要的地方的功能,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
JavaScript簡單實(shí)現(xiàn)鼠標(biāo)移動(dòng)切換圖片的方法
這篇文章主要介紹了JavaScript簡單實(shí)現(xiàn)鼠標(biāo)移動(dòng)切換圖片的方法,涉及JavaScript針對(duì)鼠標(biāo)事件的響應(yīng)及頁面元素的動(dòng)態(tài)變換技巧,需要的朋友可以參考下2016-02-02
仿豆瓣分頁原型(Javascript版)...2007-04-04
TypeScript?Typeof運(yùn)算符的5個(gè)實(shí)用技巧詳解
這篇文章主要為大家介紹了TypeScript?Typeof運(yùn)算符的5個(gè)實(shí)用技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
JS中如何實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽返回頁面頂部的問題
這篇文章主要介紹了JS中實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽返回頁面頂部的問題，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-01-01
JavaScript實(shí)現(xiàn)人體面部活體檢測的功能
本文詳細(xì)介紹了如何在瀏覽器端使用JavaScript實(shí)現(xiàn)高可靠度的人臉活體檢測,包括核心原理、可行方案、優(yōu)缺點(diǎn)對(duì)比以及示例代碼,感興趣的朋友一起看看吧2025-02-02
JavaScript?中的引用類型Date?和RegExp的詳細(xì)介紹
這篇文章主要介紹了JavaScript中的引用類型Date和RegExp的詳細(xì)介紹,引用值(或者對(duì)象)是某個(gè)特定引用類型的實(shí)例,下文相關(guān)介紹，需要的小伙伴可以參考一下2022-07-07
JavaScript可以對(duì)各種網(wǎng)頁元素進(jìn)行操控,下面這篇文章主要給大家介紹了關(guān)于JavaScript操作元素的相關(guān)資料,文中通過多個(gè)實(shí)例詳細(xì)介紹了操作元素的方法，需要的朋友可以參考下2021-06-06