JavaScript常用對象介紹

2020 年 10 月 14 日
筆記
javascript, Web全棧系列, 全棧, 前端

對象(object)

到目前為止，我們看到的大多數的像Array、String、Number等這些類型的，他們統統屬於對象，而且，object也是ECMAScript中使用最多的一個類型。並且每個對象都有屬性和方法。好比是可以構造出一個人，這個人他有年齡和姓名等，這些統統屬於這個人的屬性，這個人他有愛泡妹子，泡妹子是這個人的動作，我們稱為這個對象的方法。

對象的屬性：它是屬於這個對象的某個變量。比如字符串的長度、數組的長度和索引、圖像的寬高等

對象的方法：只有某個特定屬性才能調用的函數。表單的提交、時間的獲取等。

由此可見，對象是由一些彼此相關的屬性和方法集合在一起而構成的一個數據實體。

對象的創建方式

為了使用Person對象來描述一個特定的人,我們需要創建一個Person對象的實例(instance)。實例是對象的具體表示；對象是統稱，實例是個體。例如，你和我都是人，都可以用Person對象來描述；但你和我是兩個不同的個體，很可能有着不同的屬性（例如，你和我的年齡可能不一樣）。因此，你和我對應着兩個不同的Person對象——他們雖然都是Person對象,但它們是兩個不同的實例

創建Object實例的方式有兩種。第一種是使用new操作符後跟Object構造函數，如下所示：

//創建對象
var person = new Object();
//給對象添加name和age屬性
person.name = 'jack';
person.age = 28;
//給對象添加fav的方法
person.fav = function(){
    console.log('泡妹子');
}

使用對象字面量表示法。對象字面量是對象定義的一種簡寫形式，目的在於簡化創建包含大量屬性的對象的過程。

var person = {
    name : 'jack';
    age : 28,
    fav : function(){
   	 console.log('泡妹子');
	}
}

在上個例子中，從{開始，表示對象字面量的開始，一直到最後的}結束。我們定義了name屬性，之後是一個冒號，再後面是這個屬性的值。在對象字面量中，使用逗號來分離不同的屬性。

在使用對象字面量語法時，屬性名也可以使用字符串，如下：

var person = {
    "name" : 'jack';
    "age" : 28,
    "fav" : function(){
   	 console.log('泡妹子');
	}
}

除此之外

var person = {};//與new Object()相同

點語法

上述的例子，我們如何來訪問person對象中的age屬性和fav方法呢？點語法是你最好的朋友。例如

person.name; //jack
person.fav();//泡妹子

括號表示法

另外一種訪問屬性的方式使用括號表示法，代替這樣的代碼

person.name; //jack

使用如下所示的代碼

person['name'];

總結：我們推薦使用點語法來訪問對象的屬性。

內置對象

在電視上的烹飪節目中,只要鏡頭一轉,廚師就可以端出一盤美味的菜肴並向大家介紹說:”這是我剛做好的”。Javascript與這種節目里的主持人頗有幾分相似：它提供了一些列預先定義好的對象，而我們可以把這些對象直接用在自己的腳本里。我們稱這種對象叫內置對象（navtive object）。

其實我們已經見過一些Javascript內置對象了。數組就是一種Javascript內置對象中的一種。本節我們主要介紹數組常用的屬性和方法。

Array

數組創建方式

跟object創建對象一樣，使用Array構造函數方式創建，如下代碼
```
var colors = new Array();
```
使用字面量方式創建數組
```
var colors = [];
```

檢測數組

確定某個值到底是否是數組

var colors = ['red','green','blue'];
if(Array.isArray(colors)){
    //對數組執行某些操作
}

轉換方法

調用數組的toString()方法會返回由數組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串。

var colors = ['red','green','blue'];
alert(colors.toString());//red,green,blue

另外，toLocalString()方法經常也會返回與toString()方法相同的值，但也不總是如此。例如：

