JavaScript系列（一）---JavaScript中的ECMAScript知識彙總

JavaScript簡介

JavaScript是一種網絡腳本語言。在Web應用開發中，JavaScript被廣泛應用於表單校驗、瀏覽器事件響應、HTML頁面中嵌入動態文本等等。因此對於web開發人員來說，瞭解JavaScript是很有必要的。

我們常說的JavaScript實際是包含三個部分：

• ECMAScript，描述該語言的語法和對象；
• 文檔對象模型（DOM），描述處理網頁內容的方法和接口；
• 瀏覽器對象模型（BOM），描述與瀏覽器進行交互的方法和接口。

向HTML頁面中插入JavaScript腳本的主要方法，就是使用script元素。我們可以直接在script標籤中定義腳本內容，也可以通過script元素的src屬性導入外部的腳本內容。

JavaScript的基本概念

JavaScript語法

標識符，指的是變量、函數、屬性的名字，或者函數的參數。

• JavaScript中的所有變量、函數名和操作符都是區分大小寫的。
• 標識符的定義可以是字母、下劃線、美元符號或數字的組合，但標識符的首字母不能是數字。
• 標識符不能是關鍵字或保留字。

JavaScript中的數據類型

ECMAScript中有5種基本數據類型（Undefined/Null/Boolean/Number/String）和一種複雜數據類型Object。通過操作符typeof可以檢測變量的數據類型。

測試效果圖如下所示：

typeof操作符的返回值結果可能是：undefined,boolean,number,string,function,object等等。但函數在ECMAScript中是對象，並不是一種數據結構。但是函數是一些特殊屬性的，因此能夠使用typeof操作符區分函數和對象是很有必要的。

Undefined類型

Undefinded類型的取值只有一個undefinded，表示用var聲明但未初始化的變量的值。

Null類型

Null類型的取值只有一個null，表示的是一個空對象指針。表示對象的變量還沒有真正保存對象。
實際上，undefined值是派生自null值的，null == undefined表達式的結果就是true。

Boolean類型

Boolean類型只有兩個字面值：true和false。

通過Boolean()轉型函數，能把其他類型的值，變爲Boolean類型的值，轉換規則如下：

數據類型	轉換爲true的值	轉換爲false的值
String	任何非空字符串	“”,空字符串
Number	任何非零數值	0和NaN
Object	任何對象	null
Undefined	不適用	undefined

測試效果圖如下：

Number類型

Number類型，默認表示的是十進制數值。表示八進制時第一位必須是“0”，表示十六進制時必須以“0x”開頭。

還可以用科學計數法表示數值（“3e4”表示的是“3 * 10 * 10 * 10 * 10”）。

數值表示的範圍是：“5e-324” 到 “1.798e+308”，如果超出範圍，即表示是正無窮（Infinity）或負無窮（-Infinity）。

通過isFinite()函數可以檢測一個數值是否有窮，通過isNaN()函數可以檢測一個表示是否非數字。

測試結果說明如下：

• 用八進制或十六進制表示的數字，瀏覽器會默認轉換成十進制的數字進行表示。（八進制“017”表示十進制的15，十六進制“0xF”表示十進制的15）。
• JS裏面的運算結果並不是那麼準確。如 0.1 + 0.2 = 0.300…04，而且當數值超過範圍時，即正負無窮是無法進行運算的的。
• isNaN()函數測試時，會默認嘗試對測試內容進行類型轉換，無法轉換爲Number類型的，返回結果纔是true。

將其他類型的變量轉換成Number類型時，常用的方法有parseInt()和parseFloat()。

parseInt()的解析規則是：從第一個數字字符開始，到最後一個非數字字符爲止，如果無法解析就會返回NaN;同時還可以傳入第二個參數表示要解析內容使用的進制基數（解析內容有可能會導致困惑，可以通過基數來指定使用的進制）。

parserFloat()的解析規則是：從第一個字符開始，到一個無效的浮點數字字符爲止，如果無法解析就會返回NaN。而且只能解析十進制數字，但可以解析科學計算法表示的數字。

String類型

String類型，用單引號(’’)或雙引號("")包含起來的字符序列。如果需要表示特殊符合，可以用轉義字符表示（如"\n"表示換行）。通過字符串的length屬性可以獲取該字符串的長度。

Object類型

