ES6学习（二）基础命令

一、Let 和 const 

　　作用域的概念：在es5之前是有两个作用域，一个是全局作用域，另外一个是函数作用域，在es6中就多了这样一个块作用域。在这里let 和 const 就是传说中的块作用域，它们的使用方法和 var 是一样的，只是作用是有区别的。

　　作用的区别有哪些呢，由下面的代码可见 i  是有报错的；　　

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

test();

　　

说明：

1）因为let 是块作用域，在for 的花括号内调用 i 是没有问题的， 但是若在 花括号外在调用 i 则找不到该 i ，因为这i 没有在外面声明，如果用var 是没有问题的 ；因此let 是一个块作用域 所以 i 脱离了块作用域，生命周期结束了，便会报错。由此可见es6 在语法强制使用了严格模式，严格模式就是变量没有生命就会报错！

2）另外一个需要注意的是，let 定义的变量不可以重复声明，否则会报错！

3）const 声明一个常量时必须要附一个值，const 常量的值后期是不可以更改的，否则会报错

function last() {
  const IP=111;
  const obj = {
      abc:111
  }
  console.log(obj);
  obj.d = 222
}

last();

4）const 对于数值常量 是不可以修改的，而对于 const 声明对象的时候是可以修改对象的元素，对象是引用类型，引用类型是对象的指针不可以改变，但是对象是可以变的。

二、解构赋值

　　数值解构赋值、对象解构赋值、字符串解构赋值、布尔值解构赋值、函数参数解构赋值、数值解构赋值。

　　1、数组解构赋值

{
  let a,b,c;
  [a,b] = [1,2]
  console.log(a,b);
}
输出：a=1 b=2

　　常见的数组解构赋值

{
  let a,b,c;
  [a,b,...c] = [1,2,3,4,5,6];
  console.log(a,b,c);
}
输出：a=1 b=2 c=[3,4,5,6]

　　常见的对象解构赋值

{
  let a,b;
  ({a,b} = {a:1, b:2})
  console.log(a, b);
}
输出： a=1 b=2

　　声明参数但是没有赋值

{
  let a,b,c;
  [a,b,c] = [1,2];
  console.log(a,b,c);
}
输出：a=1 b=2 c 没有赋值为 undefind

　　使用场景（1）数据交换

{
  let a = 1;
  let b = 2;
  [a,b] = [b,a];
  console.log(a,b);
}
输出：a=2 b=1

　　函数返回数组赋值

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

　　函数返回多个参数，可以只取部分参数

{
  function fun() {
    return [1,2,3,4,5];
  }
  let a,b,c;
  [a,,,b] = fun();
  console.log(a,b);
}
输出：a=1 b=4

　　函数返回数组参数，可以跳跃取，也可以使用 ...变量取所有参数

{
  function fun() {
    return [1,2,3,4,5,6,7]
  }
  let a,b,c;
  [a,, ...b] = fun();
  console.log(a, b);
}
输出：a=1 b=[3,4,5,6,7]

　　对象的赋值，对象赋值，对象的左右都要是对象

{
  let obj = {a:111, b:222};
  let {a, b} = obj
  console.log(a, b);
}
输出：a=111 b=222

　　对象赋值，默认值

{
  let {a=1,b=2} = {a:100}
  console.log(a,b);
}
输出：a=100 b=2

　　对象赋值要注意接收对象参数的格式

{
  let data = {
    title:'this is a title',
    child:[{
      id:123456,
      desc:'this is a desc'
    }]
  }
  let { title:setTitle, child:[{id:setId}] } = data;
  console.log(setTitle, setId);
}
输出：setTitle='this is a title'  setId=123456

三、正则扩展　　

　　构造函数的变化，正则方法的扩展，u修饰符，y修饰符，s修饰符

{
  //ES5中正则的写法
  let regex = new RegExp('xyz', 'i');  //2个参数
  let regex2 = new RegExp(/xyz/i);  //1个参数
  console.log(regex.test('xyz123'), regex2.test('xyz123'));

　//输出：true  true
  //ES6中的写法
  let regex3 = new RegExp(/xyz/ig, 'i');//2个参数
  console.log(regex3.flags);

　//输出：i 说明：es6中的第二个参数会覆盖第一个参数的正则修饰符，flags 是输出正则修饰符
}

　　正则匹配 修饰符 g 和 y 区别

　　g 第一次匹配成功后 不会紧接着从第二个元素开始匹配，可以从任意位置去匹配

　　y 第调一有次匹配成功后 只会从紧接着的第二个开始匹配，匹配不成功就返回null　　

{
  let s = 'bbb_bb_b';
  let a1 = /b+/g;
  let a2 = /b+/y

  console.log('one', a1.exec(s), a2.exec(s));
  console.log('two', a1.exec(s), a2.exec(s));
}

输出：one ["bbb", index: 0, input: "bbb_bb_b"] ["bbb", index: 0, input: "bbb_bb_b"]
　　    two ["bb", index: 4, input: "bbb_bb_b"] null

console.log(a1.sticky, a2.sticky);  //sticky 用于查看 变量是否使用了 y 模式，

　　a1 为 false 即没有使用y

　　a2 为 true 即使用了y修饰符

四、字符串扩展

　　字符串新增特性　　

　　在学习字符串这一块需要安装扩展库 执行代码如下

npm  install  babel-polyfill    --save-dev

　　在项目中要引入ES7扩展库: import   'babel-polyfill';

　　1、针对unicode 编码解析　　　　

{
  console.log('a', `\u0061`);
  console.log('s', `\u20bb7`); //字符编码大于FFFF  不能正常显示
  console.log('s', `\u{20bb7}`);　//这样写可以正常显示
}

　 　显示结果：a a     s ₻7     s