var person1 = {
    toLocaleString : function () {
        return '馬大帥';
    },
    toString : function () {
        return '馬小帥';
    }
}
var person2 = {
    toLocaleString : function () {
        return '隔壁老王';
    },
    toString : function () {
        return '隔壁老李';
    }
}
var people = [person1,person2];
alert(people);//馬小帥,隔壁老李
alert(people.toString());//馬小帥,隔壁老李
alert(people.toLocaleString()); //馬大帥,隔壁老王

定義了兩個對象： person1和person2。分別為每個對象定義了一個toString()方法和toLocalString()方法，各個方法返回不同的值。然後，創建一個包含前面定義的兩個對象的數組。將數組傳遞給alert()時，輸出結果為馬小帥,隔壁老李。因為調用數組每一項的toString()方法(同樣，這與下一行顯示調用toString())方法得到的結果相同。而當調用數組的每一項的toLocalString()方法.

分割字符串

toLocalString()方法和toString()方法，在默認情況下都會以逗號分割的字符串的形式返回。而如果使用join()方法，join()方法只接收一個參數。

var colors = ['red','blue','green'];
colors.join('||'); //red||blue||green

棧方法

數組也可以想棧一樣，既可以插入和刪除項的數據結構。棧是一種LIFO(Last-In-First-Out,後進先出)的數據結構，也就是最新添加的那項元素最早被刪除。而棧中項的插入（叫做推入）和移除(叫做彈出)，只發生在一個位置——棧的頂部。數組專門提供了push()和pop()方法，以便實現類似棧的行為。

push()方法

可以接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改後數組的長度。

var colors = [];
var count = colors.push('red','blue','green');
alert(count); //3

pop()方法

從數組末尾移除最後一項，減少數組的 length 值，然後返回移除的項。

var item = colors.pop(); //取最後一項
alert(item); //green
alert(colors.length); //2

隊列方法

棧數據結構的訪問規則是 LIFO(後進先出)，而隊列數據結構的訪問規則是 FIFO(First-In-First-Out，先進先出)。隊列在列表的末端添加項，從列表的前端移除項。由於 push()是向數組末端添加項的方法，因此要模擬隊列只需一個從數組前端取得項的方法。實現這一操作的數組方法就是 shift()，它能夠移除數組中的第一個項並返回該項，同時將數組長度減 1。結合使用 shift()和 push()方法，可以像使用隊列一樣使用數組。

shift()方法

var colors = ['red','blue','green'];
var item = colors.shift();//取得第一項
alert(item); //"red"
alert(colors.length); //2

unshift()方法

ECMAScript 還為數組提供了一個 unshift()方法。顧名思義，unshift()與 shift()的用途相反: 它能在數組前端添加任意個項並返回新數組的長度。因此，同時使用 unshift()和 pop()方法，可以 12 從相反的方向來模擬隊列，即在數組的前端添加項，從數組末端移除項。

var colors = [];
var count  = colors.unshift('red','green'); //推入兩項
alert(count); //2
console.log(colors); // ["red", "green"]

重排序方法

數組中已經存在兩個可以直接用來重排序的方法：reverse()和sort()。

reverse()方法

reverse翻轉數組項的順序

var values = [1,2,3,4,5];
values.reverse();
alert(values); // 5,4,3,2,1

sort()方法

默認情況下，sort()方法按升序排列——即最小的值位於最前面，最大的值排在最後面。為了實現排序，sort()方法會調用每個數組項的 toString()轉型方法，然後比較得到的字符串，以確定如何排序。即使數組中的每一項都是數值，sort()方法比較的也是字符串。如下所示。

var values = [0,1,5,10,15];
varlus.sort();
alert(values); //0,1,10,15,5

可見，即使例子中值的順序沒有問題，但 sort()方法也會根據測試字符串的結果改變原來的順序。因為數值 5 雖然小於 10，但在進行字符串比較時，”10″則位於”5″的前面，於是數組的順序就被修改了。不用說，這種排序方式在很多情況下都不是最佳方案。

因此 sort()方法可以接收一個比較函數作為參數，以便我們指定哪個值位於哪個值的前面。以完成數組中數值的升序和降序功能

