【奇技淫巧】异常JSON字符串解析问题

source 发布于2019-08-22 11:05 / 1291人阅读

摘要：严格模式下有自己的作用于，直接接受是获取不到值的，需要挂载再全局下面方式二标签直接插入标签，同时把字符串拼接一个接受的变量进去。方式三标签字符串通过可以转二进制，再通过转。

经常我们会遇到后端返回的数据JSON的格式不正常，会出现key没有引号的情况，如：

var str = "{a: 1, b: 2}";

当然，这种情况可以让后端修改返回数据格式，但是往往再面试或则其他时候有可能会问道：如何去解析这种类型的字符串？

毕竟分类是在奇技淫巧中，那常规的eval和new Function这里就不多说。

方式一：[native code].constructor

使用JS内置对象的任意原型方法，如：Object.prototype.toString，Array.prototype.push，RegExp.prototype.test等等，其实这里的实质原理还是new Function。

Object.prototype.toString.constructor === Function // true
Array.prototype.push.constructor === Function // true
RegExp.prototype.test.constructor === Function // true

var json = "{a: 1, b: 2}";
json = "window.result = " + json; // 严格模式下eval有自己的作用于，直接var接受JSON是获取不到值的，需要挂载再window全局下面
Object.prototype.toString.constructor(json)(); // 1
console.log(result); // {a: 1, b: 2}

方式二：script标签 + innerHTML

直接插入script标签，同时把字符串拼接一个接受的变量innerHTML进去。

var json = "{a: 1, b: 2}";
var script = document.createElement("script");
script.innerHTML = "var result = " + json;
document.body.appendChild(script);
console.log(result); // {a: 1, b: 2}

方式三：script标签 + src

字符串通过blob可以转二进制，再通过window.URL.createObjectURL转url。

var json = "{a: 1, b: 2}";
var blob = new Blob(["var result = " + json]);
var src = window.URL.createObjectURL(blob);
var script = document.createElement("script");
script.src = src;
document.body.appendChild(script);
script.onload = function(){
  console.log(result); // {a: 1, b: 2}
}

PS：由于是src加载的，需要再onload才能获取到数据，同时有blob转的url，需要在有服务器的条件下才能测试，直接打开一个本地html文件无法测试，需要测试的可以直接打开一个百度什么的网站，F12在控制台测试。

方式四：Worker

同上一条一样创建url，然后通过Worker运行，但是这里接受数据就只能通过postMessage和onmessage：

var json = "{a: 1, b: 2}";
var blob = new Blob(["postMessage(" + json + ")"]);
var src = window.URL.createObjectURL(blob);
var worker = new Worker(src);
worker.onmessage = function(e){
  console.log(e.data); // {a: 1, b: 2}
}

PS：同上，需要再服务器的条件下测试。

方式五：location.href

经常我们再写点击事件的时候会这样写：

同时随便打开一个页面，再地址栏输入：javascript:alert(1)，可以看到，代码执行了，并且页面并没有跳转变化，SO，我们可以利用这一点。

PS：复制到地址栏默认会去掉javascript:，需要手动补上。

var json = "{a: 1, b: 2}";
location.href = "javascript:var result = " + json;
setTimeout(function(){
  console.log(result); // {a: 1, b: 2}
}, 0);

GPU云服务器云服务器解析json字符串怎么解析json字符串字符串显示异常视频解析异常

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91754.html

奇技淫巧第二期

摘要：因为产生的顺序是先比较第一位，再比较第二位，并且没有很好的解决办法。这种语法的限制是，需要保证异常从属与异常。两个异常都将显示。这个系利的初衷是回顾琐碎知识点，但...

Rocture 2021-09-26 09:55 评论0 收藏0
[译] TC39，ECMAScript 和 JavaScript 的未来（Part 1）

摘要：由很多令人兴奋的功能，如对象的解析与剩余，异步迭代器，方法和更好的正则表达式支持。迭代可以是任何遵循迭代器协议的对象。迭代器方法应该返回一个具有方法的对象。原文：TC39, ECMAScript, and the Future of JavaScript作者：Nicolás Bevacqua 译者序很荣幸能够和 Nicolás Bevacqua 同台分享。Nicolás Beva...

ziwenxie 2019-08-20 17:40 评论0 收藏0
Node.js技术总结

摘要：使用了一个事件驱动非阻塞式的模型，使其轻量又高效。依赖就近，延迟执行。使用错误处理中间件默认情况下，给出的响应是状态码，包含文本以及错误自身详细信息的响应主体。 Node.js是什么官网定义： Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式I/O 的模型，使其轻量又高效。非阻塞 I/O 模型（...

SKYZACK 2019-08-23 12:35 评论0 收藏0
AJAX原理与CORS跨域

摘要：同源策略指的是当前页面和目标协议域名和端口均相同。发出请求的页面所在域。响应的头部信息在后端处理，不在此处讲解。该事件会在数据接收期间不断触发，但间隔不确定。服务器确认允许之后，才发起实际的请求。 ajax作为前端开发必需的基础能力之一，你可能会使用它，但并不一定懂得其原理，以及更深入的服务器通信相关的知识。在最近两天的整理过程中，看了大量的文章，发现自己的后端能力已经限制自己在网络通...

jeyhan 2019-08-21 17:01 评论0 收藏0
JSON.stringify() 的奇技淫巧

格式化输出: let obj = { a: a1, b: b1 }; JSON.stringify(obj, null, 2); //{ a: a1, b: b1 } 巧用深拷贝: let obj = { a: a1, b: b1 }; let copy = JSON.stringify(obj); let copyObj = JSON.parse(cop...

AZmake 2019-08-20 18:21 评论0 收藏0