ES6基础学习笔记

第一章：ES6基础

1、let 不能重复定义变量
2、const 不能修改（数值），声明的时候必须赋值
3、如果const 声明一个对象是可以改变，原理：对象是引用类型（对象存储的内存中的指针，指针是不变的，对象是可以改变的）
     简单理解：空间的位置不变，空间的内容改变(const 指向你租的房子，房子位置不会变,但是房子里面的内容是可以改变的)
4、ES6 强制开启严格模式 ES5中 用“use Strict”

第二章：解构赋值

1、什么是解构赋值？
左边一个数据，右边一个数据，一 一对应起来
2、解构赋值的分类 按数据类型分类 实际上都是数组/对象解构赋值
数组解构赋值  数组——数组
对象结构赋值 对象——对象
字符串解构赋值 数组——字符串
布尔值解构赋值 
函数参数解构赋值

数值解构赋值

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

{
  let a,b,c;
  [a,b,c=3] = [1,2]
  console.log(a,b,c) //1,2,3  
  如果c没有赋值，则返回underfine，这种写法是说明在没有匹配到值的情况下，给出c一个默认值，防止出错
}

{
  let a,b,rest;
  [a,b,...rest] = [1,2,3,4,5,6]
  console.log(a,b,rest) //1,2,[3,4,5,6]
}

对象解构

{
  let a,b;
  {a,b} = {a:3,b:4}
  console.log(a,b) //3,4
}

{
  let {a=10,b=5} = {a:3}
  console.log(a,b)//3,5   a被重新赋值，b不变
}

{
  let res = {p:1,q:true}
  let {p,q} = res;
  console.log(p,q); //1,true
}

数组解构的使用场景：

1、关于变量交换
{
  let a = 1;
  let b = 2；
  [a,b] = [b,a]
  console.log(a,b) //2,1 ES5中交换需要借助中间变量
}
2、通过函数返回的值
{
  function f(){
    return [1,2]
    如何分别接受1,2?
  }
  解决：
  let a,b;
  [a,b] = f();
  console.log(a,b)//1,2
}
3、如果返回多个值的情况下，可以选择接收某一个或者某几个变量
{
  function f(){
    return [1,2,3,4,5]
    只要接收1,4?
  }
  解决：三个豆号
  let a,b;
  [a,,,b] = f();
  console.log(a,b)//1,4
}
4、不知道函数返回数组有多长，或者很长，但是只要第一个元素，其他随意
{
  function f(){
    return [1,2,3,4,5,6,7,8,9]
    只要接收1?
  }
  解决：三个豆点
  let a,b;
  [a,...b] = f();
  console.log(a,b)//1,[2,3,4,5,6,7,8,9]  
}
注意：逗号，豆点可以混合使用

5、嵌套对象和数组的运用
{
  let res = {
    title:'标题',
    data:[{title:'小标题',dec:'正文内容'}]
  }
  如何拿到 标题 和 小标题？
  解决：
  let {title:Title,data:[{title:smTitle}]} = res;
  console.log(Title,smTitle);//标题，小标题
}

 第三章：正则扩展  正则新增特性

学习要点：

1、构造函数
2、字符串中原来使用的正则 现在都是隐形调用的方法
3、y修饰符 g修饰符的区别 
4、u修饰符的使用情况
5、s修饰符

先看一下ES5的写法
{
  let regex = new RegExp('xzy','i') 第一个一定是字符串，i 表示忽略大小写
  let regex2 = new RegExp(/xyz/i);  一个参数的写法，上面是两个参数的写法                                          
}

ES6中
{
  let regex3 = new RegExp(/xzy/ig,'i');  构造函数
  console.log(regex3.flags)  // i
  ES6 允许两个参数，并且第二个参数会覆盖正则表达式，
  flags是ES6新增加的，用来获取正则对象修饰符的属性 这里表示 这个正则实际上用的是i 不是 /xzy/ig 
}
修饰符：ES5 中 只有 i g  ES6中新增 y u
{
 let s = 'bbb_bb_b'
 let a1 = /b+/g  g表示全局匹配
 let a2 = /b+/y   y也是全局匹配 
 console.log( '第一次匹配', a1.exec(s), a2.exec(s) );  // bbb,  bbb 
 解释：exec() 是正则的一个方法，表示a1 全局匹配 b+ 模式 a2 同理
 console.log( '第二次匹配'，a1.exec(s) , a2.exec(s) );// bb  null
 解释：g匹配会在全局整个搜索找到下一个b+ 模式
           y会紧跟第一个下划线，寻找b+模式，故没有找到 所以是null
 注意：可以通过sticky 来查询 是否开通 y 匹配 
 console.log(a1.sticky , a2.sticky ) // false  true   
}

u 修饰符 unicode字符处理 

