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 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.mfbz.cn/a/777258.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

MSPM0G3507——读取引脚的高低电平方法（数字信号循迹模块）

MSPM0G3507——读取引脚的高低电平方法（数字信号循迹模块）

SYSCFG配置 代码部分 //第一个传感器if( DL_GPIO_readPins(xunji_PORT_PIN1_PORT , xunji_PORT_PIN1_PIN )xunji_PORT_PIN1_PIN) //黑，不亮 高{a1;}if( DL_GPIO_readPins(xunji_PORT_PIN1_PORT , xunji_PORT…
阅读更多...
第4-5天：30余种加密编码和资产架构端口应用CDNWAF站库分离负载均衡

第4-5天：30余种加密编码和资产架构端口应用CDNWAF站库分离负载均衡

文章目录 前言知识点常见加密编码等算法解析 资产架构&端口&应用&CDN&WAF&站库分离&负载均衡资产架构番外安全考虑阻碍 前言 在安全测试中常见的敏感信息密码等会采用加密方式，因此作为一名安全人员要了解常见加密。 知识点 主要有存储加…
阅读更多...
Linux权限概述

Linux权限概述

一、权限概述 1.权限的基本概念 2.为什么要设置权限 3.linux用户的身份类别 4.user文件的拥有者 5.group文件所属组内用户 6.other其他用户 7.特殊用户root 二、普通权限管理 1.ls -l查看文件权限 2.文件类型以及权限解析 3.文件或文件夹的权限设置 4.通过数字给文件…
阅读更多...
2024亚太杯中文赛B题洪水灾害的数据分析与预测原创论文分享

2024亚太杯中文赛B题洪水灾害的数据分析与预测原创论文分享

大家好，从昨天肝到现在，终于完成了2024年第十四届 APMCM 亚太地区大学生数学建模竞赛B题洪水灾害的数据分析与预测的完整论文啦。 实在精力有限，具体的讲解大家可以去讲解视频： 2024亚太杯中文赛B题洪水灾害预测原创论文保姆级教…
阅读更多...
（一）优化算法-遗传算法

（一）优化算法-遗传算法

目录 前言 一、什么是遗传算法？ （一）基本结构 （二）遗传操作 二、仿真过程 （一）主程序部分 （二）选择函数 （三）交叉函数 （四&a…
阅读更多...
【优化论】约束优化算法

【优化论】约束优化算法

约束优化算法是一类专门处理目标函数在存在约束条件下求解最优解的方法。为了更好地理解约束优化算法，我们需要了解一些核心概念和基本方法。 约束优化的核心概念 可行域（Feasible Region）： 比喻：想象你在一个园艺场…
阅读更多...
软连接迁移 Docker 的默认安装(存储)目录

软连接迁移 Docker 的默认安装(存储)目录

前言 经常我们会拿到一些别人装好的服务器，需要在这些系统上启动我们的docker服务。 但是这些“专业人员”呢，有时候就会有非常不专业的操作，比如他把根目录/只划分50GB，/home却有51TB。这个时候就会导致我们的服务器还有很多空间…
阅读更多...
万界星空科技机械加工行业MES解决方案

万界星空科技机械加工行业MES解决方案

机械加工行业作为制造业的重要组成部分，面临着生产效率、成本控制和产品质量提升等多重挑战。为了应对这些挑战，引入并实施制造执行系统（MES）成为了行业的必然选择。本文将详细介绍一种针对机械加工行业的MES解决方案，…
阅读更多...
STM32-HAL-FATFS(文件系统)(没做完，stm32f103zet6(有大佬的可以在评论区说一下次板子为什么挂载失败了))

STM32-HAL-FATFS(文件系统)(没做完，stm32f103zet6(有大佬的可以在评论区说一下次板子为什么挂载失败了))

