1. let和const

• let（變量）

  • 不會重復(fù)聲明
  • 變量-可以修改
  • 塊級作用域

• const（常量）

  • 不會重復(fù)聲明
  • 常量-不可以修改
  • 塊級作用域

• 對比之前ES5的 var

  • 可以重復(fù)聲明
  • 沒有塊級作用域
  • 無法限制修改

  
  // 經(jīng)典案例 采用閉包方式來解決
  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. 箭頭函數(shù)

• 只有一個參數(shù)（）可以省略

  // ES5之前函數(shù)
  function fn1(a) {
      return a * 2
  }
  alert(fn1(2))
  
  // 演變箭頭函數(shù)
  let fn2 = a => a * 2
  alert(fn2(2))
  

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

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

3. 函數(shù)參數(shù)

• 函數(shù)擴展/展開（延展操作符）

  • 收集剩余參數(shù)

    // 注意args可以隨便起變量名，agrs必須放在形參最后一位晶伦，否則報錯蔗喂。
    function show(a, b, ...agrs) {
        alert(a) // 10
        alert(b) // 20
        alert(agrs) // 2,21,16
    }
    show(10, 20, 2, 21, 16)
    

  • 展開數(shù)組

    // 展開后的效果，跟直接把數(shù)組內(nèi)容寫在這兒一樣
    var num = [10,20]
    
    let show = (...args) => {
        fn(...args)
    }
    
    let fn = (a, b) => {
        alert(a + b)
    }
    
    // 展開數(shù)組num
    show(...num)
    

• 默認參數(shù)

  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. 解構(gòu)賦值

• 左右兩邊結(jié)構(gòu)必須一樣

• 右邊必須是個東西

• 聲明和賦值不能分開（必須在一句話里完成）

  // ES5之前想取出
  let arr = [1, 2, 3]
  let a = arr[0]
  let b = arr[1]
  let c = arr[2]
  console.log(a, b, c);
  
  // ES6結(jié)果賦值 (左右結(jié)構(gòu)必須一致)
  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. 數(shù)組

• map（映射） 一 對一

  // map() 方法
  let arr = [10, 20, 30];
  // 返或一個結(jié)果  所有的數(shù)據(jù)都會從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（匯總） 一堆數(shù)據(jù)出來一個數(shù)據(jù)

  // reduce() 一堆數(shù)據(jù)出來一個 
  // 求數(shù)組的總和,平均數(shù)
  let sums = [10, 30, 50, 80];
  // reduce()里接收三個參數(shù) 分別是第一次相加的結(jié)果萌抵，得出結(jié)果的下一位數(shù)，索引
  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（過濾器） 按照一定的規(guī)則刷選數(shù)據(jù)

  // filter 按照一定的規(guī)則 返回 一些結(jié)果
  let goods = [{
      name: "電腦",
      price: 10000
  },
               {
                   name: "電視",
                   price: 5000
               },
               {
                   name: "投影儀",
                   price: 8000
               },
              ]
  // 接收一個參數(shù)
  let getFilter = goods.filter(item => {
      if (item.price >= 6000) {
          return item
      }
  })
  console.log(getFilter); //{name: "電腦", price: 10000} {name: "投影儀", price: 8000}
  

• forEach（循環(huán)元镀、迭代）

  // forEach 循環(huán)
  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() 以什么結(jié)尾

    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. 面向?qū)ο?/h5>

• class關(guān)鍵字绍填，和類分開

• class里直接加方法

  // ES5之前的面向?qū)ο?// function Student(name, age) {
  //     this.name = name;
  //     this.age = age;
  // }
  // Student.prototype.show = function () {
  //     console.log("名字是:" + this.name + "年齡是：" + this.age)
  // }
  
  // ES6面向?qū)ο髮懛?// 1. class 關(guān)鍵字
  // 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();
  // 這里把構(gòu)造函數(shù)指向vipZtudent
  vipZtudent.prototype.constructor = vipZtudent;
  // vipZtudentt增加新的方法
  vipZtudent.prototype.showvipZtudent = function () {
      console.log("學(xué)號是：", this.num);
  }
  var s1 = new vipZtudent('Jack', 22, 'G14190117');
  s1.show()
  s1.showvipZtudent()
  

8. JSON 對象

• JSON.stringify() 把JSON轉(zhuǎn)成字符串

• JSON.parse() 把JSON字符串轉(zhuǎn)成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. 創(chuàng)建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
      // 這里得出的是個數(shù)組  用解構(gòu)賦值取出來
      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);
  })