說說JavaScript的嚴格模式

CMAScript 5中引入了嚴格模式（strict mode），相同的代碼在嚴格模型下有時會比普通模式下執行的更快。在嚴格模式下，執行引擎會對JavaScript進行更加嚴格的語法檢查，一些在普通模式下的靜默錯誤會在嚴格模式下拋出異常。

1. 使用嚴格模式

在語義上嚴格模式與普通模式并不完全一致，其主要表現在以下幾個方面：

嚴格模式會將普通模式下的靜默錯誤直接變成明顯的錯誤
嚴格模式修改了一些執行引擎難以處理的錯誤，同樣的代碼在嚴格模式有時會比非嚴格模式下執行的更快
嚴格模式禁用了一些可能在未來版本中定義的語法

使用嚴格模式時應該保證執行環境支持嚴格模型，并對相關代碼進行充分測試。嚴格模式可以與非嚴格模式共存，所以可以選擇性對代碼加入嚴格模式。

啟用嚴格模型，只要在代碼中加入"use strict";或'use strict';即可。我們可以為整個script標簽或一個.js文件全部開啟嚴格模式，也可以為某一個函數單獨開啟嚴格模式。

1.1 全部開啟嚴格模式

在一個script標簽或一個.js文件的頂部加入"use strict";或'use strict';，整個標簽或文件就會運行在嚴格模式下：

1.2 部分使用嚴格模式

嚴格模式與非嚴格模式的模式的代碼并不能合并使用，這時我們可以將使用嚴格式的代碼封裝到一個函數中，并對這個函數開啟嚴格模式。對函數使用嚴格模式，同樣在頂部加入"use strict";或'use strict';即可：

2. 與非嚴格模式的區別

JavaScript會對錯誤進行靜默處理，有時候會給本來錯誤操作進行不報錯處理，這可能會解決當前問題，但可能會給程序留下一些隱患。嚴格模式對JavaScript進行了非嚴格的語法檢查，原本不報錯的一些操作在嚴格模式下會拋出錯誤。

2.1 語法差異

啟嚴格模式('use strict')后，在下面情況下會拋出SyntaxError異常。

不能刪除已聲明的變量

當使用delete刪除已聲明的變量時，會拋出SyntaxError錯誤：

禁用with語句

with語句會導致執行引擎無法進行優化，所以執行速度也會變慢。嚴格模式禁用with語句，使用時會拋出SyntaxError錯誤：

對象屬性與函數參數名的唯一

在普通模式中，在對象中使用重復的屬性名時，只有最后一個屬性會起作用。但在嚴格模式中，會拋出SyntaxError異常：

在普通模式中，重復的函數參數名與重復的對象屬性名處理方式類似，后面的參數會覆蓋前面的同名參數。但在嚴格模式中，會拋出SyntaxError異常：

不能使用eval或arguments作為變量名或函數名

eval是JavaScript中的一個全局對象；arguments表示JavaScript的函數參數對象。在普通模式中eval和arguments都可作為變量名或函數名，但在嚴格模式中會拋出SyntaxError異常：

不能ECMAScript預留關鍵字

嚴格模式對可能在ECMAScript 6中或未來版本的語言規范中使用的關鍵字，如：implements、interface、let、package、private、protected、public、static、yield。使用這些關鍵字作為變量名或函數名，嚴格模式可能會拋出SyntaxError異常：

不能使用八進制

在ECMAScript規范中并沒有關于八進制語法的定義，但以0開頭的八進制語法確得到了瀏覽器的廣泛支持，如：0644===420、"5"==="%"。但在嚴格模式中使用八進制語法可能會拋出SyntaxError異常：

禁止塊級的函數聲明

嚴格模式下，只能腳本級別或函數級別聲名函數。

“不能ECMAScript預留關鍵字”及“禁止塊級的函數聲明”為未來版本的ECMAScript可能會引入的新語法提供了保護，掃除了語言未來發展中的一些障礙。

2.2 運行時差異