比較函數接收兩個參數，如果第一個參數位於第二個參數之前則返回一個負數，如果兩個參數相等則返回0，如果第一個參數位於第二個參數之後則返回正數。舉例：

function compare(v1,v2){
    if(v1 < v2){
        return -1;
    }else if (v1 > v2){
        return 1;
    }else{
        return 0;
    }
}

這個比較函數可以適用於大多數數據類型，只要將其作為參數傳遞給sort()方法即可，如下面例子所示。

var values = [0,1,5,10,15];
values.sort(compare);
alert(values); //0,1,5,10,15

在將比較函數傳遞到sort()方法之後，數值仍然保持了正確的升序。當然，也可以通過比較函數產生降序排序的結果，只要交換比較函數返回的值即可。

function compare(v1,v2){
    if(v1 < v2){
        return 1;
    }else if (v1 > v2){
        return -1;
    }else{
        return 0;
    }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);    // 15,10,5,1,0

比較函數在第一個值應該位於第二個之後的情況下返回 1，而在第一個值應該在第二個之前的情況下返回-1。交換返回值的意思是讓更大的值排位更靠前，也就是對數組按照降序排序。當然，如果只想反轉數組原來的順序，使用 reverse()方法要更快一些。

操作方法

ECMAScript為操作已經包含在數據中項提供了許多方法。其中包含了像concat()、slice()、splice()來對數組的項進行操作。

concat()方法

數組合併方法，一個數組調用concat()方法去合併另一個數組，返回一個新的數組。concat()接收的參數是可以是任意的。

參數為一個或多個數組，則該方法會將這些數組中每一項都添加到結果數組中。
參數不是數組，這些值就會被簡單地添加到結果數組的末尾

var colors = ['red','blue','green'];
colors.concat('yello');//["red", "blue", "green", "yello"]
colors.concat({'name':'張三'});//["red", "blue", "green", {…}]
colors.concat({'name':'李四'},['black','brown']);// ["red", "blue", "green", {…}, "black", "brown"]

slice()方法

slice()方法，它能夠基於當前數組中一個或多個項創建一個新數組。slice()方法可以接受一或兩個參數，既要返回項的起始和結束位置。

一個參數的情況下，slice()方法會返回從該參數指定位置開始到當前數組默認的所有項
兩個參數的情況下，該方法返回起始和結束位置之間的項——但不包括結束位置的項。

注意： slice()方法不會影響原始數組

var colors = ['red','blue','green','yellow','purple'];
colors.slice(1);//["blue", "green", "yellow", "purple"]
colors.slice(1,4);// ["blue", "green", "yellow"]

如果slice()方法的參數中有一個負數，則用數組長度加上該數來確定響應的位置。例如，在一個包含5項的數組上調用slice(-2,-1)與調用slice(3,4)得到的結果相同。如果技術位置小於起始位置，則返回空數組

var colors = ['red','blue','green','yellow','purple'];
colors.slice(-2,-1);//["yellow"] 
colors.slice(-1,-2);//[]

splice()方法

splice()方法這個恐怕要算是最強大的數組的方法了，它有很多種用法。

splice()的主要用途是向數組的中路插入想。使用這種方法的方式則有3中。

刪除：可以刪除任意數量的項，只需指定2個參數：要刪除的第一項的位置和要刪除的個數。例如splice(0,2)會刪除數組中的前兩項
插入：可以向指定位置插入任意數量的項，只需提供3個參數：起始位置、0（要刪除的個數）和要插入的項。如果要插入多個項，可以再傳入第四、第五、以至任意多個項。例如，splice(2,0,'red','green')會從當前數組的位置2開始插入字符串'red'和'green'。
替換：可以向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定 3 個參數:起始位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等。例如， splice (2,1,"red","green")會刪除當前數組位置 2 的項，然後再從位置 2 開始插入字符串 "red"和"green"。

splice()方法始終都會返回一個數組，該數組中包含從原始數組中刪除的項(如果沒有刪除任何項，則返回一個空數組)。

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); 
alert(colors); // green,blue 
alert(removed); // red，返回的數組中只包含一項
removed = colors.splice(1, 0, "yellow", "orange"); 
alert(colors); // green,yellow,orange,blue alert(removed); // 返回的是一個空數組
removed = colors.splice(1, 1, "red", "purple"); 
alert(colors); // green,red,purple,orange,blue alert(removed); // yellow，返回的數組中只包含一項

