概念
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。
ECMAScript和JavaScript到底是什么关系?很多初学者会感到困惑,简单来说,ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。
1996年11月,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。
ES6的目标是JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。
浏览器支持
虽说ES6已经作为新一代标准发布了,但是各大浏览器对新功能实现支持的还需要一段时间,那么我们怎么知道自己使用的浏览器是否支持ES6的相应功能呢?小编已经考虑到你的担忧,专门为你提供了这个让你放一百个心的查询支持情况的网站:http://kangax.github.io/compat-table/es6/
不过随着时间的推移,一起支持性问题都会解决的
如果你想现在就在浏览器使用ES6的特性,还可以通过引用兼容包的方式提前尝尝鲜。https://github.com/yongbolu/es6-shim.git
环境支持
Traceur允许将ES6代码直接插入网页。首先,必须在网页头部加载Traceur库文件。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset = "utf-8" /> <title>ECMAScript</title> </head> <body> <!-- 加载Traceur编译器 --> <script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script> <!-- 将Traceur编译器用于网页 --> <script src="http://google.github.io/traceur-compiler/src/bootstrap.js" type="text/javascript"></script> <!-- 打开实验选项,否则有些特性可能编译不成功 --> <script> traceur.options.experimental = true; </script> <script type="module"> class Person{ constructor(){ console.log('Person constructor'); } add(a, b){ return a + b; } } var person = new Person(); console.log(c.add(4,5)); </script> </body> </html>
注意:script标签的type属性的值是module(或者traceur),而不是text/javascript。这是Traceur编译器识别ES6代码的标识,编译器会自动将所有type=module的代码编译为ES5,然后再交给浏览器执行。
ES6中的干货
- let
let是ES6中新增关键字。
它的作用类似于var,用来声明变量,但是所声明的变量,只在let命令所在的代码块内有效。
代码如下:
if(true) var a = 1; let b = 2; document.write(b); } document.write(a); document.write(b); // 报错:ReferenceError: b is not defined
let应用
var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { document.write(i); }; } document.write(a[6]()); //6改成var 结果为10;
2、const命令
const 声明的是常量,一旦声明,值将是不可变的。
const PI = 3.1415; PI // 3.1415 PI = 3; PI // 3.1415 const PI = 3.1; PI // 3.1415
const 也具有块级作用域
if (true) { const max = 5; } document.write(max); // ReferenceError 常量MAX在此处不可得
const 不能变量提升(必须先声明后使用)
if (true) { document.write(MAX); // ReferenceError const MAX = 5; }
const 不可重复声明
var message = "Hello!"; let age = 25; // 以下两行都会报错 const message = "Goodbye!"; const age = 30;
const 指令指向变量所在的地址,所以对该变量进行属性设置是可行的(未改变变量地址),如果想完全不可变化(包括属性),那么可以使用冻结。