当前位置： 首页 > news >正文

ES6 拓展（下）

news 2025/7/4 21:03:09

一、函数的拓展

1.1、默认参数

在ES5中设置默认参数：


function func(words, name) {name = name || "闷墩儿";console.log(words, name);
}
func("大家好！我是");
func("大家好！我是", "憨憨");func("大家好！我是", "");

在控制台可以看见如下：

在以上代码中：

  • func函数一共有两个形式参数，在func（'大家好！我是'） 我们指定第一个形式参数words的值，所以name 使用的默认值【闷墩儿】

  • 在 func（'大家好！我是','憨憨'）中我们指定了两个形式参数的值，所以name没有使用默认值。

  • 在 func（'大家好！我是',''）中我们指定了第二个形式参数为空字符串，被认为是没有赋值，所以也使用的是默认值。

注：如果我们想给形式参数设置默值需要在函数中单独定义。

在ES6中我们可以直接在函数的形参里设置默认值。

举个例子：

新建一个 index.html 文件，在文件中写入以下内容：


function func(words,name="草莓"){
console.log(words,name);
}
func("请给我一个");
func("请给我一个","梨");
func("请给我一个","");

在上面的代码中：

  • func("请给我一个") 只传入第一个参数，第二个参数没传入任何值，故第二个参数使用了默认值。

  • func("请给我一个","梨") 传入了二个参数，所以第二个参数没有使用默认值。

  • func("请给我一个","") 第二个参数，虽然传入的是空字符串，空字符串也算是一个参数值，故同样不会使用默认值。

可以看到在函数中设置默认值，如果传入的第二个参数值为空字符串，会被当作值传入，而不会使用默认值。

参数变量是默认声明的，我们不能用let或者const 再次声明

举个例子：


function func(words, name= "草莓"){let words ="我需要一个";console.log(words,name);
}
func("请给我一个","梨");

可以看到控制台出现了报错：

在设置默认值的时候也要注意设置的位置：

设置默认值的参数，一般放在其他参数的后面，也就是尾部。

如果给第一个形参设置了默认值，调用函数传参时，无法省略该参数，将会直接代替。

举个例子：


function func(words ="你好",name){console.log(`${words}${name}`);
}
func("小蓝");

在控制台可以看见，传入函数的值“小蓝”,被当作第一个参数的值，而第二个参数没有传入值，所以输出的是 undefined.

使用自定义函数作为形式参数的默认值：

举个例子：


function part(){return "❤";
}
function func(words,name =part()){console.log(words,name);
}
func("请给我一颗");
func("请给我一颗","💗");

在控制台可以看见：

在上面的代码中：

  • 我们定义了一个名为 parameter 的函数，在函数中返回了一颗黑色的爱心。

  • 给 func 函数中的第二个形式参数设置默认参数为 parameter 函数中的返回值。

  • 使用 func('请给我一颗小')，只设置了第一个形参的值，所以第二个参数使用的是默认值「小黑心」。

  • 使用 func('请给我一颗小','💗')，设置了两个形参的值，所以第二个参数没有使用默认值。

解构参数

解构可以用在函数参数传递的过程中。

举个例子：


function func(name,value,mount,{a,b,c,d= "苹果"}){console.log(`${name}用${value}元钱买了${mount}个${d}。`);console.log(`${name}用${value}元钱买了${mount}个${d}。`);
}
func("小蓝"，5,3,{a:"小蓝",b:"菠萝",c:"桃子",
});

在控制台可以看见如下输出：

在上面的代码中：

  • func 函数包含了4个参数，其中4个参数是解构参数，解构参数里面包含4个参数变量 a,b,c,d。

  • 使用func('小蓝',5,3,{a:'西瓜',b:'菠萝',c:'桃子'}) 调用该函数，其中传入name 参数的值为“小蓝”，value 参数的值为 5，mount 参数的值为 3；解构参数只传入三个值，a 的值为“西瓜”，b 的值为“菠萝”，c 的值为“桃子”，d 使用的是默认值。