位置方法

ECMAScript 5 為數組實例添加了兩個位置方法:indexOf()和 lastIndexOf()。這兩個方法都接收兩個參數:要查找的項和(可選的)表示查找起點位置的索引。其中，indexOf()方法從數組的開頭(位置 0)開始向後查找，lastIndexOf()方法則從數組的末尾開始向前查找。

這兩個方法都返回要查找的那項在數組中的位置，或者在沒找到的情況下返回-1。在比較第一個參數與數組中的每一項時，會使用全等操作符；也就是說，要求查找的項必須嚴格相等(就像使用===一樣)。舉個栗子：

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4));// 5
alert(numbers.indexOf(4,4));// 5
alert(numbers.lastIndexOf(4,4));//3

var person = {name:"mjj"};
var people = [{name:'mjj'}];
var morePeople = [person];
alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person));// 0

迭代方法

ECMAScript 5 為數組定義了 5 個迭代方法。

every()
some()
filter()
map()
forEach()

在這裡常用的是後三個，我們只介紹後三個。

filter()方法

filter()函數，它利用指定的函數確定是否在返回的數組中包含某一項。例如要返回一個所有數值都大於2的數組，可以使用如下代碼。

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});
alert(filterResult); //[3,4,5,4,3]

map()方法

map()方法也返回一個數組，而這個數組的每一項都是在原始數組中的對應項上運行輸入函數的結果。例如，可以給數組中的每一項乘以2，然後返回這些乘積組成的數組，如下所示

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.map(function(item, index, array){
    return item * 2;
});
alert(filterResult); //[2,4,6,8,10,8,6,4,2]

forEach()方法

它只是對數組中的每一項運行傳入的函數。這個方法沒有返回值，本質上與使用 for 循環迭代數組一樣。來看一個例子。

//執行某些操作 10
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
});

這些數組方法通過執行不同的操作，可以大大方便處理數組的任務

String

String 類型的每個實例都有一個 length 屬性，表示字符串中包含多個字符

var stringValue = "hello world"; 
alert(stringValue.length);     //"11"

這個例子輸出了字符串”hello world”中的字符數量，即”11″

1.字符方法

兩個用於訪問字符串中特定字符的方法是:charAt()和 charCodeAt()。這兩個方法都接收一個參數，即基於 0 的字符位置。其中，charAt()方法以單字符字符串的形式返回給定位置的那個字符 (ECMAScript 中沒有字符類型)。

例如:

var stringValue = "hello world"; 
alert(stringValue.charAt(1));   //"e"

字符串"hello world"位置 1 處的字符是”e”，因此調用 charAt(1)就返回了”e”。如果你想得到的不是字符而是字符編碼，那麼就要像下面這樣使用 charCodeAt()了。

var stringValue = "hello world";
alert(stringValue.charCodeAt(1)); //輸出"101"

這個例子輸出的是”101″，也就是小寫字母”e”的字符編碼。

ECMAScript 5 還定義了另一個訪問個別字符的方法。在支持此方法的瀏覽器中，可以使用方括號加數字索引來訪問字符串中的特定字符，如下面的例子所示。

var stringValue = "hello world";
alert(stringValue[1]);   //"e"

2.字符串操作方法

下面介紹與操作字符串有關的幾個方法。

concat()

用於將一或多個字符串拼接起來， 7 返回拼接得到的新字符串。先來看一個例子。

var stringValue = "hello ";
var result = stringValue.concat("world"); alert(result); //"hello world" alert(stringValue); //"hello"

在這個例子中，通過 stringValue 調用 concat()方法返回的結果是”hello world”——但 stringValue 的值則保持不變。實際上，concat()方法可以接受任意多個參數，也就是說可以通過它來拼接任意多個字符串。再看一個例子:

