《JavaScript 闖關記》之單體內置對象

DonTamayo 8年前發布 | 5K 次閱讀 JavaScript開發 JavaScript

ECMA-262 對內置對象的定義是「由 JavaScript 實現提供的、不依賴于宿主環境的對象，這些對象在 JavaScript 程序執行之前就已經存在了」。意思就是說，開發人員不必顯式地實例化內置對象，因為它們已經實例化了。前面我們已經介紹了大多數內置對象，例如 Object 、 Array 和 String 。ECMA-262 還定義了兩個單體內置對象： Global 和 Math 。

Global 對象

Global 對象可以說是 JavaScript 中最特別的一個對象了，因為不管你從什么角度上看，這個對象都是不存在的。 Global 對象在某種意義上是作為一個終極的「兜底兒對象」來定義的。換句話說，不屬于任何其他對象的屬性和方法，最終都是它的屬性和方法。所有在全局作用域中定義的屬性和函數，都是 Global 對象的屬性。本書前面介紹過的那些函數，諸如 isNaN() 、 isFinite() 、 parseInt() 以及 parseFloat() ，實際上全都是 Global 對象的方法。除此之外， Global 對象還包含其他一些方法。

URI 編碼方法

Global 對象的 encodeURI() 和 encodeURIComponent() 方法可以對 URI（Uniform Resource Identifiers，通用資源標識符）進行編碼，以便發送給瀏覽器。有效的 URI 中不能包含某些字符，例如空格。而這兩個 URI 編碼方法就可以對 URI 進行編碼，它們用特殊的 UTF-8 編碼替換所有無效的字符，從而讓瀏覽器能夠接受和理解。

其中， encodeURI() 主要用于整個 URI，而 encodeURIComponent() 主要用于對 URI 中的某一段進行編碼。它們的主要區別在于， encodeURI() 不會對本身屬于 URI 的特殊字符進行編碼，例如冒號、正斜杠、問號和井字號；而 encodeURIComponent() 則會對它發現的任何非標準字符進行編碼。來看下面的例子。

var uri = "http://shijiajie.com/illegal value.htm#start";

console.log(encodeURI(uri));
// "http://shijiajie.com/illegal%20value.htm#start"

console.log(encodeURIComponent(uri));
// "http%3A%2F%2Fshijiajie.com%2Fillegal%20value.htm%23start"

使用 encodeURI() 編碼后的結果是除了空格之外的其他字符都原封不動，只有空格被替換成了 %20 。而 encodeURIComponent() 方法則會使用對應的編碼替換所有非字母數字字符。這也正是可以對整個 URI 使用 encodeURI() ，而只能對附加在現有 URI 后面的字符串使用 encodeURIComponent() 的原因所在。

一般來說，我們使用 encodeURIComponent() 方法的時候要比使用 encodeURI() 更多，因為在實踐中更常見的是對查詢字符串參數而不是對基礎 URI 進行編碼。

與 encodeURI() 和 encodeURIComponent() 方法對應的兩個方法分別是 decodeURI() 和 decodeURIComponent() 。其中， decodeURI() 只能對使用 encodeURI() 替換的字符進行解碼。例如，它可將 %20 替換成一個空格，但不會對 %23 作任何處理，因為 %23 表示井字號 # ，而井字號不是使用 encodeURI() 替換的。同樣地， decodeURIComponent() 能夠解碼使用 encodeURIComponent() 編碼的所有字符，即它可以解碼任何特殊字符的編碼。來看下面的例子：

var uri = "http%3A%2F%2Fshijiajie.com%2Fillegal%20value.htm%23start";

console.log(decodeURI(uri));
// http%3A%2F%2Fshijiajie.com%2Fillegal value.htm%23start

console.log(decodeURIComponent(uri));
// http://shijiajie.com/illegal value.htm#start

這里，變量 uri 包含著一個由 encodeURIComponent() 編碼的字符串。在第一次調用 decodeURI() 輸出的結果中，只有 %20 被替換成了空格。而在第二次調用 decodeURIComponent() 輸出的結果中，所有特殊字符的編碼都被替換成了原來的字符，得到了一個未經轉義的字符串（但這個字符串并不是一個有效的 URI）。

eval() 方法

eval() 方法就像是一個完整的 JavaScript 解析器，它只接受一個參數，即要執行的 JavaScript 字符串。看下面的例子：

eval("console.log('hi')");

這行代碼的作用等價于下面這行代碼：

console.log("hi");

