[Back To Basic] Javascript - 數學相關功能

• Math.PI
• 𝛑

• Math.Round(num)
• 四捨五入

• Math.Pow(x, n)
• 次方
• x ^ n

• Math.sqrt(x)
• 平方根

• Math.abs(x)
• 絕對值

• Math.ceil(x)
• 上取整函數
• 3.5 => 4
• -3.5 => -3

• Math.floor(x)
• 下取整函數
• 3.5 =>3
• -3.5 =>-4

• Math.sin(x)
• sin運算，回傳正弦值
• x: 弧度
• 弧度 = 角度 * 𝛑 / 180

• Math.cos(x)
• cos運算，回傳餘弦值
• x: 弧度

• Math.min(numberList)
• 找出一個數值清單中最小的值

var numberList = [0, 99, -28, 54, 1, -180];

var minNumber = Math.min(...numberList);

• Math.max(numberList)
• 找出一個數值清單中最大的值

var numberList = [0, 99, -28, 54, 1, -180];

var maxNumber = Math.max(...numberList);

• Math.random()
• 隨機產生介於0~1的一個亂數
• 包含0，不包含1

Math建構式(constructor)

這個全域物件(global object)，沒有建構式，所有的屬性(properties)和方法(methods)都是靜態的，可以直接使用。

source code

[Back To Basic] Javascript - 設定日期方法

• setFullYear(year, month, date)
• 設定年、月、日
• 也可只設定年; setFullYear(2020)

• setMonth()

設定月份(設定0~11，需自行轉換成月份，0代表1月，以此類推)

• setDate()
• 設定日期
• 也可拿來計算天數 e.g. date.setDate(date.getDate()+7);
• 月份和年份會自動推算

• setHours()

設定小時(0~23)

• setMinutes()

設定分鐘

• setSeconds()

設定秒數

日期比較

日期比較可直接用條件判斷式比較

source code

[Back To Basic] Javascript - 取得日期方法

• getTime()

取得從1970/1/1到當下的總毫秒

• getFullYear()

取得年份

• getMonth()

取得月份(回傳0~11，需自行轉換成月份，0代表1月，以此類推)

• getDate()

取得日期

• getHours()

取得小時(0~23)

• getMinutes()

取得分鐘

• getSeconds()

取得秒數

• getMilliseconds()

取得毫秒(0~999)

• getDay()

取得星期(回傳0~6，需自行轉換成星期，0代表禮拜日，以此類推)

取得UTC時間

上述方法皆有相對應的方法，除了getTime()沒有getUTCTime()

• getUTCFullYear()
• getUTCMonth()
• getUTCDate()
• getUTCHours()
• getUTCMinutes()
• getUTCSeconds()
• getUTCMilliseconds()
• getUTCDay()

source code

[Back To Basic] Javascript - 日期格式

輸入格式

• ISO(國際標準): e.g 2019-02-23
• 短日期: 02/23/2019
• 長日期: Feb 23 2019 或 23 Feb 2019

*. ISO格式遵循javascript的標準，其他格式，瀏覽器可能不一致

輸出格式

javascript的日期，輸入格式和輸出格式並沒有統一，格式如下:

Sat Feb 23 2019 08:00:00 GMT+0800 (台北標準時間)

ISO日期格式

ISO 8601是日期時間的國際標準格式，也是Javascript最適用的格式。

var date = new Date("2019-02-23");

• 顯示的日期時間會依據本身的瀏覽器時區做調整。
• 只給年月，日會預設1號，根據時區不同有可能會顯示上個月的最後一天。
• 只給年，月份會預設1月，根據時區不同有可能會顯示去年的最後一天。

ISO日期時間格式

YYYY-MM-DDTHH:MM:SSZ

var datetime = new Date("2019-02-23T12:00:00Z");

• T: 日期和時間的分隔符號(一定要大寫)
• HH: 時
• MM: 分
• SS 秒
• Z: UTC時間，也可用相對於UTC的格式表示。e.g. 2019-02-23T12:00:00+08:00

1. 世界協調時間(UTC)等同格林威治時間(GMT)
2. 省略T或是Z的話，每個瀏覽器會顯示不同的結果