var stringValue = "hello ";
var result = stringValue.concat("world", "!");
alert(result); //"hello world!" 
alert(stringValue); //"hello"

這個例子將”world”和”!”拼接到了”hello”的末尾。雖然 concat()是專門用來拼接字符串的方法，但實踐中使用更多的還是加號操作符(+)。而且，使用加號操作符在大多數情況下都比使用 concat() 方法要簡便易行(特別是在拼接多個字符串的情況下)。

ECMAScript 還提供了三個基於子字符串創建新字符串的方法:slice()、substr()和 substring()。這三個方法都會返回被操作字符串的一個子字符串，而且也都接受一或兩個參數。第一個參數指定字符串的開始位置，第二個參數(在指定的情況下)表示字符串到哪裡結束。

具體來說，slice()和 substring()的第二個參數指定的是字符串最後一個字符後面的位置。

而 substr()的第二個參數指定的則是返回的字符個數。如果沒有給這些方法傳遞第二個參數，則將字符串的長度作為結束位置。

與 concat()方法一樣，slice()、substr()和 substring()也不會修改字符串本身的值——它們只是返回一個基本類型的字符串值，對原始字符串沒有任何影響。請看下面的例子。

ar stringValue = "hello world";
alert(stringValue.slice(3));//"lo world"
alert(stringValue.substring(3));//"lo world"
alert(stringValue.substr(3));//"lo world"
alert(stringValue.slice(3, 7));//"lo w"
alert(stringValue.substring(3,7));//"lo w"
alert(stringValue.substr(3, 7));//"lo worl"

這個例子比較了以相同方式調用 slice()、substr()和 substring()得到的結果，而且多數情況下的結果是相同的。在只指定一個參數3的情況下，這三個方法都返回"lo world"，因為"hello" 中的第二個"l"處於位置 3。而在指定兩個參數 3 和 7 的情況下，slice()和 substring()返回"lo w" (“world”中的”o”處於位置 7，因此結果中不包含”o”)，但 substr()返回"lo worl"，因為它的第二個參數指定的是要返回的字符個數。

在傳遞給這些方法的參數是負值的情況下，它們的行為就不盡相同了。其中，slice()方法會將傳入的負值與字符串的長度相加，substr()方法將負的第一個參數加上字符串的長度，而將負的第二個參數轉換為 0。最後，substring()方法會把所有負值參數都轉換為 0。下面來看例子

var stringValue = "hello world";
alert(stringValue.slice(-3));//"rld" 
alert(stringValue.substring(-3));//"hello world"
alert(stringValue.substr(-3)); //"rld"
alert(stringValue.slice(3, -4));//"lo w" 
alert(stringValue.substring(3, -4));//"hel"
alert(stringValue.substr(3, -4)); //""(空字符串)

這個例子清晰地展示了上述三個方法之間的不同行為。在給 slice()和 substr()傳遞一個負值參數時，它們的行為相同。這是因為-3 會被轉換為 8(字符串長度加參數 11+(3)=8)，實際上相當於調用了 slice(8)和 substr(8)。但 substring()方法則返回了全部字符串，因為它將-3 轉換成了 0。

當第二個參數是負值時，這三個方法的行為各不相同。slice()方法會把第二個參數轉換為 7，這就相當於調用了 slice(3,7)，因此返回”lo w”。substring()方法會把第二個參數轉換為 0，使調用變成了 substring(3,0)，而由於這個方法會將較小的數作為開始位置，將較大的數作為結束位置，因此最終相當於調用了 substring(0,3)。substr()也會將第二個參數轉換為 0，這也就意味着返回包含零個字符的字符串，也就是一個空字符串。

4.字符串位置方法

有兩個可以從字符串中查找子字符串的方法:indexOf()和 lastIndexOf()。這兩個方法都是從一個字符串中搜索給定的子字符串，然後返回子字符串的位置(如果沒有找到該子字符串，則返回-1)。這兩個方法的區別在於:indexOf()方法從字符串的開頭向後搜索子字符串，而 lastIndexOf()方法是從字符串的末尾向前搜索子字符串

indexOf()和lastIndexOf()

