ie中如何使用json对象

在IE浏览器中操作JSON对象：兼容性指南与实用技巧

在现代Web开发中，JSON（JavaScript Object Notation）已成为数据交换的事实标准，它轻量、易读，并且能被JavaScript原生支持，对于仍在使用旧版Internet Explorer（IE）浏览器（尤其是IE8及以下版本）的开发者来说，处理JSON对象并非一件易事，这些版本的浏览器没有内置对JSON对象的支持，直接使用JSON.parse()或JSON.stringify()会导致脚本错误。

本文将详细讲解如何在IE浏览器中安全、有效地使用JSON对象,涵盖从引入兼容库到手动实现的全套方案。

为什么在IE中使用JSON会遇到问题？

问题的根源在于JavaScript标准的发展历程。

IE8及以下版本：这些浏览器发布于ECMAScript 5（ES5）标准全面普及之前，ES5标准首次将JSON对象及其核心方法JSON.parse()（用于解析JSON字符串）和JSON.stringify()（用于将对象转换为JSON字符串）纳入规范，在IE8及以下版本中，window.JSON这个对象是未定义的。
IE9及更高版本：IE9开始完全支持ES5标准，原生内置了JSON对象,可以像在现代浏览器中一样直接使用它。

当我们谈论“在IE中使用JSON”时，我们主要需要解决的是IE8及以下版本的兼容性问题。

解决方案一：使用官方的JSON库（推荐）

最简单、最安全、也是最推荐的解决方案是引入由Douglas Crockford（JSON格式的创造者）编写的官方json2.js库，这个库会检测当前环境是否存在原生的JSON对象，如果存在，它直接使用原生对象；如果不存在（如在旧版IE中）,它会用自己的实现来填补这个空白。

使用步骤：

获取库文件：您可以从GitHub等代码托管平台获取json2.js文件,一个常用的CDN链接是：
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.min.js"></script>
```

在HTML中引入：将<script>标签放置在您的JavaScript代码之前。

<!DOCTYPE html>
<html>
<head>
    <title>IE JSON 示例</title>
    <!-- 1. 首先引入 json2.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.min.js"></script>
</head>
<body>
    <script>
        // 2. 现在您可以安全地使用 JSON 对象了
        // 即使在IE8及以下版本中，下面的代码也能正常工作
        var jsonString = '{"name": "张三", "age": 30, "city": "北京"}';
        var jsonObj = JSON.parse(jsonString);
        console.log(jsonObj.name); // 输出: 张三
        console.log(jsonObj.age);  // 输出: 30
        var newJsonString = JSON.stringify(jsonObj);
        console.log(newJsonString); // 输出: {"name":"张三","age":30,"city":"北京"}
    </script>
</body>
</html>

优点：

一劳永逸：引入后,您的代码无需任何修改即可在所有浏览器中运行。
标准实现：由权威人士编写，行为与原生JSON对象完全一致。
零侵入性：只在需要时才工作,不会污染全局命名空间。

解决方案二：手动实现（不推荐，仅用于学习）

在某些极端情况下（例如项目环境极其受限，无法引入外部库），您可以选择手动实现JSON.parse和JSON.stringify，这种方法代码量较大，且难以覆盖所有边缘情况，仅作为了解原理的参考，不推荐在生产环境中使用。

手动实现 JSON.stringify()

这个方法相对复杂，需要处理循环引用、各种数据类型等,一个简化版的示例如下：

if (typeof JSON === 'undefined') {
    JSON = {};
}
JSON.stringify = function(obj) {
    if (obj === null) return 'null';
    if (typeof obj === 'string') return '"' + obj.replace(/"/g, '\\"') + '"';
    if (typeof obj === 'number' || typeof obj === 'boolean') return String(obj);
    if (Array.isArray(obj)) {
        var arr = [];
        for (var i = 0; i < obj.length; i++) {
            arr.push(JSON.stringify(obj[i]));
        }
        return '[' + arr.join(',') + ']';
    }
    if (typeof obj === 'object') {
        var keys = [];
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                keys.push('"' + key + '":' + JSON.stringify(obj[key]));
            }
        }
        return '{' + keys.join(',') + '}';
    }
    return '{}';
};

手动实现 JSON.parse()

这个方法通常依赖于eval()函数，但直接使用eval()有安全风险（会执行任意代码），一个更安全的做法是先用一个函数包装JSON字符串,确保它只返回一个字面量对象。

if (typeof JSON === 'undefined') {
    JSON = {};
}
JSON.parse = function(text) {
    // 使用一个函数包装，避免直接使用 eval 的风险
    // 注意：这仍然不是100%安全，但对于受信任的内部数据是可行的
    return (new Function('return ' + text))();
};

警告：手动实现版本功能有限，可能无法正确处理复杂的JSON结构、转义字符或语法错误，且存在安全隐患。强烈建议优先选择方案一。

最佳实践与总结

优先检测，优雅降级：在编写任何可能涉及JSON的代码时，养成先检测JSON对象是否存在的习惯。

if (!window.JSON) {
    // 在这里加载 json2.js 或给出用户提示
    console.warn('您的浏览器版本过低，请升级或使用现代浏览器以获得最佳体验。');
    // 动态加载脚本
    var script = document.createElement('script');
    script.src = 'json2.js';
    document.head.appendChild(script);
}

首选官方库：对于任何需要兼容旧版IE的项目，将json2.js作为项目的基础依赖之一，这是最可靠、最省心的做法。
逐步淘汰旧版IE：考虑到IE的市场份额已极小，新项目应明确不再支持IE8及以下版本，这样可以简化代码，使用更现代的语言特性，提升开发效率和用户体验，如果必须维护旧项目,则兼容性方案是必要的。
明确目标用户：在项目启动时，就应确定需要支持的浏览器范围，如果目标用户群体确定不使用旧版IE,那么完全可以忽略这些兼容性问题。