Es6笔记之箭头函数与解构赋值

目录

箭头函数

箭头函数 this

箭头函数与普通函数的区别

解构赋值

数组解构

对象解构

展开运算符 与 剩余运算符


箭头函数

箭头函数是一种声明函数的简洁语法,它与普通函数并无本质的区别,差异性更多体现在语法格式上。

<script>// const fn = function () {//   console.log(123)// }// 1. 箭头函数 基本语法const fn = () => {console.log(123)}fn()// const fn = (x) => {//   console.log(x)// }// fn(1)// 2. 只有一个形参的时候,可以省略小括号// const fn = x => {//   console.log(x)// }// fn(1)// // 3. 只有一行代码的时候,我们可以省略大括号// const fn = x => console.log(x)// fn(1)// 4. 只有一行代码的时候,可以省略return// const fn = x => x + x// console.log(fn(1))// 5. 箭头函数可以直接返回一个对象// const fn = (uname) => ({ uname: uname })// console.log(fn('刘德华'))</script>

总结:

  1. 箭头函数属于表达式函数,因此不存在函数提升

  2. 箭头函数只有一个参数时可以省略圆括号 ()

  3. 箭头函数函数体只有一行代码时可以省略花括号 {},并自动做为返回值被返回

箭头函数用=>把()和{ }连在一起,语法更简洁  
当只有一条return语句,()和return可以一起省略

形参只有一个,小括号可以省略,其余情况全部要加()

当只有一条return语句并且返回的是一个对象,把这个对象用()包裹起来

箭头函数 this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

