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 声明复杂类型对象时要慎重。


目录
相关文章
|
4月前
|
JavaScript 前端开发 开发者
探究ECMAScript 6的新特性
ECMAScript 6(也称为ES6或ECMAScript 2015)是JavaScript的一个重大更新,它引入了许多新特性和改进,使得JavaScript的开发更加简单和高效。在本篇博客中,我们将详细介绍ECMAScript 6的新特性。
44 1
探究ECMAScript 6的新特性
|
7月前
|
存储 JavaScript 前端开发
ECMAScript 2020(ES11)新特性简介
ECMAScript 2020(ES11)新特性简介
63 0
|
9月前
|
JavaScript 网络架构
|
11月前
|
JavaScript 前端开发 Unix
1.C 语言简介
1.C 语言简介
119 0
|
缓存 JavaScript 前端开发
ECMAScript6入门上
ECMAScript6入门上
53 0
ECMAScript6入门上
|
存储 JavaScript 前端开发
重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述
洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与算法》第三版于2019年的5月份再次刊印发行,新版内容契合当下,实为JavaScript开发人员的必备之佳作。有幸重读此版,与诸君分享共勉。
275 0
|
JavaScript 前端开发
ECMAScript 6新特性简介
ECMAScript 6新特性简介
ECMAScript 6新特性简介
|
前端开发 JavaScript Java
ECMAScript 2021(ES12)新特性简介
ECMAScript 2021(ES12)新特性简介
|
存储 XML JSON
ECMAScript 2019(ES10)新特性简介
ECMAScript 2019(ES10)新特性简介
|
存储 前端开发 JavaScript
ECMAScript 2017(ES8)新特性简介
ECMAScript 2017(ES8)新特性简介