JavaScript內建物件介紹（重點介紹Math()，Date()，Array()以及案例應用）

內建物件

JavaScript中的物件分為3種：內建物件、瀏覽器物件、自定義物件

JavaScript 提供多個內建物件：Math Array Number String Boolean…

物件只是帶有屬性和方法的特殊資料型別。

學習一個內建物件的使用，只要學會其常用的成員的使用（通過查文件學習）

可以通過MDN/W3C來查詢

內建物件的方法很多，我們只需要知道內建物件提供的常用方法，使用的時候查詢文件。

MDN

Mozilla 開發者網路（MDN）提供有關開放網路技術（Open Web）的資訊，包括 HTML、CSS 和全球資訊網及 HTML5 應用的 API。

• MDN

如何學習一個方法？

• 方法的功能
• 引數的意義和型別
• 返回值意義和型別
• demo進行測試

Math物件

Math物件不是建構函式，它具有數學常數和函式的屬性和方法，都是以靜態成員的方式提供

跟數學相關的運算來找Math中的成員（求絕對值，取整）

Math

演示：Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()

Math.PI						// 圓周率
Math.random()				// 生成隨機數
Math.floor()/Math.ceil()	 // 向下取整/向上取整
Math.round()				// 取整，四捨五入
Math.abs()					// 絕對值
Math.max()/Math.min()		 // 求最大和最小值

還有Math.sin()/Math.cos() // 正弦/餘弦 Math.power()/Math.sqrt() // 求指數次冪/求平方根等等

Math.random()是令系統隨機選取大於等於 0.0 且小於 1.0 的偽隨機 double 值，與Java語言類似。例如：a=Math.random()*(3-1)+1，設定一個隨機1到3的變數。在開發中會大量使用Math.random()的方法取用隨機數，當你想在兩個數中間取用隨機數時，取用區間為 random=Math.random()**(max-min)+min

Date物件

Date

建立 Date 例項用來處理日期和時間。Date 物件基於1970年1月1日（世界標準時間）起的毫秒數。

// 獲取當前時間，UTC世界時間，距1970年1月1日（世界標準時間）起的毫秒數
var now = new Date();
console.log(now.valueOf());	// 獲取距1970年1月1日（世界標準時間）起的毫秒數

Date建構函式的引數
1. 毫秒數 1498099000356		new Date(1498099000356)
2. 日期格式字串  '2015-5-1'	 new Date('2015-5-1')
3. 年、月、日……				  new Date(2015, 4, 1)   // 月份從0開始

• 獲取日期的毫秒形式

var now = new Date();
// valueOf用於獲取物件的原始值
console.log(date.valueOf())	

// HTML5中提供的方法，有相容性問題
var now = Date.now();	

// 不支援HTML5的瀏覽器，可以用下面這種方式
var now = + new Date();			// 呼叫 Date物件的valueOf() 

• 日期格式化方法

toString()		// 轉換成字串
valueOf()		// 獲取毫秒值
// 下面格式化日期的方法，在不同瀏覽器可能表現不一致，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()

• 獲取日期指定部分

getTime()  	  // 返回毫秒數和valueOf()結果一樣，valueOf()內部呼叫的getTime()
getMilliseconds() 
getSeconds()  // 返回0-59
getMinutes()  // 返回0-59
getHours()    // 返回0-23
getDay()      // 返回星期幾 0週日   6周6
getDate()     // 返回當前月的第幾天
getMonth()    // 返回月份，***從0開始***
getFullYear() //返回4位的年份  如 2016

案例

• 寫一個函式，格式化日期物件，返回yyyy-MM-dd HH:mm:ss的形式

function formatDate(d) {
  //如果date不是日期物件，返回
  if (!date instanceof Date) {
    return;
  }
  var year = d.getFullYear(),
      month = d.getMonth() + 1, 
      date = d.getDate(), 
      hour = d.getHours(), 
      minute = d.getMinutes(), 
      second = d.getSeconds();
  month = month < 10 ? '0' + month : month;
  date = date < 10 ? '0' + date : date;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute:minute;
  second = second < 10 ? '0' + second:second;
  return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}

• 計算時間差，返回相差的天/時/分/秒

這個案例會時常運用在開發中的倒數功能中

function getInterval(start, end) {
  var day, hour, minute, second, interval;
  interval = end - start;
  interval /= 1000;
  day = Math.round(interval / 60 /60 / 24);
  hour = Math.round(interval / 60 /60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);
  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}

Array物件

Array

