搜尋
首頁web前端js教程《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 对象的所有属性。

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

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 对象包含的属性大都是数学计算中可能会用到的一些特殊值。下表列出了这些属性。

属性说明

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

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 对象的方法。

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

虽然 ECMA-262 规定了这些方法,但不同实现可能会对这些方法采用不同的算法。毕竟,计算某个值的正弦、余弦和正切的方式多种多样。也正因为如此,这些方法在不同的实现中可能会有不同的精度。

关卡

// 如何高效产生m个n范围内的不重复随机数(m<=n) 
var getRandomNumber = function(n, m){ 
  // 待实现方法体 
} 
console.log(getRandomNumber(20, 3)); // 8,4,19


陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
使用Next.js(後端集成)構建多租戶SaaS應用程序使用Next.js(後端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js(前端集成)構建多租戶SaaS應用程序如何使用Next.js(前端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript:探索網絡語言的多功能性JavaScript:探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的演變:當前的趨勢和未來前景JavaScript的演變:當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript:它的作用以及為什麼重要神秘的JavaScript:它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python還是JavaScript更好?Python還是JavaScript更好?Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

如何安裝JavaScript?如何安裝JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript不需要安裝,因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中,通過標籤嵌入HTML文件中運行。 2)在Node.js環境中,下載並安裝Node.js後,通過命令行運行JavaScript文件。

在Quartz中如何在任務開始前發送通知?在Quartz中如何在任務開始前發送通知?Apr 04, 2025 pm 09:24 PM

如何在Quartz中提前發送任務通知在使用Quartz定時器進行任務調度時,任務的執行時間是由cron表達式設定的。現�...

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器