時區

若設值(set)或取值(get)時，沒有給定時區，預設會使用瀏覽器的時區

短日期

格式: MM/DD/YYYY

var date = new Date("02/23/2019");

• 如果沒有補0，有些瀏覽器可能會出錯；var date = new Date("2/23/2019");
• 這種格式，有些瀏覽器會有問題； new Date("2019/02/23");
• 這種同上；new Date("23-02-2019");

長日期

格式: MMM DD YYYY

var date = new Date("Feb 23 2019");

var date = new Date("23 Feb 2019");

var date = new Date("February 23 2019");

var date = new Date("23 February 2019");

var date = new Date("FEBRUARY, 23, 2019");

• 月和日的順序可以互換
• 月份可以寫縮寫，也可寫完整
• 大小寫不分
• 逗號會自動忽略

Date.parse()

可將一組合法的日期字串轉換成毫秒，這個毫秒可以拿來轉換成日期物件

好像沒啥用?

source code

[Back To Basic] Javascript - Date Objects

Javascript的日期時間(Date)

• 預設Javascript會使用瀏覽器的時區來顯示日期時間
• 日期時間產生的日期物件(date object)是靜態的，意思就是日期時間會固定在產生的那一瞬間

new Date(...)

7個參數，依照順序

• 年(year)
• 月(month)
• 日(day)
• 時(hour)
• 分(minute)
• 秒(second)
• 毫秒(millisecond)

new Date(...)的例外

如果寫 new Date(2019)，並不是代表2019年，2019會被視為1970年+2019毫秒，也就是說月份不能被省略，至少要寫 new Date(2019, 1);

特別注意javascript的月份

0代表1月、1代表2月，以此類推。

上個世紀的日期時間表示方式

var d = new Date(year, month, day);

year的部分，寫成二位數，e.g. 56，會被加上19xx；new Date(56, 1, 1)結果為: 1956/2/1

new Date(dateString)

也可以用string指定日期時間。

Date在javascript中的儲存方式

以毫秒為單位，從世界協調時間開始計算到現在的一個整數。

new Date(milliseconds)

結果為: 1970/1/1 00:00:00加上milliseconds，milliseconds可為負數，時間倒回去算

各種標準時間的顯示

• toString()
• toUTCString()

世界標準時間

• toDateString()

轉換成日期(沒有時間)

source code

[Back To Basic] Javascript - Array Iteration Methods

陣列迴圈常用的方法

所有方法，IE8以前不支援

• forEach(callbackFunction)
• 每一個陣列元素皆執行一次callbackFunction

• map(callbackFunction)
• 每一個陣列元素皆執行一次callbackFunction，並且建立一個新的array
• var arr2 = arr1.map(callbackFunction)

• filter(callbackFunction)
• 每一個陣列元素皆執行一次callbackFunction，用通過的元素建立一個新的array
• var arr2 = arr1.filter(callbackFunction)

• reduce(callbackFunction)
• 由左至右，每一個陣列元素皆執行一次callbackFunction，將通過的元素進行運算，壓縮為一個"結果"

• reduceRight(callbackFunction)
• 由右至左，每一個陣列元素皆執行一次callbackFunction，將通過的元素進行運算，壓縮為一個"結果"

• every(callbackFunction)
• 確認是否每一個元素都通過callbackFunction的條件

• some(callbackFunction)
• 確認是否有任一元素都通過callbackFunction的條件

• indexOf("元素")
• 找出條件符合的元素的index
• 結果為-1代表沒找到
• 如果符合的元素有多個，結果只會回傳第一個符合的元素的index


• lastIndexOf("元素")
• "由右至左"，找出條件符合的元素的index
• 結果為-1代表沒找到
• 如果符合的元素有多個，結果只會回傳第一個符合的元素的index

• find(callbackFunction)
• 找出第一個條件符合的元素

• findIndex(callbackFunction)
• 找出第一個條件符合的元素的index

source code

[Back To Basic] Javascript - Array Sort

陣列排序

• sort()
• 依照字母排序
• 預設以字串型別排序

• reverse()
• 反排序
• sort(compareFunction)
• 數字排序

var compareFunction = function(a, b) {

  return a - b

};

