JavaScript ES6语法详解(下)

前言:哈喽,大家好,我是码喽的自我修养!今天给大家分享JavaScript ES6语法详解(下)!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到带大家,欢迎收藏+关注哦 💕

🌈🌈文章目录

一、函数优化

1、函数默认值

2、不定参数

3、箭头函数

4、箭头函数结合解构表达式

二、对象优化

1、es6给Object扩展了许多新的方法

2、Object.assign方法

3、 声明对象简写

4、对象的函数属性简写

5、对象的扩展运算符

三、map和reduce方法

1、map()

2、reduce()

四、模块化 

一、函数优化

1、函数默认值

直接给参数写上默认值,没传就会自动使用默认值

function add(a, b = 1) {return a + b;}console.log(add(10)) //11
2、不定参数

不定参数用了表示不确定的参数个数,形如...变量名,由...加上要给具名参数标识符组成。具名参数只能放在参数列表的最后,并且有且只有一个不定参数

 function fun(...params) {console.log(params.length)}fun(1, 2) // 2fun(1, 2, 3, 4) //4
3、箭头函数
//以前
var sum = function (a, b) {c = a + breturn c}
console.log(sum(2, 3)) // 5
//箭头函数
var sum2 = (a, b) => a + b;
console.log(sum2(2, 4)) // 6
4、箭头函数结合解构表达式
    //以前function hello(person) {console.log("hello" + person.name)}hello(person); //helloqiyue//箭头函数let hello2 = params => console.log("hello" + person.name)hello2(person) //helloqiyue//箭头函数加解构表达式var hello3 = ({ name }) => console.log("hello" + name)hello3(person) //helloqiyue

二、对象优化

1、es6给Object扩展了许多新的方法
  • key(obj):获取对象的所有key形成的数组
  • value(obj):获取对象的所有value形成的数组
  • entries(obj):获取对象所有的key和value形成的二维数组
  const person = {name: "qiyue",age: 23,language: ["java", "js", "css"]}console.log(Object.keys(person)) //["name","age","language"]console.log(Object.values(person)) // ["qiyue",23,Array(3)]console.log(Object.entries(person)) //[Array(2),Array(2),Array(2)]
2、Object.assign方法

Object.assign方法 的第一个参数是目标对象,后面的参数都是源对象;将源对象的属性赋值到目标对象中

	onst target = { a: 1 }const source1 = { b: 2 }const source2 = { c: 3 }Object.assign(target, source1, source2);console.log(target) //{a: 1, b: 2, c: 3}
3、 声明对象简写
	//以前const name = 'sanyue'const age = 21//将属性值name,age分别赋给person1对象的name,age,后面是属性值const person1 = { name: name, age: age }console.log(person1) //{name: "sanyue", age: 21}//es6:属性名和属性值变量名一样,可以省略const person2 = {name,age}console.log(person2) //{name: "sanyue", age: 21}
