js函数扩展内容---多参数,函数属性,字符串生成函数

1.多参数

在js中,Math.max()方法可以接受任意数量的参数,

Math.max(1,2,3,4);//4
Math.max(1,2,3,4,5,6,7,8,9,10)//10

在max方法里面有一个rest参数,它接受了所有参数全部合成到了一个number数组里面,

function rest(a,b,...arg){// 使用rest 参数时,必须放在参数列表的最后console.log(arg);
}rest(1,2,3,4,5,6,7,8,9,10)//[3,4,5,6,7,8,9,10]

注意:使用rest 参数时,必须放在参数列表的最后 

 rest参数:类似扩展运算 ...,rest参数也使用...符号,但它的功能相反,在定义函数时使用,表示将多余的参数收集到一个数组中

和扩展运算区分开

  • 扩展运算:用于使用方法时,拆分数组或对象
  • rest参数 :用于定义方法时,合并参数

使用rest参数可以任意多个参数合成一个数组,并在函数内调用,理论上来说函数使用rest可以使用无数多个参数,

实现max方法

// 对rest参数进行比较
function myMax(...args) {// 设置max接受最大值,初始值为第一个参数let max = args[0];// 遍历数组,如果当前值大于max,则将max设置为当前值args.forEach((item)=>{if(item>max){max=item;}})return max;
}
console.log(myMax(1,2,3,4,30,5,6,7,8,9,10));//30

2.函数属性

在js中函数也是对象,一个函数也能像对象一样设置属性,同时它还有一些默认属性

console.dir(function name(){})

name

绝大部分函数都有name属性值,它存储了函数的名称

function fn(){console.log(fn.name);return fn.name;
}fn();//fn
console.log(fn());//fn fn
console.log(fn.name);//fn

 值得注意的是,函数属性是绑定在函数对象上的,在函数体外也能访问

// 对于赋值给变量的函数,函数本身是匿名的,函数name是变量名,
// 非匿名函数赋值,函数name是函数名
const f = function(){};
const fun = ()=>{}
const Fn = function F(){}console.log(f.name);//f
console.log(fun.name);//fun
console.log(Fn.name);//F

对于赋值给变量的函数,函数本身是匿名的,函数name是变量名,非匿名函数赋值,函数name是函数名,

没有name属性值的情况

// 没有name属性值
const fArr = [function(){}]
console.log(fArr[0].name);//''

length

函数的length属性表示了函数形参的个数,但是不包括rest参数

function fa(a,b,c,...arg){console.log(fa.length);return fa.length;
}
console.log(fa.length);//3
fa(1,2,3,4,5,6,7,8,9,10);//3,和实参数量无关

要注意和argments的length区分开

  • function.length:表示的是函数除了rest参数外的形参数量,定义函数时的普通参数个数
  • argments.length:表示使用函数时的实参数量,使用函数传入的参数个数

自定义函数属性

除了默认的属性,还可以自定义函数的属性

function add(){  return add.count++;
}add.count = 0;
console.log(add(),add(),add(),add());//0 1 2 3

设置函数属性,可以重写一个闭包结构,关于闭包可以参考:

js闭包------简单理解闭包含义_js 闭包累加-CSDN博客

// 使用内置变量的闭包
function count(){let sum = 0;return function (){return sum++;}
}
const addSum = count();console.log(addSum(),addSum(),addSum(),addSum());//0 1 2 3// 使用函数属性的闭包
function c(){c.count = 0;return function (){return c.count++;}
}
const addCount = c();console.log(addCount(),addCount(),addCount(),addCount());//0 1 2 3

都达到了累加的效果,但是它们的区别在于,闭包中的变量不能被外部访问,而函数属性可以被外部访问

c.count = 20;
console.log(addCount());//20

注意:count++会先赋值在自增 

3.字符串生成函数

使用字符串生成函数:接受一串字符串,将字符串转成函数,这常常在服务端返回脚本时的场景使用,

常规生成一个函数的方法有,function,new Function,

eval()

eval()将传入的字符串当做 JavaScript 代码进行执行,这是一个危险的api,容易被注入攻击,