• sort(randomFunction)
• 亂數排序

var randomFunction = function(a, b) {

  return 0.5 - Math.random();

};

• 取得最大值

var numberList = [47, 38, 96, 7, 15, 9];

var maxNumber = Math.max.apply(null, numberList);

• 取得最小值

var numberList = [47, 38, 96, 7, 15, 9];

var minNumber = Math.min.apply(null, numberList);

• 自定義取得最大值函式(效能比內建的好)

var getArrayMax = function getArrayMax(arr) {

  var len = arr.length;

  var max = -Infinity;

  while (len--) {

    if (arr[len] > max) {

      max = arr[len];

    }

  }

  return max;

}

• 自定義取得最小值函式(效能比內建的好)

function getArrayMin(arr) {

  var len = arr.length;

  var min = Infinity;

  while (len--) {

    if (arr[len] < min) {

      min = arr[len];

    }

  }

  return min;

}

物件排序

雖然物件可以包含很多種不同的資料型態，但仍然可以自定義function來排序

source code

[Back To Basic] Javascript - Array Methods

Array常用的方法

• toString()

將陣列轉換為string，串聯的符號為,

• join("串連的符號")

將陣列轉換為string，且可以設定用什麼符號串連各個項目

e.g. array.join("***")

• pop()

移除陣列的最後一個元素

• push("新增的元素")

新增一個元素在陣列的最後面

• shift()

移除陣列的第一個元素，且其他元素往前補位

• unshift()

新增一個元素在陣列的最前面，IE8以前的版本"回傳值"會異常，但新增功能正常

e.g. var x = array.unshift(); // x在IE9以後會回傳新增後的陣列長度，IE8以前會回傳undefined

• splice(在第幾個位置新增, 要刪除幾個元素, 要新增的元素1, 要新增的元素2......)

新增元素到陣列中。

array.splice(1,0,"Test"); // 新增"Test"到array的index=1的位置

array.splice(1,1); // 刪除index=1的元素

• concat()

將兩個陣列相連

var newArray = array1.concat(array2);

var newArray = array1.concat(array2, array3);

• slice(start, end)

從array中取出第start個元素到第end個元素(不包含第start個元素)

var nameList = ["Anna","Bob","Carter","Daniel"];

var newArray = nameList.slice(1,2); // "Bob"

變更陣列元素

使用陣列索引(array index)來指定要變更的位置，語法如下:

array[array_index] = "new value";

刪除陣列值

語法: delete array[array_index];

刪除後array[array_index]的值會變成undefined，最好是用pop()或shift()

source code

[Back To Basic] Javascript - Arrays

建立陣列

1. var arrayName = [item1, item2, item3];
2. var arrayName = new Array(item1, item2, item3);

• 建議用第1種，簡單、可讀性高、執行速度較佳
• 最後一個項目最後盡量不要加逗點，IE8以下會壞掉。e.g. [item1, item2, item3,]
• typeof array的變數會回傳 object
• array的item可以放object、array、function...

存取陣列

• 取值

var fruits = ["apple","banana","grape"];

var fruit = fruits[0]; // 取得第一個元素 apple, 索引(index)從0開始數

• 設值

fruits[0] = "strawberry" // 設定陣列第一個位置的值

• 取得整個陣列的值(javascript可以這樣做)

document.getElementById("display").innerHtml = fruits;

屬性(property) - length

• 取得陣列長度
• length的值永遠比最大的index多1

e.g.

fruits.length // 取得陣列長度

fruits[0] // 取得陣列第一個元素

fruits[fruits.length - 1] // 取得陣列最後一個元素

連續存取陣列

• for

var arrayLength = fruits.length;

for(var i = 0; i < arrayLength; i++){

  console.log(fruits[i]);

}

• foreach

function myFunction(value){

  console.log(value);

}

fruits.foreach(myFunction);

新增陣列元素

1. fruits.push("mango");
2. fruits[fruits.length] = "mango";

第二種方法可能會製造陣列的漏洞，盡量用第一種方法

e.g.

fruits[99] = "mango"; 中間的 98.97...若無資料會變成undefined

Associative Arrays

