資訊專(zhuān)欄INFORMATION COLUMN
摘要：嚴(yán)格模式下有自己的作用于，直接接受是獲取不到值的，需要掛載再全局下面方式二標(biāo)簽直接插入標(biāo)簽，同時(shí)把字符串拼接一個(gè)接受的變量進(jìn)去。方式三標(biāo)簽字符串通過(guò)可以轉(zhuǎn)二進(jìn)制，再通過(guò)轉(zhuǎn)。
經(jīng)常我們會(huì)遇到后端返回的數(shù)據(jù)JSON的格式不正常，會(huì)出現(xiàn)key沒(méi)有引號(hào)的情況，如：
var str = "{a: 1, b: 2}";
當(dāng)然，這種情況可以讓后端修改返回?cái)?shù)據(jù)格式，但是往往再面試或則其他時(shí)候有可能會(huì)問(wèn)道：如何去解析這種類(lèi)型的字符串？
畢竟分類(lèi)是在奇技淫巧中，那常規(guī)的eval和new Function這里就不多說(shuō)。
方式一：[native code].constructor使用JS內(nèi)置對(duì)象的任意原型方法，如：Object.prototype.toString，Array.prototype.push，RegExp.prototype.test等等，其實(shí)這里的實(shí)質(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; // 嚴(yán)格模式下eval有自己的作用于，直接var接受JSON是獲取不到值的，需要掛載再window全局下面
Object.prototype.toString.constructor(json)(); // 1
console.log(result); // {a: 1, b: 2}
方式二：script標(biāo)簽 + innerHTML
直接插入script標(biāo)簽，同時(shí)把字符串拼接一個(gè)接受的變量innerHTML進(jìn)去。
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標(biāo)簽 + src
字符串通過(guò)blob可以轉(zhuǎn)二進(jìn)制，再通過(guò)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ù)，同時(shí)有blob轉(zhuǎn)的url，需要在有服務(wù)器的條件下才能測(cè)試，直接打開(kāi)一個(gè)本地html文件無(wú)法測(cè)試，需要測(cè)試的可以直接打開(kāi)一個(gè)百度什么的網(wǎng)站，F(xiàn)12在控制臺(tái)測(cè)試。
方式四：Worker同上一條一樣創(chuàng)建url，然后通過(guò)Worker運(yùn)行，但是這里接受數(shù)據(jù)就只能通過(guò)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：同上，需要再服務(wù)器的條件下測(cè)試。
方式五：location.href經(jīng)常我們?cè)賹?xiě)點(diǎn)擊事件的時(shí)候會(huì)這樣寫(xiě)：
同時(shí)隨便打開(kāi)一個(gè)頁(yè)面，再地址欄輸入：javascript:alert(1)，可以看到，代碼執(zhí)行了，并且頁(yè)面并沒(méi)有跳轉(zhuǎn)變化，SO，我們可以利用這一點(diǎn)。
PS：復(fù)制到地址欄默認(rèn)會(huì)去掉javascript:，需要手動(dòng)補(bǔ)上。
var json = "{a: 1, b: 2}";
location.href = "javascript:var result = " + json;
setTimeout(function(){
console.log(result); // {a: 1, b: 2}
}, 0);
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/91754.html
摘要：由很多令人興奮的功能，如對(duì)象的解析與剩余，異步迭代器，方法和更好的正則表達(dá)式支持。迭代可以是任何遵循迭代器協(xié)議的對(duì)象。迭代器方法應(yīng)該返回一個(gè)具有方法的對(duì)象。 原文：TC39, ECMAScript, and the Future of JavaScript作者：Nicolás Bevacqua 譯者序 很榮幸能夠和 Nicolás Bevacqua 同臺(tái)分享。Nicolás Beva...
摘要：使用了一個(gè)事件驅(qū)動(dòng)非阻塞式的模型，使其輕量又高效。依賴(lài)就近，延遲執(zhí)行。使用錯(cuò)誤處理中間件默認(rèn)情況下，給出的響應(yīng)是狀態(tài)碼，包含文本以及錯(cuò)誤自身詳細(xì)信息的響應(yīng)主體。 Node.js是什么 官網(wǎng)定義： Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。 Node.js 使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式I/O 的模型，使其輕量又高效。 非阻塞 I/O 模型（...
摘要：同源策略指的是當(dāng)前頁(yè)面和目標(biāo)協(xié)議域名和端口均相同。發(fā)出請(qǐng)求的頁(yè)面所在域。響應(yīng)的頭部信息在后端處理，不在此處講解。該事件會(huì)在數(shù)據(jù)接收期間不斷觸發(fā)，但間隔不確定。服務(wù)器確認(rèn)允許之后，才發(fā)起實(shí)際的請(qǐng)求。 ajax作為前端開(kāi)發(fā)必需的基礎(chǔ)能力之一，你可能會(huì)使用它，但并不一定懂得其原理，以及更深入的服務(wù)器通信相關(guān)的知識(shí)。在最近兩天的整理過(guò)程中，看了大量的文章，發(fā)現(xiàn)自己的后端能力已經(jīng)限制自己在網(wǎng)絡(luò)通...
格式化輸出: 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...
閱讀 994·2023-04-25 15:42
閱讀 3584·2021-11-02 14:38
閱讀 2886·2021-09-30 09:48
閱讀 1420·2021-09-23 11:22
閱讀 3379·2021-09-06 15:02
閱讀 3186·2021-09-04 16:41
閱讀 607·2021-09-02 15:41
閱讀 2012·2021-08-26 14:13