let str = `function newFn(){console.log('这是eval改变字符串新生成的函数')
}`//eval()函数会将字符串作为JavaScript代码进行解析和执行
eval(str);
newFn();//这是eval改变字符串新生成的函数

new Function()

 new Function()会将字符串转成函数体内容

// new Function()() 也可以将字符串作为函数体进行解析和执行
new Function('console.log("这是new Function()改变字符串新生成的函数")')();//这是new Function()改变字符串新生成的函数
let newF= new Function('console.log("这是new Function()改变字符串新生成的函数")');
newF();//这是new Function()改变字符串新生成的函数

setTimeout()

setTimeout()会将字符串参数识别成函数执行,

// 使用setTimeout()函数
setTimeout(`(function newFn(){console.log('这是setTimeout()改变字符串新生成的函数')})()`
);//这是setTimeout()改变字符串新生成的函数

第一个参数支持输入函数或者字符串,字符串会自动解析成js代码,第二个参数没有时会被塞到事件队列最前面等待执行,所有这是一个异步过程,

script标签

可以通过script标签的innerHTML属性将字符串转成函数,但是这种方法只能在浏览器种使用,node环境下是没有dom对象的

// 使用script标签
const script = document.createElement('script');
script.innerHTML = `(function newFn(){console.log('这是script标签改变字符串新生成的函数')
})()`
document.body.appendChild(script);//这是script标签改变字符串新生成的函数

这是一个同步的代码,在setTimeout之前执行

总结

一共有以上4种方法将字符串改成函数

  • 异步: setTimeout()

  • 同步:eval() ,new Function(),script标签

 完整代码以及运行结果展示