{
  let a = /^\u{61}/ . test('a');  
  用大括号包起来 的表示 字符a 的 unicode编码 是 61
  let b =  /^\u{61}/u . test('a'); 如果并不加u 修饰符 识别不出来 
  console.log(a,b); // false true
  . 字符 可以识别任何字符 前提是一个字节以内，
  如果超过一个字节是无法识别的
  例如：console.log(`\u{20BB7}`);  // unicode 编码 转 字符串  
   输出：𠮷
   let s = '𠮷'  （大于两个字节）
  console.log('没有u修饰符', /^.$/.test(s) );表示 以点开始 $结束 匹配所有 字符(两个字节以内)
  输出：false  因为大于两个字节
  这个时候 加上 u修饰符 即可输出 true ；即/^.$/u.test(s)  
}

u修饰符的作用
1、只要处理的字符串中 大于两个字节的长度 一定要用u
2、点可以匹配任何字符  并不对 条件是 ：小于两个字节长度的所有  加上u 可以 匹配所有
3、点修饰符 不能修饰 行分隔符，段分隔符，换行分隔符 回车符 必须要加s修饰符 暂时没有实现，只是提案

第四章：字符串扩展 (字符串新增特性 )

学习内容

1、unicode 表示法
2、遍历接口
3、模板字符串
4、新增方法（10种）
安装一个 补丁库 使用ES7 的某几个方法 ，ES6提案 还没有正式可以使用 兼容处理  
npm install babel-polyfill --save-dev

unicode表示法 

{
 打印一个字符
 console.log('a',`\u0061`);//a a

 当大于两个字节的时候  即大于0xFFFF
 console.log('s',`\u20BB7`)//s ₻7  出现了一个奇怪的字符
 原因：因为大于两个字节，所以把拆分成 20BB  7 两部分
}
ES6 中如何处理呢？
{
 console.log('s',`\u{20BB7}`)  用大括号括起来即可 // s 𠮷 
}

codePointAt  fromCodePoint 使用

{
 在ES5中 
 let s = '𠮷';
 console.log('length',s.length) // 2
 console.log(s.charAt(0)); // � 出现乱码
 console.log(s.charAt(1)); // � 出现乱码
 console.log(s.charCodeAt(0)) // 55362
 console.log(s.charCodeAt(1)) // 57271

 ES6中
 console.log(s.codePointAt(0).toString(16));  //  转为16进制 20bb7
}

处理大于0xFFFF的字符
{
 console.log(String.fromCharCode("0x20bb7"))  在ES5 中采用 fromCharCode 方法  //乱码
 console.log(String.fromCodePoint("0x20bb7")) 在ES6 中采用 fromCodePoint 方法 //𠮷
}

在遍历的时候 同样的字符

{
 ES5中
 let str = '\u{20bb7}abc'
 for(let i=0;i<str.length;i++){
  console.log('ES5=',str[i]);
  // 乱码 乱码 abc   标识无法解析 20bb7
 }
 ES6中 只用 let...of 使用频率比较高
 for(let code of str){
  console.log('ES6',code);
  //𠮷 a b c   可以解析大于0xFFFF的字符
 }
}

实用：判断一个字符串中是否有某些字符( str.includes)  或者 以某些字符串 起始(str.startWith) 或者 结尾(str.endsWith) ,重复字符串(str.repeat)

{
  let str = “string”
  console.log("是否包含字符r", str.includes("r")) //true
  conosle.log("是否以str开头", str.startWith("str")) // true
  console.log("是否以ng结尾"str.endsWith('ng')) //true
  console.log("复制字符串3次",str.repeat(3))   //stringstringstring 
}

模板字符串使用

{
 let name = 'list'
 let m = `i am ${name}`;
 console.log(m) // i am list 
 console.log(`${1+2}`) // 3
}

补白字符串 str.padStart  str.padEnd 

例如：如果说要出两个日期 03-04  一般拿到的是3-4，需要补上0

console.log('3'.padStart(2,'0')+'-'+'4'.padStart(2,'0')) // 03-04  
str.padStart(长度,要补上的内容)  往前补 
str.padEnd(长度,要补上的内容)  往后补

标签模板 需要掌握

1、怎么用？2、在哪里用？

{
  let user = {name:'list',info:'hello world'};
  console.log(adc`i am ${user.name},${user.info}`);
  function abc(s,v1,v2){console.log(s,v1,v2)}
  //i am ,,, listhello world
}

作用：
1、防止XSS攻击，在过滤ATTM字符串的时候 
2、处理多语言转换 通过不同return 返回不同结果

String.raw 可以防止转义，可以直接输入模板字符串中的内容

{
 console.log(String.raw`Hi\n${1+2}`)  //Hi\n3
 console.log(`Hi\n${1+2}`)  
 //Hi
 //3  \n 会换行
}

第五章：明日学习...

持续关注...