JavaScript JSON.stringify() 详解与实例

0 下载量 144 浏览量 更新于2024-08-29 收藏 155KB PDF 举报
"JSON.stringify 语法实例讲解" JSON.stringify() 是 JavaScript 中用于将 JavaScript 对象转换成 JSON 字符串的方法。这个函数在处理数据交换、存储或传输时非常有用,因为 JSON 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。 在 JavaScript 中,当你需要将对象序列化成 JSON 格式以便在网络上传输或保存到文件中时,JSON.stringify() 就派上了用场。例如,你有一个用户对象,包含姓名、年龄等属性,你可以通过这个方法将其转换为字符串: ```javascript var user = { name: "John Doe", age: 30, email: "john.doe@example.com" }; var jsonString = JSON.stringify(user); ``` `jsonString` 现在将包含如下内容:"{"name":"John Doe","age":30,"email":"john.doe@example.com"}",这是一个标准的 JSON 字符串。 JSON.stringify() 的语法如下: ```javascript JSON.stringify(value[, replacer] [, space]) ``` - `value`:必填参数,需要被序列化的值,可以是任何 JavaScript 值(对象、数组、基本类型等)。 - `replacer`:可选参数,可以是一个函数或者一个数组。当它是一个函数时,序列化过程中每个键值对都会通过这个函数处理。当它是一个数组时,只序列化数组中指定的键名对应的值。 - `space`:可选参数,用于美化输出的 JSON 字符串,可以是一个数字或字符串。数字代表缩进的空格数,字符串则会用作缩进。 关于 `replacer` 参数,有以下两种情况: 1. 函数:在序列化过程中,该函数会被调用,其参数是当前处理的键和值。函数可以返回新的键值对,或者返回 undefined 来忽略该属性。 2. 数组:只有数组中列出的键会被包含在序列化的 JSON 中。 `space` 参数提供了控制输出格式的方式: - 不提供或提供数字时,根据数字决定缩进的空格数。 - 提供字符串时,该字符串会被用作每个级别的缩进。 举例说明: ```javascript var obj = { name: "John", age: 30, details: { city: "New York" } }; var str = JSON.stringify(obj, null, 2); console.log(str); ``` 这段代码会在控制台输出一个缩进的 JSON 字符串,便于阅读。 需要注意的是,JSON.stringify() 不能处理函数、循环引用的对象、日期对象等非基本类型和非 JSON 可表示的数据。此外,对于 IE8 及以下版本的浏览器,由于不支持 ECMAScript 5,需要引入 JSON 库来实现 JSON.stringify() 的功能。在现代浏览器中,这个方法已经被广泛支持。
2023-05-25 上传

优化精简这段代码// 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' }; } })

2023-05-28 上传