建立陣列物件的兩種方式

• 字面量方式
• new Array()

// 1. 使用建構函式建立陣列物件
// 建立了一個空陣列
var arr = new Array();
// 建立了一個陣列，裡面存放了3個字串
var arr = new Array('zs', 'ls', 'ww');
// 建立了一個陣列，裡面存放了4個數字
var arr = new Array(1, 2, 3, 4);


// 2. 使用字面量建立陣列物件
var arr = [1, 2, 3];

// 獲取陣列中元素的個數
console.log(arr.length);

檢測一個物件是否是陣列

• instanceof
• Array.isArray() HTML5中提供的方法，有相容性問題

函式的引數，如果要求是一個陣列的話，可以用這種方式來進行判斷

• toString()/valueOf()

toString() 把陣列轉換成字串，逗號分隔每一項

valueOf() 返回陣列物件本身

陣列常用方法

演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()

// 1 棧操作(先進後出)
push()
pop() 		//取出陣列中的最後一項，修改length屬性
// 2 佇列操作(先進先出)
push()
shift()		//取出陣列中的第一個元素，修改length屬性
unshift() 	//在陣列最前面插入項，返回陣列的長度
// 3 排序方法
reverse()	//翻轉陣列
sort(); 	//即使是陣列sort也是根據字元，從小到大排序
// 帶引數的sort是如何實現的？
// 4 操作方法
concat()  	//把引數拼接到當前陣列
slice() 	//從當前陣列中擷取一個新的陣列，不影響原來的陣列，引數start從0開始,end從1開始
splice()	//刪除或替換當前陣列的某些專案，引數start, deleteCount, options(要替換的專案)
// 5 位置方法
indexOf()、lastIndexOf()   //如果沒找到返回-1
// 6 迭代方法 不會修改原陣列(可選)
every()、filter()、forEach()、map()、some()
// 7 方法將陣列的所有元素連線到一個字串中。
join()

清空陣列

// 方式1 推薦 
arr = [];
// 方式2 
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

案例

將一個字串陣列輸出為|分割的形式，比如“劉備|張飛|關羽”。使用兩種方式實現

function myJoin(array, seperator) {
  seperator = seperator || ',';
  array = array || [];
  if (array.length == 0){
    return '';
  }
  var str = array[0];
  for (var i = 1; i < array.length; i++) {
    str += seperator + array[i];
  }
  return str;
}
var array = [6, 3, 5, 6, 7, 8, 0];
console.log(myJoin(array, '-'));

console.log(array.join('-'))

反轉陣列

將一個字串陣列的元素的順序進行反轉。[“a”, “b”, “c”, “d”] -> [ “d”,“c”,“b”,“a”]。使用兩種種方式實現。提示：第i個和第length-i-1個進行交換

function myReverse(arr) {
  if (!arr || arr.length == 0) {
    return [];
  }
  for (var i = 0; i < arr.length / 2; i++) {
    var tmp = arr[i];
    arr[i] = arr[this.length - i - 1];
    arr[arr.length - i - 1] = tmp;
  }
  return arr;
}

var array = ['a', 'b', 'c'];
console.log(myReverse(array));

console.log(array.reverse());

工資的陣列[1500, 1200, 2000, 2100, 1800],把工資超過2000的刪除

// 方式1
var array =  [1500,1200,2000,2100,1800];
var tmpArray = [];
for (var i = 0; i < array.length; i++) {
  if(array[i] < 2000) {
    tmpArray.push(array[i]);
  }
}
console.log(tmpArray);
// 方式2
var array =  [1500, 1200, 2000, 2100, 1800];
array = array.filter(function (item, index) {
  if (item < 2000) {
    return true;
  }
  return false;
});
console.log(array);

[“c”, “a”, “z”, “a”, “x”, “a”]找到陣列中每一個a出現的位置

var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
do {
  var index = array.indexOf('a',index + 1);
  if (index != -1){
    console.log(index);
  }
} while (index > 0);

編寫一個方法去掉一個陣列的重複元素

var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
function clear() {
  var o = {};
  for (var i = 0; i < array.length; i++) {
    var item = array[i];
    if (o[item]) {
      o[item]++;
    }else{
      o[item] = 1;
    }
  }
  var tmpArray = [];
  for(var key in o) {
    if (o[key] == 1) {
      tmpArray.push(key);
    }else{
      if(tmpArray.indexOf(key) == -1){
        tmpArray.push(key);
      }
    }
  }
  returm tmpArray;
}

console.log(clear(array));