在上面代码中可以看出，解构参数是以键值对的形式传入的，其参数名与键值名保持一致，即为成功。

rest参数

rest 参数又称剩余参数，用于获取函数的多余参数。rest参数搭配的变量是一个数组，改变量将多余的参数放入数组中。

rest 参数和扩展运算符在写法上样，都是三点(...），但两者的使用方法上是截然不同的。

扩展运算符就像是rest参数的逆运算，主要用于以下几个方面：

  • 改变函数的调用。

  • 数组构造。

  • 数组解构。

rest 参数语法格式为：


myfunction(parameters,...rest);
//剩余参数必须是函数的最后一个参数

举个例子：


function func(a,b,...rest){console.log(rest);
}
func(1,2,3,4,5,6,7,8);

在控制台可以到如下输出：

在上面代码中，给了func函数传入了10个参数，形式参数a和b 各取一个值，多余的8个参数都被rest参数获取。

箭头函数

箭头函数，顾名思义，就是箭头（=>）来表示的函数。箭头函数和普通函数都是用来定义函数的，但两者在语法构成上有所不同。

新建一个文件，使用es5的方式定义一个函数。


let sum = function (a,b){return a+b;
}
console.log(sum(1,2));

上面定义了一个求和函数

修改代码使用箭头函数：


let  sum=(a,b)=>a+b;
console.log(sum(1,2));

两个程序都会显示输出为 3

可以看出使用箭头函数代码变得简洁了。

箭头函数的基本使用方法：


(param1,param2,...,paramN)=>{expression}

箭头函数前面()放着函数的参数，箭头函数后面{}放着函数内部执行的表达式。

箭头函数除了代码简洁之外，还解决了匿名函数的this 指向问题。

this 指向

this 是指想调用包含自身函数对应的对象。

一个函数能够实现在指定时间周期内一直计数。用es5语法实现：


function Number(){var that= this;that.num=1;setInterval(function count(){that.num++;},1000);
}
在上面例子中，定义了一个名 Number() 的函数，该函数里包含一个 num 参数。在 Number() 函数里有一个 count() 的函数，在其内部让 num 自增。count 函数是作为 setInterval() 函数的参数而存在的，setInterval() 函数的作用是在某个周期内自动调用函数。

可以看到什么两个函数中，每个函数都会定义自己的this ,this 只会处在于你所使用的作用域范围内。

而在箭头函数中的this 对象，就是定义改函数所在的作用域所指向的对象，而不是使用所在作用域指向的对象。


function Number(){this.num=1;setInterval(()=>{this.num++;},100);
}   

总结一下区别：

  • 箭头函数的this 指向是其上下文的this,没有方法可以改变其指向。

  • 普通函数的this 指向调用它的那个对象。

二.类的扩展

四.异步编程

1.1 Promise 对象基础应用

在开发中，会遇到这样的需求：通过接口1的返回值，去获取接口2的数据，然后通过接口2的返回值，获取接口3的数据。即每次请求接口数据时，都需要使用上一次的返回值。为了实现这个需求，通常回事用回调函数来完成，即把函数作为参数进行层层嵌套。

代码如下：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>var outnum = function(n, callback){setTimeout(function(){console.log(n);callback();},100);
};outnum("1",function(){outnum("2",function(){outnum("3",function(){console.log("0")'};};}; </script></body>
</html>

在上述代码中，我们可以发现可以通过回调函数层层嵌套的形式达到最终数据请求的目的，但代码结构不明朗，可读性差。

定义Promise

为了解决这种地狱式回调，可以使用Promise对象 ，且代码更优雅，由于Promise对象是一个构造函数，必须通过实例化来生成，定义格式代码如下：


let  p= new Promise(function(resolve,reject){//异步事件
}

在定义格式的代码中，需要说明的几个问题：

  • 在实例化中，参数为函数，函数中又有两个用于回调的函数

  • 两个回调函数中， resolve 为异步成功执行时的回调，其参数可以传递执行的结构。

  • reject为异步执行失败的回调，其参数可以传递失败的结果信息。

使用 resolve和reject方法传递出去的参数，需要用到then方法接收。

Promise对象的then方法

Promise对象实例化之后，可以调用 then 方法获取两个回调函数中的传参值，该方法接收两个回调函数作为参数，第一个参数是必选参数，表示异步成功执行后的resolve 回调函数，第二个参数是可选参数，表示异步失败后执行的reject 回调函数。

格式如下：


p.then( function(v){},function(e){}
);

其中参数v的值表示resolve回调函数的参数值，e值表示reject回调函数中的参数值。

如下列代码所示：


let  n=6;
let p2 =new Promise(function(resolve,reject){setTimeout(function(){if(n>5){resolve(n);}else{reject("必须大于5")}});});
p2.then(function(v){console.log(v);},fucntion(e){console.log(e);}
);
//结果是 6

此外，一个then方法执行后，如果仍然返回一个Promise对象，则可以继续在执行then方法，形成链式结构

解决地狱式回调

使用Promise来实现开头提到的需求，从而解决由此引起的回调地狱问题。

代码如下：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>var   outnum= function(order){return new Promise(function(resolve,reject){setTimeout(function(){console.log(order);resolve(); //完成异步回调后执行函数},1000);});
};outnum("1").then(function(){return outnum("2");}).then(function(){return outnum("3");}).then(function(){return outnum("0");});</script></body>
</html>
执行上述代码之后的页面效果与使用地狱式回调方式是完全一样的，但 Promise 对象实现的代码可读性更强，还可以很方便地取到异步执行后传递的参数值，因此，这种代码的实现方式，更适合在异步编程中使用。

Promise 对象中的方法

1.1 Promise.all 方法

  • Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

是不是感觉上面的解释太简便了，以至于对它的用法有点模糊。那我们就详细地对Promise.all进行解释。

其实我们可以从参数和返回值两个方面对Promise.all()进行剖析。

首先是参数方面：

  • Promise.all()的参数是一个包含多个Promise实例的数组（当然数组内部Promise实例数量可以是一个，但那就没必要使用all方法，但会在你不清楚Promise实例数量时使用）。

然后看返回值方面。

返回值要分为两种情况：

  • 第一种情况就是数组内部的Promise实例全部成功，就是状态变为resolve，注意是全部，全部，全部（all）。这样它的返回值也是一个数组，但是这个数组里面的元素变为对应的原Promise实例的resolve状态的值。后面可以调用then方法使用。
  • 第二种情况就是数组内部的Promise实例没有全部成功，这样它的状态就会变为reject拒绝状态。

这样的话，我们就可以做一个简单地总结：

  • Promise.all()方法就是检测参数数组内部的所有Promise实例是否成功，若成功，则调用then方法进行处理，否则变为reject状态。

重点还是all,all,all。

相关文章：

ES6 拓展（下）

一、函数的拓展 1.1、默认参数 在ES5中设置默认参数&#xff1a; function func(words, name) {name name || "闷墩儿";console.log(words, name); } func("大家好&#xff01;我是"); func("大家好&#xff01;我是", "憨憨");func(…...

编程日记 2023/9/10 5:02:24

TouchGFX之自定义触发条件和操作

通过TouchGFX Designer&#xff0c;您可以自己定义具有触发条件和操作的交互组件。 自定义容器创建自定义触发条件&#xff1a;通过自定义容器的属性选项卡添加自定义触发条件 使用交互系统发送自定义触发条件&#xff1a; 通过自定义容器的“交互”选项卡&#xff0c;创建新的…...

编程日记 2023/9/10 5:01:23

Linux防火墙(iptables)

一、linux的防火墙组成 linux的防火墙由netfilter和iptables组成。用户空间的iptables制定防火墙规则&#xff0c;内核空间的netfilter实现防火墙功能。 netfilter&#xff08;内核空间&#xff09;位于Linux内核中的包过滤防火墙功能体系&#xff0c;称为Linux防火墙的“内核…...

编程日记 2023/9/10 5:00:20

zookeeper教程

zookeeper教程 zookeeper简介zookeeper的特点及数据模型zookeeper下载安装zookeeper客户端命令zookeeper配置文件zookeeper服务器常用命令zookeeper可视化管理工具zkuizookeeper集群环境搭建zookeeper选举机制使用Java原生api操作zookeeper使用java zkclient库操作zookeeper使用…...

编程日记 2023/9/10 4:59:19

杭州快递物流展-2024长三角快递物流供应链与技术装备展览会(杭州)

2024快递物流创新高质量发展论坛暨 2024长三角快递物流供应链与技术装备展览会(杭州) 时间&#xff1a;2024年4月12-14 日 地点&#xff1a;杭州国际博览中心 ESYE长三角快递物流展是亚洲范围内超大规模的快递物流业展示平台&#xff0c;由于展会的需求 及扩大市场的影响力…...

编程日记 2023/9/10 4:58:18

CSP 202203-1 未初始化警告

答题 要注意是xi和yi的范围&#xff0c;yi可以是0为常数。 #include<iostream> using namespace std;int main() {int n,k;cin>>n>>k;bool*initializenew bool[n]{false};int result0,x,y;while(k--){cin>>x>>y;if(y&&!initialize[y-1…...

编程日记 2023/9/10 4:57:16

开发指导—利用组件插值器动画实现 HarmonyOS 动效

一. 组件动画 在组件上创建和运行动画的快捷方式。具体用法请参考通用方法。 获取动画对象 通过调用 animate 方法获得 animation 对象&#xff0c;animation 对象支持动画属性、动画方法和动画事件。 <!-- xxx.hml --><div class"container"> <di…...

编程日记 2023/9/10 4:56:14

树莓派入门

目录 前言系统烧录使用官方烧录工具选择操作系统选择存储卡配置 Win32DiskImager 有屏幕树莓派开机树莓派关机无屏幕树莓派开机获取树莓派IP地址通过路由器获取共享网络方式获取给树莓派配置静态IP地址查找默认网关分盘给树莓派的IP地址修改树莓派DHCP配置文件 ssh登录 让树莓派…...

编程日记 2023/9/10 4:55:12

算法模型嵌入式 Mendix应用的开发示例

一、前言 根据埃森哲最新一项调查&#xff0c;2023年67%的企业持续加大在技术方面的投入&#xff0c;其中数据和AI应用是重中之重。AI在企业内部应用这个话题已经保持了十多年的热度&#xff0c;随着ChatGPT为代表的生成式AI技术的出现&#xff0c;这一话题迎来又一波的高潮。…...

编程日记 2023/9/10 4:54:10

如何使用Cygwin编译最新版的Redis源码，生成适用于Windows的Redis

文章目录 一、准备Cygwin环境二、下载Redis源码三、编译redis-7.2.01. 执行make命令2. 重新执行make命令3. 再次执行make命令4. 将编译后的可执行文件及依赖放到同一个文件夹5. 测试编译生成的可执行程序 四、换其他redis版本重新编译1. 编译redis-7.0.122. 编译redis-6.2.133.…...

编程日记 2023/9/10 4:53:09

Linux 修改SSH端口

如果防火墙&#xff0c;或防火墙已经开启&#xff0c;需要先开放2222端口 firewall-cmd --add-port2222/tcp --permanent --zonepublic firewall-cmd --reload编辑文件 vim /etc/ssh/sshd_config&#xff1a; #Port 22 Port 2222 # 打开注释&#xff0c;并修改为以下值 Clien…...

编程日记 2023/9/10 4:52:07

Redis经典问题：缓存穿透

&#xff08;笔记总结自《黑马点评》项目&#xff09; 一、产生原因 用户请求的数据在缓存中和数据库中都不存在&#xff0c;不断发起这样的请求&#xff0c;给数据库带来巨大压力。 常见的解决方式有缓存空对象和布隆过滤器。 二、缓存空对象 思路&#xff1a;当我们客户…...

编程日记 2023/9/10 4:51:06

DEFORMABLE DETR: DEFORMABLE TRANSFORMERS FOR END-TO-END OBJECT DETECTION (论文解析)

DEFORMABLE DETR: DEFORMABLE TRANSFORMERS FOR END-TO-END OBJECT DETECTION 摘要1 介绍2 相关工作3 重新审视 Transformers 和 DETR4 方法4.1 用于端到端目标检测的可变形transformer4.2 Deformable Detr的其他改进和变型5 实验5.1 和DETR 比较5.2 消融实验5.3 与最先进方法的…...

编程日记 2023/9/10 4:50:05

网络连接评分机制之NetworkFactory

在开机时，各个提供网络连接的对象需要向ConnectivityService注册自己，并把自己所提供的网络的分值告诉ConnectivityService。 为了ConnectivityService便于统一管理，每一个具备提供网络服务的对象都需要创建一个NetworkFactory的子类对象，并利用该对象注册自己，以及提供自…...

编程日记 2023/9/10 4:49:02

极致精细的jmeter+ant+jenkins 搭建接口自动化测试

一、jmeter 相信大家对jmeter并不陌生哈&#xff0c;如果没有安装和配置环境的小伙伴&#xff0c;可以直接找到我哈&#xff0c;我发给你。 二、ant 安装ant 第一步&#xff1a;下载ant http://ant.apache.org/ 第二步&#xff1a;配置ant window中设置ant环境变量&…...

编程日记 2023/9/10 4:47:59

Unity物体查找方式

参考资料 cUnity中使用GameObject.Find、Transform.Find查找GameObject_思月行云的博客-CSDN博客 GameObject.Find 通过名字或路径查找游戏对象。 GameObject.Find("GameObject"); GameObject.Find("GameObject/ChildGameObject); 使用规范: 1.无法查找隐藏…...

编程日记 2023/9/10 4:46:56

【Spring容器的启动流程】

Spring容器的启动流程主要分为以下几个步骤&#xff1a; 加载配置文件&#xff1a;Spring容器会从指定的配置文件中读取配置信息&#xff0c;包括bean的定义、依赖关系、AOP切面等。 创建容器&#xff1a;Spring容器启动后会创建一个容器实例&#xff0c;容器负责管理bean的生…...

编程日记 2023/9/10 4:45:55

Python---字符串

字符串特点 1. 只可以存储字符串 2. 长度任意 (取决于内存大小) 3. 支持下标索引 4. 允许重复字符串存在 5. 不可以修改 (增加或删除元素等) 6. 支持for和while循环 字符串的下标索引 # 字符串的下标索引 从前向后&#xff0c;下标从0开始 从后向前&#xff0c;下标从-1开始…...

编程日记 2023/9/10 4:44:54

MySQL数据 - 索引

MySQL数据库 - 索引 1：什么是数据库索引？2：都有哪些类型的索引呢？3：MySQL数据库每种索引的底层实现原理，每种索引为什么这么实现？4：上面索引实现基本上是B+树，为什么不用别的数据结构呢？4-1：那为什么不是二叉树呢？4-2：为什么不是红黑树呢？4-3：为什么不是哈希索引…...

编程日记 2023/9/10 4:43:52

长安链BaaS服务平台调研

目录 一、菜单功能二、其他说明2.1、服务平台的部署方式2.2、链本身2.3、建链流程2.4、支持连接已部署的链2.5、链治理投票2.6、支持动态节点操作2.7、支持应用 长安链ChainMaker管理平台文档地址&#xff1a;https://docs.chainmaker.org.cn 一、菜单功能 菜单子菜单/功能点…...

编程日记 2023/9/10 4:42:51

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/7/4 16:27:22

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2025/7/4 12:04:41

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/7/4 8:11:42

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/6/27 1:45:53

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/7/4 9:41:01

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/6/20 12:24:55

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

编程新知 2025/6/16 23:36:31

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2025/7/4 12:38:31

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2025/7/4 16:17:03

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2025/6/29 21:33:23