const fun = () => {console.log(this)// console.log(arguments) //  报错 箭头函数没有arguments}const obj = {a: 1,f: () => {//  this === objconst fn = () => {console.log(this)}fn()},}fun(1, 2)new fun()obj.f.call(obj)

箭头函数与普通函数的区别


1、箭头函数没有this,它内部的this由所处作用域(上下文)决定
2、箭头函数没有arguments,普通函数有
3、箭头函数不能new

解构赋值

解构意思就是分解一个东西的结构,可以用一种类似数组的方式定义N个变量,可以将一个数组中的值按照规则赋值过去。
解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值,分为数组解构、对象解构两大类型。

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法,如下代码所示:

<script>// 普通的数组let arr = [1, 2, 3]// 批量声明变量 a b c // 同时将数组单元值 1 2 3 依次赋值给变量 a b clet [a, b, c] = arrconsole.log(a); // 1console.log(b); // 2console.log(c); // 3
</script>

嵌套赋值

//  let [x, [y],z]=[ 1,[ 2.1,2.2]];
// console.log( x, y,z );//1 2.1 undefined
let [ x, [y,z] ]= [ 1,[ 2.1,2.2]];
console.log(x,y,z);//1 2.1 2.2
let [json ,arr ,num] = [ {name : ' english ' },[ 1,2 ],3 ];
console.log( json , arr , num ) ;
//{name: ' english '}name: " english "[[Prototype]]: Object (2) [1, 2] 3

省略赋值

let [, , x ] =[ 1,2,3 ];
console.log (x ) ;//3


总结:
1.赋值运算符日左侧的[]用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量
2.变量的顺序对应数组单元值的位置依次进行赋值操作
3.变量的数量大于单元值数量时,多余的变量将被赋值为undefined
4.变量的数量小于单元值数量时,可以通过...获取剩余单元值,但只能置于最末位
5.允许初始化变量的默认值,且只有单元值为undefined时默认值才会生效
注∶支持多维解构赋值,比较复杂后续有应用需求时再进一步分析
 

对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法,如下代码所示:

<script>// 普通对象const user = {name: '小明',age: 18};// 批量声明变量 name age// 同时将数组单元值 小明  18 依次赋值给变量 name  ageconst {name, age} = userconsole.log(name) // 小明console.log(age) // 18
</script>

1、属性可以无序
2、默认接受属性名的变量名与属性名相同
3、可以通过旧属性名:新变量名 

展开运算符 与 剩余运算符

. . . 展开运算符      用于函数实参或者赋值号右边

 . . . 剩余运算符      用于赋值号左边或函数形参

<script>// ... 展开运算符 用于函数实参或者赋值号右边console.log(...[1, 2, 3]) // 1,2,3console.log(Math.max(...[1, 2, 3])) // Math.max(1,2,3)console.log(Math.max.apply(null, [1, 2, 3]))const o = { a: 1, b: 2 }const obj = { ...o, c: 3 }console.log(obj)// ... 剩余运算符 用于赋值号左边或函数形参const [a, ...args] = [1, 2, 3, 4]console.log(args) // [2,3,4]const fn = (...args) => {console.log(args)let sum = 0args.forEach((item) => {sum += item})return sum}console.log(fn(1))console.log(fn(1, 2))console.log(fn(1, 2, 3))</script>


 

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

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

相关文章

LLM大语言模型

大语言模型的定义 大语言模型&#xff08;英文&#xff1a;Large Language Model&#xff0c;缩写LLM&#xff09;&#xff0c;也称大型语言模型&#xff0c;是一种人工智能模型&#xff0c;旨在理解和生成人类语言。它们在大量的文本数据上进行训练&#xff0c;可以执行广泛的…

在Rust中处理命令行参数和环境变量

1.摘要 Rust的命令行和环境变量处理在标准库中提供了一整套实现方法, 在本文中除了探索标准库的使用方法之外, 也在不断适应Rust独有的语法特点。在本文中, 我们通过标准库函数的返回值熟悉了迭代器的使用方法, 操作迭代器精确控制保存的内容, 包括字符串和键值对的使用方法。…

美创科技受邀亮相第二届全球数字贸易博览会

11月23日-27日&#xff0c;由浙江省人民政府、商务部共同主办的第二届全球数字贸易博览会&#xff08;以下简称“数贸会”&#xff09;圆满落幕。围绕“国家级、国际性、数贸味”的目标定位&#xff0c;以“数字贸易 商通全球”为主题&#xff0c;数贸会重点展示数字贸易全产业…

伪原创工具,免费的5款伪原创工具

寻找一款合适的伪原创工具是提高写作效率的重要一环。在这里&#xff0c;我们为您推荐了五款不同特点的伪原创工具&#xff0c;并对它们进行了详细的测评。 第一款伪原创工具&#xff1a;147SEO改写 147SEO改写是一款强大的AI智能伪原创写作工具&#xff0c;具备多个模板供用…

亚马逊云科技 re:Invent 2023:科技前沿风向标

一、前言 亚马逊云科技 re:Invent 2023 已于内华达州的拉斯维加斯盛大举行。 re:Invent 2023 直播活动地址&#xff1a;https://webinar.amazoncloud.cn/reInvent2023/ 关注参加 re:Invent 大会你将有机会参与学习、交流&#xff0c;聆听专家演讲&#xff0c;并观看 Amazon …

物理层之三种数据交换方式(电路交换、报文交换、分组交换(数据报方式、虚电路方式))

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

Linux端口流量统计

Ubuntu sudo apt-get install wiresharkCentOS sudo yum install wiresharkUDP端口统计 sudo tshark -i <interface> -f "udp port <port_number>" -a duration:60 -q -z conv,udp请将 替换为你的网络接口&#xff0c;<port_number> 替换为要监…

玻色量子对外合作

2023年 2023.7 首个央企量子云计算项目&#xff0c;中标&#xff01; 2023.6 勇闯“量子电力”新领域&#xff0c;玻色量子与清大科越达成战略合作 2023.5 玻色量子签约移动云“五岳”量子云计算创新加速计划&#xff01; 2023.3 “量子计算通信”&#xff01;玻色量子与…

Mysql基础(六)多表查询

版权申明&#xff1a;本文用于个人学习记录&#xff0c;学习课程为黑马程序员的mysql教程。如需获取官方的学习视频和文档资料&#xff0c;请至黑马程序员官方获取。下面附上教学视频的链接地址&#xff0c;向提供免费教学视频的老师致敬&#xff0c;学如逆水行舟&#xff0c;不…

ubuntu下如何查看.gz压缩包中的内容,以及grep过滤查找文件中的某些内容

1、查看压缩包file.gz中的全部内容 $ zcat file.gz 2、对一个.gz的压缩包解压缩 $ gunzip file.gz 3、过滤查找文件中的某些内容 $ grep "Hello" file.txt 注&#xff1a;我通常先解压&#xff0c;然后再grep 4、过滤查找文件中的内容&#xff0c;并显示其上下3行…

一维数组,逆序存放并输出【样例输入】20 30 10 50 40 90 80 70【样例输出】70 80 90 40 50 10 30 20

一维数组&#xff0c;逆序存放并输出 【样例输入】 20 30 10 50 40 90 80 70 【样例输出】 70 80 90 40 50 10 30 20 以下是使用C语言编写的将一维数组逆序存放并输出的示例代码&#xff1a; #include <stdio.h>void reverseArray(int arr[], int size) {int start…

算法基础之单调栈

单调栈 求左边最小最近的数的值 没有返回-1 将左边数存入栈(数组模拟) 若stk[tt] >x 说明大于当前值 tt– 利用栈的先进后出特性 能找到左边最近的 #include<iostream>using namespace std;const int N100010;int skt[N],tt;int main(){int n;cin>>n;for(in…

UE使用C++通过定时器启用和停用Tick

写在前面 PrimaryActorTick.bCanEverTick这个赋值为true也好&#xff0c;false也好&#xff0c;好像只能在构造函数里面起作用&#xff0c;应该就是当在构造函数里面执行 PrimaryActorTick.bCanEverTick true; 之后&#xff0c;UE会在BeginPlay阶段自动执行 PrimaryActorT…

JS splice的使用总结

JS splice的使用总结 JavaScript splice() 方法 JavaScript splice() 方法 直译&#xff1a;粘接 定义和用法&#xff1a; splice() 方法用于添加或删除数组中的元素。 这种方法会改变原始数组 参数 Values&#xff1a; 参数描述index必需。从何处添加/删除元素。该参数是开…

数据库的设计规范

文章目录 第一范式&#xff08;1NF&#xff09;&#xff1a;列不可再分 第二范式 &#xff08;2NF&#xff09;&#xff1a;所有非主键字段&#xff0c;都必须 完全依赖主键&#xff0c;不能部分依赖 第三范式&#xff08;3NF&#xff09;&#xff1a;所有非主键字段不能依赖于…

基于单片机红外测温(mlx90614)-原理图-PCB设计+源程序

一、系统方案 1、本设计采用52单片机作为主控器。 2、mlx90614采集温度&#xff0c;液晶显示温度值。 3、按键设置温度上下限。 4、实际测量温度小于下限或者大于上限&#xff0c;蜂鸣器报警&#xff0c;大于上限&#xff0c;风扇启动&#xff0c;低于下限&#xff0c;风扇停止…

选择更灵活的设计工具:SOLIDWORKS 软件网络版与单机版的比较

随着科技的飞速发展&#xff0c;工程设计领域对于高效、灵活的设计工具需求日益增加。SOLIDWORKS 作为一款广受欢迎的三维设计软件&#xff0c;提供了网络版和单机版两种选择。在本文中&#xff0c;我们将深入探讨这两个版本的区别&#xff0c;并为您详细介绍它们的价格差异。 …

【古月居《ros入门21讲》学习笔记】17_launch启动文件的使用方法

目录 说明&#xff1a; 1. launch文件作用 2. launch文件语法 根元素 参数设置 重映射、嵌套 3. 示例 创建功能包 1_simple.launch 编译 运行 2_turtlesim_parameter_config.launch 启动运行 启动运行显示说明 3_start_tf_demo_c.launch 启动运行 4_start_tf_d…

在右键菜单中添加自定义事件

一、覆盖默认右键菜单的方式 出于安全和用户体验的考虑&#xff0c;不允许直接修改或向默认的右键菜单&#xff08;浏览器的上下文菜单&#xff09;添加自定义项。因为允许网页脚本更改或扩展默认的上下文菜单可能会造成用户困惑&#xff0c;并有可能被恶意网站利用来进行钓鱼或…

嵌入式开发为什么需要输出调试信息?

嵌入式开发为什么需要输出调试信息&#xff1f; 因为输出调试信息是嵌入式开发中一项非常重要的实践&#xff0c;它有助于保证软件的可靠性、稳定性和性能&#xff0c;也是故障排查的关键工具之一。 嵌入式开发输出调试信息主要有以下作用&#xff1a; 1.错误排查与问题定位 输…