javascript不支援命名索引，若使用了陣列會被重新定義為object

e.g.

var fruits = [];

fruits["name"] = "apple";

fruits["quantity"] = 5;

fruits.length; // 會回傳0

fruits[0]; // 會回傳undefined

Arrays和Objects

• Arrays
• 數字索引(number indexed)
• Objects
• 名稱索引(named indexes)

想要用名稱索引就用Objects

typeof 型別為array的變數會回傳object，那要如何知道變數是不是陣列?

var x = [];

• Array.isArray(x);
• ES5的語法，較舊的瀏覽器不支援
• 自定義isArray()

function isArray(x) {

  return x.constructor.toString().indexOf("Array") > -1;

}

• x instanceof Array

[Back To Basic] Javascript - Number Methods

• toString()

將數值轉換成字串

• toExponential(n)
• 將數值轉換成指數表示法，型別為字串
• n可指定要顯示到小數第n位
• 預設不會四捨五入
• toFixed(n)

四捨五入到小數第n位

• toPrecision(n)

指定整個數值的長度為n位數(整數+小數)

• valueOf()
• 將number轉換為number
• 沒什麼用的方法，在javascript中數值可以是number也可以是object，這是為了轉換object而有的

所有的型別都有 valueOf() 和 toString() 這兩個方法

將變數轉換為數值的全域方法(global methods)

• Number()
• 用來將變數轉換為number
• 若變數不能被轉換，回傳NaN
• Number()也能轉換日期成數值，這個數值的意思: 以1970/1/1為起點，累積的秒數
• parseInt()
• 將變數轉換為整數(integer)
• 若數值中間有空白，空白之後會被忽略
• 若變數不能被轉換，回傳NaN
• parseFloat()
• 將變數轉換為浮點數(float)
• 若數值中間有空白，空白之後會被忽略
• 若變數不能被轉換，回傳NaN

Number的屬性(properties)

• MAX_VALUE

取得javascript中最大的數值

• MIN_VALUE

取得javascript中最小的數值

• POSITIVE_INFINITY

正無限大

• NEGATIVE_INFINITY

負無限大

• NaN

不是數字(not a number)

source code

[Back To Basic] Javascript - Numbers

• javascript中的數值只有一種型別: number，整數、小數、指數，型別皆為number
• number永遠儲存成雙精度浮點數(double precision floating point numbers)，依據IEEE 754

精確度

• 整數最多到15位數
• 小數計算並非完全精確 e.g. 0.1+0.2
• 通常先 *10 再 /10解決此問題

數值和字串相加

• x = 10; y = 20; 相加結果: 30
• x = "10"; y = "20"; 相加結果: 1020
• x = 10; y = "20"; 相加結果: 1020
• x = "10"; y = 20; 相加結果: 1020

任一運算中的變數為字串，結果就變成字串串聯

• x = "Word"; y = 10; z = 20; 相加結果: Word1020
• x = 10; y = 20; z = "30"; 相加結果: 3030

javascript的編譯器由左至右運算，只要一碰到字串就會變成字串串聯

• x = "10"; y="2" x / y 結果: 5
• x = "10"; y="2" x * y 結果: 20
• x = "10"; y="2" x - y 結果: 8

除了 + 號之外的運算符號，javascript都會嘗試轉換字串做運算

NaN(Not a number的縮寫)

• NaN是javascript的保留字，用來表示數值不合法，用非數值的變數運算就會產生此結果
• e.g. "Text" / 5
• isNaN()，可用來檢查變數是否為合法的數值
• isNaN("Text"): true
• 特例
• NaN + 10 => NaN
• NaN + "10" => NaN10
• typeof NaN => "number"

無窮大/負無窮大

若計算時超出最大數值，則會得到 Infinity 的結果

• 7 / 0
• -2 / 0
• typeof Infinity => "number"

16進制

• 若以 0x 開頭，則認定為16進制
• 0xFF => 255
• 請務必避免 07 開頭，有些javascript的版本會判定為8進制
• 預設為10進制
• 若想用其他進制顯示，可用ToString(n進制)
• 32.ToString(2) => 100000

*.數值的型別也可以是Object，但是請不要使用，作法: var x = new Number(111);