4、对象的函数属性简写
 let person3 = {name: "qiyue",//以前eat: function (food) {console.log(this.name + "在吃" + food);},//箭头函数中this不能使用,用对象.属性eat2: food => console.log(person3.name + "在吃" + food),eat3(food) {console.log(this.name + "在吃" + food)}}person3.eat("苹果") //qiyue在吃苹果person3.eat2("香蕉") // qiyue在吃香蕉person3.eat3("西瓜") //qiyue在吃西瓜
5、对象的扩展运算符

扩展运算符(...) 用于取出参数对象所有可遍历属性然后拷贝到当前对象

    //拷贝对象(深拷贝)let p1 = { name: "qiyue", age: 23 }let obj = { ...p1 }console.log(obj)//{name: "qiyue", age: 23}//合并对象let age1 = { age: 24 }let name1 = { name: "qiyue" }let p2 = {}p2 = { ...age1, ...name1 }console.log(p2) //{age: 24, name: "qiyue"}//如果p2中原本有name,age属性会被覆盖

三、map和reduce方法

1、map()
map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回
 let arr = ["1", "3", "4", "23"]arr = arr.map(item => item * 2)console.log(arr) //[2, 6, 8, 46]
2、reduce()

reduce():为数组中的每一个元素依次执行回调函数,不包括数组中被删除或未被赋值的元素

语法:arr.reduce(callbace,[initialValue])

callback(执行数组中每个值的函数,包含四个参数)

  • previousValue(上一次调用回调返回的值,或者是提供的初始值(initialValue))
  • currentValue(数组中当前被处理的元素)、
  • index(当前元素在数组中的索引)
  • array(调用reduce的数组)

initialValue(作为第一次调用callback的第一个参数)

    let arr1 = [2, 40, -10, 6]let result = arr1.reduce((a, b) => {return a + b}, 10)console.log(result)//48

四、模块化 

什么是模块化:模块化就是把代码进行拆分,方便重复利用。类似Java中的导包,要使用一个包,必须先导包。而Js中没有包的概念,换来的就是模块

模块的功能主要有两个命令构成:export和import

  • export命令用于规定模块的对外接口,export不仅可以导出对象,一切js变量都可以导出。比如:基本类型变量、函数、数组、对象
  • import命令用于导入其他模块提供的功能

🚀 个人简介:某大型国企高级前端开发工程师,7年研发经验,信息系统项目管理师、CSDN优质创作者、阿里云专家博主,华为云云享专家,分享前端后端相关技术与工作常见问题~

💟 作    者:码喽的自我修养❣️
📝 专    栏:JavaScript深入研究

🌈 若有帮助,还请 关注➕点赞➕收藏 ,不行的话我再努努力💪💪💪 

 更多专栏订阅推荐:

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

⭐️ uniapp与微信小程序

📝 前端工作常见问题汇总

✍️ GIS地图与大数据可视化

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

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

相关文章

Qt Creator 与 ESP-IDF QEMU 模拟器使用指南

标题: Qt Creator 与 ESP-IDF QEMU 模拟器使用指南 概要: 本文为开发者提供了使用 Qt Creator 和 ESP-IDF QEMU 模拟器进行 ESP32 开发的详细指南,包括环境准备、项目创建和编译、模拟器设置、编程和调试等方面的内容。通过本指南,可以快速上手 Qt Crea…

Learning vtkjs之Calculator

过滤器 公式计算器 Calculator 介绍 The Calculator filter is a fast way to add derived data arrays to a dataset. These arrays can be defined over points, cells, or just field data that is “uniform” across the dataset (i.e., constant over all of space). Va…

手把手教你实现日期类

目录 前言 1.头文件的实现 2.日期类函数各项功能实现 2.1 初始化和打印(比较简单) 2.2日期大小判断 2.3日期的加减运算 3.日期类的输入输出 4.测试代码参考 结束语 前言 前面我们讲解了类的对象的大部分知识,例如拷贝构造&#xff0c…

优化数据处理效率,解读 EasyMR 大数据组件升级

EasyMR 作为袋鼠云基于云原生技术和 Hadoop、Hive、Spark、Flink、Hbase、Presto 等开源大数据组件构建的弹性计算引擎。此前,我们已就其展开了多方位、多角度的详尽介绍。而此次,我们成功接入了大数据组件的升级和回滚功能,能够借助 EasyMR …

乐乐音乐Kotlin版

简介 乐乐音乐Kotlin版,主要是基于ExoPlayer框架开发的Android音乐播放器,它支持lrc歌词和动感歌词(ksc歌词、krc歌词、trc歌词、zrce歌词和hrc歌词等)、多种格式歌词转换器及制作动感歌词、翻译歌词和音译歌词。 编译环境 Android Studio Jellyfish | …

canvas-视频绘制

通过Canvas元素来实时绘制一个视频帧,并在视频帧上叠加一个图片的功能可以当作水印。 获取Canvas元素: let canvas document.getElementById(canvas) 通过getElementById函数获取页面中ID为canvas的Canvas元素,并将其存储在变量canvas中。 …

【C++】C++11(可变参数模板、lambda表达式、包装器)

文章目录 1. 可变参数模板1.1 介绍1.2 emplace系列接口实现 2. lambda表达式2.1 语法介绍2.2 原理 3. 包装器4. bind 1. 可变参数模板 1.1 介绍 可变参数我们在C语言阶段已经了解过了,C语言中叫做可变参数列表,其中使用 ... 代表可变参数。 C语言中的可…

【给嵌入式新人的几条建议(共勉):三-C语言基础怎么补?】

给嵌入式新人的几条建议(共勉):三-C语言基础怎么补? 前言1、先回答一个问题,对C语言的害怕到底在哪?(纠正认知)2、C语言基础,要补全部吗?No2.1 先看下自己属于…

企业个人信息安全保护实践

在数字化浪潮的推动下,个人信息安全问题日益凸显,企业如何在合规的框架下保护个人信息安全,成为了一项重要课题。结合国家标准的个人信息合规审计要求,以下为企业个人信息安全保护的最佳实践路径。 一、构建合规的个人信息保护体…

【文件解析漏洞】

使用windows2003sever服务器 第一个:目录解析 1、打开网站目录,右键打开资源管理器 新建一个1.asp文件 在1.asp目录下新建一个2.txt,输入asp的语句 2、使用本机访问windows2003的IP地址 访问http://192.168.189.155/1.asp/2.txt即可 第…

论文翻译:Large Language Models in Education: Vision and Opportunities

Large Language Models in Education: Vision and Opportunities 文章目录 教育中的大型语言模型:愿景与机遇摘要1 引言2. 教育与LLMsA. 教育背景B. LLMs背景C. 智能教育D. 教育中的LLMs 3. EduLLMs的关键技术4. LLM赋能教育A. LLMs在教育中的应用B. LLMs下教育的特…

Netty4自学笔记 (3) - Netty NIO Server和Client 样例说明

全文详见个人独立博客:Netty4自学笔记 (3) - Netty NIO Server和Client 样例说明 Netty4自学笔记 (3) - Netty NIO Server和Client 样例说明更新节奏缓慢,因为每晚学习注意力不够集中,学习进展缓慢。本还给自己找了一大堆其他理由&#xff0…

适用于个人使用的十大数据恢复工具:综合指南

有许多数据恢复工具和软件可用于帮助恢复丢失或损坏的文件。通过了解您的需求并考虑这里探讨的工具,您将能够选择最佳的数据恢复软件,并希望找回您丢失的宝藏。在本综合指南中,我们将探索个人使用的十大数据恢复工具,重点介绍它们…

自定义CustomRatingBar控件

通过自定义RatingBar的样式实现⭐️⭐️⭐️指示器的方式功能过于受限,而且显示的样式阴影会受到影响。 系统自带显示: 自定义样式: 因此简单自一个符合要求的 CustomRatingBar 支持设置星星数量支持设置星星Rating(float)支持设置空显示…

NICE Seminar(2023-07-16)|演化算法的理论研究到底有什么用?(南京大学钱超教授)

模式定理(Schema Theorem) 模式定理(Schema Theorem)是遗传算法(Genetic Algorithm, GA)的重要理论基础,由约翰霍兰德(John Holland)在1975年提出。它描述了具有特定模式…

CSS mask-image 实现边缘淡出过渡效果

使用场景 在生产环境中,遇到一个需求,需要在一个深色风格的大屏页面中,嵌入 Google Maps。为了减少违和感,希望地图四边能够淡出过渡。 这里的“淡出过渡”,关键是淡出,而非降低透明度。 基于 Google Ma…

Tecplot安装error找不到指定模块之解决方案

最近有小伙伴反应,在安装Tecplot 2023版本时,参考教程来操作很顺利,但是在开启软件后,有一个error弹窗,内容如下: 随后用中英文翻译:找不到指定模块 同时,软件内部的Tool工具栏打不…

大路灯护眼灯有必要买吗?五款护眼大路灯推荐

大路灯护眼灯有必要买吗?许多消费者对护眼大路灯的了解不够,总是被不专业产品“耍”得团团转。就比如市面上很多声称用了眼睛就不近视的产品,实际上它们毫无专业技术沉淀,还疏于调校光线稳定性、光线均匀度等上百项核心参数&#…

基于IOT架构的数据采集监控平台!

LP-SCADA数据采集监控平台是蓝鹏测控推出的一款聚焦于工业领域的自动化数据采集监控系统, 助力数字工厂建设的统一监控平台。 为企业提供从下到上的完整的生产信息采集与集成服务,从而为企业综合自动化、工厂数字化及完整的"管控一体化”的解决方案…

校园水电费管理小程序的设计

管理员账户功能包括:系统首页,个人中心,学生管理,教师管理,宿舍信息管理,学生缴费管理,教师缴费管理,系统管理 微信端账号功能包括:系统首页,我的 开发系统…