程式學習:JavaScript初學觀念 === >上課筆記:JS:宣告變數/常數、for/while、if/else、JS的算術溢位、二分搜尋法 ###### tags: `AC` `JavaScript` 之前上過網頁15天,對於HTML和CSS的基礎和功能有了解,這禮拜要熟悉的是關於DevTools和Box model的概念。趁這次機會再把觀念釐清。 學長提到的利用網路上的web template來做練習,是個滿好的學習方式,未來也會多多嘗試的。期待未來做layouting(切版) #### 重要觀念:Js初級 ##### let vs. const AC的課程提到,在實務上的原則,除非預期會改動,否則就用`const`宣告;實務上亦如此。 ##### 資料型別 JavaScript有自己的資料型別,特別是JS中著名的地雷就是會型別強制轉換(coercion),用`typeof`檢查資料型別,`console.log`組合不同型別的方式如下: ###### something about console.log 用`console.log`印出的內容,不等於「程式的回傳值」。 [AC風格參考資料](https://standardjs.com/rules-zhtw.html) `console.log`印出的樣態: ```javascript= let myBirthday = '01/26' let today = '07/17' console.log(myBirthday) console.log('myBirthday') console.log('myBirthday:',myBirthday)//印出來中間有半形空白 console.log('myBirthday:'+myBirthday)//印出無空白 console.log(`今天是${today},我的生日是${myBirthday},今天不是我的生日。`) ``` Print: ![AC console.log](https://i.imgur.com/WWDyAoS.jpg) ##### 運算子 1、當x=1的時候,`++x`=直接x+1;而`x++`=先印出1,再+1, ```javascript= let a = 2 let b = a++ // let b=a; a = a+1; let b = ++a // a = a+1; let b = a ``` 實務上,與其寫`let b = a++`,不如寫得讓人看得懂,`let b = a`下一行`a++`有相同的功能。 2、比較運算子永遠用`===`和`!==` ##### while/for迴圈 1、小心`while`無限迴圈,要記得加入迭代變化。 2、特殊情形善用`break` ```javascript= let i = 0 while (i < 6) { console.log('i:', i) if (i === 3) { break } i = i + 1 //迭代變化 } console.log('最後的 i 值:', i) for (let i = 0; i < 6; i++) { console.log('i:', i) if (i === 3) { break } } ``` ##### 影響範圍:global vs. local ![AC globalvs.local](https://i.imgur.com/38eMwqx.png) 在global宣告的變數(const也是),全域都可以使用;反之,在local宣告的變數就只有自己可以用 ##### Others 1、不用太深入研究Pseudocode,實務上還是比較多使用Flowchart 2、演算法思維(CT)的四個步驟:(1)拆解問題→(2)規律辨識→(3)抽象化→(4)演算法 #### 重要觀念:二分搜尋演算法 這次卡關的問題是,要如何有效率的猜數字,運用數學邏輯,其實我知道怎麼算,但我不知道怎麼把它寫成演算法,用while迴圈選出正確的數字。經過搜尋及尋求高人指點後,知道我想做的叫做二分搜尋演算法。 ```javascript= let left = 1 let right = 100 let answer = Math.floor(Math.random() * 100) + 1 let count = 1 while(left<right){ let guess = Math.floor((right-left)/2) + left if (guess === answer){ break }else if (guess < answer){ left = guess+1 }else { right = guess-1 } count++ } ``` 要避免`算術溢位`?這是什麼意思呢? JS Number最多是64位元,一旦超過這個位元數,就會產生錯誤。 >假設,今天最多就是5位元;數字最大只能到31。 >```Javascipt >let a = 31 //都在5位元的範圍 >let b = 31 //都在5位元的範圍 >let c = a + b //等於62,超過5位元,就是算術溢位 >``` **小知識** JS、Python等高階語言會把位元數一次補給你,所以即使你只需要用到2位元,JS也會給你很多的空間。反之,JAVA可以用long、short省下多餘的空間;而C更是可以直接指定位元。如此,會讓code更有效率也節省運算能力。不過,因為C都已經固定好了,也會喪失彈性。 參考資料:[二分搜尋演算法 binary search algorithm](https://zh.wikipedia.org/zh-tw/%E4%BA%8C%E5%88%86%E6%90%9C%E5%B0%8B%E6%BC%94%E7%AE%97%E6%B3%95#javascript_%E7%89%88%E6%9C%AC)