JavaScript在某些上下文情況下會對失敗做靜默處理，但在嚴格模式中同樣情況下會拋出錯誤。

不能使用未定義的變量

普通模式下，JavaScript會對未賦值的錯誤使用全局變量，而在嚴格模式下將拋出ReferenceError異常：

更嚴格的對象屬性操作

普通模式下，對不合法的對象屬性操作會進行靜默失敗處理。如：對只讀屬性賦值、給不可寫屬性賦值、給不可擴展對象添加屬性、刪除不可刪除的屬性時，操作不會成功但也不沒有任何錯誤提示。在嚴格模式中，這些操作都會拋出TypeError異常：

禁用部分Arguments或Function對象屬性

嚴格模式下，使用以下Arguments對象的：arguments.callee和arguments.caller屬性或使用Function對象的anyFunction.caller和anyFunction.arguments屬性時，會產生TypeError異常。

2.3 語義差別

嚴格模式與普通模式有一些微小的語義差別，了解這些差異可以幫我們寫出嚴格模式更加健壯的代碼。

函數中的this

在普通函數中this總會被封將成一個對象，而在嚴格模式中this不在被封裝成對象。如果沒有指定其值，那么它的值是'undefined'：

eval的區別

在實際應用中并不推薦使用eval，在嚴格模式中也不例外。當需要使用eval時應該注意，嚴格模式中eval不會在當前的作用域內創建新的變量，eval中傳入的字符串也會按嚴格模式進行解析。

參數值不隨arguments的變化而變化

正常模式下，函數的參數(形參)值會隨arguments對象的變化而變化，反之亦然。而在嚴格模式下，傳遞中函數中的值是形參值的拷貝，所以其值不會隨arguments的變化而變化。

來自－ http://itbilu.com

者：前端進階者來源：前端進階學習交流

大家好，我是前端進階者。

執行JavaScript代碼時，可能會發生意想不到的錯誤。錯誤可以是程序員編寫的編碼錯誤，由于輸入錯誤引起的錯誤以及其他不可預見的事情。

因此，為了處理錯誤，JavaScript提供了4個關鍵字。

一、JavaScript try ... catch語句

try語句允許定義一個代碼塊，該代碼塊在執行時將進行錯誤測試，catch如果try塊中發生錯誤，則該語句允許您定義要執行的代碼塊。

JavaScript語句try和catch成對出現。

try {
//try_statements-嘗試嘗試的語句
}catch（err）{
//catch_statements-處理錯誤的語句
}

完整代碼：

例中，將“alert”寫為“aaalert”來故意產生錯誤。

<!DOCTYPE html>
<html>
<title>項目</title>

<body style="background-color: aqua;">
<h1>JavaScript Error</h1>

<p>將" alert"寫為" aaalert"來故意產生錯誤：</p>

<p id="result"></p>
<script>
try {
aaalert("Hello world");
} catch (e) {
document.getElementById("result").innerHTML=e.name + "<br>" + e.message;
}
</script>

</body>
</html>

將" alert"寫為" aaalert"來故意產生錯誤：

發生錯誤時，JavaScript通常會停止運行，并創建一個具有兩個屬性的Error對象：name和message。

二、JavaScript throw語句

throw語句引發用戶定義的異常。

throw語句允許您創建自定義錯誤。從技術上講，這稱為“引發異常 ”。異常可以是JavaScript字符串，數字，布爾值或對象。

throw "Invalid"; // 生成帶有字符串值的異常
throw 32; // 生成值為32的異常
throw true; // 生成值為true的異常

如果throw與try和一起使用catch，則可以指定程序流程并生成自定義錯誤消息。

在例中，如果傳遞任何非數字參數，則getRectArea()將引發自定義錯誤：

<script>
function getRectArea(width, height) {
if (isNaN(width) || isNaN(height)) {
throw "參數不是數字!";
}
}

try {
getRectArea(5, 'Z');
}
catch(err) {
document.getElementById('para').innerHTML=err;
}
</script>

1. 輸入驗證

如果值錯誤，則引發異常(err)。catch語句捕獲異常(err)，并顯示自定義錯誤消息。

var x=document.querySelector("input").value;
try {
if(x=="") throw "is Empty";
if(isNaN(x)) throw "Not a Number";
if(x > 10) throw "too High";
if(x < 5)throw "too Low";
}
catch(err) {
document.getElementById("para").innerHTML="Input " + err;
}

三、JavaScript 錯誤對象

JavaScript具有一個內置的Error對象，該對象在發生錯誤時提供錯誤信息。

四、錯誤類型

1. EvalError

當通過eval()函數執行代碼期間發生錯誤時，將拋出一個EvalError。但是，JavaScript不再拋出此錯誤，但是仍然保留此對象是為了向后兼容。

較新版本的JavaScript不會拋出異常EvalError，使用SyntaxError代替。

2. RangeError

當使用超出允許值范圍的數字時，將引發RangeError。

例如，創建長度為負數的數組將拋出RangeError。

try {
var arr=new Array(-1); // throws a range error
} catch(err) {
document.getElementById("result").innerHTML=err.name + "<br>" + err.message;
}

3. ReferenceError

試圖引用或訪問一個不存在的變量或對象時，通常會拋出一個ReferenceError。

try {
var x=5 + y; // 拋出引用錯誤
} catch(err) {
document.getElementById("result").innerHTML=err.name + "<br>" + err.message;
}

4. SyntaxError

如果您的JavaScript代碼中有任何語法問題，則會在運行時引發SyntaxError。

try {
eval("alert('Hello)"); // Missing ' will throw an error
} catch(err) {
document.getElementById("result").innerHTML=err.name + "<br>" + err.message;
}

5. TypeError

當值不是期望的類型時，拋出TypeError。

var num=50;
try {
num.toUpperCase(); // 您不能將數字轉換為大寫
} catch(err) {
document.getElementById("result").innerHTML=err.name + "<br>" + err.message;
}

6. URIError

當指定無效的URI(統一資源標識符)時，將引發URIError。

<script>
try {
decodeURI("%"); // 你不能URI解碼百分比符號
} catch (err) {
document.getElementById("result").innerHTML=err.name + "<br>" + err.message;
}
</script>

五、總結

本文基于JavaScript ，介紹了常見的錯誤處理。對于每一種錯誤語句都做了詳細的分析，對于JavaScript 錯誤對象中需要注意的點。在實際操作中，遇到的難點提供了相對于的解決方法。希望能夠幫助讀者在遇到錯誤時更好的調試，處理。

代碼很簡單，希望能夠幫助你更好的學習。

SON 教程

JSON: JavaScript Object Notation(JavaScript 對象表示法)

JSON 是存儲和交換文本信息的語法。類似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 實例

{"sites": [{"name":"h5混合開發" , "url":"www.dongyibiancheng.com"}, {"name":"google" , "url":"www.google.com"}, {"name":"微博" , "url":"www.weibo.com"}]}

這個 sites 對象是包含 3 個站點記錄（對象）的數組。

什么是 JSON ？

JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
JSON 是輕量級的文本數據交換格式
JSON 獨立于語言：JSON 使用 Javascript語法來描述數據對象，但是 JSON 仍然獨立于語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。目前非常多的動態（PHP，JSP，.NET）編程語言都支持JSON。
JSON 具有自我描述性，更易理解

JSON - 轉換為 JavaScript 對象

JSON 文本格式在語法上與創建 JavaScript 對象的代碼相同。

由于這種相似性，無需解析器，JavaScript 程序能夠使用內建的 eval() 函數，用 JSON 數據來生成原生的 JavaScript 對象。

JSON 簡介

JSON - 簡介

在線實例

通過我們的編輯器，您可以在線編輯 JavaScript 代碼，然后通過點擊一個按鈕來查看結果：

JSON 實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>h5混合開發(www.xxxx.com)</title></head><body><h2>JavaScript 創建 JSON 對象</h2><p>網站名稱: <spanid="jname"></span><br/> 網站地址: <spanid="jurl"></span><br/> 網站 slogan: <spanid="jslogan"></span><br/></p><script>

varJSONObject={"name":"h5混合開發", "url":"www.xxx.com", "slogan":"學的不僅是技術，更是夢想！"};document.getElementById("jname").innerHTML=JSONObject.namedocument.getElementById("jurl").innerHTML=JSONObject.urldocument.getElementById("jslogan").innerHTML=JSONObject.slogan

</script></body></html>

嘗試一下 ?

點擊 "嘗試一下" 按鈕查看在線實例。

與 XML 相同之處

JSON 是純文本
JSON 具有"自我描述性"（人類可讀）
JSON 具有層級結構（值中存在值）
JSON 可通過 JavaScript 進行解析
JSON 數據可使用 AJAX 進行傳輸

與 XML 不同之處

沒有結束標簽
更短
讀寫的速度更快
能夠使用內建的 JavaScript eval() 方法進行解析
使用數組
不使用保留字

為什么使用 JSON？

對于 AJAX 應用程序來說，JSON 比 XML 更快更易使用：

使用 XML

讀取 XML 文檔
使用 XML DOM 來循環遍歷文檔
讀取值并存儲在變量中

使用 JSON

讀取 JSON 字符串
用 eval() 處理 JSON 字符串

JSON 語法

JSON 語法是 JavaScript 語法的子集。

JSON 語法規則

JSON 語法是 JavaScript 對象表示法語法的子集。

數據在名稱/值對中
數據由逗號分隔
大括號保存對象
中括號保存數組

JSON 名稱/值對

JSON 數據的書寫格式是：名稱/值對。

名稱/值對包括字段名稱（在雙引號中），后面寫一個冒號，然后是值：

"name" : "h5混合開發"

這很容易理解，等價于這條 JavaScript 語句：

name="h5混合開發"

JSON 值

JSON 值可以是：

數字（整數或浮點數）
字符串（在雙引號中）
邏輯值（true 或 false）
數組（在中括號中）
對象（在大括號中）
null

JSON 數字

JSON 數字可以是整型或者浮點型：

{"age":30}

JSON 對象

JSON 對象在大括號（{}）中書寫：

對象可以包含多個名稱/值對：

{"name":"h5混合開發" , "url":"www.xxxx.com"}

這一點也容易理解，與這條 JavaScript 語句等價：

name="h5混合開發"url="www.xxxx.com"

JSON 數組

JSON 數組在中括號中書寫：

數組可包含多個對象：

{"sites": [{"name":"h5混合開發" , "url":"www.xxx.com"}, {"name":"google" , "url":"www.google.com"}, {"name":"微博" , "url":"www.weibo.com"}]}

在上面的例子中，對象 "sites" 是包含三個對象的數組。每個對象代表一條關于某個網站（name、url）的記錄。

JSON 布爾值

JSON 布爾值可以是 true 或者 false：

{"flag":true}

JSON null

JSON 可以設置 null 值：

{"runoob":null}

JSON 使用 JavaScript 語法

因為 JSON 使用 JavaScript 語法，所以無需額外的軟件就能處理 JavaScript 中的 JSON。

通過 JavaScript，您可以創建一個對象數組，并像這樣進行賦值：

實例

varsites=[{"name":"runoob" , "url":"www.xxxx.com"}, {"name":"google" , "url":"www.google.com"}, {"name":"微博" , "url":"www.weibo.com"}];

可以像這樣訪問 JavaScript 對象數組中的第一項（索引從 0 開始）：

sites[0].name;

返回的內容是：

runoob

可以像這樣修改數據：

sites[0].name="h5混合開發";

嘗試一下 ?

在下面的章節，您將學到如何把 JSON 文本轉換為 JavaScript 對象。

JSON 文件

JSON 文件的文件類型是 ".json"
JSON 文本的 MIME 類型是 "application/json"

JSON 對象

對象語法

實例

{"name":"runoob", "alexa":10000, "site":null}

JSON 對象使用在大括號({})中書寫。

對象可以包含多個 key/value（鍵/值）對。

key 必須是字符串，value 可以是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。

key 和 value 中使用冒號(:)分割。

每個 key/value 對使用逗號(,)分割。

訪問對象值

你可以使用點號（.）來訪問對象的值：

實例

varmyObj, x;myObj={"name":"runoob", "alexa":10000, "site":null};x=myObj.name;

嘗試一下 ?

你也可以使用中括號（[]）來訪問對象的值：

實例

varmyObj, x;myObj={"name":"runoob", "alexa":10000, "site":null};x=myObj["name"];

嘗試一下 ?

循環對象

你可以使用 for-in 來循環對象的屬性：

實例

varmyObj={"name":"runoob", "alexa":10000, "site":null};for(xinmyObj){document.getElementById("demo").innerHTML +=x + "<br>";}

嘗試一下 ?

在 for-in 循環對象的屬性時，使用中括號（[]）來訪問屬性的值：

實例

varmyObj={"name":"runoob", "alexa":10000, "site":null};for(xinmyObj){document.getElementById("demo").innerHTML +=myObj[x] + "<br>";}

嘗試一下 ?

嵌套 JSON 對象

JSON 對象中可以包含另外一個 JSON 對象：

實例

myObj={"name":"runoob", "alexa":10000, "sites": {"site1":"www.xxxx.com", "site2":"m.runoob.com", "site3":"c.runoob.com"}}

你可以使用點號(.)或者中括號([])來訪問嵌套的 JSON 對象。

實例

x=myObj.sites.site1;// 或者x=myObj.sites["site1"];

嘗試一下 ?

修改值

你可以使用點號(.)來修改 JSON 對象的值：

實例

myObj.sites.site1="www.google.com";

嘗試一下 ?

你可以使用中括號([])來修改 JSON 對象的值：

實例

myObj.sites["site1"]="www.google.com";

嘗試一下 ?

刪除對象屬性

我們可以使用 delete 關鍵字來刪除 JSON 對象的屬性：

實例

deletemyObj.sites.site1;

嘗試一下 ?

你可以使用中括號([])來刪除 JSON 對象的屬性：

實例

deletemyObj.sites["site1"]

嘗試一下 ?

JSON 數組

數組作為 JSON 對象

實例

["Google", "Runoob", "Taobao"]

JSON 數組在中括號中書寫。

JSON 中數組值必須是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。

JavaScript 中，數組值可以是以上的 JSON 數據類型，也可以是 JavaScript 的表達式，包括函數，日期，及 undefined。

JSON 對象中的數組

對象屬性的值可以是一個數組：

實例

{"name":"網站","num":3,"sites":["Google", "Runoob", "Taobao"]}

我們可以使用索引值來訪問數組：

實例

x=myObj.sites[0];

嘗試一下 ?

循環數組

你可以使用 for-in 來訪問數組：

實例

for(iinmyObj.sites){x +=myObj.sites[i] + "<br>";}

嘗試一下 ?

你也可以使用 for 循環：

實例

for(i=0; i < myObj.sites.length; i++){x +=myObj.sites[i] + "<br>";}

嘗試一下 ?

嵌套 JSON 對象中的數組

JSON 對象中數組可以包含另外一個數組，或者另外一個 JSON 對象：

實例

myObj={"name":"網站", "num":3, "sites": [{"name":"Google", "info":["Android", "Google 搜索", "Google 翻譯"]}, {"name":"Runoob", "info":["h5混合開發", "h5混合開發工具", "h5混合開發微信"]}, {"name":"Taobao", "info":["淘寶", "網購"]}]}

我們可以使用 for-in 來循環訪問每個數組：

實例

for(iinmyObj.sites){x +="<h1>" + myObj.sites[i].name + "</h1>"; for(jinmyObj.sites[i].info){x +=myObj.sites[i].info[j] + "<br>"; }}

嘗試一下 ?

修改數組值

你可以使用索引值來修改數組值：

實例

myObj.sites[1]="Github";

嘗試一下 ?

刪除數組元素

我們可以使用 delete 關鍵字來刪除數組元素：

實例

deletemyObj.sites[1];

嘗試一下 ?

JSON.parse()

JSON 通常用于與服務端交換數據。

在接收服務器數據時一般是字符串。

我們可以使用 JSON.parse() 方法將數據轉換為 JavaScript 對象。

語法

JSON.parse(text[, reviver])

參數說明：

text:必需，一個有效的 JSON 字符串。
reviver: 可選，一個轉換結果的函數，將為對象的每個成員調用此函數。

JSON 解析實例

例如我們從服務器接收了以下數據：

{"name":"runoob", "alexa":10000, "site":"www.xxx.com"}

我們使用 JSON.parse() 方法處理以上數據，將其轉換為 JavaScript 對象：

varobj=JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.xxx.com" }');

解析前要確保你的數據是標準的 JSON 格式，否則會解析出錯。
你可以使用我們的在線工具檢測：https://c.runoob.com/front-end/53。

解析完成后，我們就可以在網頁上使用 JSON 數據了：

實例

<pid="demo"></p><script>var obj=JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');document.getElementById("demo").innerHTML=obj.name + "：" + obj.site;</script>

嘗試一下 ?

從服務端接收 JSON 數據

我們可以使用 AJAX 從服務器請求 JSON 數據，并解析為 JavaScript 對象。

實例

varxmlhttp=newXMLHttpRequest();xmlhttp.onreadystatechange=function(){if(this.readyState==4 && this.status==200){myObj=JSON.parse(this.responseText); document.getElementById("demo").innerHTML=myObj.name; }};xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);xmlhttp.send();

嘗試一下 ?

查看服務端數據： json_demo.txt

從服務端接收數組的 JSON 數據

如果從服務端接收的是數組的 JSON 數據，則 JSON.parse 會將其轉換為 JavaScript 數組：

實例

varxmlhttp=newXMLHttpRequest();xmlhttp.onreadystatechange=function(){if(this.readyState==4 && this.status==200){myArr=JSON.parse(this.responseText); document.getElementById("demo").innerHTML=myArr[1]; }};xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);xmlhttp.send();

嘗試一下 ?

查看服務端數據： json_demo_array.txt

異常

解析數據

JSON 不能存儲 Date 對象。

如果你需要存儲 Date 對象，需要將其轉換為字符串。

之后再將字符串轉換為 Date 對象。

實例

vartext='{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';varobj=JSON.parse(text);obj.initDate=newDate(obj.initDate); document.getElementById("demo").innerHTML=obj.name + "創建日期: " + obj.initDate;

嘗試一下 ?

我們可以啟用 JSON.parse 的第二個參數 reviver，一個轉換結果的函數，對象的每個成員調用此函數。

實例

vartext='{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';varobj=JSON.parse(text, function(key, value){if(key=="initDate"){returnnewDate(value); }else{returnvalue;}}); document.getElementById("demo").innerHTML=obj.name + "創建日期：" + obj.initDate;

嘗試一下 ?

解析函數

JSON 不允許包含函數，但你可以將函數作為字符串存儲，之后再將字符串轉換為函數。

實例

vartext='{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';varobj=JSON.parse(text);obj.alexa=eval("(" + obj.alexa + ")"); document.getElementById("demo").innerHTML=obj.name + " Alexa 排名：" + obj.alexa();

嘗試一下 ?

不建議在 JSON 中使用函數。

瀏覽器支持

主流瀏覽器都支持 JSON.parse() 函數：

Firefox 3.5
Internet Explorer 8
Chrome
Opera 10
Safari 4

在線咨詢

上一篇：5 個開源的 Java IDE 工具 - Linux
下一篇：畫個圈就能知道你得了啥病？請完成這項畫圖測試

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

說說JavaScript的嚴格模式

一、JavaScript try ... catch語句

二、JavaScript throw語句

三、JavaScript 錯誤對象

四、錯誤類型

五、總結

SON 教程

JSON - 簡介

JSON 語法

JSON 對象

JSON 數組

JSON.parse()

您的項目需求