當解析器發現代碼中調用 eval() 方法時，它會將傳入的參數當作實際的 JavaScript 語句來解析，然后把執行結果插入到原位置。通過 eval() 執行的代碼被認為是包含該次調用的執行環境的一部分，因此被執行的代碼具有與該執行環境相同的作用域鏈。這意味著通過 eval() 執行的代碼可以引用在包含環境中定義的變量，舉個例子：

var msg = "hello world";
eval("console.log(msg)");    // "hello world"

可見，變量 msg 是在 eval() 調用的環境之外定義的，但其中調用的 console.log() 仍然能夠顯示 "hello world" 。這是因為上面第二行代碼最終被替換成了一行真正的代碼。同樣地，我們也可以在 eval() 調用中定義一個函數，然后再在該調用的外部代碼中引用這個函數：

eval("function sayHi() { console.log('hi'); }");
sayHi();    // "hi"

顯然，函數 sayHi() 是在 eval() 內部定義的。但由于對 eval() 的調用最終會被替換成定義函數的實際代碼，因此可以在下一行調用 sayHi() 。對于變量也一樣：

eval("var msg = 'hello world';");
console.log(msg);     // "hello world"

在 eval() 中創建的任何變量或函數都不會被提升，因為在解析代碼的時候，它們被包含在一個字符串中；它們只在 eval() 執行的時候創建。

嚴格模式下，在外部訪問不到 eval() 中創建的任何變量或函數，因此前面兩個例子都會導致錯誤。同樣，在嚴格模式下，為 eval 賦值也會導致錯誤：

"use strict";
eval = "hi";   // causes error

能夠解釋代碼字符串的能力非常強大，但也非常危險。因此在使用 eval() 時必須極為謹慎，特別是在用它執行用戶輸入數據的情況下。否則，可能會有惡意用戶輸入威脅你的站點或應用程序安全的代碼（即所謂的代碼注入）。

Global 對象的屬性

Global 對象還包含一些屬性，其中一部分屬性已經在本書前面介紹過了。例如，特殊的值 undefined 、 NaN 以及 Infinity 都是 Global 對象的屬性。此外，所有原生引用類型的構造函數，像 Object 和 Function ，也都是 Global 對象的屬性。下表列出了 Global 對象的所有屬性。

屬性	說明	屬性	說明
undefined	特殊值undefined	Date	構造函數Date
NaN	特殊值NaN	RegExp	構造函數RegExp
Infinity	特殊值Infinity	Error	構造函數Error
Object	構造函數Object	EvalError	構造函數EvalError
Array	構造函數Array	RangeError	構造函數RangeError
Function	構造函數Function	ReferenceError	構造函數ReferenceError
Boolean	構造函數Boolean	SyntaxError	構造函數SyntaxError
String	構造函數String	TypeError	構造函數TypeError
Number	構造函數Number	URIError	構造函數URIError

ECMAScript 5 明確禁止給 undefined 、 NaN 和 Infinity 賦值，這樣做即使在非嚴格模式下也會導致錯誤。

window 對象

JavaScript 雖然沒有指出如何直接訪問 Global 對象，但 Web 瀏覽器都是將這個全局對象作為 window 對象的一部分加以實現的。因此，在全局作用域中聲明的所有變量和函數，就都成為了 window 對象的屬性。來看下面的例子。

var color = "red";

function sayColor(){
    console.log(window.color);
}

window.sayColor();  // "red"

JavaScript 中的 window 對象除了扮演規定的 Global 對象的角色外，還承擔了很多別的任務。

Math 對象

JavaScript 還為保存數學公式和信息提供了一個公共位置，即 Math 對象。與我們在 JavaScript 直接編寫的計算功能相比， Math 對象提供的計算功能執行起來要快得多。 Math 對象中還提供了輔助完成這些計算的屬性和方法。

Math 對象的屬性

Math 對象包含的屬性大都是數學計算中可能會用到的一些特殊值。下表列出了這些屬性。

屬性	說明
Math.E	自然對數的底數，即常量e的值
Math.LN10	10的自然對數
Math.LN2	2的自然對數
Math.LOG2E	以2為底e的對數
Math.LOG10E	以10為底e的對數
Math.PI	π的值
Math.SQRT1_2	1/2的平方根（即2的平方根的倒數）
Math.SQRT2	2的平方根

min() 和 max() 方法

Math 對象還包含許多方法，用于輔助完成簡單和復雜的數學計算。其中， min() 和 max() 方法用于確定一組數值中的最小值和最大值。這兩個方法都可以接收任意多個數值參數，如下面的例子所示。

var max = Math.max(3, 54, 32, 16);
console.log(max);    // 54

var min = Math.min(3, 54, 32, 16);
console.log(min);    // 3

要找到數組中的最大或最小值，可以像下面這樣使用 apply() 方法。

