当前位置: 首页 > 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数据库宕机…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...