ES6语法（一）块级作用域、字符串

最近在阅读《深入立即ECMAScript6》这本书，打算把自己学到的、用到的和理解的来说一说。 我会基本按照书上的顺序来说，大概会分为三到四篇的样子，不会全部都写，我只会挑一些常用的，或者我觉得比较有意思的来写。

块级作用域绑定（let、const）

为何要引入块级作用域

在ES6之前，JavaScript中是没有块级作用域的概念的，只有全局作用域和块级作用域。也就是说在块级作用域声明与外部同名的变量，会覆盖掉外部的变量。而没有块级作用域的话，主要会有以下两个问题。

1. 块级作用域内部变量泄露

    var i = 1;
    console.log(i)                  // 1
    for(var i =0;i<10;i++){             
        console.log(i);             // 0...9
    }
    console.log(i)                  // 10
复制代码

2. 循环中创建函数保留了相同的变量引用

    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:

1. y修饰符只在字符串对象中起作用，对字符串的方法无效。
2. 还有就是使用^字符的时候，只会在字符串的起始位置和多行模式的首行进行匹配。当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新增或修改的内容。

本篇文章的内容都是我借鉴的书本上面的知识，再添加了一些自己的理解。可能会有错误的地方，如果您看到了，那请你指出来。如果对文章的内容哪里有不明白的地方，可以在下面留言，我会进行更加细致的说明。