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

news2024/11/19 10:23:57

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 3

c.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.coloradmin.cn/o/1899920.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

在Linux系统中配置GitHub的SSH公钥

在Linux系统中配置GitHub的SSH公钥

在Linux系统中配置GitHub的SSH公钥，可以让您无需频繁输入密码即可与GitHub仓库进行交互，提高工作效率。以下是配置步骤: 第一步： 检查SSH密钥是否存在 首先，检查您的用户目录下的.ssh文件夹中是否已有SSH密钥。打开终端&#xff0…
阅读更多...
openrestry中的hello world

openrestry中的hello world

目录 概述实践部署openrestry脚本效果验证 概述 此篇将在 k8s 运行起一个 openrestry   环境：k8s：1.27.9 ，openrestry(docker镜像版本)： 1.25.x ，k8s 与 ingress 请参考我的其它文章 离线镜像包请参考：op…
阅读更多...
Wish卖家必读：如何安全有效地进行店铺测评

Wish卖家必读：如何安全有效地进行店铺测评

Wish以其独特的商业模式和先进的技术在电商领域独树一帜。作为北美和欧洲最大的移动电商平台之一，Wish拥有庞大的用户基础，其中90%的卖家来自中国，这不仅显示了其在全球电商市场中的影响力，也反映了其对中国卖家的吸引力。 Wish平…
阅读更多...
微信小程序UGC类功能场景内容安全识别检测实现方案

微信小程序UGC类功能场景内容安全识别检测实现方案

概念普及 最近开发了一个小程序，属于同城信息发布类的，提交上架的时候，说需要补充社交-笔记类目。 补充完再次提审，又说是项目包含UGC类功能场景。所谓的UGC类功能，就是指用户可以在平台上自由发布信息，这…
阅读更多...
创新引领未来，智慧水利在路上：数字孪生技术为水库管理开辟新机遇，带来新挑战，引领水利行业迈向智能化新纪元

创新引领未来，智慧水利在路上：数字孪生技术为水库管理开辟新机遇，带来新挑战，引领水利行业迈向智能化新纪元

目录 前言 一、数字孪生技术概述 二、新机遇：数字孪生技术如何重塑水库管理 1、精准预测，科学调度 2、智能监测，及时预警 3、优化资源配置，提升管理效率 4、促进公众参与，增强透明度 三、新挑战：数字…
阅读更多...
【C语言小知识】getchar与putchar

【C语言小知识】getchar与putchar

getchar与putchar getchar介绍putchar介绍总结 在学习c语言阶段存在着许多要求输入数值的例子，在输入字符时，如果使用scanf()和printf()根据%c转换说明读写字符，接下来介绍一堆字符输入/输出函数：getchar()和putchar()。 getchar…
阅读更多...
nacos源码 nacos注册中心1.4.x 源码 nacos源码如何下载 nacos 客户端源码下载地址 nacos discovery下载地址（一）

nacos源码 nacos注册中心1.4.x 源码 nacos源码如何下载 nacos 客户端源码下载地址 nacos discovery下载地址（一）

首先，发现很多解读文章对核心点讲解的很多，但是我感觉没讲全，记录下，我自己看源码时候一些心得 1. 读源码第一步，先去github, issue, 官网： 1.1 github : https://github.com/alibaba/…
阅读更多...
R语言数据分析案例42-基于时间序列模型对股票预测分析和研究

R语言数据分析案例42-基于时间序列模型对股票预测分析和研究

一、研究背景和意义 随着全球经济的不断发展和数字化转型的加速推进，科技公司在全球市场中扮演着日益重要的角色。其中，中国的阿里巴巴集团作为全球最大的电子商务公司之一，其业务范围覆盖电子商务、云计算、金融科技等多个领域。由于其在中…
阅读更多...
盘点各个国家的国宝

盘点各个国家的国宝

中国：熊猫 熊猫已有800万年的历史，和它们同时代的动物都已灭绝，大熊猫生存至今成为“活化石”。 俄罗斯：北极熊 北极熊是世界上最大的陆地食肉动物，体型巨大，性格凶猛。 美国：白头海雕 白头海雕…
阅读更多...
python基础语法 006 内置函数

python基础语法 006 内置函数

