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

JavaScript(ES6)入门

ES6

1、介绍

ECMAScript  6(简称ES6)是于2015年6月正式发布的JavaScript 语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
另外,一些情况下ES6也泛指ES2015及之后的新增特性,虽然之后的版本应当称为ES7、ES8等。

2、新增功能

    2.1、let

ES6新增了let命令,用来声明变量。它的用法类似于var ,但是所声明的变量,只在let命令所在的代码块内有效。

    2.2、const

const声明一个只读的常量 。一旦声明,常量的值就不能改变,且声明时必须立即初始化,不能留到以后赋值。const的作用域与let命令相同:只在声明所在的块级作用域内有效。

    2.3、匿名函数简写

function(){} 匿名函数简写,语法()=>{}。

    2.4、模板字符串

声明一些html标签的字符串更简便,语法:`  ` 。

    2.5、对象定义

属性名和变量名一致的对象仅使用变量即可无需定义属性名。

    2.6、模块

            ES6引入了模块系统,可以导出和导入模块。
实战:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECMA6</title>
</head>
<body>
    <div id="app">
        <!--ES6: EcmaScript 6.x ====> javascript chrome  jscript ie =====> ECMAScript 到今
              天js依然存在浏览器
            EcmaScript: 1.x=====> 7.x  8.x  ES11.x
            EcmaScript: 5.x   通用版5.x
            EcmaScript: 6.x   简称 ES6
            1.ES6中变量声明
         -->
    </div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>
    //es6 1.变量声明  var  原因: 使用var声明变量存在作用范围混淆问题
    //  let     :用来声明局部变量   好处: 作用范围严谨 从代码声明出开始 到代码块结束  一般在
                  声明基本变量使用推荐使用let
    //  const   :用来声明js中常量   好处: 一旦被赋值不能被修改   推荐使用这两个关键字声明
                     变量 声明js中对象时推荐使用const 数组
    //es6 2.在使用匿名函数时作为参数时候 function(){}   推荐使用es6中箭头函数
    // (参数,参数)=>{函数体}
    axios.get("url").then(function(res){}).catch(function(err){});
    
    axios.get("url").then((res)=>{
    
    }).catch((err)=>{});
    
    //注意:
    //      1.当箭头函数没有参数时或者参数大于1个 必须加入()
    //      2.当箭头函数只有一个参数时 () 可以省略不写
    //      3.当函数体中只有一行代码时 函数体{} 可以省略不写
    //      4.箭头函数和匿名函数最大区别  箭头函数没有自己this   匿名函数存在自己的this
    //es6 3. 模板字符串   使用语法:  ` `
    let html = "<button οnclick=\"test('+id+')\">点我</button>" +
                    "<button οnclick=\"test('+id+')\">点我</button>";
    
    let html1 = `<div>
                    <h1>我是小黑</h1>
                    <button οnclick="test()">点我</button>
                </div>`;
    //es6 4. 对象定义  便利: 在定义对象时如果对象属性名和变量名一致,写一个即可
    let id = 21;
    let name = "小王";
    let age = 23;
    
    //es5.x版本
    const emp = {id:id,name:name,age:age};
    
    //es6.x版本
    const emp1 = {id,name,age}
    //es6 5. 模块导出和导入
    // 导出
    // math.js
    export const add = (a, b) => a + b;
    export const subtract = (a, b) => a - b;
    // 导入
    // main.js
    import { add, subtract } from './math.js';
    console.log(add(2, 3)); // 5
    console.log(subtract(5, 3)); // 2
</script>
了解更多参考文档: 1.1 ES6 教程 | 菜鸟教程

相关文章:

JavaScript(ES6)入门

ES6 1、介绍 ECMAScript 6&#xff08;简称ES6&#xff09;是于2015年6月正式发布的JavaScript 语言的标准&#xff0c;正式名为ECMAScript 2015&#xff08;ES2015&#xff09;。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序&#xff0c;成为企业级开发语言。…...

