文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

简单了解JavaScript中的new Function

2024-04-02 19:55

关注

前言

JavaScript技术一直处于不断发展壮大中,如果你是前端开发人员或者JavaScript开发工程师,那么,今天这个知识点,你有必要认真了解一下,它就是“new Function”。

1、语法

语法如下:

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

最后一个参数必须是函数体,其余参数作为传递给函数体的参数。

例如:

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

我们平时开发 JavaScript 或者 Node.js 的时候,没有理由使用 new Function 构造函数,因为不需要直接使用函数或者 () => {} 箭头函数。

这是否意味着 new Function 语法是一个鸡肋的功能?

千万不要这样想!因为它绝对不是你想的那样!

new Function 语法有一个特别强大的特性,使它在 JavaScript 中发挥着不可替代的作用。

有什么特点?也就是函数体的数据格式是字符串,真是不可思议!

不可替代的角色

这里有几个例子来展示 new Function 语法的微妙之处。

01).无效的 JSON 对象字符串合法化

例如,有以下字符串:

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

其中的字符串不符合JSON格式(键值需要双引号),使用JSON.parse()解析会报错。

那么,有没有什么办法可以把这个字符串对象转换成可以解析的JSON呢?

很多人会想到正则匹配然后替换,或者使用eval等渣属性进行处理。

没必要这么麻烦, new Function 上线了,就完美了!

JS 代码如下所示

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

使用返回语法,你可以轻松地将任意字符串转换为其他 JavaScript数据类型。

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

比如Vue、React等现在都有自己的模板语法,比如{}语法。

如果我们想直接使用 ES6 自己的语法作为模板语言,就必须使用 new Function 的能力,比如下面的 HTML:

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

我们可以扩展字符串并定义一个名为 interpolate 的字符串方法来将 ES6 语法字符串转换为可执行的 ES6 代码:

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

这样,只要有对应的数据,我们就可以根据

到此这篇关于简单了解JavaScript中的new Function的文章就介绍到这了,更多相关JS new Function内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