JavaScript 语言的下一代标准ES6

技术栈：html/css/js(es5)(jQuery)/ajax
企业级开发
  html、css、js(vue)、axios、elementui
es6
  1.es6简介
    javascript的下一代标准，2015.6以后
    浏览器(前端脚本语言)  兼容性不是太好(babel => es6 => es5)
    nodejs(后端语言)  不是100%兼容，兼容性比较好
  2.变量声明
    let
      1)声明不会提升
      2)具有局部作用域
      3)不能重复声明一个变量
      4)暂时性死区
    const
      用来声明一个常量，定义的变量不能再改变
      上面let所有的特性，都具有

  3.解构
    对象的解构，通过大括号去解构
      let {a,b,c,d = 3} = {a:1,b:2}
        a  //1
        b  //2
        c  //underfined
        d  //3  默认值
        结构不成功，会获取一个undefined值
        给默认值，只有当这个值为 === 的underfined值时，给的默认值才有效

    数组的解构，通过中括号去解构
      let [a,b,c,d,e = 4] = [1,2,3]
        a  //1
        b  //2
        c  //3
        d  //underfined
        e  //4  默认值
        结构不成功，会获取一个undefined值
        给默认值，只有当这个值为 === 的underfined值时，给的默认值才有效

  4.字符串拓展
    遍历  for of
      let str = 'hello world'
      // for of => 对字符串做遍历操作
      for(let s of str){
        console.log(s);  //h e l l o  w o r l d
      }
    实例方法
      includes():返回布尔值，表示是否找到了参数字符串
      startsWith():返回布尔值，表示参数字符串是否在原字符串的头部
      endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部
      repeat():重复
      padStart():头部补全  第一个参数：长度，第二个参数：补全的字符串
      padEnd():尾部补全  第一个参数：长度，第二个参数：补全的字符串
      trim():去除空格
      trimStart():去除开始
      trimEnd():去除结束
      replace():替换
      replaceAll()：全部替换

  5.数值拓展
    Number.isFinite() 检测一个数值是否有限
    Number.isNaN()  检测一个数值是否为NaN
    Number.parseInt()
    Number.parseFloat()
    Number.isInteger()  用来判断一个数值是否为整数。

  6.对象拓展
    对象简写
    对象的扩展运算符
      解构
      扩展运算符 ...
    Object静态方法扩展
      Object.is()  比较两个值是否相等
      Object.assign()  合并对象
      Object.setPrototypeOf()  为某个对象设置原型
      Object.getPrototypeOf()  获取某个对象的原型
      Object.keys()       该方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名
      Object.values()     该方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值
      Object.entries()    该方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组
      Object.fromEntries() 该方法是entries的逆操作，用于将一个键值对数组转为对象

  7.数组拓展       
    数组的解构
    扩展运算符  ...
    静态方法扩展
      Array.from()    用于将两类对象转为真正的数组：类似数组的对象和可遍历的对象
      Array.of()      用于将一组值，转换为数组
    实例方法拓展
      find()      找出第一个符合条件的数组成员
      findIndex()  返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件，则返回-1
      fill()        使用给定值，填充一个数组
      entries()，keys() 和 values()      
        它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
      includes()  返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似
      flat()
        该方法用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。 如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数
      flatMap()
        该方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。 该方法只能展开一层数组

  8.函数拓展
    箭头函数
      (a,b)=>{}   a=>{}
        =
      function(a,b){}

      (a,b)=>{
        console.log('我是一个箭头函数')
      }

      a=>{
        console.log()
      }
    箭头函数的this指向
      指向包含它的外部函数
      arr.forEach(item=>{

      })
    this指向问题  
    obj.add()  //obj
    add()  //全局对象 window global
    add().call(obj1,参数列表)  //obj1
    add().apply(obj1,参数数组)  //obj1
    let obj = new Object()  //obj
    函数内部的属性
      this

 

    函数参数的默认值
      function add(a,b){
        return a + b
      }
      add(1)  //NaN

      function add(a,b = 10){
        return a + b
      }
      add(1)  //11
    参数的解构
      function add ({a,b}){
        console.log(a + b)
      }
      add({a:1,b:12})  //13

      function add({name,age}){
        console.log(a+b)
      }
      let obj = {
        naem:'terry',
        age:12,
        job:'IT',
        sayName(){
            console.log(this.name)
        }
      }

      add(obj)
      rest参数
      将一组值放到一个数组中
      function test(...values){
          console.log(values);
      }
      test(1,2,3,4,5)  //[ 1, 2, 3, 4, 5 ]
      Array  有序  可以重复

  9.babel
    将es6的代码转化为es5，仅仅只是代码的转化,模块不会合并
      let arr = [1,2,3]
      arr.forEach(()=>{

      })
      var arr = [1,2,3]
      arr.forEach(function(){
            
      })
  10.模块化(commonjs) nodejs采用的commonjs标准
    可以将每一个js文件或者文件夹当做一个模块
    index.html  10行
      <script src='./index.js'></script>
    index.js  100000000行

      1）导出模块
        module
          id  唯一标识
          filename  路径+文件名
          paths  路径
          exports  对外暴露的接口
        module.exports.obj = obj  单个导出
        module.exports = {        导出列表
            obj,
            a
        }

      2）导入模块
        let obj = require('./app01.js')  //路径
        let obj = require('app01')  //模块名称
          paths
        module
          node_modules  
          npm init  => package.json(模块核心配置文件)
          index.js  let qs = require('qs) npm install qs --save

  11.npm(node package manager)
    npm install xxx
    npm run serve
    使一个文件变成模块，在文件中执行 npm init (-y) (全部都是yes)
    随之会在当前文件下出现一个package.json的文件，这个文件就是当前模块的核心配置文件
    安装第三方依赖
      $ yarn install xxx  会在当前目录下新建一个node_modules文件夹，将第三方模块放进去
      $ yarn install xxx --save  产品依赖
      $ yarn install xxx --save-dev  开发依赖
      $ yarn install xxx -g  全局安装
      $ yarn install qs -g  
      自己写的第三方模块，我们放在node_modules中
  12.cnpm
    安装：npm install -g cnpm --registry=http://registry.npm.taobao.org
    产品依赖
      --save
    开发依赖
      --save-dev
      babel
  13,yarn
    安装：npm install -g yarn
  14.webpack
    1）导出
      export let a = 1  单个属性的导出
      export function get (){
          let obj = {
              name:'tom',
              age:12
          }
      }
      export {
        age
      }
      export default {}
      一个模块中只能有一个
    2）导入
      import{get}from './utils/request'
  15.rest操作符

  16.集合
    Array()
      let arr = []
      let arr = new Array(1)
      数组下标
    pop push shift unshift
    Set
      可以存储任意数据类型，无序，不重复的
      创建方式
        构造函数Set()
          let set = new Set()  //参数是一个可迭代的数据结构，用来初始化set集合
      Set.prototype api
        size  获取set集合元素的个数
        add()  向set集合中添加一个元素
        delete()  将set集合中的某个元素删除
        clear()  清空set集合
        has()  判断某个值在不在set集合中
        forEach()  和数组一样
        keys()  获取遍历key的迭代器对象
        values()  获取遍历value的迭代器对象
        entries()  获取遍历值-值对的迭代器对象

    Map
      类似于对象的数据结构，键的取值不再单单是字符串，可以为任意数据类型
      map集合用于存放键值对，也就是一种映射关系
      创建map集合
        构造函数 Map()
          let map = new Map([[1,2],['name','tom']])  //二维数组
            // map(2) {1 => 2,'name' = > 'tom'}
      Map.prototype.xxx
        size  获取map集合键值对的个数
        set(k,v)  给map设置键值对
        get(k)  通过kay获取值
        delete(k)  通过key删除键值对
        has(k)  判断有没有k键
        clear()  清空map集合
        keys()  获取遍历键的迭代器对象
        values()  获取遍历值的迭代器对象
        entries()  获取遍历键值对的迭代器对象
        forEach()  和数组，set都一样

    可迭代元素
      Array
      Set
      Map
      string
  17.Symbol
      创建一个Symbol
        let s1 = Symbol()
        s1  //Symbol
        创建出来的symbol，表示一个独一无二的值,symbol和对象不一样，不能给它添加属性，当字符串理解
      生成具有标识的Symbol值
        Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分
        通过Symbol.prototype.description可以获取该描述信息
        let s1 = Symbol('foo')
        let s2 = Symbol('bar')

    消除魔术字符串
      function getArea(shape, options) {
        let area = 0;
        switch (shape) {
          case 'Triangle': // 魔术字符串
          area = .5 * options.width * options.height;
          break;
          /* ... more code ... */
          }
          return area;
          }
        getArea('Triangle', { width: 100, height: 100 }); // 魔术字符串
    获取一个对象中Symbol属性名
      Object.getOwnPropertySymbols   可以获取指定对象的所有 Symbol 属性名
      Reflect.ownKeys                可以返回所有类型的键名，包括常规键名和 Symbol 键名。

    Symbol值重复利用
      Symbol.for()方法可以做到使用同一个 Symbol 值。它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值。   
      如果有，就返回这个 Symbol 值，否则就新建一个以该字符串为名称的 Symbol 值，并将其注册到全局。
      Symbol.keyFor()方法返回一个已登记的 Symbol 类型值的key

    内置Symbol
      对象的Symbol.iterator属性，指向该对象的默认遍历器方法。

  18.iterator  迭代器
    当需要对一个对象进行迭代时（比如开始用于一个for..of循环中），它的Symbol.iterator方法都会在不传参情况下被调用，返回的迭代器用于获取要迭代的值
    使用迭代器对象的next()方法，会回去到一个{value:1,done:false}

  19.generator 生成器函数（异步编程的解决方案）
    作用：1.生成迭代器2.异步编程的解决方案
      异步编程：setTimeout(function(){},3000),ajax，nodejs(java)=>文件的操作(IO)，数据库的操作
      回调函数能解决这个问题
      异步  同步
    异步编程(文件的操作)
    1）生成器函数的声明和调用
      声明
        function * gen(){
            yield '111'
            yield '222'
            yield '333'
        }
      调用
        gen(),注意调用完这个函数后，不会立即执行函数里面的代码，而会返回一个迭代器对象，可以进一步调用迭代器对象的next方法
        第一个next会拿到第一个{value:'111',done:false}
        let iterator = gen()          //iterator是一个迭代器对象

    2）生成器函数的参数快递
      gen('qq')  function* gen(arg){}
      iterator.next('hello')  会将这个参数给上一个yield表达式的返回值
    3)生成器函数的实例

 

  20.Promise(异步编程的新解决方案)
    Promise是一个构造函数，构造一个承诺对象
    承诺的发起 pending
    承诺的兑现 resolved
    承诺未兑现 rejected
 
  21.async函数
    generator函数的语法糖，作用是异步函数同步化
      function findAll(){
          let r = axios.get(url)
          // r是一个承诺对象
      }

      // 从根本上解决了一部函数的问题
       async function findAll(){
           let r = axios.get(url)
           // r是从后台拿到的数据
       }

 

  22.类
    构造函数
      function Animal (name,age){
          this.name = name,
          this.age = age
      }
      Animal.prototype.sayHello = function(){
          console.log('hello')
      }
      let a = new Animal('tom',12)

    类
      class Animal{
      // 一个类必须有一个constructor
      constructor(name,age){
          this.name = name
          this.age = age
      }
      // 成员方法
      sayHello(){
          console.log('hello my name is '+this.name);
      }
      // 成员属性
      gender = 20
      // 静态方法
      static gender = '男'
      }
      let a = new Animal('jerry',12)
    继承
      原型链基础
        function Animal(){}
        function Dog(){}
        Dog.prototype = new Animal()
      经典继承
        function Dog(){
            Animal.call(this,'tom')
        }
      类
        // 父类
        class Animal{
            sayHello(){
                console.log('hello')
            }
        }
        // 子类
        class Dog extends Animal{
            constructor(){
                super()
            }
        }
        let d = new Dog()
        d.sayHello()  //hello

  23.axios
    基于promise的http库
    jQuery  ajax基于回调函数
    axios  纯粹的http库，基于promise(专业)
      既能在浏览器上使用，也能在nodejs上使用
      拦截操作
        响应拦截(在你拿到响应信息之前干一个事情)
        请求拦截(请求发送之前干一个事情)
    1）使用
      安装
        cnd
          <script src='http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
          npm(cnpm yarn)
          npm install axios --save
遍历一个数组的方法：
  for while do/while for in
  forEach
  迭代器  可以迭代可迭代对象
  for of  可以迭代可迭代对象

 24.ajax

async javascript and html (异步的javascript和xml)
  负责浏览器和服务器交互的工具
  传统页面：刷新页面，加载整个页面，效率比较低
  Ajax：局部刷新
  异步
  同步
  服务器
    http://47.93.206.13:8002/swagger-ui.html
  ajax使用
    1.实例化对象(XMLHttpRequest)
      var xhr = new XMLHttpRequest()
    2.连接服务器（设置请求行）
      xhr.open('get',url)
    3.设置请求头
      xhr.setRequestHeader('Content-Type','application/json')
    4.发送请求
      xhr.send()
        注意：get请求的时候，data可以不传
              post请求的时候，data必须传
              form-data  图片
    5.获取数据（监听请求）
      xhr.onreadystatechange(function(e){
        this.readState
        this.status
        this.response(字符串)
        //反序列化
        var res = JSON.parse(this.response)  //对象
      })