深入分析 Android Activity (十)

文章目录 深入分析 Android Activity (十)1. Activity 的资源管理1.1 使用资源 ID 访问资源1.2 Drawable 资源1.3 使用 TypedArray 管理资源1.4 使用资源配置 2. Activity 的数据存储2.1 SharedPreferences2.2 文件存储2.3 SQLite 数据库2.4 ContentProvider 3. Activity 的性能…...

考试“挂了“用日语怎么说,柯桥商务日语培训

1、もえる 热衷于……&#xff0c;燃烧 除了“燃烧”&#xff0c;还有“热衷于……”的意思&#xff0c;如“家が燃える&#xff08;房子着火了&#xff09;”&#xff0c;“勉強に燃える&#xff08;热衷于学习&#xff09;”。 &#xff21;&#xff1a;今&#xff08;いま&…...

【机器学习300问】103、简单的经典卷积神经网络结构设计成什么样?以LeNet-5为例说明。

一个简单的经典CNN网络结构由&#xff1a;输入层、卷积层、池化层、全连接层和输出层&#xff0c;这五种神经网络层结构组成。它最最经典的实例是LeNet-5&#xff0c;它最早被设计用于手写数字识别任务&#xff0c;包含两个卷积层、两个池化层、几个全连接层&#xff0c;以及最…...

【代码随想录算法训练营第37期 第二十一天 | LeetCode530.二叉搜索树的最小绝对差、501.二叉搜索树中的众数、236. 二叉树的最近公共祖先】

代码随想录算法训练营第37期 第二十一天 | LeetCode530.二叉搜索树的最小绝对差、501.二叉搜索树中的众数、236. 二叉树的最近公共祖先 一、530.二叉搜索树的最小绝对差 解题代码C&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* …...

2023 年网络等级保护考试题库及答案

一、单项选择题 1.在等保 1.0 的根本要求中&#xff0c;网络设备防护的内容归属于网络安全&#xff0c;在等保 2.0 中将其归属到〔〕。 A 安全通信网络 B 安全区域边界 C 安全计算环境 D 安全治理中心 答案&#xff1a;c 2.应成立指导和治理网络安全工作的委员会或领导小组&…...

springboot集成nacos

springboot集成nacos 1.版本2. POM依赖3. nacos服务3.1 下载nacos压缩包3.2 启动nacos 4. yaml配置5.Demo5.1 配置中心简单格式获取方式普通方式还可以再启动类上添加注解完成5.2 获取json格式的demo5.2 自动注册根据yaml配置 1.版本 nacos版本:2.3.2 springboot版本&#xff…...

NoSQL数据库技术与应用 教学设计

《NoSQL数据库技术与应用》 教学设计 课程名称&#xff1a;NoSQL数据库技术与应用 授课年级&#xff1a; 20xx年级 授课学期&#xff1a; 20xx学年第一学期 教师姓名&#xff1a; 某某老师 2020年5月6日 课题 名称 第1章 初识NoSQL 计划 学时 3 课时 内容 分析 随着云计算、…...

比较(一)利用python绘制条形图

比较&#xff08;一&#xff09;利用python绘制条形图 条形图&#xff08;Barplot&#xff09;简介 条形图主要用来比较不同类别间的数据差异&#xff0c;一条轴表示类别&#xff0c;另一条则表示对应的数值度量。 快速绘制 基于seaborn import seaborn as sns import matplo…...

【面试】Oracle JDK和Open JDK什么关系?

目录 1. 起源与发展2. 代码与许可3. 功能与组件4. 使用场景5. 版本更新与支持 1. 起源与发展 1.Oracle JDK是由Oracle公司基于Open JDK源代码开发的商业版本。2.Open JDK是java语言的一个开源实现。 2. 代码与许可 1.Oracle JDK包含了闭源组件&#xff0c;并根据二进制代码许…...

