ECMAScript6入门简介篇

简介: ECMAScript6入门简介篇

ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言.

另外,一些情况下ES6也泛指ES2015及之后的新增特性,虽然之后的版本应当称为ES7、ES8等.

ECMAScript 和 JavaScript的关系

要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。

因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript)。日常场合,这两个词是可以互换的。

ES6的兼容性问题

IE10+,chrome,Firefox,移动端,nodesjs现在都支持

兼容低版本的浏览器

支持在线转换(这种编译会加大页面渲染的时间)

支持提前编译(强烈建议这种方式,不影响浏览器渲染的时间)

使用babel工具

使用npm进行安装,npm时随同nodejs一起安装的包的管理工具,也就是需要先安装node

我们可以来安装一下

我们创建一个普通的项目

进入项目目录安装babel

npm install babel-cli -g

安装完之后会生成相对应的文件

Babel -V 查看babel的环境

因为我在安装nodejs的时候采用的全局安装,

在命令行中使用 npm config ls查到npm的默认安装目录,

prefix=C:\Users\xxxx\AppData\Roaming\npm,

然后进入这个目录使用npm install –-save-dev babel-cli安装babel,然后就成功了。。

注意AppData是个隐藏文件夹

然后再当前项目下输入npm init -y 或者是 npm init

这是后说明我们的babel环境搭建好了

可以直接再黑窗口运行这个js文件

使用这个echo .>.babelrc生成一个.Babelrc的文件

然后打开它在里面输入

{
//设置转码规则
“presets”: [“es2015”,“stage-2”],
“plugins”: [“transform-runtime”] //设置插件
}

然后我们安装需要的插件

npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 -save-dev

安装成功

我们把package.json中的错误改一下

这里就是指的将src目录下的文件转换编译成新文件到lib下面

那么我们去创建两个目录

,把index.js放到src下面,输入npm run build 运行,我们会看到自动编译的效果

转换的支持条件

let命令

接下来我们来学习一下ES6新增的命令 let

再学习let的时候,我们先来回复一下var的使用方法,这是我们再学习JavaScript的时候经常使用的声明变量用的

我们运行一下,再控制台看到输出

我们刷新一下也面会发现,这个时候输出的是40

再这边我们想说的是,再js中var这个使用的方式,可以重复的声明变量,和其他的编程语言来比较的话,我们发现这是不可以想象的,是不可思议的。并且使用var不可以限制变量,(也就是只有一种var的声明方式,没有常量的说法)

我们还可一看到,使用var没有办法区分使用区间

接下来我们在写个例子来区分一下


这时候循行的控制台输出的都是4,说明这样写是由问题的,我们可以封装一个函数,来解决,但是代码就看上去比较怪异


这是后运行是不是就解决了刚才的问题,但是现在还是很麻烦的,而且代码不好理解,那么我们使用let就可以解决这样的问题

简单使用的方法

Const命令

const 声明一个只读变量,声明之后不允许改变。意味着,一旦声明必须初始化,否则会报错

注意要点:

const 如何做到变量在声明初始化之后不允许改变的?其实 const 其实保证的不是变量的值不变,而是保证变量指向的内存地址所保存的数据不允许改动。此时,你可能已经想到,简单类型和复合类型保存值的方式是不同的。是的,对于简单类型(数值 number、字符串 string 、布尔值 boolean),值就保存在变量指向的那个内存地址,因此 const 声明的简单类型变量等同于常量。而复杂类型(对象 object,数组 array,函数 function),变量指向的内存地址其实是保存了一个指向实际数据的指针,所以 const 只能保证指针是固定的,至于指针指向的数据结构变不变就无法控制了,所以使用 const 声明复杂类型对象时要慎重。


目录
相关文章
|
SQL 关系型数据库 MySQL
JPQL-Query查询实例详解
JPQL-Query查询实例详解
458 0
|
5月前
|
开发者
Uniapp开发鸿蒙应用教程之自定义导航栏
本文介绍了在Uniapp跨平台开发鸿蒙应用时,如何实现自定义导航栏。通过修改pages.json文件可调整默认导航栏样式,但若需添加组件(如搜索框、按钮等),则需手动创建自定义导航栏组件,以适配鸿蒙系统。文中给出了详细的配置代码与实现步骤,帮助开发者灵活控制界面布局。#鸿蒙 #Uniapp #跨平台开发
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
520 2
|
8月前
|
前端开发 JavaScript 数据格式
通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据和性能优化,reduce()的使用详解(附实际应用代码)
array.reduce()可以用来数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据、性能优化等,使用难度相对高一些,但是能大大减少代码量。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时
|
SQL 架构师 Java
SpringBoot从入门到精通(二十八) JPA 的实体映射关系,轻松一对一,一对多,多对多关系映射!
前面讲了Spring Boot 使用 JPA,实现JPA 的增、删、改、查的功能,同时也介绍了JPA的一些查询,自定义SQL查询等使用。JPA使用非常简单,功能非常强大的ORM框架,无需任何数据访问层和sql语句即可实现完整的数据操作方法。但是,之前都是介绍的单表的增删改查等操作,多表多实体的数据操作怎么实现呢?接下来聊一聊 JPA 的一对一,一对多,多对一,多对多等实体映射关系。
SpringBoot从入门到精通(二十八) JPA 的实体映射关系,轻松一对一,一对多,多对多关系映射!
|
安全 网络安全 数据安全/隐私保护
深入理解HTTP协议:工作原理与安全性
【6月更文挑战第28天】HTTP是互联网基础协议,用于浏览器与服务器通信。基于请求-响应模型,无状态且可扩展。但其明文传输、缺乏身份验证和数据完整性校验导致安全问题。HTTPS 加入SSL/TLS,提供加密、身份验证和完整性校验,保障网络安全。了解HTTP原理和安全至关重要。
|
安全 IDE Java
Java串口通信技术探究2:RXTX库单例测试及应用
Java串口通信技术探究2:RXTX库单例测试及应用
489 4
|
人工智能 前端开发 JavaScript
前端Sass详解说明
前端Sass详解说明
347 0
|
存储 自然语言处理 Java
Java中的字符型数据(char)
Java中的字符型数据(char)
1017 0
|
JavaScript
Layui中jquery的使用方式
Layui中jquery的使用方式
468 0