工作中常用的ES6语法

1. let和const

• let（变量）

  • 不会重复声明
  • 变量-可以修改
  • 块级作用域

• const（常量）

  • 不会重复声明
  • 常量-不可以修改
  • 块级作用域

• 对比之前ES5的 var

  • 可以重复声明
  • 没有块级作用域
  • 无法限制修改

  
  // 经典案例 采用闭包方式来解决
  var btns = document.getElementsByTagName('input');
  // for (var i = 0; i < btns.length; i++) {
  //     (function (i) {
  //         btns[i].onclick = function () {
  //             alert(i)
  //         }
  //     })(i)
  // }
  
  // 采用ES6 块级作用域来解决
  for (let i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
          alert(i)
      }
  }
  

2. 箭头函数

• 只有一个参数（）可以省略

  // ES5之前函数
  function fn1(a) {
      return a * 2
  }
  alert(fn1(2))
  
  // 演变箭头函数
  let fn2 = a => a * 2
  alert(fn2(2))
  

• 只有一个return 可以省略{ }

  // ES5之前的函数
  var arr = [10, 2, 6, 8, 55, 446]
  var res1 = arr.sort(function (a, b) {
      return a - b
  })
  alert(res1)
  
  // 演变成箭头函数
  var res2 = arr.sort((a, b) => a - b)
  alert(res2)
  

3. 函数参数

• 函数扩展/展开（延展操作符）

  • 收集剩余参数

    // 注意args可以随便起变量名，agrs必须放在形参最后一位，否则报错。
    function show(a, b, ...agrs) {
        alert(a) // 10
        alert(b) // 20
        alert(agrs) // 2,21,16
    }
    show(10, 20, 2, 21, 16)
    

  • 展开数组

    // 展开后的效果，跟直接把数组内容写在这儿一样
    var num = [10,20]
    
    let show = (...args) => {
        fn(...args)
    }
    
    let fn = (a, b) => {
        alert(a + b)
    }
    
    // 展开数组num
    show(...num)
    

• 默认参数

  let showArgs = (a,b=10,c=15)=>{
      console.log(a);
      console.log(b);
      console.log(c);
  }
  // 没传就显示默认值
  showArgs(1); // 1,10 15
  
  // 传了就覆盖默认值
  showArgs(12,13,14); // 12,13 14
  

4. 解构赋值

• 左右两边结构必须一样

• 右边必须是个东西

• 声明和赋值不能分开（必须在一句话里完成）

  // ES5之前想取出
  let arr = [1, 2, 3]
  let a = arr[0]
  let b = arr[1]
  let c = arr[2]
  console.log(a, b, c);
  
  // ES6结果赋值 (左右结构必须一致)
  let [z, x, d] = [1, 2, 3];
  console.log(z, x, d);
  
  let [arrs, obj, num, str] = [
      [1, 2, 3], {
          a: 12,
          b: 15
      },
      8, "Jason"
  ]
  console.log(arrs, obj, num, str); //[1, 2, 3] {a: 12, b: 15} 8 "Jason"
  

5. 数组

• map（映射） 一 对一

  // map() 方法
  let arr = [10, 20, 30];
  // 返或一个结果  所有的数据都会从function(){}里走一下
  var res = arr.map(item => item * 2)
  console.log(res); // [20, 40, 60]
  
  let score = [19, 85, 95, 65, 49];
  let result = score.map(item => item >= 60 ? "价格" : "不及格")
  console.log(result); // ["不及格", "价格", "价格", "价格", "不及格"]
  

• reduce（汇总） 一堆数据出来一个数据

  // reduce() 一堆数据出来一个 
  // 求数组的总和,平均数
  let sums = [10, 30, 50, 80];
  // reduce()里接收三个参数 分别是第一次相加的结果，得出结果的下一位数，索引
  let getSum = sums.reduce((sum, item, index) => sum + item)
  console.log(getSum); //170 
  
  let getAvg = sums.reduce((sum, item, index) => (sum + item) / sums.length)
  console.log(getAvg); //23.75
  

• filter（过滤器） 按照一定的规则刷选数据

  // filter 按照一定的规则 返回 一些结果
  let goods = [{
      name: "电脑",
      price: 10000
  },
               {
                   name: "电视",
                   price: 5000
               },
               {
                   name: "投影仪",
                   price: 8000
               },
              ]
  // 接收一个参数
  let getFilter = goods.filter(item => {
      if (item.price >= 6000) {
          return item
      }
  })
  console.log(getFilter); //{name: "电脑", price: 10000} {name: "投影仪", price: 8000}
  

• forEach（循环、迭代）

  // forEach 循环
  let number = [10, 3, 5, 52, 69, 133]
  number.forEach((item, index) => {
      console.log(item,index);
  })
  

6. 字符串

• 新增加了两个方法

  • startsWith() 以什么开头

    var str = "https://www.baidu.com";
    console.log(str.startsWith("https://")); //true
    console.log(str.startsWith("http://")); //false
    

  • endsWith() 以什么结尾

    var str = "https://www.baidu.com";
    console.log(str.endsWith(".com")); //true
    console.log(str.endsWith(".coms")); //false
    

