ES6的迁移之路---[1]

前言

现在前端这个大环境，如果不会ES6还真算是落伍了。今天我就将一些常用的一些有关ES6的一些常用的语法糖，和新添加的一些特性一一列出来。

准备

往往使用ES6开发的前端应用都是要依赖babel这个工具包的(为什么使用babel呢！当然因为为了我们的项目更好的兼容)。至于bable是干什么的！大家可以点击这个!话不多说，接下来为大家es6为我们提供的一系列语法糖！

块级作用域、let和const的用法

什么是块级作用域！
{}中就是一个块级作用域！
我们可以用它替代我们的(fun)()
es6以前我们什么一个变量，往往都是使用var。但是ES6中官方为我们推荐了let，const，两者到底有什么区别呢？

function test(){
  for(let i=1;i<3;i++){
    console.log(i);
  }
  console.log(i);
  let a = 2 ;
  a = 3;
  console.log(a)
}
test()    //1,2  3

从这个函数输出的情况可以看出，我们只输出了for循环中的变量。这里就可以看出let只能在同一个块级作用域才能有效声明。
同时我们的变量a也随这我们的改变改变了！

function first(){
  const PI=3.1415926;
  PI = 3;
  console.log(PI);
}
function last(){
  const k={
    a:1
  }
  k.b=3;
  console.log(k);
}
first()// 报错SyntaxError: "PI" is read-only
last() //{a:1,b:3}

前者可以看出const声明出来的变量不能进行修改，否则就会报错。
后者就是正常的输出了我们想要的一个object。
使用 let 声明一个可以改变的变量，用 const 声明一个不能被重新赋值的变量。

结构赋值

es6特有的语法糖，很好用。

{
  let a,b;
  [a,b]=[1,2];
  console.log(a,b);//1,2
}
{
  let a,b;
  ({a,b}={a:1,b:2})
  console.log(a,b);//1,2
}
{
  function f(){
    return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);//1,1
}

{
  let metaData={
    title:'abc',
    test:[{
      title:'test',
      desc:'description'
    }]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
  console.log(esTitle,cnTitle);//'abc','test'
}

这个三个块级作用域中是不同类型的结构赋值的声明方法，是不是特别神奇！大家直接用吧！
最好我模拟了从后台拿接口的场景。各位可以跟着套用!

RegExp的变化

我从三个方面来剖析ES5-ES6的变化。

构造函数

{
    // #构造函数#
    let regex = new RegExp('xyz', 'i'); //第一个参数是字符串，第二个是修饰符
    let regex2 = new RegExp(/xyz/i); //第一个参数是正则表达式，不接受第二个参数，否则会报错
    console.log(regex.test('xyz123'), regex2.test('xyz123'));
    console.log(regex.test('xyZ123'), regex2.test('xyZ123'));

    let regex3 = new RegExp(/abc/ig, 'i');
    console.log(regex3.flags); //原有正则对象的修饰符是ig，它会被第二个参数i覆盖

}

在ES5的时候regex3这种声明方法是会报错的因为，RegExp构造函数的参数是一个正则表达式的时候，ES5 不允许此时使用第二个参数添加修饰符！
ES6 改变了这种行为。如果RegExp构造函数第一个参数是一个正则对象，那么可以使用第二个参数指定修饰符。而且，返回的正则表达式会忽略原有的正则表达式的修饰符，只使用新指定的修饰符。

字符串的正则方法

字符串对象共有 4 个方法，可以使用正则表达式：match()、replace()、search()和split()。
ES6 将这 4 个方法，在语言内部全部调用RegExp的实例方法，从而做到所有与正则相关的方法，全都定义在RegExp对象上。

String.prototype.match 调用 RegExp.prototype[Symbol.match]
String.prototype.replace 调用 RegExp.prototype[Symbol.replace]
String.prototype.search 调用 RegExp.prototype[Symbol.search]
String.prototype.split 调用 RegExp.prototype[Symbol.split]

{
    let regex = new RegExp('xyz', 'ig');
    console.log(regex.test('xyz0XYZ1xyz2'), regex.exec('xyz0XYZ1xyz2'));
}

修饰符

{
    // y修饰符
    let s = 'bbbb_bbb_bb_b';
    var a1 = /b+/g;
    var a2 = /b+/y;

    console.log(a1.exec(s), a2.exec(s)); // ["bbbb"],["bbbb"]
    console.log(a1.exec(s), a2.exec(s)); // ["bbb"],null

    console.log(a1.sticky, a2.sticky); //表示是否开启了粘连模式
}

{
    console.log('u修饰符',/^\uD83D/.test('\uD83D\uDC2A')); // true
    console.log('u修饰符',/^\uD83D/u.test('\uD83D\uDC2A')); // false
    // 大括号表示Unicode字符，只有加上u才能识别
    console.log(/\u{61}/.test('a')); // false
    console.log(/\u{61}/u.test('a')); // true
    console.log(/\u{20BB7}/u.test('𠮷')); // true
    // 点（.）字符不能识别码点大于0xFFFF的Unicode字符，必须加上u修饰符。
    let s = '𠮷';
    console.log('大于0xFFFF的Unicode字符',/^.$/.test(s)); // false
    console.log('使用u字符',/^.$/u.test(s)); // true

    // 使用u修饰符后，所有量词都会正确识别大于码点大于0xFFFF的Unicode字符。
    console.log('量词',/a{2}/.test('aa')); // true
    console.log('量词',/a{2}/u.test('aa')); // true
    console.log('量词',/𠮷{2}/.test('𠮷𠮷')); // false
    console.log('量词',/𠮷{2}/u.test('𠮷𠮷')); // true
}

{
    // #正则表达式中，点（.）是一个特殊字符，代表任意的单个字符，但是行终止符（line terminator character）除外
    // U+000A 换行符（\n）
    // U+000D 回车符（\r）
    // U+2028 行分隔符（line separator）
    // U+2029 段分隔符（paragraph separator）
    // 只是一个提案目前还不支持
    // let reg=/test.go/s;
    // console.log(reg.test('test\ngo'));
    // console.log(reg.test('test\ngo'));
    console.log('s变通方法',/foo.bar/.test('foo\nbar'));
    console.log('s变通方法',/foo[^]bar/.test('foo\nbar'));
}

前言

准备

块级作用域、let和const的用法

结构赋值

RegExp的变化

构造函数

字符串的正则方法

修饰符

今天的分享就到这！喜欢的话记得star哟！