ECMAScript 6教程 (一)

ECMAScript 6教程 (一)
　　本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，博客地址为 http://www.cnblogs.com/jasonnode/ 。该系列课程是汇智网整理编写的，课程地址为 http://www.dwz.cn/3e6Yml

什么是ES6？

　　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的风采，因此在学习本课程前需要具备JavaScript的基础知识，如果你并不了解JavaScript是什么，可以先学习一下JavaScript的入门课程。

支持

　　虽说ES6已经作为新一代标准发布了，但是各大浏览器对新功能实现支持的还需要一段时间，那么我们怎么知道自己使用的浏览器是否支持ES6的相应功能呢？

　　不用紧张，对ES6的支持可以查看kangax.github.io/es5-compat-table/es6/，在这里可以清晰的了解到不同版本的浏览器对ES6功能的支持情况。随着时间的推移，支持度已经越来越高了，ES6的大部分特性都实现了。

　　如果你想现在就在浏览器使用ES6的特性，还可以通过引用兼容包的方式提前尝尝鲜。https://github.com/paulmillr/es6-shim

环境支持

直接插入网页

Traceur允许将ES6代码直接插入网页。首先，必须在网页头部加载Traceur库文件。
```

<script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script>

<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 Calc {
　　　　constructor(){
　　　　　　console.log('Calc constructor');
　　　　}
　　　　add(a, b){
　　　　　　return a + b;
　　　　}
　　}
 
　　var c = new Calc();
　　console.log(c.add(4,5));
</script>
```
注意，script标签的type属性的值是module(或者traceur)，而不是text/javascript。这是Traceur编译器识别ES6代码的标识，编译器会自动将所有type=module的代码编译为ES5，然后再交给浏览器执行。

let

let是ES6中新增关键字。

它的作用类似于var，用来声明变量，但是所声明的变量，只在let命令所在的代码块内有效。
```
if(true){
    var a = 1;
l    et b = 2;
}
document.write(a);
document.write(b); // 报错：ReferenceError: b is not defined
```
体会下let和var的作用域范围:
```
function f1() {
    var a = 8;
    let n = 5;
    if (true) {
        let n = 10;
        var a = 20
    }
    document.write(n); // 5
    document.write(a); // 20
}
f1();
```
let应用

for循环的计数器，就很合适使用let命令。
```
var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        document.write(i);
    };
}
document.write(a[6]());
```
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 指令指向变量所在的地址，所以对该变量进行属性设置是可行的（未改变变量地址），如果想完全不可变化（包括属性），那么可以使用冻结。
```
const C1 = {};
C1.a = 1;
document.write(C1.a); // 1
C1 = {}; // 报错 重新赋值，地址改变
 
//冻结对象，此时前面用不用const都是一个效果
const C2 = Object.freeze({});
C2.a = 1; //Error,对象不可扩展
document.write(C2.a);
```
是否包含字符串三种新方法

　　传统上，JavaScript只有 indexOf 方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
```
var str = "Hello world!";
 
str.startsWith("Hello") // true
str.endsWith("!") // true
str.includes("o") // true
```
这三个方法都支持第二个参数，表示开始搜索的位置。
```
var str = "Hello world!";
 
str.startsWith("world", 6) // true
str.endsWith("Hello", 5) // true
str.includes("Hello", 6) // false
```
上面代码表示，使用第二个参数n时，endsWith 的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

repeat()原字符串重复

repeat()返回一个新字符串，表示将原字符串重复n次。
```
var str = "x";
str.repeat(3) // "xxx"
 
var str1 = "hello";
str1.repeat(2) // "hellohello"
```
模板字符串

模板字符串提供了3个有意思的特性。

模板字符中，支持字符串插值：
```
let first = 'hubwiz';
let last = '汇智网';
document.write(`Hello ${first} ${last}!`);
// Hello hubwiz 汇智网!
```
模板字符串可以包含多行：
```
let multiLine = '
　　　　This is
　　　　a string
　　　　with multiple
　　　　lines';
document.write(multiLine);
```
标签模板

标签模板
```
var a = 5;
var b = 10;
 
tag`Hello ${ a + b } world ${ a * b }`;
```
上面代码中，模板字符串前面有一个标识名tag，它是一个函数。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。

tag函数所有参数的实际值如下。
- 第一个参数：['Hello ', ' world ']
- 第二个参数: 15
- 第三个参数：50
也就是说，tag函数实际上以下面的形式调用。
```
tag(['Hello ', ' world '], 15, 50)
```
下面是tag函数的一种写法，以及运行结果。
```
var a = 5;
var b = 10;
 
function tag(s, v1, v2) {
document.write(s[0]);
document.write(s[1]);
document.write(v1);
document.write(v2);
 
return "OK";
}
 
tag`Hello ${ a + b } world ${ a * b}`;
// "Hello "
// " world "
// 15
// 50
// "OK"
```
String.raw()

模板字符串可以是原始的：

ES6还为原生的String对象，提供了一个raw方法。

若使用String.raw 作为模板字符串的前缀，则模板字符串可以是原始(raw)的。反斜线也不再是特殊字符，也不会被解释成换行符：
```
let raw = String.raw`Not a newline: 
`;
document.write(raw === 'Not a newline: \n'); // true
```
相关阅读:
洛谷 P3389 【模板】高斯消元法
 洛谷 P2090 数字对
 树链剖分
 bzoj3784 树上的路径
 K Seq HihoCoder
一些奇怪的注意事项
 洛谷 P3437 [POI2006]TET-Tetris 3D
洛谷 P2048 [NOI2010]超级钢琴 || Fantasy
JVM字节码指令
 java中什么是Bridge Method（桥接方法）
原文地址：https://www.cnblogs.com/jasonnode/p/4651514.html

ECMAScript 6教程 (一)

什么是ES6？

支持

环境支持

let

let应用

const命令

是否包含字符串三种新方法

repeat()原字符串重复

模板字符串

标签模板

String.raw()