最近在阅读《深入立即ECMAScript6》这本书，打算把自己学到的、用到的和理解的来说一说。 我会基本按照书上的顺序来说，大概会分为三到四篇的样子，不会全部都写，我只会挑一些常用的，或者我觉得比较有意思的来写。
块级作用域绑定（let、const）
为何要引入块级作用域
在ES6之前，JavaScript中是没有块级作用域的概念的，只有全局作用域和块级作用域。也就是说在块级作用域声明与外部同名的变量，会覆盖掉外部的变量。而没有块级作用域的话，主要会有以下两个问题。
- 块级作用域内部变量泄露
var i = 1;
console.log(i) // 1
for(var i =0;i<10;i++){
console.log(i); // 0...9
}
console.log(i) // 10
- 循环中创建函数保留了相同的变量引用
var funcs = [];
for(var i = 0;i < 10;i++){
funcs.push(function (){
console.log(i);
});
}
funcs.forEach(function(func){
func(); // 输出10次数字10
});
上面两个问题都是没有块级作用域导致的，但是ES6发生了改变，为我们引入了块级作用域。
let声明
let声明的用法
基本与var相同，但是它的生命周期在块级作用域内部，一旦出去块级作用域便会消失。同时不能重复声明同名变量
示例
基本用法
var i = 0;
if(true){
let i = 100000;
}
console.log(i); // 0
循环中的let声明
var i = 1;
console.log(i) // 1
for(let i =0;i<10;i++){
console.log(i); // 0...9
}
console.log(i) // 1
运行机制
其实let在每次创建的时候都会创建一个新的变量，并以之前迭代中同名变量的值将其初始化。简而言之就是let每次都会创建值的副本，而不是像var一样修改引用的值。
当第一次执行for循环的时候，会新建一个变量i（在内存中开辟一块空间），然后将0赋值给这个变量，继续执行下面的语句；当第二次执行的时候，又会新建一个变量i（在内存中重新开辟一个区域），之后再将原来i的值赋值给新的i，继续在执行下面的语句。循环往复，直到循环的条件不满足为止。
const声明
const声明的用法
与let的用法基本也是相同的，但是它一旦被定义就不能被修改。当然，说的是原始值，如果你使用的是引用，你可以更改引用内部的值，但是你无法更改对引用的绑定。而且const声明必须被初始化，不然就会报错。
示例
基本语法
const name; //错误，未初始化
const maxItems = 30；
maxItems = 100; //报错，不能更改绑定
循环中的const声明
var funcs = [];
//完成一次迭代之后会报错
for(const i =0;i<10;i++){
funcs.push(function(){
console.log(i);
});
}
这里会报错的原因是变量i被const声明为常量，当迭代到i++是，这条语句想要修改常量i的值，所以会报错。还有神奇的地方，让我们来看看下面的例子
var funcs = [];
person = {
name : 'Godfrey',
age : 20,
sex : 'male'
};
for(const key in person){
funcs.push(function(){
console.log(key);
});
}
funcs.forEach(function(func){
func(); // 输出name、age、sex
});
你会发现这里和我们上面说的有些不一样了，不是说const是常量吗，不能被修改吗？为什么在这个for-in循环中可以被正确执行。
别着急，是这样的，在for-in和for-of循环中，每次迭代不会修改已有的绑定，而是会创建一个新的绑定，就像我上面讲的let在循环中的表现是一样的。也就是说在某些情况下，const会和let表现是完全相同的。
临时死区（TDZ）
在引入let声明和const声明的同时，也带来了临时死区的概念。
简单的说，临时死去就是在变量未初始化之前不能使用。下面我们来看例子
if(true){
console.log(typeof a); // 引用错误
let a = 1;
}
JavaScript引擎在扫描到变量的时候，如果遇到的是var声明的变量，就发生变量提升，如果是let、const声明的变量，就加入“临时死区”。
tips：在块级作用域之外声明的访问let、const声明的同名变量不会报错，也就是说“临时死区”只作用在当前块级作用域。
字符串和正则表达式
ES6引入了一些有关字符串方面的新方法和新特性。主要有以下几个方面，字符串、正则表达式、模板字面量
字符串新特性
- 更好的Unicode支持
- codePointAt()方法——charCodeAt()的Unicode-16版本
接受一个编码单元的位置而非字符串的位置作为参数，返回与字符串给定位置的码位。
let test = "𠮷a"
console.log(test.charCodeAt(0)); // 55362
console.log(test.charCodeAt(1)) // 57271
console.log(test.charCodeAt(2)) // 97
console.log(test.codePointAt(0)); // 134071
console.log(test.codePointAt(1)) // 57271
console.log(test.codePointAt(2)) // 97
charCodeAt(0)返回的是位置0处的第一个编码单元，但是这个往往不是我们想要的结果，而codePointAt(0)返回的是第一个字的完整编码单元。
- String.fromCodePoint()方法
通过这个方法我们可以根据指定码位来生成一个字符
console.log(String.fromCodePoint(134071)); //𠮷
- normalize()方法 这个方法是暂且不用管他，主要是涉及到国际化方面
字符串新方法
- includes()
如果在字符串检测到指定文本则返回true，否则返回false。 - startsWith()
如果在字符川的起始部分检测到指定文本则返回true，否则返回false。 - endsWith()
如果在字符串的结尾部分检测到指定文本则返回true，否则返回false。
let test = 'Hello world';
console.log(test.includes("Hello")); // true
console.log(test.includes("a")); // false
console.log(test.startsWith("Hello")); // true
console.log(test.startsWith("Hello",4)); // false
console.log(test.endsWith("d")); // true
console.log(test.startsWith("Hello")); // false
console.log(test.endsWith("o",8)); // true
以上三个方法都会接受两个参数。第一个是要检测的文本内容，第二个是一开始搜索的位置的索引。includes和startsWith都会从索引的位置开始搜索，而endsWith会从字符串长度减去这个索引值的位置开始匹配。
上面就是就是ES6字符串主要的新增方法。
正则表达式新特性
ES6为了更好的满足开发中对字符串的操作，同时也增强了正则表达式。
- u修饰符
在正则表达式添加了u修饰符时，正则表达式的操作就从编码单元变为字符模式。
let test = "𠮷";
console.log(text.length); // 2
console.log(/^.$/.test(test)); // false
console.log(/^.$/u.test(test)); // true
- y修饰符
y修饰符会影响正则表达式搜索过程中的lastIndex属性，如果使用了y修饰符，当开始匹配的时候，便会从latIndex开始进行。如果在指定位置没能匹配成功，则继续停止匹配。
var text = "kidd1 kidd2 kidd3";
var pattern = /kidd\d\s?/;
var result = pattern.exec(text);
var globalPattern = /kidd\d\s?/g;
var globalResult = globalPattern.exec(text);
var stickyPattern = /kidd\d\s?/y;
var stickReslut = stickyPattern.exec(text);
console.log(result[0]); // "kidd1 "
console.log(globalResult[0]); // "kidd1 "
console.log(stickReslut[0]); // "kidd1 "
pattern.lastIndex = 1;
globalPattern.lastIndex = 1;
stickyPattern.lastIndex = 1;
result = pattern.exec(text);
globalResult = globalPattern.exec(text);
stickReslut = stickyPattern.exec(text);
console.log(result[0]); // "kidd1 "
console.log(globalResult[0]); // "kidd2 "
console.log(stickReslut[0]); // null
tips:
- y修饰符只在字符串对象中起作用，对字符串的方法无效。
- 还有就是使用^字符的时候，只会在字符串的起始位置和多行模式的首行进行匹配。当lastIndex为0时，完全没问题，会向普通正则表达式一般无二；但是当lastIndex不为0时，就会永远也匹配不到正确结果
- 修正了正则表达式构造函数中复制的错误
在ES6之前，使用构造函数创建正则表达式有一个小bug，就是使用正则表达式声明正则表达式，第一个参数为正则表达式，第二个参数可以为正则表达式添加一些修饰符。但是当第一个参数是另一个正则表达式的引用时，再传入第二个参数，ES5就会报错。现在ES6修正了这个问题
var regex1 = /ab/g；
//在ES5中时会抛出错误的。但在ES6中就是正常的。
var regex2 = new Regex2(regex1,"i");
console.log(regex1.toString()); // "/ab/g"
console.log(regex2.toString()); // "/ab/i"
- flags属性
ES6还为正则表达式对象新增了一个属性——flags，是帮助我们更快捷的访问正则表达式中的修饰符。通过正则表达式对象调用它，她会返回该正则表达式的所有修饰符。
var regex = /ab/g;
console.log(regex.flags); // "g"
模板字面量
这是ES6引入的全新的语法。主要是为了解决字符串多行模式、占位符和提供更强大的字符串操作。
基础语法
模板字面量基础的使用方法看起来与字符串字面量没有大的区别，无非是将字符串字面量的引号（单、双都可以）换成了反撇号（`），最直观的特点是能支持多行字符串。
var message = `123
456
789`;
console.log(message); //"123
// 456
// 789"
上面是模板字面量最基本的用法，看起来好像没什么特别强大的地方，ES5也完全能做到，就是麻烦一点，需要手动拼接。好！接下来才是模板字面量真正强大的地方（其实，是否强大与否主要还是看应用，毕竟编程还是偏向应用科学的）。
字符串占位符
字符串占位符的基础语法是${},中间可以包含任意的JavaScript表达式。字符串占位符为你提供了将“表示式”嵌入到字符串中的功能，并且她会计算计算出结果。话不多说，来看个简单的例子。
let a = 123,
b = 456;
message = `Sum is ${a + b}`;
console.log(message); // "Sum is 579";
字符串占位符也是支持嵌套的。
标签模板
首先我们要说明什么是标签，标签就是在模板字面量第一个反撇号(`)之前标注的字符串。当然这个字符串不需要添加引号。当然，如果这个标签仅仅是个字符串是没什么作用的，如果它可以是一个函数对象的引用，那就很强大了，这样的话，我们在处理同类型字符串，直接在它们前面添加一个tag，就很方便了。
function tag(literals,...substitutions){
let result = "";
for(let i = 0;i< substitutions.length; i++){
result += literals[i];
result += substitutions[i];
};
result += literals[literals.length-1];
return result;
}
let a = 123,
b = 456,
message = tag `Sum is ${a+b}`;
console.log(message); // "Sum is 579";
上面我们有tag标签模拟了模板字面量默认的行。我们可以看到函数中有两个参数，其实两个都是数组。
- literals
literals参数实际上是一个数组，你可以将他看成是传入了占位符以外的所有字符串，只不过将那些字符串根据占位符分割开来这样就形成了一个数组，存放在literals中。还有一点就是，如果模板字面量的第一位是一个占位符，那literals数组的第一个值就是空字符串。保证了literals总是比substitutions多一个。 - substitutions
既然有存放字符串的数组了，那就必须有存放字符串占位符的地方，那就是substitutions数组了。它其中存放了经过计算后的表达式的值。
上面是有关字符串、正则表达式的ES6新增或修改的内容。
本篇文章的内容都是我借鉴的书本上面的知识，再添加了一些自己的理解。可能会有错误的地方，如果您看到了，那请你指出来。如果对文章的内容哪里有不明白的地方，可以在下面留言，我会进行更加细致的说明。
