在线不卡日本ⅴ一区v二区_精品一区二区中文字幕_天堂v在线视频_亚洲五月天婷婷中文网站

  • <menu id="lky3g"></menu>
  • <style id="lky3g"></style>
    <pre id="lky3g"><tt id="lky3g"></tt></pre>

    JSON 對(duì)象的這些操作和使用場(chǎng)景你知道多少?

    JSON 對(duì)象對(duì)應(yīng)前端的同學(xué)一定不陌生,使用地非常頻繁和常見,在這里順便總結(jié)一下對(duì) JSON 對(duì)象的操作和使用場(chǎng)景

    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 kevinage 18sex 男*/// 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 kevinage 18sex 男*/// 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 kevinage 18sex 男*/// 4、Object.keys(obj).forEach(myObj)const myObj = { “name”:”kevin”, “age”:18, “sex”:”男” };Object.keys(myObj).forEach(key => { console.log(key, myObj[key]);})/*name kevinage 18sex 男*/// 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 kevinage 18sex 男{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);})/*kevin18男*/// 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 的使用場(chǎng)景

    場(chǎng)景一:

    實(shí)際開發(fā)中,有時(shí)怕影響原數(shù)據(jù),我們就需要深拷貝出一份數(shù)據(jù)做任意操作,其實(shí)使用JSON.stringify() 與 JSON.parse() 來(lái)實(shí)現(xiàn)深拷貝。

    // 深拷貝function deepClone(data) { return JSON.parse(JSON.stringify(data));};// 測(cè)試let arr = [1,2,3], _arr = deepClone(arr);arr[0] = 2;console.log(arr, _arr); // [2, 2, 3] [1, 2, 3]

    場(chǎng)景二:

    判斷數(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

    場(chǎng)景三:

    在實(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)換為字符串來(lái)避免以上問題的發(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”}*/

    場(chǎng)景四:

    需要?jiǎng)h除 JSON 對(duì)象中的某個(gè)元素的時(shí)候,通過 JSON.stringify() 的會(huì)忽略 值為 undefined 的 key 和 value 特性進(jìn)行刪除,然后使用 JSON.parse() 將其轉(zhuǎn)換會(huì) 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}

    場(chǎng)景五:

    JSON 對(duì)象在實(shí)際開發(fā)中非常常見,就不免的需要判斷對(duì)象是否為空。我們可以通過 JSON.stringify() 是否等于 “{}” 來(lái)實(shí)現(xiàn);還可以先將 JSON 對(duì)象遍歷成數(shù)組,再判斷該數(shù)組的長(zhǎng)度;當(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); // 0const myObj = {};console.log(Object.values(myObj).length); // 0const myObj = {};console.log(Object.getOwnPropertyNames(myObj).length); // 0const myObj = {};console.log(Reflect.ownKeysObject.values(myObj).length); // 0

    場(chǎng)景六:

    在使用 JSON 對(duì)象的過程中,有時(shí)我們需要對(duì) JSON 對(duì)象的值有排序的效果,如果這個(gè) JSON 對(duì)象是包裹于數(shù)組中,則可以通過 sort() 來(lái)排序,但排序的屬性需是 number 或 number 的字符串類型。非 number 的字符串排序可以通過 localeCompare()、charCodeAt() 來(lái)排序,但 charCodeAt() 方法需要指定第幾個(gè)字符,不是很方便。純 JSON 對(duì)象的排序好像沒有沒事必要,因?yàn)閷?duì)象是無(wú)序的,如果想排序就只能轉(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’字段的長(zhǎng)度) 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’}]

    場(chǎng)景七:

    使用 localStorage 和 sessionStorage 緩存數(shù)據(jù)時(shí),因?yàn)樗鼈冎荒艽鎯?chǔ)字符串,當(dāng)我們需要緩存對(duì)象時(shí),就可以使用 JSON.stringify() 來(lái)序列化成字符串再存儲(chǔ),而讀取時(shí)可以使用 JSON.parse() 來(lái)還原回 JSON 對(duì)象。

    // 存儲(chǔ)window.localStorage.setItem(key, JSON.stringify(object));// 讀取JSON.parse(window.localStorage.getItem(key));

    場(chǎng)景八:

    想在路由(瀏覽器地址)上將對(duì)象作為參數(shù)傳遞時(shí),可以使用 JSON.stringify() 來(lái)序列化成字符串再傳遞。

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

    場(chǎng)景九:

    可以利用 JSON 的 key 具有唯一性的特性,和 JSON.parse() 可以將有效的 JSON 字符串轉(zhuǎn)化為對(duì)應(yīng)的對(duì)象或值實(shí)現(xiàn)數(shù)組的特性實(shí)現(xiàn)去重效果。

    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’ ]

    鄭重聲明:本文內(nèi)容及圖片均整理自互聯(lián)網(wǎng),不代表本站立場(chǎng),版權(quán)歸原作者所有,如有侵權(quán)請(qǐng)聯(lián)系管理員(admin#wlmqw.com)刪除。
    用戶投稿
    上一篇 2022年6月28日 15:28
    下一篇 2022年6月28日 15:28

    相關(guān)推薦

    聯(lián)系我們

    聯(lián)系郵箱:admin#wlmqw.com
    工作時(shí)間:周一至周五,10:30-18:30,節(jié)假日休息