var stringValue = "hello world";
alert(stringValue.indexOf("o"));             //4
alert(stringValue.lastIndexOf("o"));         //7
alert(stringValue.indexOf("o", 6));         //7
alert(stringValue.lastIndexOf("o", 6));     //4

4.trim()方法

ECMAScript 5 為所有字符串定義了 trim()方法,刪除字符串的前後空格.

var stringValue = "   hello world   ";
var trimmedStringValue = stringValue.trim();
alert(stringValue);            //"   hello world   "
alert(trimmedStringValue);     //"hello world"

5.字符串大小寫轉換方法

ECMAScript 中涉及字符串大小寫轉換的方法有四個.toLowerCase()、toLocaleLowerCase()、toUpperCase()和 toLocaleUpperCase()。其中，toLowerCase()和 toUpperCase()是兩個經典的方法 ,而 toLocaleLowerCase()和 toLocaleUpperCase()方法則是針對特定地區的實現。對有些地區來說，針對地區的方法與其通用方法得到的結果相同，但少數語言(如土耳其語)會為 Unicode 大小寫轉換應用特殊的規則，這時候就必須使用針對地區的方法來保證實現正確的轉換.

var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase());  //"HELLO WORLD"
alert(stringValue.toUpperCase());        //"HELLO WORLD"
alert(stringValue.toLocaleLowerCase());  //"hello world"
alert(stringValue.toLowerCase());        //"hello world"

Date日期

ECMAScript 中的 Date 類型是在早期 Java 中的 java.util.Date 類基礎上構建的。為此，Date 類型使用自 UTC(Coordinated Universal Time，國際協調時間)1970 年 1 月 1 日午夜(零時)開始經過的毫秒數來保存日期。在使用這種數據存儲格式的條件下，Date 類型保存的日期能夠精確到 1970 年 1 月 1 日之前或之後的 285 616 年。

要創建一個日期對象，使用 new 操作符和 Date 構造函數即可，如下所示

var now = new Date([parameters]);

前邊的語法中的參數（parameters）可以是一下任何一種：

無參數 : 創建今天的日期和時間，例如： var today = new Date();.
一個符合以下格式的表示日期的字符串: “月日, 年時:分:秒.” 例如： var Xmas95 = new Date("December 25, 1995 13:30:00")。如果你省略時、分、秒，那麼他們的值將被設置為0。
一個年，月，日的整型值的集合，例如： var Xmas95 = new Date(1995, 11, 25)。
一個年，月，日，時，分，秒的集合，例如： var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);.

Date對象的方法

日期格式化方法

Date 類型還有一些專門用於將日期格式化為字符串的方法，這些方法如下。

toDateString()——以特定於實現的格式顯示星期幾、月、日和年;
toTimeString()——以特定於實現的格式顯示時、分、秒和時區;
toLocaleDateString()——以特定於地區的格式顯示星期幾、月、日和年;
toLocaleTimeString()——以特定於實現的格式顯示時、分、秒;
toUTCString()——以特定於實現的格式完整的 UTC 日期。

var myDate = new Date();

toDateString()

myDate.toDateString();//"Mon Apr 15 2019"

toTimeString()

myDate.toTimeString();//"10:11:53 GMT+0800 (中國標準時間)"

toLocaleDateString()

myDate.toLocaleDateString();//"2019/4/15"

toLocaleTimeString()

myDate.toLocaleTimeString();//"上午10:11:53"

toUTCString()

myDate.toUTCString();//"Mon, 15 Apr 2019 02:11:53 GMT"

栗子：返回了用數字時鐘格式的時間

var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
var temp = "" + ((hour > 12) ? hour - 12 : hour);
if (hour == 0)
    temp = "12";
temp += ((minute < 10) ? ":0" : ":") + minute;
temp += ((second < 10) ? ":0" : ":") + second;
temp += (hour >= 12) ? " P.M." : " A.M.";
alert(temp);

字符串和數值之間轉換

字符串轉數值

var str = '123.0000111';
console.log(parseInt(str));
console.log(typeof parseInt(str));
console.log(parseFloat(str));
console.log(typeof parseFloat(str));
console.log(Number(str));

