JavaScript常用物件介紹

小馬哥&發表於2020-10-14

物件(object)

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

物件的屬性:它是屬於這個物件的某個變數。比如字串的長度、陣列的長度和索引、影像的寬高等

物件的方法:只有某個特定屬性才能呼叫的函式。表單的提交、時間的獲取等。

由此可見,物件是由一些彼此相關的屬性和方法集合在一起而構成的一個資料實體。

物件的建立方式

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

  1. 建立Object例項的方式有兩種。第一種是使用new操作符後跟Object建構函式,如下所示:
//建立物件
var person = new Object();
//給物件新增name和age屬性
person.name = 'jack';
person.age = 28;
//給物件新增fav的方法
person.fav = function(){
    console.log('泡妹子');
}
  1. 使用物件字面量表示法。物件字面量是物件定義的一種簡寫形式,目的在於簡化建立包含大量屬性的物件的過程。
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
陣列建立方式
  1. 跟object建立物件一樣,使用Array建構函式方式建立,如下程式碼

    var colors = new Array();
    
  2. 使用字面量方式建立陣列

    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中。

  1. 刪除:可以刪除任意數量的項,只需指定2個引數:要刪除的第一項的位置和要刪除的個數。例如splice(0,2)會刪除陣列中的前兩項
  2. 插入:可以向指定位置插入任意數量的項,只需提供3個引數:起始位置0(要刪除的個數)要插入的項。如果要插入多個項,可以再傳入第四、第五、以至任意多個項。例如,splice(2,0,'red','green')會從當前陣列的位置2開始插入字串'red''green'
  3. 替換:可以向指定位置插入任意數量的項,且同時刪除任意數量的項,只需指定 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(例如,[http://www.apeland/web index.html](http://www.apeland/web index.html)),而 encodeURIComponent()主要用於對 URI 中的某一段(例如前面 URI 中的 web index.html)進行編碼。 它們的主要區別在於,encodeURI()不會對本身屬於 URI 的特殊字元進行編碼,例如冒號、正斜槓、 問號和井字號;而 encodeURIComponent()則會對它發現的任何非標準字元進行編碼 ,看個例子

var url = `http://www.apeland/web index.html`;
console.log(encodeURI(url));//http://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
}

相關文章