1STM32Cube配置 1-1配置时钟 1-2配置调试端口 1-3配置uart 1-4配置SDIO（注意参数）（其中他的初始化的异常函数给注释，SD卡文件写了） 配置了还要打开中断和DMA可在我的其他文章中看一样的 1-5配置FatFs (只改了图选中…
阅读更多...
【Kubernetes】Pod 资源调度之亲和性调度

【Kubernetes】Pod 资源调度之亲和性调度

Pod 资源调度之亲和性调度 1.Node 亲和性调度1.1 Node 硬亲和性1.2 Node 软亲和性 2.Pod 亲和性调度2.1 Pod 硬亲和2.2 Pod 软亲和2.3 Pod 反亲和 Kubernetes 的 默认调度器 以 预选、优选、选定机制 完成将每个新的 Pod 资源绑定至为其选出的目标节点上，不过&#…
阅读更多...
Javase-异常

Javase-异常

文章目录 1. 异常概述2. 异常的继承结构3. 自定义异常4. 异常的处理5. 异常的使用6. finally语句块7. 方法覆盖与异常 1. 异常概述 什么是异常 ①什么是异常?有什么用? 1.Java中的异常是指程序运行时出现了错误或异常情况，导致程序无法继续正常执行的现象。例如&…
阅读更多...
【CG】计算机图形学（Computer Graphics）基础（其壹）

【CG】计算机图形学（Computer Graphics）基础（其壹）

0 学习视频 B站GAMES101-现代计算机图形学入门-闫令琪 1 什么是计算机图形学 1.1 什么是好的画面？ 画面足够亮。如果全局光照做的好，整个画面就会亮，看起来很舒服。 1.2 计算机图形学涉及到的领域 数学（透视）投影…
阅读更多...
java基础：面向对象（一）

java基础：面向对象（一）

一、概念 物以类聚，分类的思维模式，思考问题首先会解决问题需要哪些分类，然后对这些分类进行单独思考。最后，才对某个分类下的细节进行面向过程的思索。面向对象适合处理复杂的问题，适合处理需要多人协作的问题!对于描…
阅读更多...
vulhub靶场之DEVGURU:1

vulhub靶场之DEVGURU:1

1 信息收集 1.1 主机发现 arp-scan -l 发现主机IP地址为“192.168.1.11 1.2 端口发现 nmap -sS -sV -A -T5 -p- 192.168.1.11 发现端口为：22，80，8585 1.3 目录扫描 dirsearch -u 192.168.1.11 发现存在git泄露 2 文件和端口访问 2…
阅读更多...
idea中没有显示‘‘Spring‘‘一栏 (已解决)

idea中没有显示‘‘Spring‘‘一栏 (已解决)

第一步: 随便找一个Bean(即直接或者间接使用Component的类) 第二步: 找到左边的图标, 右键这个图标, 然后选择如下选项: 第三步: 成功 然后就成功了, 可以看到具体的bean了以及其bean的关系图等.
阅读更多...
MySQL的Geometry数据处理之WKB方案

MySQL的Geometry数据处理之WKB方案

MySQL的Geometry数据处理之WKT方案：https://blog.csdn.net/qq_42402854/article/details/140134357 MySQL的Geometry数据处理之WKT方案中，介绍WTK方案的优点，也感受到它的繁琐和缺陷。比如： 需要借助 ST_GeomFromText和 ST_AsTex…
阅读更多...
主从复制原理及操作

主从复制原理及操作

主从复制的概念 主从复制是一种在数据库系统中常用的数据备份和读取扩展技术，通过将一个数据库服务器（主服务器）上的数据变更自动同步到一个或多个数据库服务器（从服务器）上，以此来实现数据的冗余备份、读…
阅读更多...
数据库之SQL（二）

数据库之SQL（二）

目录 一、简述SQL中如何将“行”转换为“列” 二、简述SQL注入 三、如何将一张表的部分数据更新到另一张表 四、WHERE和HAVING的区别 一、简述SQL中如何将“行”转换为“列” 我们以MySQL数据库为例，来说明行转列的实现方式。 首先，假设我们有一张分…
阅读更多...
WAIC 2024：科技界的摇滚狂欢，你错过了什么？

WAIC 2024：科技界的摇滚狂欢，你错过了什么？

大数据产业创新服务媒体 ——聚焦数据 改变商业 2024年7月5日，WAIC 2024举办的第二天。数据猿作为受邀媒体，在今天继续亲历这一场关于未来的盛会。在这片汇聚了全球顶尖科技力量的舞台上，见证了人工智能领域的最新成果，感受到了科…
阅读更多...
Midjourney对图片细微调整和下载保存

Midjourney对图片细微调整和下载保存

点击v2是对第二图片细微调整。 点击u3对第3张图片进行放大。 保存图片: 对点击u3放大的图片，双击 , 右键保存图片
阅读更多...
最新文章

Copyright @ 2022~2023