Vue學習JSON.stringify()將Object類型轉換成String類型

Vue學習JSON.stringify()將Object類型轉換成String類型

  • 一、前言
    • 1、基本用法
    • 2、復雜對象轉換
    • 3、過濾器函數
    • 4、序列化函數


一、前言

JSON.stringify() 是一個 JavaScript 函數,用于將 JavaScript 值轉換為 JSON 字符串。它接受一個 JavaScript 值(通常是對象或數組)作為參數,并返回一個對應的 JSON 字符串。

1、基本用法

const obj = { name: 'John', age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 輸出: {"name":"John","age":30}

2、復雜對象轉換

JSON.stringify() 還可以用于將嵌套的對象或數組轉換為 JSON 字符串。

const nestedObj = {name: 'John',age: 30,address: {city: 'New York',country: 'USA'}
};
const jsonString = JSON.stringify(nestedObj);
console.log(jsonString); 
// 輸出: {"name":"John","age":30,"address":{"city":"New York","country":"USA"}}

3、過濾器函數

JSON.stringify() 還可以接受一個過濾器函數作為第二個參數,該函數可以控制哪些屬性將被包含在 JSON 字符串中。

const obj = { name: 'John', age: 30, password: '12345' };
const jsonString = JSON.stringify(obj, (key, value) => {if (key === 'password') {return undefined; // 過濾掉密碼字段}return value;
});
console.log(jsonString); // 輸出: {"name":"John","age":30}

4、序列化函數

JSON.stringify() 還可以接受一個序列化函數作為第三個參數,該函數可以在每個鍵值對被字符串化之前轉換值。

const obj = { name: 'John', age: 30 };
const jsonString = JSON.stringify(obj, (key, value) => {if (typeof value === 'number') {return value * 2; // 將數字屬性值加倍}return value;
});
console.log(jsonString); // 輸出: {"name":"John","age":60}

總之,JSON.stringify() 是一個非常實用的函數,用于將 JavaScript 值轉換為 JSON 字符串,是進行數據傳輸和存儲的常見方式之一。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/10284.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/10284.shtml
英文地址,請注明出處:http://en.pswp.cn/web/10284.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

深入探索MySQL視圖

前言 在數據庫的世界里,MySQL視圖作為數據抽象的一把利劍,為我們提供了一種靈活而高效的方式來管理和查詢數據。它不僅能夠簡化復雜的查詢邏輯,還能在不改動底層數據結構的前提下,實現數據的定制化展示與訪問控制。本文旨在深入解…

【小紅書采集工具】根據搜索關鍵詞批量采集小紅書筆記,含筆記正文、筆記鏈接、發布時間、轉評贊藏等

一、背景介紹 1.1 爬取目標 熟悉我的小伙伴都了解,我之前開發過2款軟件: 【GUI軟件】小紅書搜索結果批量采集,支持多個關鍵詞同時抓取! 【GUI軟件】小紅書詳情數據批量采集,含筆記內容、轉評贊藏等,支持…

【C++】string類的使用①(默認成員函數 || 迭代器接口begin,end,rbegin和rend)

🔥個人主頁: Forcible Bug Maker 🔥專欄: STL || C 目錄 前言🌈關于string類🌈string類的成員函數🔥默認成員函數string類對象的構造(constructor)string類對象的析構string類對象的賦值運算符…

NPOI生成word浮動圖標

1、NPOI版本2.7.0, net框架4.8 2、安裝OpenXMLSDKToolV25.msi 3、先創建一個word文檔,并設置圖片為浮于文字之上 4、OpenXML顯示的結果 5、實際代碼如下: public class GenerateWordDemo {public GenerateWordDemo(){}//https://blog.fileformat.co…

js由那三部分組成

JavaScript 主要由三部分組成:ECMAScript、DOM(文檔對象模型)和 BOM(瀏覽器對象模型)。 1、ECMAScript ECMAScript 是 JavaScript 的核心,描述了語言的基本語法(變量、函數、條件語句、循環、…

前端筆記-day03

文章目錄 01-初始CSS02-CSS引入方式03-標簽選擇器04-類選擇器05-id選擇器06-通配符選擇器07-畫盒子08-字體大小09-文字粗細10-字體傾斜11-行高12-行高垂直居中13-字體族14-font復合屬性15-文本縮進16-文本對齊方式17-圖片對齊方式18-文本修飾線19-文字顏色20-調試工具21-綜合案…

Dual Aggregation Transformer for Image Super-Resolution論文總結

題目:Dual Aggregation Transformer(雙聚合Transformer) for Image Super-Resolution(圖像超分辨) 論文(ICCV):Chen_Dual_Aggregation_Transformer_for_Image_Super-Resolution_ICCV…

IM 是什么?

在當今數字化的時代,即時通訊(IM)已經滲透到人們的日常生活和企業的工作環境中。IM技術的快速i發展為人們提供了一種高效、便捷的溝通方式,不僅推動了社會的信息化進程,也提升了企業的協同效率和競爭力。 作為企業級I…

【GD32】01-GPIO通用輸入輸出

GD32 閑話說在前頭 這里又開一個系列啦。 原因就是之前買了立創開發板的9.9的GD32E230C8T6的板子,買都買了就跟著立創開發板學習一下(屬于是一次性支持了兩個國產品牌了,立創和兆易創新)。并且我還買了GD32F407VET6的板子&…

資金流分析下的企業供貨關系強度模型

圖技術 利用neo4j、networkx、dgl、python做圖分析挖掘 【1】最短路徑算法dijkstra 【2】基于networkx的隱性集團關系識別模型 【3】基于Neo4j的擔保社群型態分析挖掘 【4】基于python求有向無環圖中target到其他節點全路徑 【5】有向圖中任意兩點的路徑 【6】圖基礎入門 【7】…

項目管理中控制質量的工具與技術

項目管理中控制質量的工具與技術 控制質量的工具與技術包括多種方法,旨在確保產品或服務達到既定的質量標準。關于具體的工具格式和樣式,以下是一些示例: 統計技術: 這是一種將質量控制要素的數據轉化為實際控制手段的技術。通…

Visual Studio和Visual Studio Code適用于哪些編程語言

Visual Studio和Visual Studio Code都適用于多種編程語言,它們的適用編程語言如下: Visual Studio適用于: C#Visual Basic .NETF#CJavaScriptTypeScriptPythonHTML/CSSJava(通過插件支持) Visual Studio Code適用于…

Jtti:哪些方法可以降低美國CN2服務器的延遲?

降低美國CN2服務器的延遲可以采取多種方法,以下是一些常用的方法: 1.選擇優質的網絡提供商和服務商:選擇具有高質量網絡和優質服務的網絡提供商和服務商是降低延遲的關鍵。確保您選擇的網絡提供商具有可靠的基礎設施和優質的網絡連接&#xf…

C++:關于圓形魚眼半全景圖轉為等距圓柱投影圖

C:空間坐標映射到球面坐標/全景圖_如何將球體坐標映射到球面uv-CSDN博客 C:關于360全景圖像和立方體6面全景圖像的相互轉換_彩色全景拆解正方體6個面-CSDN博客 之前記錄了立方體和360全景之間的轉換,這次記錄下魚眼圖與360全景圖之間的轉換…

C++ STL的鎖介紹

在 C Standard Template Library (STL) 中&#xff0c;有幾個鎖的實現&#xff0c;這些都位于 <mutex> 頭文件。以下是一些常見的鎖及其功能&#xff1a; std::mutex&#xff1a;最基本的互斥鎖&#xff0c;不可遞歸使用。該鎖提供了獨占的非公平鎖定能力。 std::mutex…

處理瀏覽器緩存問題

處理瀏覽器緩存問題 main.js router.onError((error) > {hasRefreshed false;console.log("異常" error.message);let ind0 error.message.indexOf(Loading chunk chunk-)let ind2 error.message.indexOf(failed.)if(ind0 ! -1 && ind2 !-1){console.…

spring-boot-starter-validation校驗框架

介紹 Spring Boot Starter Validation是一個Spring Boot模塊&#xff0c;用于簡化應用程序中的驗證功能。它包含以下依賴&#xff1a; Hibernate Validator&#xff1a;Hibernate Validator是JavaBean Validation&#xff08;JSR 380&#xff09;規范的參考實現&#xff0c;提…

信創應用軟件之辦公流版簽

信創應用軟件之辦公流版簽 文章目錄 信創應用軟件之辦公流版簽概述流式文件版式文件電子簽章廠商金山辦公永中-永中Office中標-中標普華Office福昕科技e簽寶法大大 概述 辦公流版簽軟件主要包括辦公中常用到的流式軟件、版式軟件以及電子簽章。 版式文件和流式文件都是文書類…

軟件體系結構總結

文章目錄 一、軟件體系結構概述1.1 基本概念1.1.1 背景1.1.2 定義1.1.3 系統1.1.3.1 定義1.1.3.2 特性1.1.3.3 系統的體系結構 1.1.4 軟件設計的層次性1.1.5 體系結構的類別&#xff08;類型&#xff09;1.1.6 重要性&#xff08;意義&#xff09; 1.2 模塊及其設計1.2.1 定義1…

HTTP超時時間設置

在進行超時時間設置之前我們需要了解一次http請求經歷的過程 瀏覽器進行DNS域名解析&#xff0c;得到對應的IP地址根據這個IP&#xff0c;找到對應的服務器建立連接&#xff08;三次握手&#xff09;建立TCP連接后發起HTTP請求&#xff08;一個完整的http請求報文&#xff09;服…