JSON.stringify详解:对象转JSON字符串及其用法示例

下载需积分: 38 | DOCX格式 | 152KB | 更新于2024-09-10 | 192 浏览量 | 2 下载量 举报
收藏
JSON.stringify 是JavaScript中的一个重要内置函数,用于将JavaScript对象或值序列化为JSON(JavaScript Object Notation)字符串。这个功能在Web开发中尤其有用,例如在前后端通信、存储和持久化数据时,能方便地将复杂的数据结构转化为易于传输的文本格式。 JSON.stringify 的语法如下: ```javascript JSON.stringify(value[, replacer][, space]) ``` - `value`:这是必填参数,指定要序列化的对象或值。它可以是任何JavaScript数据类型,如对象、数组、基本数据类型等。 - `replacer`:这是一个可选参数,用于自定义序列化过程。它有两种形式: - **方法**:提供一个函数,该函数会在每个属性被序列化前被调用,可以根据需要决定是否包含该属性及其值。函数接收两个参数:属性名和属性值。 - **数组**:提供一个数组,其中的元素是键名(如果是对象),或者是键值对数组,用于筛选和修改序列化的结果。 - `space`:同样可选,用于控制输出的格式化。它有以下几种用法: - **省略**:默认情况下,输出没有缩进,直接显示字符串。 - **数字**:指定一个整数,表示每个层级的缩进数量,最大不超过10个空格。 - **转义字符**:如 "\t" 表示制表符,会在输出时插入对应的转义序列,实现换行或特定字符的显示。 - **字符串**:作为分隔符的字符串,用于美化输出,例如逗号、空格或制表符。 例如,下面是一个简单的使用场景: ```javascript // 创建一个对象 var student = { name: "Lanny", age: "25", location: "China" }; // 序列化为JSON字符串 var jsonStr = JSON.stringify(student); console.log(jsonStr); // 输出:{"name":"Lanny","age":"25","location":"China"} // 使用 replacer 和 space 参数 var replacerFn = function(key, value) { if (key === 'password') return '****'; // 隐藏密码字段 }; var formattedJson = JSON.stringify(student, replacerFn, 2); // 2表示两层缩进 console.log(formattedJson); ``` 在这个例子中,`replacerFn` 会替换掉对象中的 'password' 属性,输出的 JSON 字符串将不包含该属性。`space` 参数设置为2,意味着每个层级会有两个空格的缩进,使得结果更易读。 JSON.stringify 是JavaScript开发者必备的工具,它能够将复杂的数据结构转换成轻量级的JSON格式,便于在网络上传输和存储,同时也提供了丰富的选项来定制序列化过程。

相关推荐

filetype
107 浏览量
filetype

优化精简这段代码// pages/Stores/Stores.js // 请求封装 import request from '../../utils/request' // 高德地图 import amapFile from '../../libs/amap-wx.130' // 地图实例 var myAmapFun Page({ data: { map: [] }, onLoad(options) { console.log(options) const that = this wx.createWACode({ path: '/pages/index/index', width: 430, scene: 'custom_value' }).then(res => { // 在页面中显示生成的小程序码 this.setData({ qrcodeUrl: res.path }); }).catch(err => { console.error(err); }); myAmapFun = new amapFile.AMapWX({ key: '5409c5fd8a9d2c7dfecef1faa8cd3ffc' }); wx.getLocation({ type: 'wgs84', isHighAccuracy: true, success(res) { that.setData({ latitude: res.latitude, longitude: res.longitude, speed: res.speed, accuracy: res.accuracy }) request( '/stores/stores', {}, 'POST').then(res => { that.setData({ map: res.data, }) that.calculateDistance() }) } }) }, // 计算附近门店距离 calculateDistance() { const that = this; const mapVar = JSON.parse(JSON.stringify(that.data.map)); const promises = []; mapVar.forEach(item => { const origin = that.data.longitude + ',' + that.data.latitude; const destination = item.longitude + ',' + item.latitude; const promise = new Promise((resolve, reject) => { myAmapFun.getDrivingRoute({ origin: origin, destination: destination, success: function (data) { item.distance = Math.round(data.paths[0].distance / 100) / 10; resolve(); }, fail: function (err) { reject(err); } }); }); promises.push(promise); }); Promise.all(promises).then(() => { that.setData({ map: mapVar }); console.log(that.data.map) }).catch(err => { console.error(err); }); }, onShareAppMessage() { return { title: '分享标题', path: '/pages/index/index?custom_param=custom_value' }; } })

145 浏览量