科学技术创新杂志科学技术创新杂志社科学技术创新编辑部2024年第10期目录

科技创新 单桩穿越岩溶发育地层力学特征与溶洞处置措施研究 刘飞; 1-7《科学技术创新》投稿&#xff1a;cnqikantg126.com 基于多目标优化的中低压配电网电力规划研究 向星山;杨承俊;张寒月; 8-11 激光雷达测绘技术在工程测绘中的应用研究 张军伟;闫宏昌; 12-15 …...

ES数据导出成csv文件

推荐使用es2csv 工具。 命令行实用程序&#xff0c;用Python编写&#xff0c;用于用Lucene查询语法或查询DSL语法查询Elasticsearch&#xff0c;并将结果作为文档导出到CSV文件中。该工具可以在多个索引中查询批量文档&#xff0c;并且只获取选定的字段&#xff0c;这减少了查…...

结构型设计模式之装饰模式

文章目录 概述装饰模式原理代码案例小结 概述 装饰模式(decorator pattern) 的原始定义是&#xff1a;动态的给一个对象添加一些额外的职责. 就扩展功能而言,装饰器模式提供了一种比使用子类更加灵活的替代方案。 装饰模式原理 装饰模式中的角色&#xff1a; 抽象构件角色 …...

Java - 当年很流行,现在已经淘汰的 Java 技术,请不要在继续学了!!!

最近这段时间收到了一些读者的私信&#xff0c;问我某个技术要不要学&#xff0c;还有一些在国外的同学竟然对 Java 图形化很感兴趣&#xff0c;还想找这方面的工作。 比较忙&#xff0c;一直没抽出时间去回答这类问题&#xff0c;刚好看到我关注的一位大佬回答过&#xff0c;这…...

驻波比VSWR

最近看大家写的VSWR文章&#xff0c;发现有很多误解&#xff0c; 1)错误解释是入射波和反射波叠加的驻波的波峰/波谷。大家可以向下驻波也是正弦波&#xff0c;波峰和波谷的值不都是振幅吗&#xff1f;因此相当于VSWR恒等于1了。 2&#xff09;VSWR越小越好&#xff1b; 正确…...

多线程-线程池

为什么要使用线程池 在Java中使用线程池的主要原因有以下几点&#xff1a; 提高性能&#xff1a;使用线程池可以减少线程的创建和销毁过程的开销。线程的创建和销毁是比较昂贵的操作&#xff0c;如果每次需要执行任务时都创建一个新线程&#xff0c;会造成系统资源的浪费。而线…...

护网期间遇到的几个上传bypass waf、edr

1. weblogic部署war的时候 http/1.1 改成http/2绕过waf 其实jar和ear部署应该也可以&#xff0c;但是我没成功。 weblogoic 部署war死活出错&#xff0c;用linux下的浏览器 linux下打包war马 zip -r zipjob4.zip job/ mv zipjob3.zip zipjob3.war 然后部署成功之后&am…...

简述MVC模式

这里为什么讲MVC模式&#xff0c;是因为在学习的过程中&#xff0c;很多人不知怎的&#xff0c;将观察者模式和MVC混为一谈。MVC模式最开始出现在WEB开发中&#xff0c;该模式能够很好的做到软件模块的高内聚&#xff0c;低耦合&#xff0c;所以其思想逐渐在各个软件开发领域都…...

C#--Mapster(高性能映射)用法

1.Nuget安装Mapster包引用 2.界面XAML部分 <Window x:Class"WpfApp35.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.m…...

mysql实战——Mysql8.0高可用之双主+keepalived

一、介绍 利用keepalived实现Mysql数据库的高可用&#xff0c;KeepalivedMysql双主来实现MYSQL-HA&#xff0c;两台Mysql数据库的数据保持完全一致&#xff0c;实现方法是两台Mysql互为主从关系&#xff0c;通过keepalived配置VIP&#xff0c;实现当其中的一台Mysql数据库宕机…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...