數值轉字符串

var num  = 1233.006;
// 強制類型轉換
console.log(String(num));
console.log(num.toString());

// 隱式轉換
console.log(''.concat(num));

// toFixed()方法會按照指定的小數位返回數值的字符串 四捨五入
console.log(num.toFixed(2));

Globle對象

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

URI 編碼方法

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

其中，encodeURI()主要用於整個 URI(例如，[//www.apeland/web index.html](//www.apeland/web index.html))，而 encodeURIComponent()主要用於對 URI 中的某一段(例如前面 URI 中的 web index.html)進行編碼。它們的主要區別在於，encodeURI()不會對本身屬於 URI 的特殊字符進行編碼，例如冒號、正斜杠、問號和井字號;而 encodeURIComponent()則會對它發現的任何非標準字符進行編碼 ,看個例子

var url = `//www.apeland/web index.html`;
console.log(encodeURI(url));////www.apeland/web%20index.html
console.log(encodeURIComponent(url));//http%3A%2F%2Fwww.apeland%2Fweb%20index.html

使用 encodeURI()編碼後的結果是除了空格之外的其他字符都原封不動，只有空格被替換成了 %20。而 encodeURIComponent()方法則會使用對應的編碼替換所有非字母數字字符

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

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

window對象

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

var color = "red";
function sayColor(){
    alert(window.color);
}
window.sayColor();  //"red"

Math對象

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

1.Math 對象的屬性

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

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

2.min()和 max()方法

Math 對象還包含許多方法，用於輔助完成簡單和複雜的數學計算。

其中，min()和 max()方法用於確定一組數值中的最小值和最大值。這兩個方法都可以接收任意多個數值參數，如下面的例子所示

var max = Math.max(3, 54, 32, 16);
alert(max);    //54
var min = Math.min(3, 54, 32, 16);
alert(min);    //3

這兩個方法經常用於避免多余的循環和在 if 語句中確定一組數的最大值。

例子:

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

var values = [1,2,36,23,43,3,41];
var max = Math.max.apply(null, values);

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

3.舍入方法

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

Math.ceil()執行向上舍入，即它總是將數值向上舍入為最接近的整數;
Math.floor()執行向下舍入，即它總是將數值向下舍入為最接近的整數;
Math.round()執行標準舍入，即它總是將數值四捨五入為最接近的整數(這也是我們在數學課上學到的舍入規則)。

var num = 25.7;
var num2 = 25.2;
alert(Math.ceil(num));//26
alert(Math.floor(num));//25
alert(Math.round(num));//26
alert(Math.round(num2));//25

4.random()方法

Math.random()方法返回大於等於 0 小於 1 的一個隨機數

例子1:獲取min到max的範圍的整數


function random(lower, upper) {
	return Math.floor(Math.random() * (upper - lower)) + lower;
}

例子2: 獲取隨機顏色


/**
 * 產生一個隨機的rgb顏色
 * @return {String}  返回顏色rgb值字符串內容，如：rgb(201, 57, 96)
 */
function randomColor() {
	// 隨機生成 rgb 值，每個顏色值在 0 - 255 之間
	var r = random(0, 256),
		g = random(0, 256),
		b = random(0, 256);
	// 連接字符串的結果
	var result = "rgb("+ r +","+ g +","+ b +")";
	// 返回結果
	return result;
}

例子3: 獲取隨機驗證碼

function createCode(){
    //首先默認code為空字符串
    var code = '';
    //設置長度，這裡看需求，我這裡設置了4
    var codeLength = 4;
    //設置隨機字符
    var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');
    //循環codeLength 我設置的4就是循環4次
    for(var i = 0; i < codeLength; i++){
        //設置隨機數範圍,這設置為0 ~ 36
        var index = Math.floor(Math.random()*36);
        //字符串拼接 將每次隨機的字符 進行拼接
        code += random[index]; 
    }
    //將拼接好的字符串賦值給展示的Value
    return code
}

Tags: javascript Web全棧系列全棧前端