ES6-简介、语法
ES6
ES6简介
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 [1] 。
1.优点
- 提升JS编写大型的复杂应用程序的能力（这次升级加入了模块化的概念、细化和优化语法、封装了一些方法）。
2.不足
- 对浏览器存在兼容性问题，可以使用Bable：ES6->ES5（转换器）
ES6语法
1.let声明变量
- let申明的变量是有局部作用域
- let声明的变量不能跟已有变量重名
<!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><script>{//let申明的变量是有局部作用域let a = 1;//console.log(a);}//let声明的变量不能跟现有变量重名let b = true;//let b = false;console.log(b);</script>
</head>
<body></body>
</html>
2.const声明常量
- 常量必须初始化
<!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><script>const PI = 3.14;//PI = 3.1415; //Assignment to constant variable//常量必须初始化const A = 1;</script>
</head>
<body></body>
</html>
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><script>//数组的解构let a = 1,b = true,c = "abc";let [x,y,z] = [2,false,"bcd"];let res = a + x;console.log(x,y,z);//对象的解构let sid = 1,sname = "mary";let student1 = {"sid":sid,"sname":sname};console.log(student1);let student2 = {sid,sname};console.log(student2);let teacher = {"tid":1,"tname":"张雪峰"};// let id = teacher.tid;// let name = teacher.tname;//变量名必须与属性名一致let {tname,tid} = teacher;console.log(tname,tid);</script>
</head>
<body></body>
</html>
4.模板字符串
模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。
- 定义多行字符串
- 引用变量
- 调用函数
<!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><script>//使用模板字符串定义多行字符串let str1 = `hello world`;console.log(str1);//模板字符串引用变量let name = "mary";let str2 = `hello ${name}`;console.log(str2);//模板字符串调用函数function show() {return "tom";}let str3 = `hello ${show()}`;console.log(str3);</script>
</head>
<body></body>
</html>
5.定义方法简写
<!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><script>let student1 = {sid:1,sname:"mary",sleep:function(){console.log("睡觉");},eat:function(){console.log("吃饭");}};student1.sleep();let student2 = {sid:1,sname:"tom",sleep(){console.log("睡觉");},eat(){console.log("吃饭");}};student2.eat();</script>
</head>
<body></body>
</html>
6.对象拓展运算符
- 拓展运算符：（…），用于取出参数对象所有可遍历属性然后拷贝到当前对象
<!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><script>let teacher1 = {"tid":1,"tname":"张雪峰"};let teacher2 = {...teacher1};console.log(teacher2);let stu1 = {"sid":1},stu2 = {"sname":"mary"},stu3 = {"sage":18};let student = {...stu1,...stu2,...stu3};console.log(student);</script>
</head>
<body></body>
</html>
7.函数的默认参数
<!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><script>function show(a,b=10){let res = a + b;console.log(res);}show(1,2);show(1);</script>
</head>
<body></body>
</html>
8.不定参数
不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数。
<!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><script>function show(a,...b){console.log(b.length);}show(1);show(2,true);show(3,4.2,"abc",true);</script>
</head>
<body>
</body>
</html>
9.箭头函数
箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体
- 无参的箭头函数必须在参数的地方写()
- 一个参数的箭头，例：res = >
- 有多个参数的箭头函数必须在参数的地方写()
- 函数体有多行语句时需要将{}写出来
<!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><script>function show(a) {return a;}//console.log(show(1));//箭头函数let showAgain = b => b;//console.log(showAgain(2));function f1() {console.log("Hello World");}f1();//无参的箭头函数必须在参数的地方写()let f2 = () => console.log("Hello World");f2();function f3(a,b) {var res = a + b;return res;}console.log(f3(3,4));//有多个参数的箭头函数必须在参数的地方写()//函数体有多行语句时需要将{}写出来let f4 = (x,y) => {var res = x + y;return res;}console.log(f4(3,4));</script>
</head>
<body>
</body>
</html>
相关文章：
ES6-简介、语法
ES6 ES6简介 ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语…...
诚迈科技子公司智达诚远与Unity中国达成合作，打造智能座舱新时代
2023 年 8 月 23 日，全球领先的实时 3D 引擎 Unity 在华合资公司 Unity 中国举办发布会，正式对外发布 Unity 引擎中国版——团结引擎，并带来专为次世代汽车智能座舱打造的团结引擎车机版。发布会上，诚迈科技副总裁、诚迈科技子公司…...
算法与数据结构（十）--图的入门
一.图的定义和分类 定义：图是由一组顶点和一组能够将两个顶点连接的边组成的。 特殊的图： 1.自环：即一条连接一个顶点和其自身的边; 2.平行边：连接同一对顶点的两条边； 图的分类： 按照连接两个顶点的边的…...
【Go 基础篇】Go语言 init函数详解：包的初始化与应用
介绍 在Go语言中，init() 函数是一种特殊的函数，用于在包被导入时执行一次性的初始化操作。init() 函数不需要手动调用，而是在包被导入时自动执行。这使得我们可以在包导入时完成一些必要的初始化工作，确保包的使用具有正确的环境…...
wazuh环境配置及漏洞复现
目录 一、wazuh配置 1进入官网下载OVA启动软件 2.虚拟机OVA安装 二、wazuh案例复现 1.wazuh初体验 2.这里我们以SQL注入为例，在我们的代理服务器上进行SQL注入，看wazuh如何检测和响应 一、wazuh配置 1进入官网下载OVA启动软件 Virtual Machine (O…...
Java接收前端请求体方式
💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ！ 文章目录 RequestBodyPathVariableRequestParamValidated方法参数校验方法返回值校验 RequestHeaderHttpServletRequest ## Java接收前端请求体的方式 请求体…...
私有化部署即时通讯平台，30分钟替换钉钉和企业微信
随着企业对即时通讯和协作工具的需求不断增长，私有化部署的即时通讯平台成为企业的首选。WorkPlus作为有10余年行业深耕经验与技术沉淀品牌，以其安全高效的私有化部署即时通讯解决方案，帮助企业在30分钟内替换钉钉和企业微信。本文将深入探讨…...
如何深入理解 Node.js 中的流（Streams）
Node.js是一个强大的允许开发人员构建可扩展和高效的应用程序。Node.js的一个关键特性是其内置对流的支持。流是Node.js中的一个基本概念，它能够实现高效的数据处理，特别是在处理大量信息或实时处理数据时。 在本文中，我们将探讨Node.js中的流…...
MSP430FR2xxx开发（一）添加driverlib
一、新建工程 根据自己手上的硬件型号新建工程，文中已MSP430FR2355为例。 二、添加driverlib 首先去官方下载driverlib. https://www.ti.com.cn/tool/cn/MSPDRIVERLIB?keyMatchMSP430%20DRIVERLIB#downloads 下载后的内容如下： 我这里就选择MSP430…...
【C++】做一个飞机空战小游戏(九)——发射子弹的编程技巧
[导读]本系列博文内容链接如下： 【C】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值 【C】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动【C】做一个飞机空战小游戏(三)——getch()函数控制任意造型飞机图标移动 【C】做一个飞…...
34.SpringMVC获取请求参数
SpringMVC获取请求参数 通过ServletAPI获取 将HttpServletRequest作为控制器方法的形参，此时HttpServletRequest类型的参数表示封装了当前请求的请求报文的对象 index.html <form th:action"{/test/param}" method"post">用户名&#…...
TC1016-同星4路CAN（FD），2路LIN转USB接口卡
TC1016是同星智能推出的一款多通道CAN（FD）和LIN总线接口设备，CANFD总线速率最高支持8M bps，LIN支持速率0~20K bps，产品采用高速USB2.0接口与PC连接，Windows系统免驱设计使得设备具备极佳的系统兼容性。 支…...
Android源码——从Looper看ThreadLocal
1 概述 ThreadLocal用于在当前线程中存储数据，由于存储的数据只能在当前线程内使用，所以自然是线程安全的。 Handler体系中，Looper只会存在一个实例，且只在当前线程使用，所以使用ThreadLocal进行存储。 2 存储原理 …...
16、Flink 的table api与sql之连接外部系统: 读写外部系统的连接器和格式以及JDBC示例（4）
Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…...
MySQL 自定义 split 存储过程
MySQL 没有提供 split 函数，但可以自己建立一个存储过程，将具有固定分隔符的字符串转成多行。之所以不能使用自定义函数实现此功能，是因为 MySQL 的自定义函数自能返回标量值，不能返回多行结果集。 MySQL 8： drop pr…...
专题-【十字链表】
有向图的十字链表表示法：...
微信小程序教学系列（2）
第二章：小程序开发基础 1. 小程序页面布局与样式 在小程序开发中，我们可以使用 WXML（WeiXin Markup Language）和 WXSS（WeiXin Style Sheet）来定义页面的布局和样式。 1.1 WXML基础 WXML 是一种类似于 H…...
社科院与美国杜兰大学金融管理硕士项目——畅游于金融世界
随着社会经济的不断发展，职场竞争愈发激烈，很多同学都打算通过报考研究生来实现深造，提升自己的综合能力和竞争优势，获得优质的证书。而对于金融专业的学生和在职人员来说，社科院与美国杜兰大学金融管理硕士项目是一个…...
功能强大、超低功耗的STM32WL55JCI7、STM32WL55CCU7、STM32WL55CCU6 32位无线远距离MCU
STM32WL55xx 32位无线远距离MCU嵌入了功能强大、超低功耗、符合LPWAN标准的无线电解决方案，可提供LoRa、(G)FSK、(G)MSK和BPSK等各种调制。STM32WL55xx无线MCU的功耗超低，基于高性能Arm Cortex-M4 32位RISC内核（工作频率高达48MHz）…...
【自适应稀疏度量方法和RQAM】疏度测量、RQAM特征、AWSPT和基于AWSPT的稀疏度测量研究（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
对比体验Taotoken平台不同大模型在创意生成上的差异
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 对比体验Taotoken平台不同大模型在创意生成上的差异 对于内容创作者而言，大模型是激发灵感、提升效率的得力工具。然而…...
AI计算前沿：从存内计算到神经形态芯片的硬件革命
1. 从CES的喧嚣到AI研究的深水区：一次认知的转向每年一月的拉斯维加斯，消费电子展（CES）总是充斥着最炫目的灯光、最酷炫的 gadgets 和最大声的营销口号。作为一名长期跟踪半导体与系统设计的行业观察者，我和我的搭档—…...
时间序列自监督学习实战：VIbCReg框架迁移与性能优化
1. 项目概述：当计算机视觉的自监督学习遇上时间序列在机器学习领域，获取高质量、大规模的标注数据一直是个老大难问题，尤其是在时间序列分析这个方向。无论是工业设备的振动监测、医疗心电信号分析，还是金融市场的波动预测&#x…...
如何快速掌握Blender精确建模：CAD_Sketcher完整实战指南
如何快速掌握Blender精确建模：CAD_Sketcher完整实战指南 【免费下载链接】CAD_Sketcher Constraint-based geometry sketcher for blender 项目地址: https://gitcode.com/gh_mirrors/ca/CAD_Sketcher 你是否曾经希望在Blender中创建精确的工程图纸ÿ…...
终极免费PDF转SVG工具：简单3步完成高质量转换
终极免费PDF转SVG工具：简单3步完成高质量转换 【免费下载链接】pdf2svg A simple PDF to SVG converter using the Poppler and Cairo libraries 项目地址: https://gitcode.com/gh_mirrors/pd/pdf2svg 在当今数字化时代，PDF转SVG已成为设计师、开…...
4 生成器模式
生成器模式 的核心是：将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。简单说：像搭积木一样，用相同的步骤可以搭出不同样式的房子。建造房子的步骤是固定的：打地基建墙体安装屋顶装修内部但…...
AI信息摘要系统：从RSS抓取到LLM摘要的自动化实现
1. 项目概述：AI驱动的每日信息摘要最近在GitHub上看到一个挺有意思的项目，叫“ai-daily-digest”。光看名字，你大概能猜到它想做什么：用人工智能来帮你整理每日信息。但具体怎么实现，能解决什么问题，背后又…...
Qt 批量读取Excel数据：从性能瓶颈到优化实践
1. 为什么Qt读取Excel会卡成PPT？ 第一次用Qt操作Excel表格时，我兴冲冲写了个循环读取单元格的代码。结果打开包含5000行数据的文件后，进度条像蜗牛爬坡，鼠标指针转成彩色圆圈，程序直接卡成PPT幻灯片模式——这场景估计…...
网盘直链下载助手：解锁九大网盘下载速度的终极方案
网盘直链下载助手：解锁九大网盘下载速度的终极方案 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘…...
Loop Habit Tracker习惯追踪应用技术深度解析与架构实践指南
Loop Habit Tracker习惯追踪应用技术深度解析与架构实践指南 【免费下载链接】uhabits Loop Habit Tracker, a mobile app for creating and maintaining long-term positive habits 项目地址: https://gitcode.com/gh_mirrors/uh/uhabits Loop Habit Tracker是一款基于…...