• 模板字符串（用反单引号来表示 `）

  • 使用 ${} 语法来拼接

  • 可以折行

    
    let a = 12;
    let b = `a${a}bc`
    console.log(b); // a12bc
    
    var str = "haozhicong";
    var date = "19950917";
    var res = `名字是：${str},出生年月是：${date}`
    console.log(res); // 名字是：haozhicong,出生年月是：19950917
    

7. 面向对象

• class关键字，和类分开

• class里直接加方法

  // ES5之前的面向对象
  // function Student(name, age) {
  //     this.name = name;
  //     this.age = age;
  // }
  // Student.prototype.show = function () {
  //     console.log("名字是:" + this.name + "年龄是：" + this.age)
  // }
  
  // ES6面向对象写法
  // 1. class 关键字
  // 2. class 里面直接加方法
  class Student {
      constructor(name, age) {
          this.name = name;
          this.age = age;
      }
      show() {
          console.log(this.name, this.age);
      }
  }
  var s1 = new Student('Jack', 22);
  s1.show()
  var s2 = new Student('Jason', 24);
  s2.show()
  

• extends 继承

  class Student {
      constructor(name, age) {
          this.name = name;
          this.age = age;
      }
      show() {
          console.log(this.name, this.age);
      }
  }
  
  class vipStudent extends Student {
      constructor(name, age, num) {
          super(name, name) // super 指向父类
          this.num = num
      }
      shownum() {
          console.log(this.num);
      }
  }
  var s1 = new vipStudent('Jack', 22, 'G14190117');
  s1.show()
  s1.shownum()
  

• ES5通过call来继承

  function Student(name, age) {
      this.name = name;
      this.age = age;
  }
  Student.prototype.show = function () {
      console.log("名字是:" + this.name + "年龄是：" + this.age)
  }
  
  function vipZtudent(name, age, num) {
      Student.call(this, name, age)
      this.num = num
  }
  // new一下Student()
  vipZtudent.prototype = new Student();
  // 这里把构造函数指向vipZtudent
  vipZtudent.prototype.constructor = vipZtudent;
  // vipZtudentt增加新的方法
  vipZtudent.prototype.showvipZtudent = function () {
      console.log("学号是：", this.num);
  }
  var s1 = new vipZtudent('Jack', 22, 'G14190117');
  s1.show()
  s1.showvipZtudent()
  

8. JSON 对象

• JSON.stringify() 把JSON转成字符串

• JSON.parse() 把JSON字符串转成JSON对象

• JSON格式

  • 只能用双引
  • 所有的名字都必须用引号抱起来
  • { "firstName":"John" , "lastName":"Doe" }

9. Promis（解决异步）

• 原生ajax请求

  $.ajax({
      url: "data/a.txt",
      dataType: "json",
      success: function (data) {
          console.log(data);
      },
      error: function (err) {
          console.log(err);
      }
  })
  $.ajax({
      url: "data/c.txt",
      dataType: "json",
      success: function (data) {
          console.log(data);
      },
      error: function (err) {
          console.log(err);
      }
  })
  $.ajax({
      url: "data/b.txt",
      dataType: "json",
      success: function (data) {
          console.log(data);
      },
      error: function (err) {
          console.log(err);
      }
  })
  

• Promise使用

  // 1. 创建Promise对象
  let p1 = new Promise(function (resolve, reject) {
      $.ajax({
          url: "data/b.txt",
          dataType: "json",
          success: function (data) {
              resolve(data);
          },
          error: function (err) {
              reject(err);
          }
      })
  
  })
  let p2 = new Promise(function (resolve, reject) {
      $.ajax({
          url: "data/a.txt",
          dataType: "json",
          success: function (data) {
              resolve(data);
          },
          error: function (err) {
              reject(err);
          }
      })
  
  })
  let p3 = new Promise(function (resolve, reject) {
      $.ajax({
          url: "data/c.txt",
          dataType: "json",
          success: function (data) {
              resolve(data);
          },
          error: function (err) {
              reject(err);
          }
      })
  
  })
  
  // 2. 使用Promise
  Promise.all([p1, p2, p3]).then((res) => {
      debugger
      // 这里得出的是个数组  用解构赋值取出来
      let [a1, a2, a3] = res
      console.log(a1);
      console.log(a2);
      console.log(a3);
  }, err => {
      console.log(err);
  })
  

• Promise.all（）的使用

  // ajax 是有返回值的  可以这样写
  Promise.all([
      $.ajax({
          url: "data/a.txt",
          dataType: "json"
      }),
      $.ajax({
          url: "data/b.txt",
          dataType: "json"
      }),
      $.ajax({
          url: "data/b.txt",
          dataType: "json"
      })
  ]).then((resolve) => {
      debugger
      console.log(resolve);
  }, (reject) => {
      console.log(reject);
  })