// 1.多参数的函数,rest参数
Math.max(1,2,3,4);//4
Math.max(1,2,3,4,5,6,7,8,9,10)//10// Math.max()方法可以接受任意数量的参数,
// 类似扩展运算符...,rest参数也使用...符号,但它在定义函数时使用,表示将多余的参数收集到一个数组中。
function rest(a,b,...arg){// 使用rest 参数时,必须放在参数列表的最后console.log(arg);
}rest(1,2,3,4,5,6,7,8,9,10)//[3,4,5,6,7,8,9,10]// 对rest参数进行比较
function myMax(...args) {// 设置max接受最大值,初始值为第一个参数let max = args[0];// 遍历数组,如果当前值大于max,则将max设置为当前值args.forEach((item)=>{if(item>max){max=item;}})return max;
}
console.log(myMax(1,2,3,4,30,5,6,7,8,9,10));//30// 2.函数属性console.dir(function name(){})// name
function fn(){console.log(fn.name);return fn.name;
}fn();//fn
console.log(fn());//fn fn
console.log(fn.name);//fn// 对于赋值给变量的函数,函数本身是匿名的,函数name是变量名,
// 非匿名函数赋值,函数name是函数名
const f = function(){};
const fun = ()=>{}
const Fn = function F(){}console.log(f.name);//f
console.log(fun.name);//fun
console.log(Fn.name);//F// 没有name属性值
const fArr = [function(){}]
console.log(fArr[0].name);//''// length
function fa(a,b,c,...arg){console.log(fa.length);return fa.length;
}
console.log(fa.length);//3
fa(1,2,3,4,5,6,7,8,9,10);//3,和实参数量无关// 自定义函数属性function add(){  return add.count++;
}add.count = 0;
console.log(add(),add(),add(),add());//0 1 2 3// 使用内置变量的闭包
function count(){let sum = 0;return function (){return sum++;}
}
const addSum = count();console.log(addSum(),addSum(),addSum(),addSum());//0 1 2 3// 使用函数属性的闭包
function c(){c.count = 0;return function (){return c.count++;}
}
const addCount = c();console.log(addCount(),addCount(),addCount(),addCount());//0 1 2 3c.count = 20;
console.log(addCount());//20// 字符串生成函数let str = `function newFn(){console.log('这是eval改变字符串新生成的函数')
}`//eval()函数会将字符串作为JavaScript代码进行解析和执行
eval(str);
newFn();//这是eval改变字符串新生成的函数// new Function()() 也可以将字符串作为函数体进行解析和执行
new Function('console.log("这是new Function()改变字符串新生成的函数")')();//这是new Function()改变字符串新生成的函数
let newF= new Function('console.log("这是new Function()改变字符串新生成的函数")');
newF();//这是new Function()改变字符串新生成的函数// 使用setTimeout()函数
setTimeout(`(function newFn(){console.log('这是setTimeout()改变字符串新生成的函数')})()`
);//这是setTimeout()改变字符串新生成的函数// 使用script标签
const script = document.createElement('script');
script.innerHTML = `(function newFn(){console.log('这是script标签改变字符串新生成的函数')
})()`
document.body.appendChild(script);//这是script标签改变字符串新生成的函数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/43041.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

12 - matlab m_map地学绘图工具基础函数 - 在地图上绘制矢量场m_vec函数和绘制风羽图的m_windbarb函数

12 - matlab m_map地学绘图工具基础函数 - 在地图上绘制矢量场函数m_vec和绘制风羽图的函数m_windbarb 0. 引言1. 关于m_vec2. 关于m_windbarb3. 总结 0. 引言 本篇介绍下m_map中绘制矢量场的函数(m_vec)和地图上绘制风羽图的函数m_windbarb。 1. 关于m…

【python重复元素判定】

在Python中,判定一个序列(如列表、元组等)中是否存在重复元素,可以通过多种方法实现。这里列出几种常用的方法: 1. 使用集合(Set) 集合是一个无序的、不包含重复元素的数据结构。将序列转换为…

QT信号量与槽

文章目录 概述用系统生成新增一个信号量和槽代码方式信号量和槽的宏信号量和槽都用函数地址lamda表达式函数指针 槽和信号量函数信号量槽 小结 概述 这个内容是QT独有的,写的挺有意义的。之前写过一篇QT slots的函数,思来想去,觉得不是那么有…

python-22-零基础自学python-数据分析基础 打开文件 读取文件信息

学习内容:《python编程:从入门到实践》第二版 知识点: 读取文件 、逐行读取文件信息等 练习内容: 练习10-1:Python学习笔记 在文本编辑器中新建一个文件,写几句话来总结一下你至此学到的Python知识,其中…

代码随想录:贪心2-4

455.分发饼干 题目 假设你是一位很棒的家长,想要给你的孩子们一些小饼干。但是,每个孩子最多只能给一块饼干。 对每个孩子 i,都有一个胃口值 g[i],这是能让孩子们满足胃口的饼干的最小尺寸;并且每块饼干 j&#xff…

考CISP,不要踩坑的几点建议

当你立志要在信息安全领域闯出一片天,可能多少都会听行内人说,搞本CISP。但这个认证究竟该怎么拿?需要培训吗?培训又是怎么一回事?价格如何?还有,什么时候开始准备最好?这些问题可能…

C++ Lambda表达式第一篇, 闭合(Closuretype)

C Lambda表达式第一篇, 闭合Closuretype ClosureType::operator()(params)auto 模板参数类型显式模板参数类型其他 ClosureType::operator ret(*)(params)() lambda 表达式是唯一的未命名,非联合,非聚合类类型(称为闭包类型&#…

【实习问题记录】Nodeclub本地部署

问题描述 在按照官方网站给出的教程一步一步操作以后发现出现以下报错: 问题分析 显示连接不上mongodb,分析报错可能是因为版本不匹配导致的,查看安装的mongodb版本发现是7.0.4,与目标版本不匹配,同时查看mongodb官…

我们所熟知的meme梗图也可以用AI生成了,老外都玩坏了。

meme梗图不知道大家看到过嘛?相信你们看见下面的图你就会大叫“卧槽”,原来是这种图,我以前经常狂刷不止,太有趣了。 其实meme是一个网络流行语,可译为模因。在大众非学术范围内也可翻译为我们所熟知的“梗”。其中“表…

SDK环境的安装(测试使用)

1、安装 将文件解压至目录,我的目录为:D:\Program Files\Android 解压后如下: 下载链接如下: sdk下载 提取码见文章最后: 2、配置环境 1、在环境变量中,选择系统变量,点击新建。 变量名:ANDROID_HOME 变量值:“你自己的android-sdk安装路径” (例如我的:D:\Pro…

CF1955C Inhabitant of the Deep Sea 题解

题目 模拟 首先想到模拟。 但是看到数据范围&#xff0c;模拟不了。 #include<bits/stdc.h> #include<cstring> #include<queue> #include<set> #include<stack> #include<vector> #include<map> #define int long long #define …

如何在 Linux 中高亮显示日志关键字

在 Linux 系统中&#xff0c;实时查看日志文件通常使用 tailf 命令&#xff0c;但 tailf 本身并不支持高亮显示关键字功能。通过结合 grep、sed 等工具&#xff0c;我们可以实现日志关键字高亮。本文将介绍几种高效的方法来实现这一目标。 方法一&#xff1a;使用 grep --color…

人机交互中有许多不满足紧致性条件的地方

紧致性条件通常用于描述拓扑空间的性质。一个拓扑空间被称为紧致的&#xff0c;如果它的任意开覆盖都有有限子覆盖。换句话说&#xff0c;对于任何开覆盖&#xff0c;都可以从中选取有限个开集&#xff0c;它们的并仍然覆盖整个空间。 满足紧致性条件的方法通常包括以下几种&am…

7月8日 四道经典单链表oj题

大家好呀&#xff0c;本博客目的在于记录暑假学习打卡&#xff0c;后续会整理成一个专栏&#xff0c;主要打算在暑假学习完数据结构&#xff0c;因此会发一些相关的数据结构实现的博客和一些刷的题&#xff0c;个人学习使用&#xff0c;也希望大家多多支持&#xff0c;有不足之…

CSS--表格自适应宽度并设置最小宽度

原文网址&#xff1a;CSS--表格自适应宽度并设置最小宽度_IT利刃出鞘的博客、-CSDN博客 简介 本文介绍怎样让HTML的表格自适应宽度。 Java技术星球&#xff1a;way2j.com 问题描述 默认样式下&#xff0c;表格会出现某一列很窄的情况&#xff1a; 代码&#xff1a; <h…

Redission 解锁异常:attempt to unlock lock, not locked by current thread by node id

标题&#xff1a;解锁异常&#xff1a;Redission中的"attempt to unlock lock, not locked by current thread by node id"问题分析与解决方案 在分布式系统中&#xff0c;锁是常用的同步机制&#xff0c;用于保护共享资源&#xff0c;避免并发冲突。Redission是一个…

java-多线程 2

### 7. 线程池 线程池是管理和复用线程的机制&#xff0c;可以避免频繁创建和销毁线程的开销。Java 提供了 Executor 框架来管理线程池。 #### 7.1 使用 Executors 工厂类 Executors 工厂类提供了一些静态方法&#xff0c;用于创建常见类型的线程池。 java import java.uti…

[240708] 中国 AI 企业在世界人工智能大会上展现韧性与创新

目录 中国 AI 企业在世界人工智能大会上展现韧性与创新 中国 AI 企业在世界人工智能大会上展现韧性与创新 中国科技公司在本周上海举行的世界人工智能大会上展现出强大的韧性和创新能力。超过150 种 AI 相关产品和解决方案在大会上展出&#xff0c;包括商汤科技、华为、科大讯…

电机工厂MES系统-提升生产效率与质量的关键

本文将详细介绍万界星空科技电机行业MES系统的特随着电机行业的快速发展&#xff0c;生产管理的复杂性和精细度日益提高。为了应对这一挑战&#xff0c;万界星空科技MES&#xff08;制造执行系统&#xff09;解决方案&#xff0c;为电机行业带来了前所未有的生产管理变革。点、…

Elasticsearch 分析器(Analyzer)的作用和配置

在Elasticsearch中&#xff0c;分析器&#xff08;Analyzer&#xff09;是文本处理的核心组件&#xff0c;它负责将输入的文本转换为可用于搜索和索引的词项&#xff08;tokens&#xff09;。这一过程涉及多个步骤&#xff0c;包括字符过滤、分词和标记过滤&#xff0c;共同决定…