第二週主要在學 JavaScript 基礎，以下就是一些 JavaScript 語法的基礎介紹～
運算子
- 數學運算：
+加-減*乘/除%取餘數 - 邏輯運算：
||OR：若第一個轉換為 true，則回傳第一個數值，否則回傳第二個數值&&AND：若第一個轉換為 true，則回傳第二個數值，否則回傳第一個數值!==NOT：唯一真的有判斷 true or false
位移運算：
<<往左移位：在二進位上往左移位，在十進位上等於 * 2
0100 <<回傳1000：4 (2^2) → 8 (2^3)>>往右移位：在二進位上往右移位，在十進位上等於
1000 >>回傳0100：8 (2^3) → 4 (2^2)&AND 把數字變成二進位之後，對每一個位數做 AND 的運算10 & 15 return ? 1010 = 10 and 1111 = 15 ---------- 1010 = 10|OR 把數字變成二進位之後，對每一個位數做 OR 的運算10 & 15 return ? 1010 = 10 or 1111 = 15 ---------- 1111 = 15^XOR 把數字變成二進位之後，兩個相同回傳 0，兩個不同則回傳 110 & 15 return ? 1010 = 10 xor 1111 = 15 ---------- 0101 = 5~NOT 把數字變成二進位之後，每一個數字都反轉10 & 15 return ? not 1111 = 15 ---------- = -16判斷奇數偶數 (若第一個為 1，則回傳第二個，否則回傳第一個)
- A & 1 → 0： A最後一個數字是 0 // 偶數
- A & 1 → 1： A 最後一個數字是 1 // 奇數
++和--：a = a + 1、a = a - 1放後面，先執行在跑運算
console.log(a++ && 30) // 0 console.log('a: ', a) // 1放後面，先運算再跑運算
console.log(++a && 30) // 1
關於等於：
==會替數字自動轉型，例如某一 string 的數字會自動轉型為 number'5' == 5// true===不會替數字自動轉型'5' === 5// false
變數
- 一個可以裝東西的箱子
- 把 hello 裝在 box 裡面
- 宣告一個變數
var box = hello： - 宣告一個沒有給值的變數
var box：undefined - 變數不能以數字開頭，要避開保留字
- 變數的命名方法：
- api_response
- apiResponse
- 變數型別：
- boolean： true or false
- string： 'this is a string'
- number 純數字
- object 物件
- undefined
- function 函式
陣列 Array
- 陣列 [ ]
- var arr = [1, 2, 3, 4, 5, 6]
- arr.length：可以取到陣列的長度
- 陣列是從 0 開始，arr[0] = 1
- 同一陣列可以放不同的型別，但不建議混用
物件 Object
- 物件用 { } 括號
var peter = {
key: 'value'
name: 'peter'
score: '100'
}
物件取值
console.log(peter.key)// value用此方法的話不能取到以數字命名的 key
console.log(peter['key'])// value
變數指去哪？
- 基本型態是 pass by value
- 物件和陣列是 pass by sharing，指向同一個記憶體位置
判斷
if ... else
if 範例
if (10 > 5) { console.log("123") }if ... else 範例
var score = 50 if (score > 60) { console.log("pass") } else { console.log("fail") }if ... else if 範例
var score = 50 if (score > 80) { console.log("good") } else if (score > 60){ console.log("pass") } else { console.log("fail") }
switch case
範例
switch(month) { case 1: console.log('一月') break; case 2: console.log('二月') break; default: console.log('hey') }
Ternary 三元運算子
condition ? A : B true 回傳 A；false 回傳 B
迴圈
do ... while
do {
console.log(i)
i++
} while (i<=100)
//先做再檢查
while
while (i<=100) {
console.log(i)
i++
}
//先檢查再做
for loop
for (var i = 1; i<=10; i++){
console.log(i)
}
函式 function
函式架構
function name(parameter1, parameter2) {
return parameter1 + parameter2
console.log(arguments[0]) // arguments 引數的物件
}
// 調用函式
name(argument1, argument2)
函式宣告的方式
function hello() {
console.log('hello')
}
var hello = function(){
console.log('hello')
}
立即函式 IIFE
- 立刻執行
- 無法在函式外被再次執行
- 不需要給名稱也可以
- 透過立即函式來限制變數的作用域
- 立即函式的後方一定要加分號
(function IIFE(where) {
console.log(where)
return where;
})('小明在這'); //傳遞參數
把一個立即函式的值取到另一個立即函式
var a = {}
(function(b) {
b.person = '小明'
})(a)
;(function(c) {
console.log(c.person)
})(a)
(function(global)) {
global.person = '小明'
})(window)
;(function(c) {
console.log(c.person)
})()
參數傳遞
深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？
Argument
會自動帶入所有傳入的參數，是一個類陣列，可以用 for 不能用 forEach
This
- 每個執行環境都有屬於自己的 this 關鍵字
- this 與函式如何宣告沒有關連性，僅與呼叫方法有關
- 嚴格模式下，簡易呼叫會有很大的改變
- 調用方法：
- 作為物件方法
- 簡易呼叫
- bind, apply, call 方法
- new
- DOM 事件處理器
- 箭頭函式
- 如果是傳統函式，只看呼叫前面那個物件
- 箭頭函式，是看如何定義的，沒有自己的 this (找外層)
- 物件下需要使用 this，直接在最前面做定義
simple call
- 盡可能不要使用 simple 的 this
callName()
常用內建函式
Number
parseInt轉成整數parseFloat轉成帶小數的數parseFloat().toFixed(位數)取到小數點後哪個位數MAX_VALUE能存的最大值MIN_VALUE能存的最小值
Math
Math.ceil自動進位Math.floor自動捨去Math.round四捨五入Math.sqrt開根號Math.pow(number, 幾次方)次方Math.random取 0~1 的隨機數
String
.toUpperCase轉大寫.toLowerCase轉小寫.charCodeAt(字串位置)轉成 ASCII codeString.fromCharCode(數字)轉成代表字str.indexOf('某一個字串')找某個字串存在 str 字串的哪個位置，若不存在會回傳負數.replace('要換掉的字','要換成的字')只替換第一個.replace(/要換掉的字/g,'要換成的字')用正規表達式把所有的都替換.split()分割一個字串，括號裡面代表以什麼來切，轉成陣列.trim去掉前後空格str.length字串的長度
Array
.join('!')把陣列每個空格加一個元素變成字串.map()會新建一個數組，把每一個原陣列元素都帶函式裡做一次後成為新陣列的內容var arr = [1, 2, 3] console.log( arr.map(function(x) { return x*-1 }) ) // [-1, -2, -3].filter()篩選裡面var arr = [1, 2, 3, -1] console.log( arr.filter(function(x) { return x>0 }) ) // [1, 2, 3].slice切段第一個參數是從哪裡開始切
第二個參數是切到哪裡 (不包含本身)
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // expected output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // expected output: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // expected output: Array ["bison", "camel", "duck", "elephant"].spice新增或刪除元素const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // inserts at index 1 console.log(months); // expected output: Array ["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, 'May'); // replaces 1 element at index 4 console.log(months); // expected output: Array ["Jan", "Feb", "March", "April", "May"]sort排序const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // expected output: Array [1, 100000, 21, 30, 4]數字排序怎麼做？
var arr = [1, 30, 4, 21] arr.sort(function(a, b)){ if (a===b) return 0 //不改變位置 if (b>a) return -1//不換位置回傳 -1 return 1 // 換位置回傳 1 } a b 1 4 arr.sort(function(a, b)){ // 由大排到小 return b-a // 由小排到大 return a-b }
回傳和印出的差異
- function 如果沒有回傳值，預設的回傳值是 undefined
Immutable 觀念
var a = 'hello'
a = 'yo'
a: 'hello' // 0x01
a: 'yo' // 0x02
// 字串數字都不可變，只能宣告一個新的變數，或把這個變數的值蓋掉，才會改變
// 而陣列和物件，就算之後再取用來改變，還是會指向同一個記憶體位置，所以會改動到原本的陣列或物件。
Console.log
可以用來 debugger，放在任何你不確定程式碼對不對的地方，印出來看是不是你想的值。
解題技巧
- 函式填空法：先把架構寫出來再來填細節
- 簡化法；不會輸出 n ，可以先從輸出 1 個開始
- 程式的效率：
- 執行所需步驟與資料量 n 的關聯
- 時間複雜度： O(n)
- 空間複雜度：O(n)
- 時間和空間通常兩者不可兼得，需做權衡
