--- tags: JavaScript --- # JavaScript學習筆記 ## 變數與資料型別 ## let、const、var介紹 ### var 很早期都是用var來宣告變數 現在很多文章還是有很多介紹使用var * var可以複寫，但很容易造成奇怪的問題、可以隨意更改內容的變數比較不嚴謹 * let 可以更改一個區域的變數 * const 不可以更改 * ES6是什麼 * ES6 是 ECMAScript 2015 的簡稱，它是 JavaScript 的一個重要版本，引入了一些新的語言特性和功能，使得 JavaScript 更強大和現代化。 * ES6 帶來了一些方便的功能，例如更好的模塊支援（import 和 export）、更簡潔的語法（箭頭函式、模板字串）、更容易使用的類和物件導向語法、更好的異步處理（Promise）等。 * 簡單來說，ES6 讓開發人員能夠用更少的代碼來達到更多的功能，同時提供了更好的程式碼結構和可讀性。它已經成為 JavaScript 開發的主要標準之一，讓開發人員能夠以更現代化的方式建構 JavaScript 應用程式。 * 什麼是ECMA ECMA 是一個國際標準化組織，負責制定和維護多種技術標準，其中包括 ECMAScript 規範，該規範定義了 JavaScript 語言的標準。 ![](https://i.imgur.com/tEmeduL.png) ![](https://i.imgur.com/tX5Ve0k.png) ## 網頁與Code環境建立流程教學 ## 數字型別與賦值運算子 * 賦值運算子`+=、-=` * `a++、a--` ## 字串型別 1. 宣告字串流程 字串要用**單引號**包住，不然會出錯， `let a = 'Hello' ; ` 如下圖： ![](https://i.imgur.com/sckaty3.png) 單引號跟雙引號都可以~但單引號跟雙引號要一致 會有兩種原因在於有些字串內容會有'單引號 例如：今天寫let's go 裡面有單引號的可能性 就可能造成程式錯誤 建議用雙引號實做 2. 一次搞懂字串相加 let a ="Hello "+" 你好嗎？"; `console.log(a);` 空白要怎麼加? 可以在變數中加上空白的字串 let name = 'tom'; let content = '你好嗎?'; `let total = name+' '+content;` 3. 透過 typeof 瞭解當前變數型別 console.log(typeof a); 會印出 string 有些情況下雖然看的出來型別，但可能實際上並非我們認知的型別 例如： let age = 18; `console.log(typeof age);` 會印出 number 但以下範例就並非number let ageString = "18"; `console.log(typeof ageString);` 會印出 String 所以透過此語法可以查當下變數是什麼型別 4. 數字與字串相加 數字與字串相加會 "自動轉型" 成字串 let myName = 'Tom' let age = 18; let total = myName+age; `console.log("Hi ,我是"+myName+"我今年"+age+"歲")` `console.log(typeof total);` 會印出 String 5. NaN產生時機 * NaN表示非數字 let myName = 'Tom' let age = 18; let total = myName * age; `console.log(total);` 會印出 NaN =>異常無法累加 `console.log(typeof total);` 會印出 NaN Number =>數字型別 異常狀況還是回報 * 使用 parseInt 可以把字串轉為數字型別=>要注意大小寫 let age2 = parseInt("30"); `console.log(typeof age2);` 會印出 number * 若要強行把字串轉為數字型別，會回傳NaN 6. 字串處理實用方法 //字串的處理方式、方法 //JS本身有很多語法 * 字元數 變數.length let a = "Mark"; a.length =>4 * 前後去空白 =>頭尾濾掉 變數.trim(); 很常使用在驗證使用者輸入帳密或email 使用者填寫帳號密碼，有時候誤觸到空白，程式比對時會比對不到 7. 變數記憶體指向講解 變數去前後空白之後，要指定賦予給變數，否則程式無法拿到修改後的結果，不會存到值 處理好結果，要宣告一個變數要賦予一個值，或是指定給本來就有的變數 8. 樣板字面值教學 let myName = "Tom" let myAge = 18; let content = "你好,我是"+myName+"我今年"+myAge+"歲"; 以上寫法會有很多加號造成書寫不易， #### es6提供新的語法: ![](https://i.imgur.com/gkObAhq.png) * 字串前後用反單引號ˋ * 字串連接變數，穿插用`${}` 呈現，不需要再用+ let content = `你好,我是${myName}我今年${myAge}歲`; ![](https://i.imgur.com/pNqj8cC.png) ## 變數：布林、undefined、null 1. 布林介紹 先前介紹了數值跟字串 布林值只有true跟false 因為電腦不知道什麼是對或錯 所以我們要告訴電腦邏輯結果 例如: 小明起床了嗎? int isWakeUp = true; `console.log(typeof isWakeUp);` 答案:boolean console.log(2>1); 答案:true `console.log(2>3);` 答案:false 2. undefined介紹 尚未賦予任何值，會回傳undefined let a ; `console.log(a);` 答案:undefined 3. null介紹 有被賦予值，是告知為空值，空資料 或想把值清空 let b = 1; let c = null ; `console.log(c);` 有些情況下會把資料清掉，它本來是有值的，所以用null把它清掉 後面會提到陣列與物件 如果大量資料放在記憶體,會很佔空間 只要清空為空值電腦就會釋放記憶體空間 4. 字串轉數字方法 let a = "1"; `console.log(a+1);` 答案:11 將字串轉型成數字 let a = parseInt("1"); 或 let a = "1"; a=parseInt(a); `console.log(a+1);` 答案:2 若轉型失敗會回傳NaN let a = "中文"; a = parseInt(a); 答案:NaN 從表單文字取出的數字都是字串 所以要把字串轉為數字再做後面的運算 5. 數字轉字串方法 前面章節為字串轉數字 let b = 1; `console.log(b+1);` 答案:2 此章節為數字轉字串 * 數字轉字串 let b =1; b = b.toString(); `console.log(typeof b);` * 會用到的情境 * 大樂透號 * 區碼加上後面的電話 * 字串加上數字=>還是字串 `console.log(b+1);` 11 ## 比較與邏輯運算子 ### 比較與邏輯運算子簡介 步驟1：任務拆解 步驟2：流程設計 ### 比較運算子 > < >= <= == != 結果為boolean `console.log(1>2)` false ### 比較運算子搭配變數方法 let a = 2; let b = 3; `console.log(a == b)` false 比較結果可賦予給變數 let c = a == b ; `console.log(c);` false let isWakeup = false; `console.log(isWakeup);` false ### 等號=、雙等號== 差異講解 1. 一個等於：賦予值的意思 2. 兩個等於：比較運算子的意思 ### 雙等號==、三個等號=== 差異講解 let a = 1; let b = 1; //兩個等於，協助轉型 `console.log(a==b)` 結果為true lat a = 1; let b = "1"; //字串 `console.log(a==b);` 結果為true //三個等於，會比較也會看型別，會比較嚴謹些 `console.log(a===b);` 結果為flase ### 邏輯運算子介紹 #### && 同時滿足條件、滿足其中一個條件 let a = 1; let b = 2; `console.log(a==1 && b ==2);` 結果為true `console.log(a==2 && b==2);` 結果為false 這個常用於促銷條件 消費滿額並有購買指定商品時有促銷 #### || 只要其中一個條件滿足 or let c = 3; let d = 4; `console.log(c==4||d==8);` 結果為true `console.log(c==5||d==8);` 結果為false #### 邏輯運算子增加多條件作法 ||練習 or 小孩吃東西 只要冰箱有米飯或蘋果或牛買任一個，小朋友就願意進食 let haveRice = false; let haveApple = false; let haveMilk = false; `console.log(haveRice == true || haveApple == false || haveMilk == true);` 結果為true ### 邏輯運算子範例情境 符合贈禮條件 必須同時符合以下兩個條件才贈禮 * 消費滿500(含蓋) >=500 * 是VIP 條件 let a = 600; let isVip = true; let buyCake = false; `console.log(a>=500 && isVip ==true)` 結果為true `console.log(a>=500 && isVip ==true && buyCake ==true);` 結果為false ## 流程判斷 - if、else if、else ### 為什麼要理解流程判斷 //小美在氣溫 15 度以下時依訂ˋ會穿上心愛的棉外套 //今天氣溫是 14 度，請試著用if來寫小美會如何行動 //console.log("小美穿上外套出門了"); let todayDegree = 14; let isWearJacket = todayDegree < 15 ; if (todayDegree < 15 ){ console.log("小美穿上外套出門了"); } if (isWearJacket ){ console.log("小美穿上外套出門了"); } ### if、else、els if 講解 if (isWearJacket ){ console.log("小美穿上外套出門了"); }else{ `console.log("小美不穿上外套出門了");` } ### if 詳細講解(一) if、else 只能一組 else if 可以多組 //小明不確定身上有多少錢 //小明想去外面用餐，想吃牛肉麵110元 //如果有80元就要去夜市吃牛排 //如果有35元就會去吃薯條 //於是他打開錢包前決定 錢不夠就回家吃飯 **let** wallet = 110 ; if(wallet >=110){ console.log("小明去吃牛肉麵"); }else if(wallet>=80) { console.log("小明去吃牛排"); }else if(wallet >= 35){ console.log("小明去吃薯條"); }else{ console.log("小明錢不夠，回家吃飯"); } ### if 詳細講解(二) * 每個判斷的程式碼寫完就測試，也算是一步一步的除錯．否則後續會不容易知道哪一段程式造成錯誤， //下雨程度 //小華他的習慣是 1. 如果沒有下雨，就不會帶雨具 2. 如果下毛毛雨，他會帶輕便雨衣 3. 如果下普通的雨，他會帶折傘 4. 如果颱風天豪雨，他會帶長傘 let todayWeather = "沒有下雨"; if(todayWeather == "沒有下雨"){ console.log("小華不會帶雨具"); }else if(todayWeather == "毛毛雨"){ console.log("小華會輕便雨衣"); }else if(todayWeather == "普通的雨"){ console.log("小華會帶折傘"); }else if(todayWeather == "颱風天豪雨){ console.log("小華會帶長傘"); }else{ console.log("小華遇到不在計畫內的特殊天氣"); } console.log("小華出門了"); ## if 流程圖規劃流程 寫程式之前要先拆解任務 流程出來，再寫code很容易 ### 流程圖符號簡介 流程圖工具：whimsical https://whimsical.com/js-8YBYe5kTEHJLrrzRgsjShi 流程圖符號最常使用：流程符號、起止符號、程式、決策判斷 ![](https://i.imgur.com/uChFJnf.png) ![](https://i.imgur.com/o62RcMX.png) Dora的流程圖: https://whimsical.com/js-8YBYe5kTEHJLrrzRgsjShi ### 流程圖 let code 講解 小華他想出門，但不確定自己的錢包是否有錢 於是他想打開錢包看看有多少錢 打開後，他發現有 150 元，於是他就紀錄在腦袋裡，他擁有 150 元 ### 流程圖 if code 講解 如果他有 100 元以上，他決定吃牛肉麵 如果沒有100元，就不吃任何東西，也不出門 最後計算自己剩下多少錢 let wallet = 0; wallet += 150 ; if(wallet >=100){ wallet -= 80; }else{ wallet-= 0; } ## if 中階運用 ### if 包 if 腰圍判斷流程圖設計 //腰圍指數測量 //男生腰圍大於 90 為過胖 //女生腰圍大於 80 為過胖 1. 判斷是男是女 2 判斷男女過胖的體重 男生判斷腰圍90 女生判斷腰圍80 ### if 包 if 腰圍判斷 Code 設計 let gender ; let weight ; gender = "male" ; weight = 90 if(gender == "male"){ if( weighy >=90){ console.log("體重過重ˋ"); }else{ console.log("體重正常"); } }else if(gender == "female"){ if( weight >=80){ console.log("體重過重ˋ"); }else{ console.log("體重正常"); } }else{ console.log("您輸入的資料錯誤"); } ### 看圖說故事 - if練習一 let myDegree = 38; if(myDegree > 37.5){ console("不可進入"); }else{ console("可以進入"); } console.log("計算結束"); ### 看圖說故事 - if、else if 練習二 let myScore = 60; if(myScore >=60){ console.log("您的成績及格"); }else{ console.log("您的成績不及格); } ### 看圖說故事 - if、else if 練習三 let myScor= 66; if(mySocr >=80 ) { console.log("優秀"); }else if(myScore >=60 ){ console.log("普通"); }else{ console.log("不及格"); } ## 陣列教學 ### 為什麼要學陣列？ 1. 家庭成員宣告就要重複宣告很多次 2. 超市宣告不同變數就要宣告很多次 let colors = ['red','yello','black']; let family = ['Bob','David']; ### 陣列寫法教學 let color1 = 'blue'; let color2 = 'pink'; //但如果有1000種顏色, 宣告變數就會很麻煩 let colors = ['blue','pink']; =>要注意！JS的陣列是用中括號［］包住表示，並非｛｝ ### 陣列不只能放字串，也能放數字與混合資料 let ary []; //陣列可以放空陣列 let boos = [5 ,30,40,100] //書櫃放的書本數 console.log(books); ary=['blue',100,false]; //陣列可以放不同屬性的資料 ### 陣列讀取教學 let colors = ['red','yello','black']; //讀取陣列資料、了解陣列長度 console.log(colors[0]); red //陣列是從0開始 console.log(colors[1]); 印出為yello ### 讀取陣列資料，並賦予新變數流程 let colors = ['red','yello','black']; let ilikeColor = color[2]; console.log(ilikeColor); ### length 讀取陣列長度流程 let colors = ['red','yello','black']; let clolrslNum = colors.length; console.log(clolrslNum); 印出為3 ### 陣列預設寫入資料 let colors = []; //寫入 console.log(colors); 印出為空值 colors[0] = "blue"; console.log(clolors); colors[1] = "red"; colors[2] = "black"; colors[4] = "pink"; //雖然[3]是空值,陣列上還是會視為一筆資料 //為被定義的會被寫入undifined(empty) console.log(colors.length); 印出5 ### push 寫入資料流程 //push會在最後一個資料後方加值 let colors = ['red','yello','black']; colors.push("pink"); colors.push(3); console.log(colors); ### unshift //新增至陣列第一筆資料 let colors = ['red','yello','black']; colors.unshift('pink'); console.log(colors); ### pop 與 shift 刪除資料 //新增 push,unshift //刪除 pop,shift colors.pop(); colors.shift(); ### splice 刪除指定資料 //新增 push,unshift //刪除 pop,shift //刪除指定資料splice(起始位置,第幾筆); let colors = ['red','yello','black']; //第一個數字，起始位置 //第二個數字，要往後刪除幾筆資料 colors.splice(1,1); 刪除yello console.log(colors); //應用說明 網頁上會有顯示的刪除按鈕 按下刪除按鈕,會取得該筆資料在陣列的位置 用spice帶入位置之後刪除該筆資料 ### 其他陣列總結 ##### 六角講義 https://www.hexschool.com/2017/09/01/2017-09-01-javascript-for/ ##### 處理陣列的方法： https://codepen.io/mwebwvuq-the-flexboxer/pen/PoaNvyq * **filter()**：filter() 會回傳一個陣列，其條件是 return 後方為 true 的物件，很適合用在搜尋符合條件的資料。 * **find()**：find() 與 filter() 很像，但 find() 只會回傳一次值，且是第一次為 true 的值。 * **forEach()**：forEach 是這幾個陣列函式最單純的一個，不會額外回傳值，只單純執行每個陣列內的物件或值。 * **map()**：使用 map() 時他需要回傳一個值，他會透過函式內所回傳的值組合成一個陣列。這很適合將原始的變數運算後重新組合一個新的陣列。 * 如果不回傳則是 undefined * 回傳數量等於原始陣列的長度 * **every()**:every() 可以檢查所有的陣列是否符合條件，這僅會回傳一個值 true or false，可以用來檢查陣列中的內容是否符合特定條件。 * **some()**:some() 與 every() 非常接近，都是回傳 true or false，差異僅在 every() 需完全符合，some() 僅需要部分符合。 * **reduce()**:reduce() 和其他幾個差異就很大了，他可以與前一個回傳的值再次作運算，參數包含以下： * accumulator: 前一個參數，如果是第一個陣列的話，值是以另外傳入或初始化的值 * currentValue: 當前變數 * currentIndex: 當前索引 * array: 全部陣列 ## 物件教學 ### 為什麼要有物件 買房子會看很多物件，比較詳細在描述一件東西裡面的詳細資訊 例如游泳池、房間、廚房等 ### 物件格式教學 let colors = ['red','yello','black']; //物件 //描述家庭 let motherName = "Mary"; let father = "Tom"; let dogs = 3; //物件用｛｝表示 //宣告方式為 => 屬性:對應值, //每筆資料要用逗號分開 //最後｝結尾要加上分號 //若有Boolean 要寫小寫 let home = { motherName : "ViVi", fatherName : "Bob", cats : 2 , isWakeUP : true }; ### 如何讀取物件的值 let home = { motherName : "ViVI", fatherName : "Bob", cats : 2 , isWakeUP : true }; console.log(home.motherName); let cats = home.cates; 用"點"去選擇物件 ### 新增物件屬性 let home ={}; home.motherName = "Mary"; home.cats = 3; console.log(home); //新增屬性並賦予值 ### 修改物件值 let home = { motherName : "ViVI", fatherName : "Bob", cats : 2 , isWakeUP : true }; home.motherName = "Jane"; console.log(home); ### 刪除物件資料 delete home.motherName; console.log(home.motherName); 顯示undefined ### 另一種讀取物件屬性方法 let a = "cats"; console.log(home[a]); 印出2 ### 物件讀取資料判斷時間 陳列物件還有json格式資料 "001":"hello" let home = { motherName : "ViVI", fatherName : "Bob", cats : 2 , isWakeUP : true, "001":"hello" }; 當物件內容為json格式， 使用"點"取得物件 因為開頭如果是數字,無法辨識會出錯 ![](https://i.imgur.com/tI5KWRf.png) 在這種情況下就必須使用上述"字串讀取的方式" [] ![](https://i.imgur.com/gzYkiVV.png) ## 陣列與物件整合運用 ### 陣列與物件混合應用 知道什麼情況下要用陣列 什麼情況下要用物件 如何讀取資料定義資料結構 e.g. 情境 有兩個水果攤 第一個水果攤，老闆 Tom ，香蕉有６個，蘋果有５個，還沒關店 第二個水果攤，老闆 John，香蕉有９個，蘋果有８個，還沒關店 拆解資訊 陣列來說都是放幾筆幾筆[0][1] * 兩家店陣列內容有2筆 * 陣列內容也可以放物件 * 陣列格式 [陣列內容,陣列內容,陣列內容] * 物件格式 { 屬性:值 } let market = [ { bossName : "Tom", bananaNum : 6, appleNum : 5, isOpen : true }, { bossName : "John", bananaNum : 9, appleNum : 8, isOpen : true } ] ### 一次搞懂陣列與物件混合讀取教學 ![](https://i.imgur.com/lE4FxG6.png) market是屬於 陣列 ![](https://i.imgur.com/RBrJn9Y.png) market[0]的內容為「物件」 若要取得物件內容要使用＂點＂ 若要尋找陣列的第幾筆？用中括號[第幾筆]去尋找 如果要尋找物件屬性的值？要用＂點＂去尋找 舉例： 要找到 appleNum : 8,的資料 console.log(market[1].appleNum); ![](https://i.imgur.com/FPnLHC8.png) ### JSON格式介紹 * 維基百科介紹JSON https://zh.wikipedia.org/zh-tw/JSON * WEB開發 JSON最開始被廣泛的應用於WEB應用的開發。不過目前JSON使用在JavaScript、Java、Node.js、C#應用的情況比較多，PHP等開發的WEB應用主要還是使用XML。 * 會有JSON格式的原因： 我們有很多不同的資料庫 每個資料庫結構都不一樣 如果要互相傳遞要用共通的格式做傳遞 普遍來說大家會使用JSON格式來做共通的格式 JSON格式範例(與先前的陣列物件格式很像) ![](https://i.imgur.com/PUZxGN9.png) ### 安裝 JSON 檢視 Chrome 套件 [高雄 OPEN DATA 開放資料官網網站](https://data.kcg.gov.tw/) [JSONView 安裝網站](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=zh-TW) 有些Json格式會用中文編碼處理 所以用JSON View可以直接觀看 JSON格式是陣列格式，陣列格式是[]表示，陣列裡面包物件，物件用｛｝表示 ![](https://i.imgur.com/kmNYauw.png) JSON格式網頁>右鍵>檢視原始碼，就可以複製下載 VS code 在js 貼上json資料 let data = 貼上Json內容 console.log(data); ### JSON 讀取方式教學 console.log(data[0].物件); ### 物件裡還能包物件 let family = [ { motherstatus: { name:"Mary", age:35 }, fatherstatus: { name:"Mark", age:40 }, dogs : 3 } ]; console.log(family[0].motherstatus); 下圖的JSON格式是陣列還是物件？ 答案是物件，因為最外層是｛｝格式 此物件有兩個屬性 物件entries裡面包陣列 ![](https://i.imgur.com/b1QPsNa.png) ### 小魔王題目：複雜 JSON 格式，你/妳撈得到嗎？ https://codepen.io/mwebwvuq-the-flexboxer/pen/JjvMyXa ## 函式 function ### 函式教學寫法 function wakeup(){ console.log("起床"); clean(); console.log("出門"); } wakeup(); function clean(){ console.log("刷牙洗臉); } ### 函式參數介紹 function a(num){ console.log(num); } function a(num,num2){ console.log(num); console.log(num2); } a(3); a(3,,3); ### 參數寫法-參數只存活在大括號 參數只存活在左右大括號 ![](https://i.imgur.com/9ODePgL.png) ### 參數寫法-數字相加 function cal(num1,num2){ console.log(`計算相+:${num1+num2}`); } cal(123,123); ### return 寫法教學 function cal(num1,num2){ return `${(num1+num2)/2}`; } let DoraScroe = cal(90,80); console.log(`DoraAvgScroe:${DoraScroe}`); ### return 可以有多個 return 可以中斷函式執行，後面的程式就不跑了 ### 判斷是否為偶數-寫Code流程 function caltest(num){ if(num%2==0){ console.log("是偶數"); }else{ console.log("不是偶數"); } } caltest(110); 畫流程圖確認流程 小步測試~反覆驗證 ## Codewar 程式解題邏輯培養 ### 為什麼要學 Codewars？ 1. 訓練程式的邏輯 2. 解題若有卡關google搜尋關鍵字用雙引號包住""一定會包含此內容才會被搜尋出 ## DOM - 選取網頁元素 ## Event事件 - 讓您的網頁具有互動效果 ## 陣列 forEach 資料處理方法 ## forEach 題型練習 ## CCC老師 Day5 ### 建立外部JSON ![](https://i.imgur.com/Wa3nDnU.png) ### 語法練習 ```javascript= let ary = ["Dora","James","Tom"]; let answer_find = ary.find(x=>x=="James"); //James let answer_indexif = ary.indexOf(x=>x=="James");//-1 let answer_findindex = ary.findIndex(x=>x=="James");//:1 let aryNumber = [12,33,54,777,344,555]; let aryNumber_findindex = aryNumber.findIndex(x=>x>300); //3 let aryNumber_findfilter = aryNumber.filter(x=>x>300); //777,344,555 ``` * ary.find : Array.prototype.find() find() 方法會回傳第一個滿足所提供之測試函式的元素值。否則回傳 undefined。 ![](https://i.imgur.com/EAxYfkC.png) [MDN - 解構賦值](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) ```javascript= let person = { name : "Dora", age : 5, email : "test@gmail.com", cat:3 }; let {cat,name,age,email} = person; console.log(name); //Dora console.log(cat); //3 let {name: myname,age:myage,email:myemail} = person; console.log(myname); //Dora ``` ![](https://i.imgur.com/QuVjzDJ.png) ### XHR https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind https://ithelp.ithome.com.tw/articles/10195896 bind() 方法，會建立一個新函式。該函式被呼叫時，會將 this 關鍵字設為給定的參數，並在呼叫時，帶有提供之前，給定順序的參數。 語法 fun.bind(thisArg[, arg1[, arg2[, ...]]]) https://notfalse.net/36/http-uri 統一資源識別符 (URI) ![](https://i.imgur.com/GkekJ11.png) ![](https://i.imgur.com/uicMSwf.png) ## JS作業檢討-行事曆