es6

class Person{
    constructor
}

class Worker extends Person{
    constructor(name,age,job){
        //super 超类(父类)
        super(name,age);
        this.job = job;
    }
showJob(){
        alert()
    }
}

• 箭头函数
  箭头函数两种格式：
  1.只包含一个表达式，可以省略{ }和return,包含多条语句，这时候就不能省略
  2.如果有且仅有一个参数，()可以省略
  3.箭头函数会改变this
  例子：

const add = (a, b) => a + b;
const anotherAdd = (a, b) => { return a + b; };

• 默认参数

  //原来的写法，让b有默认值
      function show(a,b,c){
          b = b||5
          或者b ||= 5
          或者if(!b){b = 5}
      }
  //es6写法
      function show(a,b=8,c=4){
          console.log(a,b,c)
      }
      show(1)
  

• 剩余参数（参数展开）

function show(a,...args){
    console.log(a,args)
}
show(1,2,3)

//三个点的第一个用途，用来接收剩余 参数
//第二个用途，用来展开一个数组

• 数组新方法(这几个方法都不会改变原数组)
  • map

   let arr=[62, 55, 82, 37, 26];
   let arr2=arr.map(function (item){
    if(item>=60){
      return true;
    }else{
      return false;
    }
  });
  

  • filter

  let arr=[12,5,88,37,21,91,17,24];
  
  let arr2=arr.filter(item=>item%2);
  
  alert(arr2);
  

  • forEach

  let arr=[12,5,88,37,21,91,17,24];
  
  let sum=0;
  arr.forEach(item=>{
    sum+=item;
  });
  
  alert(sum);
  

  • reduce(一堆到一个)

  let arr=[12,5,88,37,21,91,17,24];
  
  let ave=arr.reduce((tmp,item,index)=>{
    if(index<arr.length-1){
      return tmp+item;
    }else{    //最后一次迭代
      return (tmp+item)/arr.length;
    }
  });
  

  -处理类数组
  let aDiv=document.getElementsByTagName('div'); Array.from(aDiv).forEach(div=>{ div.style.background='yellow'; });//可以使用数组的方法了
  -json

//简写1
let a=12;
    let b=5;

    let json={a, b};

    console.log(json);
//简写2
let json={
      a: 12,
      b: 5,
      show(){
        alert(this.a+this.b);
      }
    };

    json.show();

• 模板字符串

let json={name: 'blue', age: 18};
  //alert('我叫：'+json.name+'，我今年'+json.age+'岁');
  alert(`我叫：${json.name}，我今年${json.age}岁`);

//原样输出
alert(`ab
cde
f
d`);

//startsWith和endsWith
if(num.startsWith('135')){
    alert('移动')
    }else{
    alert('联通')
}
if(fileName.endsWith('.txt')){
    alert('文本文件')
}else{
    alert('图片文件')
}

• 面向对象
  • es6之前

  //没有类，用函数实现对象，方法用```prototype```来加
  function Person(name, age){
    this.name=name;
    this.age=age;
  }
  
  Person.prototype.showName=function (){
    alert('我叫'+this.name);
  };
  Person.prototype.showAge=function (){
    alert('我'+this.age+'岁');
  };
  //继承，非官方，很麻烦
  function Worker(name, age, job){
    Person.call(this, name, age);
    this.job=job;
  }
  
  Worker.prototype=new Person();
  Worker.prototype.constructor=Worker;
  Worker.prototype.showJob=function (){
    alert('我是做：'+this.job);
  };
  
  let w=new Worker('blue', 18, '打杂的');
  
  w.showName();
  w.showAge();
  w.showJob();
  

  • es6写法，代码统一了，性能也提升了

class Person{
      constructor(name, age){
        this.name=name;
        this.age=age;
      }

      showName(){
        alert('我叫'+this.name);
      }
      showAge(){
        alert('我'+this.age+'岁');
      }
    }

//```super```把属性带到子类，```extends```把方法代发哦子类
class Worker extends Person{
      constructor(name, age, job){
        //super-超类(父类)
        super(name, age);
        this.job=job;
      }

      showJob(){
        alert('我是做：'+this.job);
      }
    }

    let w=new Worker('blue', 18, '打杂的');

    w.showName();
    w.showAge();
    w.showJob();

• 关于this

  • 普通函数：根据调用我的人
  • 箭头函数：根据我所在的环境

  //window
  let arr=[1,2,3];
  arr.a=()=>{
    alert(this);
  };
  arr.a();
  //document
  document.onclick=function (){
    let arr=[1,2,3];
    arr.a=()=>{
      alert(this);
    };
    arr.a();
  };
  

• 什么叫语法糖
  语法糖实际上是让你写起来更方便，写起来是一种写法，但到了内部会被编译成别的东西。
  例如解构赋值:

  let[a,b] = [1,2]
  //到了内部还是会编译成```let a =1;letb = 2```，但是写起来更方便了
  

• 编译和打包
  编译是把一个语言变成另一个
  打包是把一堆文件合成一个，可以减少http请求次数

• js会预解析

var a=12;
    function show(){
      // 预解析时这里会有var a
      alert(a);
      var a=5;
    }
    show(); //undefined

• Promise
  同步 - 串行 简单方便
  异步 - 并发 性能高、体验好

//p1,p2,p3都执行了才会执行```then```
Promise.all([p1,p2,p3]).then()
Promise.all()   //所有都成功
Promise.race()   //只要有一个完成

- 回调和轮询

轮询好比每隔一段时间上前台查看快递，回调就好像快递到了前台来通知。
Promise有用-解除异步操作
Promise有局限 -带逻辑的操作麻烦

• Promise改进版generator实际上只是一个过渡的版本，如今用async、await

    function sleep(sec){
      return new Promise((resolve, reject)=>{
        setTimeout(function (){
          resolve();
        }, sec*1000);
      })
    }

    async function show(){
      alert('a');
      await sleep(1);
      alert('b');
      await sleep(2);
      alert('c');
    }

    show();

 async function(){
      ...
      ...
      let 结果 = await 异步操作(promise、generator、或另一个astnc函数)
      ...
    }

• Array.of方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

Array.of方法可以用下面的代码模拟实现。

function ArrayOf(){
  return [].slice.call(arguments);
}

延伸：Array.prototype.slice的一个重要应用就是将类似数组的对象转化为真正的数组。例如：

Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
// ['a', 'b']
Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);