大家好，今天我要给你们普及一下怎么玩转JS里的JSON！现在前端开发很火热滴说，尤其是JavaScript可是超强悍，连客户端的事儿它也可以搞定。但要是说到传个数据之类的话题，就必须聊聊json。实话告诉你，用JS处理JSON超级容易的，接下来就让我给大伙儿详细说说该咋做！

获取 JSON 字符串

首先，咱们得了解啥叫JSON才行。在JavaScript里，咱们能用好几种办法找到它们，比如遇到网页给咱发来的，那就赶紧用Ajax；或者干脆看看自己电脑里有木有；要是不小心接到了不是JSON的数据怎么办？别急，我们还能把它转换成JSON！

把 JSON 字符串转换为 JSON 对象

<pre class='brush:javascript;toolbar:false;’>// 通过Ajax获取JSON字符串
const xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘json/data.json’, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status ===200) {
const jsonStr = xhr.responseText;
console.log(jsonStr);
}
}
xhr.send();
// 从JS对象中获取JSON字符串
const obj = {name: ‘Alice’, age: 18};
const jsonStr = JSON.stringify(obj);
console.log(jsonStr);
// 从本地文件读取JSON字符串
fetch(‘data.json’)
.then(response => response.json())
.then(data => {
const jsonStr = JSON.stringify(data);
console.log(jsonStr);
})
.catch(err => {
console.log(‘Error: ‘, err);
})

搞定那个JSON字符串，那到底啥意思？不明白的话咋用嘞？得亏我们JavaScript里面还有个神奇的工具叫JSON.parse()，它能帮你轻松搞定，立刻变身成实用无比的JSON对象！有点复杂，其实，就这么回事：

获取 JSON 对象中的值

const jsonStr = '{"name": "Alice", "age": 18}';
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj); // 输出：{name: "Alice", age: 18}

想读取JSON里的数据呀?简直小菜一碟！只需记住星星点点的点（）和方阵似的中括号（[]）就妥。复杂嵌套那玩意儿完全不在话下哦～不信你看：

实战应用：获取京东商品信息

搞定了基础知识，下面我们来实际应用，深入研究怎么玩得开心。那咱们该咋办？网上搜个京东的商品信息瞧瞧！操作特简单：

const jsonObj = {name: 'Alice', age: 18, address: {city: 'Shanghai', street: 'Nanjing Road'}};
// 通过点运算符访问JSON对象属性
console.log(jsonObj.name); // 输出：'Alice'
// 通过方括号运算符访问JSON对象属性
console.log(jsonObj['age']); // 输出：18
// 访问嵌套JSON对象中的属性
console.log(jsonObj.address.city); // 输出：'Shanghai'
console.log(jsonObj['address']['street']); // 输出：'Nanjing Road'

首先，得搞到商品页面的 HTML 代码；

让我们一起来看看怎样用Javascript搞定京东产品里那些复杂的HTML代码！

快点！咱们赶紧研究 HTML 代码，看看里面究竟啥样儿。

这产品数据整得不赖，咱直接弄成JSON格式得了呗！

function getHtml(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status >=200 && xhr.status  {
  console.log(html)
})
.catch(err => {
  console.log('Error: ', err);
})

最后，可以通过前端页面展示这些商品信息JSON对象。

你是不是想要学习JS？别忘了先学JSON这个东西在前端可是非常重要的！今天我会手把手教你怎么操作JSON对象，以后碰到问题也不怕！

function parseHtml(html) {
  const regName = /
s*
(.*?)
/gi;
  const regPrice = /s*¥/gi;
  const regImg = / {
  const data = parseHtml(html);
  console.log(data);
})
.catch(err => {
  console.log('Error: ', err);
})

原文链接：https://www.icz.com/technicalinformation/web/2024/03/12319.html，转载请注明出处~~~