ES基礎知識

ES6介紹

• ES6歷史

  1996年11月，JavaScript的創造者Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，希望這種語言能夠成 爲國際標準。次年，ECMA發佈262號標準文件（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲ECMAScript。這個版本就是ECMAScript 1.0版。

• ES6是什麼？

  • ECMA-262 的第六次變更，所有以前按照慣例稱爲es6，ES2015
  • ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。在日常場合，這兩個詞是可以互換的。
  • 2015年6月，ECMAScript 6正式通過，成爲國際標準。
  • Node.js是JavaScript語言的服務器運行環境。它們對ES6的支持度，比瀏覽器更高。通過它們，可以體驗更多ES6的特性。
  • 這個標準的牛逼之處就在於會逐步統一前端，因爲新增加的module,異步編程，Generator函數這些東西在angular中和node中都有很好的實現了。

ECMAScript6 語法

ES6的學習站點:
各個瀏覽器對ES6的支持 http://kangax.github.io/compat-table/es6/
學習站點 http://es6.ruanyifeng.com/#README

爲什麼要學習ES6

• ES6也叫ECMAScript2015,2015-6月正式發佈，向下兼容ES5.1
• ES6來編寫Node.js程序
• ES6讓JavaScript語言能夠開發複雜應用程序

嚴格模式

• ES5中出現的模式

• 嚴格模式的目的：

  • 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行爲;

  • 消除代碼運行的一些不安全之處，保證代碼運行的安全；

  • 提高編譯器效率，增加運行速度；

  • 爲未來新版本的Javascript做好鋪墊

  • 參考
    嚴格模式的限制

    嚴格模式的限制

• 開啓嚴格模式

  • 在作用域的最上面 “use strict”
    • js文件的最開頭
    • function的開頭

變量和常量

• 變量 let

  • 沒有變量提升，必須先定義再使用
  • 有塊級作用域
  • 解決問題

  window.onload = function () {
              var ul = document.getElementById("list");
              var lis = ul.getElementsByTagName("li");
              for(let i = 0, length=lis.length; i < length; i--) {
                  lis[i].onclick = function () {
                      console.log(i);
                  }
              }
          }
  

• 常量 const

  • 常量一旦賦值，不能改變
  • 有塊級作用域
  • 沒有變量提升，先定義再使用
  • 不可以重複定義
  • 必須有初始值，否則報錯
  • 在Node.js中，所有接收require()獲得的對象都使用const修飾

string 的擴展方法

• string的擴展方法
  • includes() 返回布爾值，是否包含，第二個參數從第幾個位置開始查找
  • startsWith() 返回布爾值，是否以…開頭，第二個參數從第幾個位置開始查找
  • endsWith() 返回布爾值，是否以…結尾，第二個參數, 前n個字符以…結尾
  • repeat() 重複次數
• 模板
  • 示例1：

  let name = "steve jobs";
  let str = `hello ${name}`;
  

  • 示例2：

  let obj = {name:"jobs", age: 18, salary: 1};
  
  let template = `
      姓名：${obj.name}
  年齡：${obj.age}
  工資：${obj.salary}
  `.trim();
  

箭頭函數

• 箭頭函數
  • 格式： => (讀作：goesto) 左邊是參數，右邊是方法體
  • 演變：function f(x,y) {} -----> 演變成箭頭函數
    (x, y) => {}
    語法格式簡單
  • 箭頭函數的幾種形式：

    • 沒有參數:

        let f1 = () => console.log('hello');
         f1();
      

    • 有一個參數

        let f1 = a => ++a;
        console.log(f1(5))
      

    • 有多個參數 (a,b) => a - b;

    • 方法體有多條語句 (a,b) => { a=1; b=2; console.log(a-b)};

  • 箭頭函數的注意事項
    • 箭頭函數不會影響this的指向
    • 箭頭函數根本沒有自己的this，箭頭函數內部的this就是外層代碼塊的this
    • 箭頭函數中沒有arguments對象，箭頭函數內部的arguments指向外層函數的arguments
    • 不可以當做構造函數

"use strict";
let obj = {};
obj.sayHi = function(){
    console.log(this);
    let f1 = () => {
        console.log(this);
    }
    f1();
}
obj.sayHi();

Promise

promise是爲了解決回調地獄(callback hell)。
promise是一個容器，容器中有3種狀態

• pending 默認，進行中
• resolved 已完成
• rejected 已失敗

回調地獄示例:代碼不易維護…

'use strict';

const fs = require('fs');
fs.readFile('./1.txt', 'utf8', (err, data) => {
  console.log(data);
  fs.readFile('./2.txt', 'utf8', (err, data) => {
    console.log(data);
    fs.readFile('./3.txt', 'utf8', (err, data) => {
      console.log(data);
    })
  })
})

promise基本使用:

"use strict";

const fs = require("fs");

new Promise((resolved, rejected) => {
    fs.readFile("./1.txt", "utf8", (err, data) => {
        if (err) {
            rejected(err);//rejected 對應then的第二個參數
            console.log("出錯啦");
        }
        //如果出錯，resolved不會執行
        resolved(data);//resolved 對應then的第一個參數
        console.log("可以輸出！");
    })
}).then((data) => {
    console.log("xxxxxxxxxxx");
    console.log(data);
    //這裏可以return 任何東西
    return 123;
}, (err) => {
    console.log(err);
});

封裝讀取文件的promise對象:

'use strict';
const fs = require('fs');
//封裝讀取文件的promise對象
function readFile(path) {
  return new Promise((resolved, rejected) => {
    fs.readFile(path, 'utf8', (err, data) => {
      if(err) {
        rejected(err);
      }

      resolved(data);
    })
  })
}
readFile('./1.txt')
.then((data) => {
  console.log(data);
  return readFile('./2.txt');
}, (err) => {
  console.log(err);
})
.then((data) => {
  console.log(data);
  return readFile('./3.txt');
})
.then((data) => {
  console.log(data);
})

在jQuery中的ajax中使用promise

jQuery裏的ajax封裝了promise
$.ajax();返回的是一個promise對象。
所以可以在後面.then
使用promise能保證發送請求的順序~

  <script src="jquery.js"></script>
  <script>
    $.ajax({
      type: 'get',
      url: 'http://182.254.146.100/admin/posts',
      dataType: 'json'
    })
    .then((data) => {
      console.log(data);
      return $.ajax({
        type:'get',
        url: 'http://182.254.146.100/posts/count',
        dataType: 'json'
      })
    }).then((data) => {
      console.log(data);
    }) 
  </script>

通過promise 封裝ajax :

    //通過promise 封裝ajax
    function ajax(url) {
      return new Promise((resolved, rejected) => {
        //發送ajax請求
        let xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
       
        xhr.onreadystatechange = function() {
          if(xhr.readyState === 4 ) {
            if(xhr.status === 200) {
              resolved(xhr.responseText);
            }else{ 
              rejected();
            }
          }
        }
        xhr.send();
      })
    }
    ajax('http://182.254.146.100/admin/posts')
    .then((data) => {
      console.log(data);
      return ajax('http://182.254.146.100/posts/count');
    }, () => {
      console.log('失敗');
    })
    .then((data) => {
      console.log(data);
    }, () => {
      console.log('失敗');
    })