JSON.stringify(), JSON.parse(), 和 Object.keys(), join()

1. JSON.stringify()

JSON.stringify() 方法将一个 JavaScript 对象或者值(包括数组或布尔值)转换为一个 JSON 字符串。

代码示例‌:

const person = { name: "John", age: 30, city: "New York" }; 
const jsonString = JSON.stringify(person); 
console.log(jsonString); 
// 输出: {"name":"John","age":30,"city":"New York"}

可选参数‌:

  • replacer‌:可以是一个函数或数组,用于选择性地替换值。
  • space‌:用于添加缩进、空格和换行符,以便输出可读性更好。

带参数的示例‌:

const jsonStringPretty = JSON.stringify(person, null, 2); 
console.log(jsonStringPretty);
 // 输出: // { // "name": "John", // "age": 30, // "city": "New York" // }

2. JSON.parse()

JSON.parse() 方法将一个 JSON 字符串转换为 JavaScript 对象。

代码示例‌:

const jsonString = '{"name":"John","age":30,"city":"New York"}';
 const person = JSON.parse(jsonString); 
console.log(person); 
// 输出: { name: 'John', age: 30, city: 'New York' }
 console.log(person.name); // 输出: John

可选参数‌:

  • reviver‌:可以是一个函数,用于在解析过程中对结果进行逐项处理。

带参数的示例‌:

 
const jsonString = '{"name":"John","age":"30","city":"New York"}'; 
// 注意 age 是字符串 
const person = JSON.parse(jsonString, (key, value) => 
{ if (key === "age")
 { return parseInt(value); 
// 将 age 转换为数字 
} return value; });
 console.log(person); 
// 输出: { name: 'John', age: 30, city: 'New York' } 
console.log(typeof person.age);
// 输出: number

3. Object.keys()

Object.keys() 方法会返回一个包含一个给定对象自身的所有可枚举属性键的数组,数组中属性键的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致(两者的主要区别是 for...in 循环还会枚举其原型链上的属性)。

代码示例‌:

 
const person = { name: "John", age: 30, city: "New York" };
 const keys = Object.keys(person); console.log(keys);
 // 输出: ['name', 'age', 'city']

结合使用‌:

我们可以结合使用这些方法来处理对象。

综合示例‌:

const person = { name: "John", age: 30, city: "New York" }; 
// 将对象转换为 JSON 字符串
 const jsonString = JSON.stringify(person);
 console.log(jsonString); 
// 输出: {"name":"John","age":30,"city":"New York"} 
// 将 JSON 字符串解析回对象
 const parsedPerson = JSON.parse(jsonString); 
console.log(parsedPerson); 
// 输出: { name: 'John', age: 30, city: 'New York' } 
// 获取对象的所有键 
const keys = Object.keys(parsedPerson); 
console.log(keys); 
// 输出: ['name', 'age', 'city']

通过这些示例,希望你能更好地理解 JSON.stringify()JSON.parse(), 和 Object.keys() 的用法。

4. join()函数用法

join() 是 Python 中字符串类型(str)的一个方法,用于将序列中的所有元素(通常是字符串)以指定的字符连接生成一个新的字符串。

返回一个由 iterable 中所有元素通过 separator 连接而成的新字符串。

  1. 将列表中的字符串连接成一个新的字符串‌:
const array = [1, 2, 3];
const result = array.join();
console.log(result); // 输出: "1,2,3"

### 解决 `window.showModalDialog` 参数传递至 Google Chrome 的兼容性 为了使带有参数的 `window.showModalDialog()` 方法能够在 Google Chrome 中正常工作,推荐采用 `window.open()` 结合特定策略来模拟原生功能[^1]。 #### 使用 `window.open()` 实现参数传递 通过 URL 查询字符串的方式向新开窗口传递数据是一个常见做法: ```javascript // 构建查询字符串并打开新窗口 var params = { param1: "value1", param2: "value2" }; var queryString = Object.keys(params).map(function(key){ return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]); }).join('&'); var newWindow = window.open('target.html?' + queryString, '_blank', 'width=800,height=600'); ``` #### 获取传递过来的数据 在目标页面中读取这些参数可以通过解析 location.search 来完成: ```javascript function getQueryParams(qs) { qs = qs.split("+").join(" "); var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g; while (tokens = re.exec(qs)) { params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]); } return params; } var queryParams = getQueryParams(window.location.href); console.log(queryParams); // 输出 {param1:"value1", param2:"value2"} ``` 这种方法不仅适用于 Chrome,而且对于其他现代浏览器也同样有效。此外,还可以考虑使用 postMessage API 进行跨文档通信,这允许父窗口与子窗口之间安全地交换消息[^3]。 #### 利用 PostMessage API 改善交互体验 PostMessage 提供了一种更灵活的方式来处理不同源之间的信息交流: ```javascript // 主页发送消息给弹出窗口 newWindow.postMessage(JSON.stringify({action:'init', data:params}), '*'); // 子页面监听来自主页的消息事件 window.addEventListener('message', function(event){ try{ var messageData = JSON.parse(event.data); switch(messageData.action){ case 'init': console.log('Received initialization parameters:', messageData.data); break; default: throw Error('Unknown action.'); } }catch(e){ console.error('Error processing received message.', e.message); } }); ``` 上述方法能够很好地解决 `window.showModalDialog` 在非 IE 浏览器中的兼容性参数传输问题,同时也保持了良好的用户体验安全性[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值