【奇技淫巧】異常JSON字符串解析問題

source 發(fā)布于2019-08-22 11:05 / 1294人閱讀

摘要：嚴格模式下有自己的作用于，直接接受是獲取不到值的，需要掛載再全局下面方式二標簽直接插入標簽，同時把字符串拼接一個接受的變量進去。方式三標簽字符串通過可以轉(zhuǎn)二進制，再通過轉(zhuǎn)。

經(jīng)常我們會遇到后端返回的數(shù)據(jù)JSON的格式不正常，會出現(xiàn)key沒有引號的情況，如：

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

當然，這種情況可以讓后端修改返回數(shù)據(jù)格式，但是往往再面試或則其他時候有可能會問道：如何去解析這種類型的字符串？

畢竟分類是在奇技淫巧中，那常規(guī)的eval和new Function這里就不多說。

方式一：[native code].constructor

使用JS內(nèi)置對象的任意原型方法，如：Object.prototype.toString，Array.prototype.push，RegExp.prototype.test等等，其實這里的實質(zhì)原理還是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可以轉(zhuǎn)二進制，再通過window.URL.createObjectURL轉(zhuǎn)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才能獲取到數(shù)據(jù)，同時有blob轉(zhuǎn)的url，需要在有服務器的條件下才能測試，直接打開一個本地html文件無法測試，需要測試的可以直接打開一個百度什么的網(wǎng)站，F(xiàn)12在控制臺測試。

方式四：Worker

同上一條一樣創(chuàng)建url，然后通過Worker運行，但是這里接受數(shù)據(jù)就只能通過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

經(jīng)常我們再寫點擊事件的時候會這樣寫：

同時隨便打開一個頁面，再地址欄輸入：javascript:alert(1)，可以看到，代碼執(zhí)行了，并且頁面并沒有跳轉(zhuǎn)變化，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字符串字符串顯示異常視頻解析異常

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91754.html

奇技淫巧第二期

摘要：因為產(chǎn)生的順序是先比較第一位，再比較第二位，并且沒有很好的解決辦法。這種語法的限制是，需要保證異常從屬與異常。兩個異常都將顯示。這個系利的初衷是回顧瑣碎知識點，但...

Rocture 2021-09-26 09:55 評論0 收藏0
[譯] TC39，ECMAScript 和 JavaScript 的未來（Part 1）

摘要：由很多令人興奮的功能，如對象的解析與剩余，異步迭代器，方法和更好的正則表達式支持。迭代可以是任何遵循迭代器協(xié)議的對象。迭代器方法應該返回一個具有方法的對象。原文：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技術總結(jié)

摘要：使用了一個事件驅(qū)動非阻塞式的模型，使其輕量又高效。依賴就近，延遲執(zhí)行。使用錯誤處理中間件默認情況下，給出的響應是狀態(tài)碼，包含文本以及錯誤自身詳細信息的響應主體。 Node.js是什么官網(wǎng)定義： Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境。 Node.js 使用了一個事件驅(qū)動、非阻塞式I/O 的模型，使其輕量又高效。非阻塞 I/O 模型（...

SKYZACK 2019-08-23 12:35 評論0 收藏0
AJAX原理與CORS跨域

摘要：同源策略指的是當前頁面和目標協(xié)議域名和端口均相同。發(fā)出請求的頁面所在域。響應的頭部信息在后端處理，不在此處講解。該事件會在數(shù)據(jù)接收期間不斷觸發(fā)，但間隔不確定。服務器確認允許之后，才發(fā)起實際的請求。 ajax作為前端開發(fā)必需的基礎能力之一，你可能會使用它，但并不一定懂得其原理，以及更深入的服務器通信相關的知識。在最近兩天的整理過程中，看了大量的文章，發(fā)現(xiàn)自己的后端能力已經(jīng)限制自己在網(wǎng)絡通...

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