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

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

Python环境安装与虚拟环境配置详解

本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南&#xff0c;适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者&#xff0c;都能在此找到适合自己的环境搭建方法和常见问题的解决方案。 快速开始 一分钟快速安装与虚拟环境配置 # macOS/…...

leetcode_69.x的平方根

题目如下 &#xff1a; 看到题 &#xff0c;我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历&#xff0c;我们是整数的平方根&#xff0c;所以我们分两…...

深度解析云存储:概念、架构与应用实践

在数据爆炸式增长的时代&#xff0c;传统本地存储因容量限制、管理复杂等问题&#xff0c;已难以满足企业和个人的需求。云存储凭借灵活扩展、便捷访问等特性&#xff0c;成为数据存储领域的主流解决方案。从个人照片备份到企业核心数据管理&#xff0c;云存储正重塑数据存储与…...