ECMAScript中的對象其實就是一組數據和功能的集合。Object中的所有屬性和方法也存在於更具體的對象中（和Java一樣）。

Object中的實例和方法如下：

• constructor: 構造函數。
• hasOwnProperty(propertyName): 檢查當前對象是否含有給定的屬性。
• isPrototypeOf(object): 用於檢查傳入的對象是否是傳入對象的原型。
• propertyIsEnumerable(propertyName): 檢查給定的屬性是否能夠使用for-in語句來枚舉。
• toLocaleString(): 返回對象的字符串表示，與當前環境相關。
• toString(): 返回對象的字符串表示。
• valueOf(): 返回對象的字符串、數值或布爾值表示。

函數

ECMAScript中的函數不介意傳遞進來多少個參數，也不在乎傳進來參數是什麼數據類型。
可以在函數內用arguments獲取或操作實際傳入的參數數組。

測試效果圖如下：

由於函數與實際傳入的參數無關，也就是說不存在方法重載一說。如果同一個作用域內的兩個方法重名，實際上是進行了方法的重寫。

這裏需要說明的是：JS裏面有一個“聲明提升”的概念。只要在對應的作用域內，JavaScript中可以先使用再聲明變量和方法。這裏就是，第二次testOverload()的方法聲明覆蓋了第一個聲明，所以實際調用的是第二次聲明的方法。

JavaScript中的引用類型

ECMAScript提供了很多原生引用類型（例如Object），以便開發人員用以實現常見的計算任務。下面來進行這些引用類型的學習總結。

Object類型

Object類型的實例可以通過new關鍵字構建，也可以通過字面量構建。

測試效果圖如下：

Array類型

Array類型的創建非常簡單,可以使用new關鍵字，也可以給定所有元素。同時可以通過length屬性獲取該數組的長度。

測試效果如下：

Array中常用的工具方法彙總說明如下：

方法名稱	方法描述
join()	返回所有的數組項，可接收一個參數作爲數組項之間的分隔符，默認是逗號
push()	往數組末尾添加多個元素，並返回修改後數組的長度
pop()	取出數組末尾的最後一個元素，並返回修改後數組的長度
shift()	從數組頭部取出一個元素，並返回這個元素
unshift()	從數組頭部添加多個元素，並返回修改後數組的長度
reverse()	反轉數組項的順序
sort()	按首字母的升序進行排序數組，允許接收一個方法參數作爲實際排序的方法
concat()	將參數中的數據項加入數組中，並返回新數組—不會改變原數組
slice()	截取“起始位置”到“截止位置”的所有元素，返回新數組。不會影響原始數組，截取時是“包頭不包尾”。
splice()	對原始數組進行操作，返回從原始數組刪除的元素。第一個參數是開始操作的數組下標，第二個參數是要刪除元素個數，後面的參數就是要添加的參數
indexOf()	從第二個參數對應的下標開始，從前往後查找數組中與第一個參數內容相同的元素對應的下標
lastIndexOf()	從第二個參數對應的下標開始，從後往前查找數組中與第一個參數內容相同的元素對應的下標
every()	對數組中的每一項運行給定函數,如果都返回true，則返回結果爲true
filter()	對數組中的每一項運行給定函數,返回結果爲true的項組成的數組
forEach()	對數組中的每一項運行給定函數,無返回值
map()	對數組中的每一項運行給定函數,返回結果組成的數組
some()	運行給定函數,只要數組中某一項結果爲true,則返回結果爲true
reduce()	從第一項到最後一項，歸併所有元素，返回最終的結果
reduceRight()	從最後一項到第一項，歸併所有元素，返回最終的結果

操作數組元素方法的效果圖如下：

與Array中元素排序相關方法的效果圖如下：

與Array中元素下標相關方法的效果圖如下：

Array中元素迭代相關方法效果圖如下：

Date類型

JavaScript中Date類型保存的日期範圍是： 1970年1月1日之前或之後的285616年。

常用的方法彙總如下：

