快捷導(dǎo)航

簡(jiǎn)單了解JavaScript中的new?Function

更新時(shí)間：2022年09月21日 08:39:49 作者：陸榮濤

這篇文章主要介紹了簡(jiǎn)單了解JavaScript中的new?Function，文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

前言

JavaScript技術(shù)一直處于不斷發(fā)展壯大中，如果你是前端開(kāi)發(fā)人員或者JavaScript開(kāi)發(fā)工程師，那么，今天這個(gè)知識(shí)點(diǎn)，你有必要認(rèn)真了解一下，它就是“new Function”。

1、語(yǔ)法

語(yǔ)法如下：

let?func?=?new?Function?([arg1,?arg2,?…argN],?functionBody);

最后一個(gè)參數(shù)必須是函數(shù)體，其余參數(shù)作為傳遞給函數(shù)體的參數(shù)。

例如：

let?sum?=?new?Function('a',?'b',?'return?a?+?b');
console.log(sum(1,?2));?//?the?result?is?3

我們平時(shí)開(kāi)發(fā) JavaScript 或者 Node.js 的時(shí)候，沒(méi)有理由使用 new Function 構(gòu)造函數(shù)，因?yàn)椴恍枰苯邮褂煤瘮?shù)或者 () => {} 箭頭函數(shù)。

這是否意味著 new Function 語(yǔ)法是一個(gè)雞肋的功能？

千萬(wàn)不要這樣想！因?yàn)樗^對(duì)不是你想的那樣！

new Function 語(yǔ)法有一個(gè)特別強(qiáng)大的特性，使它在 JavaScript 中發(fā)揮著不可替代的作用。

有什么特點(diǎn)？也就是函數(shù)體的數(shù)據(jù)格式是字符串，真是不可思議！

不可替代的角色

這里有幾個(gè)例子來(lái)展示 new Function 語(yǔ)法的微妙之處。

01).無(wú)效的 JSON 對(duì)象字符串合法化

例如，有以下字符串：

let?str?=?`{?"id":?103,?name:?'yh',?'date':?'2022–07–06'?}`;

其中的字符串不符合JSON格式（鍵值需要雙引號(hào)），使用JSON.parse()解析會(huì)報(bào)錯(cuò)。

那么，有沒(méi)有什么辦法可以把這個(gè)字符串對(duì)象轉(zhuǎn)換成可以解析的JSON呢？

很多人會(huì)想到正則匹配然后替換，或者使用eval等渣屬性進(jìn)行處理。

沒(méi)必要這么麻煩， new Function 上線了，就完美了！

JS 代碼如下所示：

console.log(JSON.stringify(new?Function('return?'?+?str)()));
//?The?return?result?is:?'{"id":10393,"name":"yh","date":"2022–07–06"}'

使用返回語(yǔ)法，你可以輕松地將任意字符串轉(zhuǎn)換為其他 JavaScript數(shù)據(jù)類型。

02).模板字符串作為模板

比如Vue、React等現(xiàn)在都有自己的模板語(yǔ)法，比如{}語(yǔ)法。

如果我們想直接使用 ES6 自己的語(yǔ)法作為模板語(yǔ)言，就必須使用 new Function 的能力，比如下面的 HTML：

<template?id="template">
?${data.map(function?(obj,?index)?{
return?`<p>Article:?${obj.article}</p>
<p>Author:?${obj.author}</p>
`;
?}).join('')}
</template>

我們可以擴(kuò)展字符串并定義一個(gè)名為 interpolate 的字符串方法來(lái)將 ES6 語(yǔ)法字符串轉(zhuǎn)換為可執(zhí)行的 ES6 代碼：

String.prototype.interpolate?=?function?(params)?{
const?names?=?Object.keys(params);
const?vals?=?Object.values(params);return?new?Function(…names,`return?`${this}`;`)(…vals);
};

這樣，只要有對(duì)應(yīng)的數(shù)據(jù)，我們就可以根據(jù)

到此這篇關(guān)于簡(jiǎn)單了解JavaScript中的new Function的文章就介紹到這了,更多相關(guān)JS new Function內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: