前言

今天在搬磚的時候頁面上有個根據傳過來的演算法通過js全域函式eval()進行計算的js需求 屬實有被惡心到 今天博主就整理下JavaScript的全域函式 防止以后再被這種問題使絆子 也希望對大家有所幫助

一、JavaScript全域函式有哪些?

二、JavaScript全域函式詳解?

2.1.Eval()

2.1.1.例子一

首先看示例:

eval("x=10;y=20;document.write(x*y)");
document.write("<br>" + eval("2+2"));
document.write("<br>" + eval(x+17));

結果:

200
4
27

特殊用法{}:

document.write("<br>" + eval{3+3}));

這時回傳結果為:6 我們發現{}這樣使用和()其實是一樣的 不同在于:

//{}/2 這種寫法是不支持的
document.write("<br>" + eval{3+3}/2));
//()是可以的
document.write("<br>" + eval(3+3)/2));
//若是{}也想進行此類計算也可以 如下:
document.write("<br>" + eval{(3+3)/2}));

2.1.2.例子二

看一下在其他情況中，eval() 回傳的結果：

eval("2+3")    // 回傳 5
var myeval = eval;    // 可能會拋出 EvalError 例外
myeval("2+3");    // 可能會拋出 EvalError 例外

可以使用下面這段代碼來檢測 eval() 的引數是否合法：

try  {
  alert("Result:" + eval(prompt("Enter an expression:","")));
}catch(exception) {
  alert(exception);
}

2.1.3.例子三(決議JSON字串)

2.1.3.1.eval決議函式:

JSON 不允許包含函式，但你可以將函式作為字串存盤，之后再將字串轉換為函式，

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

2.1.3.2.JSON字串轉換為物件的兩種方法

  //將JSON字串轉為JS物件的方法一
    var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
    document.write(obj.name + "<br/>");
    //將JSON字串轉為JS物件的方法二
    //JSON格式的字串
    var test1 = '{"name":"qlq","age":25}';
    var obj2 = eval("(" + test1 + ")"); //必須帶圓括號
    document.write(obj2.name + "<br/>" + obj2.age);

結果:

runoob
qlq
25

為什么要 eval這里要添加 eval("(" + test1 + “)”)//”呢？

原因在于：eval本身的問題， 由于json是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個陳述句塊來處理，所以必須強制性的將它轉換成一種運算式，

加上圓括號的目的是迫使eval函式在處理JavaScript代碼的時候強制將 括號內的運算式（expression）轉化為物件，而不是作為語 句（statement）來執行，舉一個例子，例如物件字面量{}，如若不加外層的括號，那么eval會將大括號識別為JavaScript代碼塊的開始 和結束標記，那么{}將會被認為是執行了一句空陳述句，所以下面兩個執行結果是不同的：

alert(eval("{}"); // return undefined
alert(eval("({})");// return object[Object]

對于這種寫法，在JS中，可以到處看到，

如: (function()) {}(); 做閉包操作時等，

alert(dataObj.root.length);//輸出root的子物件數量
$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
return true;
}
//輸出每個root子物件的名稱和值
alert("name:"+item.name+",value:"+item.value);
})

注：對于一般的js生成json物件，只需要將$.each()方法替換為for陳述句即可，其他不變，

2.1.3.3.對于服務器回傳的JSON字串，如果jquery異步請求將 type（一般為這個配置屬性）設為"json"，或者利 用$.getJSON()方法獲得服務器回傳，那么就不需要eval()方法了，因為這時候得到的結果已經是json物件了，只需直接呼叫該物件即可，這里以$.getJSON方法為例說明資料處理方法：

$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){
//此處回傳的data已經是json物件
//以下其他操作同第一種情況
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue，回傳false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});

這里特別需要注意的是方式1中的eval()方法是動態執行其中字串（可能是js腳本）的，這樣很容易會造成系統的安全問題，所以可以采用一些規避了eval()的第三方客戶端腳本庫，比如JSON in JavaScript就提供了一個不超過3k的腳本庫，

2.1.3.4.補充:eval()決議的JSON的key可以不帶""

一般的JSON的key必須帶雙引號，也就是類似于{"key":"vslue"}的形式，但是如果用eval("("+json+")")的形式決議字串為JSON的時候，json可以寫為{key:"value"}

2.2.decodeURI()與 decodeURIComponent() – 解碼函式

decodeURI() 可對 encodeURI() 函式編碼過的 URI 進行解碼

如:

 const aaa = '#$ ￥%23ccc/'
  
  console.log(encodeURI(aaa));	// #$%20%EF%BF%A5%2523ccc/
  console.log(decodeURI(aaa));	// #$ ￥%23ccc/
  console.log(encodeURIComponent(aaa));	// %23%24%20%EF%BF%A5%2523ccc%2F
  console.log(decodeURIComponent(aaa));	// #$ ￥#ccc/

我們在獲取地址欄引數是通常封裝成如下函式：

export function getQueryObject(url) {
  url = url || window.location.href
  const search = url.substring(url.lastIndexOf('?') + 1)
  const obj = {}
  const reg = /([^?&=]+)=([^?&=]*)/g
  search.replace(reg, (rs, $1, $2) => {
    const name = decodeURIComponent($1)
    let val = decodeURIComponent($2)
    val = String(val)
    obj[name] = val
    return rs
  })
  return obj
}

2.3.encodeURI()與encodeURIComponent() — 編碼函式

encodeURI():
語法

encodeURI(URIstring)
引數 描述
URIstring 必需，一個字串，含有 URI 或其他要編碼的文本，
回傳值
URIstring 的副本，其中的某些字符將被十六進制的轉義序列進行替換，
說明
該方法不會對 ASCII 字母和數字進行編碼，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ’ ( ) ，
該方法的目的是對 URI 進行完整的編碼，因此對以下在 URI 中具有特殊含義的 ASCII 標點符號，encodeURI() 函式是不會進行轉義的：;/?: @&=+$,#

encodeURIComponent() :

語法
encodeURIComponent(URIstring)
引數 描述
URIstring 必需，一個字串，含有 URI 組件或其他要編碼的文本，
回傳值
URIstring 的副本，其中的某些字符將被十六進制的轉義序列進行替換，
說明
該方法不會對 ASCII 字母和數字進行編碼，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ’ ( ) ，
其他字符（比如 ：;/?😡&=+$,# 這些用于分隔 URI 組件的標點符號），都是由一個或多個十六進制的轉義序列替換的，
提示和注釋
提示：請注意 encodeURIComponent() 函式 與 encodeURI() 函式的區別之處，前者假定它的引數是 URI 的一部分（比如協議、主機名、路徑或查詢字串），因此 encodeURIComponent() 函式將轉義用于分隔 URI 各個部分的標點符號，

enCodeURI示例:

<html>
<body>

<script type="text/javascript">

document.write(encodeURI("http://www.w3school.com.cn")+ "<br />")
document.write(encodeURI("http://www.w3school.com.cn/My first/")+ "<br />")
document.write(encodeURI(",/?:@&=+$#"))

</script>

</body>
</html>

輸出結果：

http://www.w3school.com.cn
http://www.w3school.com.cn/My%20first/
,/?: @&=+$#

對整個URL進行編碼，而URL的特定識別符號不會被轉碼，

encodeURIComponent() 示例:

<script type="text/javascript">

document.write(encodeURIComponent("http://www.w3school.com.cn"))
document.write("<br />")
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/"))
document.write("<br />")
document.write(encodeURIComponent(",/?:@&=+$#"))

</script>

輸出結果：

http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23

對URL中的引數進行編碼，因為引數也是一個URL，如果不編碼會影響整個URL的跳轉，

2.4.escape()

語法
escape(string)
引數 描述
string 必需，要被轉義或編碼的字串，
回傳值
已編碼的 string 的副本，其中某些字符被替換成了十六進制的轉義序列，

說明
該方法不會對 ASCII 字母和數字進行編碼，也不會對下面這些 ASCII 標點符號進行編碼： * @ - _ + . / ，其他所有的字符都會被轉義序列替換，
注意：ECMAScript v3 反對使用該方法，應用使用 decodeURI() 和 decodeURIComponent() 替代它，

示例:

<script type="text/javascript">

document.write(escape("Visit W3School!") + "<br />")
document.write(escape("?!=()#%&"))

</script>

結果:

Visit%20W3School%21
%3F%21%3D%28%29%23%25%26

2.5.isFinite()

它的作用就是用來判斷引數是否位于最小值和最大值之間，如果位于之間就會回傳true,否則就會回傳false，
在ECMAScript中能夠表示的最小的數值保存在Number.MIN_VALUE中，在大多數瀏覽器中這個值是:5e-324；能夠表示的最大的數值保存在Number.MAX_VALUE中，在大多數瀏覽器中，這個值是1.7976931348623157e+308，如果數值超出了范圍，該值就會自動轉換為一個特殊值infinity，正數的話前面會是Infinity，如果是負數的話會轉換為-Infinity

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		var num = 1123;
		alert(num);//1123
		var num1 = Number.MAX_VALUE+Number.MAX_VALUE;
		alert(num1);//Infinity
		alert(isFinite(num));//true
		alert(isFinite(num1));//false
		</script>
	</head>
	<body>
	</body>
</html>

可以用來判斷該值是否在正常的數值范圍內

2.6.isNaN()

定義和用法
isNaN() 函式用于檢查其引數是否是非數字值，

isNaN的用法：檢測當前值是否不是有效數字，回傳true代表不是有效數字，回傳false是有效數字

//=>語法：isNaN([value])
var num=12;
isNaN(num); //->檢測num變數存盤的值是否為非有效數字 false

isNaN('13') =>false
isNaN('你好呀') =>true
isNaN(true) =>false
isNaN(false) =>false
isNaN(null) =>false
isNaN(undefined) =>true
isNaN({age:9}) =>true
isNaN([12,23]) =>true
isNaN([12]) =>false
isNaN(/^$/) =>true
isNaN(function(){}) =>true

2.6.1.isNaN檢測的機制：首先驗證當前要檢測的值是否為數字型別的，如果不是，瀏覽器會默認的把值轉換為數字型別

[字串轉數字]
Number('13') ->13
Number('13px') ->NaN 如果當前字串中出現任意一個非有效數字字符，結果則為NaN
Number('13.5') ->13.5 可以識別小數
[布爾轉數字]
Number(true) ->1
Number(false) ->0
[其它]
Number(null) ->0
Number(undefined) ->NaN

把參考資料型別值轉換為數字：先把參考值調取toString轉換為字串，然后再把字串調取Number轉換為數字

2.6.2.當前檢測的值已經是數字型別，是有效數字回傳false，不是回傳true（數字型別中只有NaN不是有效數字，其余都是有效數字）

parseInt / parseFloat，等同于Number，也是為了把其它型別的值轉換為數字型別
和Number的區別在于字串轉換分析上

Number：出現任意非有效數字字符，結果就是NaN
parseInt：把一個字串中的整數部分決議出來，parseFloat是把一個字串中小數(浮點數)部分決議出來

parseInt('13.5px') =>13
parseFloat('13.5px') =>13.5
parseInt('width:13.5px') =>NaN 

從字串最左邊字符開始查找有效數字字符，并且轉換為數字，但是一但遇到一個非有效數字字符，查找結束
因此，使用isNaN之前，最好判斷一下資料型別，

function myIsNaN(value) {
  return typeof value === 'number' && isNaN(value);
}

判斷NaN更可靠的方法是，利用NaN為唯一不等于自身的值的這個特點，進行判斷，

function myIsNaN(value) {
  return value !== value;
}

2.7.Number()

Number(obj)為全域函式，不依托于任何物件,用于將引數物件的值轉為數值
例如：

var test1= new Boolean(true);
var test2= new Boolean(false);
var test3= new Date();
var test4= new String("999");
var test5= new String("999 888");

document.write(Number(test1)); 輸出 1
document.write(Number(test2)); 輸出 0
document.write(Number(test3)); 輸出 1256657776588
document.write(Number(test4)); 輸出 999
document.write(Number(test5)); 輸出 NaN

1.引數為string

var a="3.14159";

var a2=Number(a);//結果為3.14159

2.引數為數值

var b=3.14159

var b2=Number(b);//結果為3.14159

2.8.parseInt()與parseFloat()

1.parseInt()

parseInt() 函式可決議一個字串，并回傳一個整數，開頭和結尾的空格是允許的，如果引數是一個數字，那么該方法將去掉小數部分，并且回傳整數部分，

例如：

parseInt(3.14159);//3  引數為數值
parseInt("3.14159");//3   引數為字串

2.parseFloat()

函式可決議一個字串，并回傳一個浮點數，引數可以為數字，如果引數為小數數字，回傳小數數字，如果為整數數字，回傳整數數字

例如：

parseFloat(3.14159)//3.14159
parseFloat("3.14159")//3.14159
parseFloat(5)//5
parseFloat("5");//5

2.9.string() — 與toString()同

把不同的物件轉換為字串：

<script>

var test1 = new Boolean(1);
var test2 = new Boolean(0);
var test3 = new Boolean(true);
var test4 = new Boolean(false);
var test5 = new Date();
var test6 = new String("999 888");
var test7 = 12345;

document.write(String(test1)+ "<br>");
document.write(String(test2)+ "<br>");
document.write(String(test3)+ "<br>");
document.write(String(test4)+ "<br>");
document.write(String(test5)+ "<br>");
document.write(String(test6)+ "<br>");
document.write(String(test7)+ "<br>");

</script>

以上實體輸出結果:

true
false
true
false
Fri Aug 27 2021 16:31:26 GMT+0800 (中國標準時間)
999 888
12345

2.10.unescape()

功能描述:可對通過 escape() 編碼的字串進行解碼，該函式的作業原理是這樣的：通過找到形式為 %xx 和 %uxxxx 的字符序列（x 表示十六進制的數字），
用 Unicode 字符 \u00xx 和 \uxxxx 替換這樣的字符序列進行解碼，
溫馨提示:ECMAScript v3 已從標準中洗掉了 unescape() 函式，并反對使用它，因此應該用 decodeURI() 和 decodeURIComponent() 取而代之，

示例:

var str="Need tips? Visit RUNOOB!";
var str_esc=escape(str);
document.write(str_esc + "<br>")
document.write(unescape(str_esc))