方法名稱	描述
new Date()	獲取當前時間
toDateString()	顯示星期幾、月、日和年
toTimeString()	顯示時、分、秒和時區
toLocaleDateString()	基於當前地區的格式顯示星期幾、月、日和年
toLocaleTimeString()	基於當前地區的格式顯示時、分、秒
toUTCString()	顯示格式完整的UTC日期
getTime()	獲取時間毫秒數
getFullYear()	返回四位數的年份
getMonth()	返回日期中的月份，其中0表示一月，11表示十二月
getDate()	返回日期月份中的天數（1到31）
getDay()	返回日期中星期的星期幾（其中0表示星期日，6表示星期六）
getHours()	返回日期中的小時數（0到23）

Date相關方法的測試效果圖如下:

開發中常用的一個解析日期的JavaScript方法如下：

/**
 * time: Date對象或時間毫秒數
 * format: 自定義輸出格式
 */
function parseTime (time, format) {
  if (arguments.length === 0) {
    return null;
  }
  var tFormat = format || '{y}-{M}-{d} {H}:{m}:{s}';
  var date;
  if (typeof time === 'object') {
    // 傳入的第一個參數是Date對象時
    date = time;
  } else {
    // 傳入的第一個參數是時間毫秒數時
    date = new Date(time);
  }
  var formatObj = {
    y: date.getFullYear(),
    M: date.getMonth() + 1,
    d: date.getDate(),
    H: date.getHours(),
    h: (date.getHours() > 12) ? (date.getHours() - 12) : date.getHours(),
    m: date.getMinutes(),
    s: date.getSeconds(),
    w: date.getDay()
  }
  var timeStr = tFormat.replace(/{(y|M|d|H|h|m|s|w)+}/g, (result, key) => {
    var value = formatObj[key]
    if (key === 'w') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return timeStr
}

這個工具方法的測試效果圖如下：

RegExp類型

ECMAScript 通過RegExp類型來支持正則表達式。表達式格式如下：

var exp = /pattern/flags

• pattern，表示的是匹配的模板，語法就是正則表達式的語法。
• flags，表示匹配的模式。g表示全局模式，i表示不區分大寫模式，m表示多行模式。

常用的方法有：

• test()，檢測是否存在模板；
• exec()，執行匹配，返回匹配的結果。

測試的JS源碼如下：

var message1 = "asdfghjkl123456";
// 檢測message1中是否含有字符串"jkla"
var pattern1 = /jkla/g;
console.log(pattern1.test(message1));
// 檢測message1中是否含有字符集合(j,k,l,a)中的某一個字符
var pattern2 = /[jkla]/g;
console.log(pattern2.test(message1));

var message2 = "AsdFGHJkL123456jKL"
var pattern3 = /jkl/gi;
var matchResult = pattern3.exec(message2);
console.log("將要檢測的內容：" +matchResult.input);
console.log("匹配到的第一個元素所在下標：" + matchResult.index);
console.log("匹配到的內容：" + matchResult);

測試的效果圖如下：

基本包裝類型

typeof和instanceof的區別： typeof是一元操作符，獲取某個數據的類型（類似語句typeof a的作用是：獲取變量a的數據類型）。instanceof，判斷某個構造函數的prototype屬性是否存在於另外一個要檢測對象的原型鏈上（類似語句a instanceof b的作用是：判斷a是否是b的實例）

Boolean,Number,String是基本類型對應的包裝類型。

常用的方法彙總如下：

方法名稱	描述
Number.toString(arg)	返回arg進制數值的字符串形式
Number.toFixed(arg)	返回arg個小數位數值的字符串形式
Number.toExponential(arg)	返回科學計算法表示的字符串形式，arg爲小數個數
Number.toPrecision()	用最合適的方法返回字符串形式的該數值（過長或過短會用科學計數法表示）
String.charAt(arg)	返回該字符在字符串中的下標位置
String.substr(arg0,arg1)	截取部分字符串

測試效果圖如下：

內置對象Global和Math

Global對象在某種意義上是一個“兜底兒對象”。換句話說，不屬於任何其他對象的屬性和方法，最終都是它的屬性和方法。

Math對象裏面的方法，是用於輔助完成簡單和複雜的數學計算。

常用的方法彙總如下：

方法名稱	描述
Math.max()	確定一組數值中的最大值
Math.min()	確定一組數值中的最小值
Math.ceil()	執行向上舍入的取整方法
Math.round()	執行四捨五入的取整方法
Math.floor()	執行向下舍入的取整方法
Math.random()	返回一個0-1之間的隨機數
Math.abs(num)	返回num的絕對值

測試效果圖如下：