1 内置函数 材料参考：内置函数 — Python 3.12.4 文档 Python 解释器内置了很多函数和类型，任何时候都能直接使用 内置函数有无返回值，是python自己定义，不能以偏概全说都有返回值 以下为较为常用的内置函数，欢迎补充…
阅读更多...
docker 重要且常用命令大全

docker 重要且常用命令大全

本文将总结一些常见的重要的docker命令，以作备忘。后续如果有新的比较常用重要的也会更新进来。欢迎补充。 docker服务管理 首先我们要解释一下：systemctl和docker命令的不同 systemctl：是许多 Linux 发行版中默认的初始化系统和服务管理器。…
阅读更多...
transformer初探

transformer初探

transformer初探 self-attentionmultihead-attentionencoderdecoder self-attention 其实就是三个矩阵， W q W_q Wq​、 W k W_k Wk​、 W v W_v Wv​，这三个矩阵就是需要训练的参数。分别得到每个token对应的 q q q k k k v v v，其中 q …
阅读更多...
网络安全设备——蜜罐

网络安全设备——蜜罐

网络安全设备蜜罐（Honeypot）是一种主动防御技术，它通过模拟真实网络环境中的易受攻击的目标，以吸引和监测攻击者的活动。具体来说，蜜罐是一种虚拟或实体的计算机系统，它模拟了一个真实的网络系统或应用程序…
阅读更多...
【开源项目】LocalSend 局域网文件传输工具

【开源项目】LocalSend 局域网文件传输工具

【开源项目】LocalSend 局域网文件传输工具 一个免费、开源、跨平台的局域网传输工具 LocalSend 简介 LocalSend 是一个免费的开源跨平台的应用程序，允许用户在不需要互联网连接的情况下，通过本地网络安全地与附近设备共享文件和消息。 项目地址&…
阅读更多...
转盘输入法-单独鼠标版本

转盘输入法-单独鼠标版本

序 转盘输入法，给你的聊天加点新意。它不用常见的九宫格或全键盘，而是把字母摆在圆盘上，一滑一滑，字就出来了，新鲜又直接。 单独鼠标版本GIF演示 演示软件下载 转盘输入法https://download.csdn.net/download/u0146…
阅读更多...
机器学习原理之 -- XGboost原理详解

机器学习原理之 -- XGboost原理详解

XGBoost（eXtreme Gradient Boosting）是近年来在数据科学和机器学习领域中广受欢迎的集成学习算法。它在多个数据科学竞赛中表现出色，被广泛应用于各种机器学习任务。本文将详细介绍XGBoost的由来、基本原理、算法细节、优缺点及应用场景。 X…
阅读更多...
少花点精力找工作，5款AI制作简历工具助你一飞冲天

少花点精力找工作，5款AI制作简历工具助你一飞冲天

少花点精力找工作，5款AI制作简历工具助你一飞冲天！ 01 未来简历：个性化定制，让求职更高效 在求职的海洋中，一份出色的简历是脱颖而出的关键。未来简历，利用GLM-130B大模型，为求职者提供个性化的…
阅读更多...
前端面试题18（js字符串特定内容查找方法）

前端面试题18（js字符串特定内容查找方法）

在JavaScript中，有多种方法可以用来查找字符串中的特定内容。以下是一些常用的方法，包括它们的用途和示例代码： 1. indexOf() indexOf() 方法返回指定文本在字符串中第一次出现的索引（位置），如果没有找到…
阅读更多...
ssm“落雪”动漫网站-计算机毕业设计源码81664

ssm“落雪”动漫网站-计算机毕业设计源码81664

目 录 摘要 1 绪论 1.1 研究背景 1.2 研究意义 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据新增流程 3.2.2 数据删除流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析 2.5本章小结 3 系统总体设…
阅读更多...
校园电动车安全监控和调度系统-计算机毕业设计源码13028

校园电动车安全监控和调度系统-计算机毕业设计源码13028

摘要 校园电动车安全监控和调度系统是为了确保校园内电动车的安全和高效运行而设计的。该系统通过安装在电动车上的监控设备，实时监测电动车的运行状态，包括速度、位置、电池电量等，一旦发现异常情况，系统会立即发出警报并通知相关…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023