前端筆記3（AJAX，集合、函式擴充套件，面向物件，非同步處理）
AJAX
Demo:
天氣介面們：
城市的 ID：
直接百度中國城市天氣預報編碼
https://www.cnblogs.com/oucbl/p/6138963.html#_label21
XMLHttpRequest
在atom中執行ajax報錯XMLHttpRequest is not defined：
這裡的執行實際是執行的 node, window 屬於瀏覽器環境中的全域性變數,在 node 中肯定拿不到的.可以改成 global
你是裝了nodejs吧，你的ctrl + b只是把js程式碼在nodejs環境下運行了好像，document window只在瀏覽器裡面存在，
var test;
if(window.XMLHttpRequest){
test = new XMLHttpRequest();
}else if(window.ActiveXObject){
test = new window.ActiveXObject();
}
使用：
open()
初始化 HTTP 請求引數，例如 URL 和 HTTP 方法，但是並不傳送請求。
send()
傳送 HTTP 請求，使用傳遞給 open() 方法的引數，以及傳遞給該方法的可選請求體。
原生ajax的四個過程，
new，open，send, onreadystatechange。
非同步重新整理實現原理：
當xmlHttpRequest物件的readyState更新時，就會自動執行onreadystatechange繫結的js事件（體現非同步），在該事件中操作DOM更新html頁面（體現區域性重新整理）。
Ajax：readyState（狀態值）和status（狀態碼）的區別
readyState，是指執行AJAX所經歷過的4種狀態，無論訪問是否成功都將響應的步驟，可以理解成為AJAX執行步驟。
status，是指無論AJAX訪問是否成功，由HTTP協議根據所提交的資訊，伺服器所返回的HTTP頭資訊程式碼。
總體理解：可以簡單的理解為state代表一個整體的狀態。而status是這個大的state下面具體的小的狀態。
eval() 函式
可將字串轉換為程式碼執行，並返回一個或多個值
為什麼eval要新增括號呢？
由於json是以{}的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表示式。
加上圓括號的目的是迫使eval函式在處理JavaScript程式碼的時候強制將括號內的表示式(expression)轉化為物件，而不是作為語句(statement)來執行。舉一個例子，例如物件字面量{}，如若不加外層的括號，那麼eval會將大括號識別為JavaScript程式碼塊的開始和結束標記，那麼{}將會被認為是執行了一句空語句。
console.log(eval("{}"); // undefined
console.log(eval("({})");// object[Object]
解析物件資料
let {data:{forecast:allWeather}} = obj;
模板字串中換行<br/>
ejs
匯入外部檔案
在index.ejs檔案中匯入public資料夾下的table.css以及table.js兩個檔案
在servers->app.js中寫上這句
//獲取放置在public資料夾下的靜態檔案,
app.use(express.static(__dirname + '/public'));
這句話的意思是，將靜態檔案目錄設定為專案根目錄+/public
這樣，就可以在ejs檔案中匯入外部靜態檔案了。 這裡需要注意一點，在匯入寫URL時，只需要寫public後面的路徑就好，不需要再加上“public”了。如下：
<link rel="stylesheet" type="text/css" href="table.css"/><script type="text/javascript" src="table.js"></script><script type="text/javascript" src="E:\studyMaterial\學習\前端筆記\4\ajax.js"></script>
在Express中： Express的結構如下：
|—node_modules——用於安裝本地模組。
|—public————用於存放使用者可以下載到的檔案，比如圖片、指令碼檔案、樣式表等。
|—routes————用於存放路由檔案。
|—views————-用於存放網頁的模板。
|—app.js————應用程式的啟動指令碼。
|—package.json——專案的配置檔案。
要把本地檔案放在public中，在public中新建一個images檔案，引用檔案裡的圖片，就可以在瀏覽器中顯示
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script type="text/javascript">
// let xmlHttp=new XMLHttpRequest();
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp = new window.ActiveXObject();
}
xmlHttp.open("get","http://wthrcdn.etouch.cn/weather_mini?citykey=101010100");
xmlHttp.onreadystatechange=callback;
xmlHttp.send();
function callback(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
let result=xmlHttp.responseText;// 接收返回的結果
let obj=eval(`(${result})`);// 轉換為物件
// 取得物件中所有未來的天氣資訊
let {data:{forecast:allWeather}}=obj;
console.log(allWeather);
let str="";
for(weather of allWeather){
let {date,high,low,type}=weather;
str+=`${date},${high},${low},${type}<br/>`;
}
// 建立一個div
let div=document.createElement("div");
div.innerHTML=str;
document.body.appendChild(div);
}
}
</script>
<title></title>
</head>
<body>
</body>
</html>啟動服務
之前構建的專案是我們後面要一直使用的，因此必須每次編寫程式碼前，先啟動這個專案對應的服務。
在命令列中進入專案根目錄E:\studyMaterial\work\web，執行：gulp --watch
之後就可以通過localhost:3000來訪問你編寫的頁面和內容，預設訪問的是server-views-index.ejs的頁面。
在atom中除錯js
Script-run script
Ctrl+shift+B
2.1、集合操作
Java語言裡提供三種集合：List、Set、Map
List：允許重複資料
Set：不允許重複資料
Map：鍵值對形式
而在ES6種，也出現了Set和Map集合。
Set也是不允許重複資料出現。
|
let set = new Set([1,2,3,4,3,4,7,8,8,9]); console.log(set); |
Set集合可以動態新增、刪除和清空資料。
|
let set = new Set([1,2,3]); set.add(22); set.delete(3); console.log(set.has(1)); console.log(set); // 注意，Set集合取得的key是值，而不是下標 // for (let key of set.keys()) { // console.log(key); // } for (let [key,value] of set.entries()) { console.log(key,value); } |
Map集合是按照 key -> value 鍵值對的形式儲存的。
因此加入資料和判斷資料是否存在都依賴於key來完成。
|
let map = new Map(); // 新增資料 map.set('a',20); map.set('b',30); map.set('a',10); map.set('c',30); // 取得資料 console.log(map.get("b")); // 刪除資料 map.delete('a'); console.log(map); // 清空資料 // map.clear(); // console.log(map); // 迴圈，也包含keys()和values()方法分別取得所有的key和value // entries就是直接迴圈map的結果，因此一般不用 for (let [key,value] of map) { console.log(key,value); } |
Map集合也可以像Set集合一樣，在建立的時候就進行初始化。
|
let map = new Map([["a",1],["b",2],["c",3],[2,4]]); console.log(map); |
集合在ES6裡還提供了兩個Weak型別（WeakSet和 WeakMap）
這種型別只能放物件型別，不支援clear清空，不支援size取得數量，因此開發中基本不用。
|
let set= new WeakSet(); let obj = {a:1} set.add(obj); |
2.2、函式擴充套件
在ES6中，函式支援引數設定預設值的功能了，這樣就可以實現一些類似過載方法的操作。
|
function add(a,b=0,c=0) { return a + b + c; } console.log(add(3)); |
對於預設值的設定，注意物件中預設值的使用。
|
function add(a,b ={a:1,b:2}) { return a + b.a + b.b; } console.log(add(3,{a:1})); |
函式的引數也可以設定為可變引數。
|
function add(...value) { let sum = 0; for (let temp of value) { sum += temp; } return sum; } console.log(add(3)); |
在ES6中，函式擴充套件的最重要的一個功能就是箭頭函式，其目的就是為了簡化程式碼。
|
// function test(a) { // return a * 2 ; // } let test = a => a*2; console.log(test(5)); |
如果引數和返回值並不是這麼標準，也可以進行擴充套件和設定。
|
// function test(a,b) { // return a * b ; // } // 多個引數需要加入逗號 // let test = (a,b) => a*b; // 如果沒有引數需要加入括號 // let test = () => 5; // 如果返回值部分不止一行，而有多行程式碼，加入 {} 即可。 let test = (a,b) => { let c = a* b; return c ; } console.log(test(3,5)); |