ECMAScript2015（ES6）

let 与块级作用域

块

- 什么是块？
    - 在代码中用 花括号 { } 包裹起来的范围 就是块
- 块级作用域
    - 块级作用域就是花括号包裹起来的范围
- 特性
    - 在块级作用域外面是无法访问块级作用域里面的元素  
在块级作用域可以访问外层作用域的变量

let

- 特性
    - let 声明的变量 不会有变量提升  
    - 不能重复声明  
    - 暂存性死区
        - 暂存行死区出现就是因为let不会有变量提升 在执行上下文创建阶段变量环境组件中不会对 let 进行记录 所以会有变量提升 和暂存行死区出现

const (恒量/常量) & Symbol

const跟let的区别
    const跟let的区别 就在于 只是在let 的基础上多了一个 只读特性
    只读 就是 变量声明了以后 不可以再被修改

Symbol
    主要作用就是为对象添加独一无二的属性名

class类 & for of

class类
    ES中都是通过定义函数 及函数的原型对象来去实现的类型  
    自从ES2015开始 就可以使用class 关键词 去声明一个 类型   
    这种独立定义类型的语法 相比较之前函数的方方式更容易理解 解构更加清晰

for of
    for of 是一种数据同意遍历方式 拿到是是每一个元素 不是下标
    break： 终止循环
    使用
        for (const item of arr) {  
          log(item)  
          if(item > 100){  
            break  
          }  
        }

数据解构  Destructuring

• ES2015 （ES6）中新增了 从数组和对象中 获取指定元素的语法 这种语法叫解构

• 数组解构

  const arr = [100,200,300]
  const [ ,x , baz] = arr
  const [foo, ...rest] = arr
  const [foo] = arr
  // 如果解构后的数组超出原有数组长度 后面解构添加的值 会是undefined
  const [foo,bar,baz,more] = arr
  // 如果给解构的值赋一个默认值 如果数组中 没有这个值的话 我们会得到一个默认值 如果有的话 就会取数组中的值
  const [foo,bar,baz = '134',more='defult value'] = arr
  console.log(baz,more);
  

• 对象解构

  • 对象的解构需要根据属性名 去匹配提取 而不是位置 因为数组中的数据是有下标 有顺序规则的
     而对象里面的成员是没有一个固定的顺序 所以说对象不能按照位置去提取数据

  const obj = {name:'zzz',age:88}
  // 对象解构 通过属性名获取对象中对应的值
  // const {name} = obj
  // console.log(name);
  
  // 这样会命名冲突 需要重命名去避免这样的问题出现
  const name = 'tom'
  // const { name } = obj 
  // 左边的name 是用于匹配对象中的值 右边是我们匹配到的值的属性名称
  const { name:objNmae } = obj 
  console.log(objNmae)
  

模板字符串

• 模板字符串和 传统定义字符串的区别

  传统字符串 不支持换行 如果需要换行 我们需要用 \n 这种字符来表示 而在模板字符串中 支持多行字符串 模板字符串还支持 通过插值表达式的方式 在字符串中去嵌入都对应的数值
  

• 字符串的扩展方法

  includes()  // 判断中间部分是否包含某些内容 
  startsWith() // 判断以 xxx 开头 有就为 true 没有为 false
  endsWith()  // 判断以 xxx 结尾 有就为 true 没有为 false
  
  const message = 'Error: foo is not defined'
  const { log } = console
  // log(message.includes('Er'))
  // log(message.startsWith('Error'))
  // log(message.endsWith('defined'))
  

参数默认值 & 剩余参数 & 箭头函数

• 为函数设置默认值

  // 1. 函数形参 设置默认值
  function foo(enable) {
    enable = enable === undefined ? true : enable
    console.log(enable)
  }
  foo('ss')
  // 2. 设置默认值的参数 需要 放在函数最后一位 
  function bar(value,parms={}){
    console.log(value,parms);
  }
  bar('val')
  

• … 操作符 也叫（剩余操作符）

  这函数接收形参位置 使用 ... 表示 从当参数位置开始接收往后所有的参数由于是接收所有参数 这个只能放在形参的最后一位 而且只能使用一次
  function foo(...args){  
    console.log(args);  
  }  
  foo(1,2,3,4)  
  
  /*   
    展开数组  
  */  
  
  const arr = [1,2,3,4]  
  console.log(...arr);
  

• 箭头函数

1、使用箭头函数 可以使我们代码更简洁   

2、箭头函数的this 谁调用 this就指向谁  

3、在需要自己定义 this的情况下 可以使用 箭头函数来避免使用 自定义 this

语法
  let fun = () => {}

proxy

- 什么是proxy
    - 专门为对象设置访问代理器
    
- Proxy('需要代理的目标对象','代理的处理对象')
    - 代理的处理对象
        - 通过 get方法来监视属性访问  
          get 方法接收两个值  get(目标对象, 访问的属性)  
          
        - 通过 set方法来监视设置属性  
          set 接收三个参数 set(目标对象,访问属性，修改的值)  
          
          
语法及使用          
    const { log } = console
    const pramsObj = {
      name: 'tom',
      age: 18
    }

    const { log } = console
    const pramsObj = {
      name: 'tom',
      age: 18
    }

    const prosn = new Proxy(pramsObj, {
      get(target, val) {
        // log(target , val)
        // 判断是否有当前属性 如果没有返回默认值 
        // log(val in target)
        return val in target ? target[val] : '对象没有当前属性'
      },
      set(target, parms, val) {
        // log(Number.isInteger(val))
        // log(target,parms,val)
        if (parms === 'age' && !Number.isInteger(val)) {
          throw new TypeError('The current value does not have one type Number')
        }
        target[parms] = val
      }
    })
    // log(prosn.xxx)
    prosn.age = 16

• Proxy 对比 defineProperty
  • Proxy更好的支持对于数组对象的监视重写数组的操作方法
    Proxy 是以 非入侵的方式监管了对象的读写

Set & Map

• Set方法

size
    Set.size 获取数据长度
has
    Set.has('x') 查询是否包含当前数据
delete
    Set.delete() 删除当前数据
clear
    Set.clear() 清空所有

• Map

- Map 和 object 的区别
        - Map 能以任意字符的 作为数值的键 而 对象只能以字符作为键
- Map方法
    - set
        - 设置数据 map.set(key,value)
    - get
        - 获取数据 map.get(key)
    - has
        - 判断是否存在当前键（key） map.has(key)
    - delete
        - 删除当前键（key） map.delete(key)
    - clear
        - 清空所有的值 map.clear()