var values = [1, 2, 3, 4, 5, 6, 7, 8];
var max = Math.max.apply(Math, values);
console.log(max);   // 8

這個技巧的關鍵是把 Math 對象作為 apply() 的第一個參數，從而正確地設置 this 值。然后，可以將任何數組作為第二個參數。

舍入方法

下面來介紹將小數值舍入為整數的幾個方法： Math.ceil() 、 Math.floor() 和 Math.round() 。這三個方法分別遵循下列舍入規則：

Math.ceil() 執行向上舍入，即它總是將數值向上舍入為最接近的整數；
Math.floor() 執行向下舍入，即它總是將數值向下舍入為最接近的整數；
Math.round() 執行標準舍入，即它總是將數值四舍五入為最接近的整數。

下面是使用這些方法的示例：

console.log(Math.ceil(25.9));     // 26
console.log(Math.ceil(25.5));     // 26
console.log(Math.ceil(25.1));     // 26

console.log(Math.round(25.9));    // 26
console.log(Math.round(25.5));    // 26
console.log(Math.round(25.1));    // 25

console.log(Math.floor(25.9));    // 25
console.log(Math.floor(25.5));    // 25
console.log(Math.floor(25.1));    // 25

random() 方法

Math.random() 方法返回介于0和1之間一個隨機數，不包括0和1。對于某些站點來說，這個方法非常實用，因為可以利用它來隨機顯示一些名人名言和新聞事件。套用下面的公式，就可以利用 Math.random() 從某個整數范圍內隨機選擇一個值。

值 = Math.floor(Math.random() * 可能值的總數 + 第一個可能的值)

公式中用到了 Math.floor() 方法，這是因為 Math.random() 總返回一個小數值。而用這個小數值乘以一個整數，然后再加上一個整數，最終結果仍然還是一個小數。舉例來說，如果你想選擇一個1到10之間的數值，可以像下面這樣編寫代碼：

var num = Math.floor(Math.random() * 10 + 1);

總共有10個可能的值（1到10），而第一個可能的值是1。而如果想要選擇一個介于2到10之間的值，就應該將上面的代碼改成這樣：

var num = Math.floor(Math.random() * 9 + 2);

從2數到10要數9個數，因此可能值的總數就是9，而第一個可能的值就是2。多數情況下，其實都可以通過一個函數來計算可能值的總數和第一個可能的值，例如：

function selectFrom(lowerValue, upperValue) {
    var choices = upperValue - lowerValue + 1;
    return Math.floor(Math.random() * choices + lowerValue);
}

var num = selectFrom(2, 10);
console.log(num);   // 介于2和10之間（包括2和10）的一個數值

函數 selectFrom() 接受兩個參數：應該返回的最小值和最大值。而用最大值減最小值再加1得到了可能值的總數，然后它又把這些數值套用到了前面的公式中。這樣，通過調用 selectFrom(2,10) 就可以得到一個介于2和10之間（包括2和10）的數值了。利用這個函數，可以方便地從數組中隨機取出一項，例如：

var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"];
var color = colors[selectFrom(0, colors.length-1)];
console.log(color);  // 可能是數組中包含的任何一個字符串

其他方法

Math 對象中還包含其他一些與完成各種簡單或復雜計算有關的方法，但詳細討論其中每一個方法的細節及適用情形超出了本書的范圍。下面我們就給出一個表格，其中列出了這些沒有介紹到的 Math 對象的方法。

方法	說明
Math.abs(num)	返回num的絕對值
Math.asin(x)	返回x的反正弦值
Math.exp(num)	返回Math.E的num次冪
Math.atan(x)	返回x的反正切值
Math.log(num)	返回num的自然對數
Math.atan2(y,x)	返回y/x的反正切值
Math.pow(num,power)	返回num的power次冪
Math.cos(x)	返回x的余弦值
Math.sqrt(num)	返回num的平方根
Math.sin(x)	返回x的正弦值
Math.acos(x)	返回x的反余弦值
Math.tan(x)	返回x的正切值

雖然 ECMA-262 規定了這些方法，但不同實現可能會對這些方法采用不同的算法。畢竟，計算某個值的正弦、余弦和正切的方式多種多樣。也正因為如此，這些方法在不同的實現中可能會有不同的精度。

關卡

// 如何高效產生m個n范圍內的不重復隨機數（m<=n)
var getRandomNumber = function(n, m){
    // 待實現方法體
}
console.log(getRandomNumber(20, 3));  // 8,4,19

來自：http://shijiajie.com/2016/11/01/javascript-lesson-1.12-SingletonBuiltInObjects/

本文由用戶 DonTamayo 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1478139196731.html

JavaScript開發 JavaScript