1. 程式人生 > >JavaScript第五章

JavaScript第五章

on() 分鐘 區別 edate number 配方法 標準 轉換 類型

引用類型

引用類型是一種將數據和功能組織在一起的數據結構。

引用類型:描述的是一類對象所具有的屬性和方法; 對象是某個特定引用類型的實例。

1.Object類型
創建Object實例的方法有兩種:

(1) new操作符後跟Object構造函數

(2) 使用對象字面量表示法,向函數傳遞大量可選參數的首選方式;var person = {}

對象字面量表示法:

對象的屬性名會自動轉換為字符串;
在函數內部,可以使用typeof 操作符來檢測每個屬性是否存在;

函數傳參技巧:對於必須值使用命名參數,使用對象字面量來封裝多個可選參數

訪問對象屬性:①點表示法: person.name ②方括號表示法:person["name"]

(使用方括號時,要將訪問的屬性以字符串或者變量的形式放入方括號中)

2.Array類型
數組:每一項都能保存任何類型的數據,大小可以動態調整;
創建數組的方法:

  • var color = new Array()new也可以省略;
  • 字面量表示法:最後一項後面不要跟逗號

使用構造函數創建時,可以向構造函數傳遞數組中的包含項、數組的長度(數字);包含項有多個,用逗號隔開;如果傳遞了一個值,數字的話就是指定的長度,其他類型的參數則創建包含那個值的數值
讀取和設置數組的值:使用方括號並提供索引,從0開始
如果將數組的length設置為大於項數的值,則新增的每一項都會取得undefined;
利用length屬性可以方便的在數組末尾添加新項var co = [1,2,3,3];co[co.length]=4;co[co.length]=5;

  1. 檢測數組
    Array.isArray()方法(ie9及以上),確定某個值到底是不是數組,而不管他是在哪個全局執行環境中創建的;instanceof對於單一的全局執行環境沒問題,但是如果有多個全局執行環境,就會存在兩個版本的Array構造函數。
  2. 轉換方法
    toString():返回由數組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串
    valueOf():返回的還是數組,
    toLocaleString():數組中每一項調用toLoacleString,然後逗號拼接上,

默認情況下會以逗號分隔字符串的形式返回數組項,如果使用join()方法,則可以指定分隔符構建字符串(只有一個參數,分隔符的字符串,不傳的話默認逗號分隔符)。若數組中的某一項為null或undefined,會返回空字符串

  1. 棧方法(後進先出方法)
    push():可以接收任意數量參數,然後將其逐個添加到數組末尾,並返回修改後的數值長度;pop()方法從數組末尾移除最後一項,減少數組長度,並返回移除項
  2. 隊列方法(先進先出)
    shift()移除數組的第一項並返回該項,將數組長度減一;unshift()在數組前端添加任意個項,並返回新數組長度;
  3. 重排序方法
    reverse():反轉數組項的順序;但是不夠靈活;如果只是想反轉數組原來的順序,使用這個較快;
    sort():默認情況下按升序排列數組項(調用每個數組項的toString方法,得到字符串,然後確定如何排序,默認會造成數字5在10的後面,因為比較的是字符串);
    sort 方法可以接收一個比較函數作為參數,比較函數接收兩個參數,返回結果為正負零;
  4. 操作方法(數值)
    concat()方法:不會改變原數組,會返回一個新構建的數組;
    slice()方法,基於當前數值的一個或多個項創建一個新數組,可以接收一或兩個參數(項的起始和結束位置),只有一個的話結束位置為數組末尾,兩個的話返回起始和結束位置的項,但不包括結束位置的項,不會影響原來的數值;如果有負數,則用數組長度加上該數確定相應位置,如果結束小於初始,則返回空數組
    splice()方法,向數組中部插入項,
    • 刪除任意數量的項,要刪除的第一項的位置和要刪除的項數
    • 插入:向指定的位置插入任意項,需提供三個參數:起始位置、0(要刪除的項數)和要插入的項,如果要插入多項,可以傳入第四、第五以至任意多項
    • 替換:參數為:起始位置,要刪除的項數和要插入的任意項,插入的項數不必與刪除的項數相等
      splice 始終會返回一個數組,該數組中包含從原始數值中的刪除項(如果刪除為0,則返回空數組)
  5. 位置方法
    indexOf()、lastIndexOf()方法,接收兩個參數:要查找的項與(可選的)查找的起始位置;
    indexOf(從0向後查找);
    lastIndexOf(從數值末尾開始向前查找)
    返回查找的項在數組中的位置,沒有的情況下返回-1;在比較是否相等是用的全等操作符(兩個對象,即使字段名、值都一樣,全等時也不相等)
  6. 叠代方法
    5個叠代方法。每個方法都接收兩個參數:要在每一項上運行的函數和(可選的)運行該函數的作用域對象——影響this的值;傳入這些方法的函數會接收三個參數:數組項的值,該項在數組中的位置和數組對象本身。
    • every 對數組中都每一項運行給定函數,如果每一項都返回true,則返回true
    • filter() 對數組中的每一項運行給定函數,返回該函數會返回true的項組成的數組
    • forEach()對數組的每一項運行給定函數。沒返回值
    • map() 對數組的每一項運行給定函數。返回每次函數調用的結果組成的數組
    • some() 對數組的每一項運行給定函數。如果該函數對任一項返回true,則返回true
      以上方法都不會修改函數中的包含值
  7. 縮小方法
    reduce()、reduceRight(),這兩個方法都會叠代數值的所有項,然後構建一個最終返回的值
    reduce 從第一項開始,逐個遍歷到最後
    reduceRight 從最後一項開始,向前遍歷
    接收參數為:一個每項調用的函數和(可選的)作為縮小基礎的初始值
    傳給reduce和reduceRight 的函數接收4個參數:前一個值、當前值、項的索引和數組對象。這個函數返回的任何值都會作為第一個參數自動傳給下一項

3. date類型
創建date對象:構造函數 new Date()
可以根據特定的日期和時間創建日期對象,必須傳入該日期的毫秒數,可以通過Date.parse()和Date.UTC(),日期對象在不同瀏覽器中表現不同,如果1 32,2007有的會解析成2 1,2007,但是有的會解析成當前時間

  • 其中parse()方法接收一個表示日期的字符串參數,然後嘗試根據這個字符串返回相應的日期的毫秒數。若傳入的字符串不能表示日期,則會返回NaN。實際上如果直接傳入字符串給new Date(),也會在後臺調用Date.parse();
  • Date.UTC() 也會返回表示日期的毫秒數,入參為 年份、月份(0-11)、天數(1-31)、小時(0-23)、分鐘、秒、毫秒。其中只有年月是必須的,沒有天數則為1,其他沒有則為0;
    Date()構造函數與Date.UTC()接收參數相同
    Date.now()方法,返回調用這個方法時的日期和時間的毫秒,在不支持它的瀏覽器中,使用+操作符將ate對象轉換成字符串,也是一樣的效果
    1. 繼承的方法
      與其他引用類型一樣,Date類型也重寫了toLocaleString(),toString()和valueOf()方法,其中valueOf 返回毫秒數,其他兩個返回字符串;Date類型可以使用比較操作符比較(會使用valueOf 轉化為毫秒數)
    2. 日期格式化方法
      toDateString()—— 以特定於實現的格式顯示星期幾、月、日和年
      toTimeString()—— 以特定於實現的格式顯示時、分、秒和時區
      toLocaleDateString()—— 以特定於地區的格式顯示星期幾、月、日和年
      toUTCString()—— 以特定於實現的格式完整的utc日期
    3. 日期、事件組件方法
  1. RegExp類型
    每個正則表達式都可帶有一個或多個標誌(flags),用於表明正則表達式的行為;有以下三個標誌:g(全局模式,被應用與所有字符串);i(不區分大小寫);m(多行模式,到達一行末尾還會繼續查找下一行
    正則表達式就是一個模式與上述標誌的組合體;
    正則表達式的元字符包括 ( | { \ ^ $ | ? * + . [ ] }
    模式中使用的元字符必須轉義(即要匹配元字符,用\ )

定義正則表達式

    • 字面量形式:var pattern = /[bc]at/i
    • 使用RegExp構造函數,接收兩個參數,一個是要匹配的字符串模式,另一個是可選的標誌字符串。var pattern1 = new RegExp("[bc]at","i");在構造函數中要對字符進行雙重轉義
      ECMAScript 3 中,每個正則表達式字面量始終會共享一個RegExp實例,而使用構造函數創建的每一個新RegExp實例都是新實例;對於字面量,第一冊調用test會找到cat,第二次會從上一次匹配的末尾開始,之後由於到了字符串末尾,下次調用test就又從開頭開始了。
  • var re = null,
  • i;
  • for (i = 0; i < 10;i++){
  • re = /cat/g;
  • re.test("catastrophe");
  • }
  • for (i = 0; i < 10; i++){
  • re = new RegExp("cat","g");
  • re.test("catastrophe");

}

ECMAScript 5明確規定,字面量和構造函數一樣,每次都新建RegExp實例

RegExp實例屬性

RegExp實例局域下列屬性
- global 布爾值,是否設置了g標誌
- ignoreCase 布爾值,是否設置了g標誌
- multiline 布爾值,是否設置了m標誌
- lastIndex 整數,表示開始搜索下一個匹配項的字符位置,從0算起
- source 正則表達式的字符串表示,按照字面量形式而非傳入構造函數中的字符串模式返回

RegExp 實例方法

exec(),該方法是專門為捕獲組而設計的;
exec()接受一個參數,即要應用模式的字符串,然後返回包含第一個匹配項信息的數組;沒匹配時返回null
返回的數值時Array實例,還包括兩個額外的屬性,index(匹配項在字符串的位置)和input(應用正則表達式的字符串)。數組中的第一項與整個模式匹配的字符串,其他項是與模式中的捕獲組匹配的字符串(如果模式中沒有捕獲組,則該數組只包含一項)

var text = "mom and dad and baby";

var pattern = /mom (and dad (and baby)?)?/gi;

var matches = pattern.exec(text);

alert(matches.index);

alert(matches.input);

alert(matches[0]);

alert(matches[1]);

alert(matches[2]);

不設置全局標誌的情況下,在同一個字符串上多次調用exec()將始終返回第一個匹配項的信息,而在設置全局標誌的情況下,每次調用exec()都會在字符串張繼續查找新匹配項

test()方法,只接受一個字符串參數,在模式與參數匹配的情況下返回true,否則返回false。常放在if語句中
RegExp實例繼承的toLocalString,toString 方法都會返回正則表達式的字面量,與創建正則表達式的方式無關
valueOf 返回正則表達式本身

RegExp構造函數屬性

這些屬性適用於作用域中的所有正則表達式,並且基於所執行的最近一次正則表達式操作而變化,可以通過長屬性名和短屬性名來訪問

長屬性名

短屬性名

說明

input

$_

最後一次匹配的字符串

lastMatch

$&

最後一次匹配項

lastParen

$+

最後一次匹配的捕獲組

leftContext

$`

input字符串中的lastMatch之前的文本

multiline

$*

布爾值,是否所有表達式都使用多行模式

rightContext

$’

input字符串中的lastMatch之後的文本

RegExp.$1-9,用於存儲第一、第二到第九匹配的捕獲組,在執行exec()或test()方法時,這些屬性自動填充

Function類型

每個函數都是Function類型的實例,與其他引用類型一樣具有屬性和方法(函數是對象,函數名實際是一個指向函數對象的指針,而不是綁定)。訪問函數的指針而不執行函數的話,必須去掉函數名後面的圓括號

function sum(){}

var sum = function(){};

var sum = new Function ()//不推薦

沒有重載
因為函數名只是指針,聲明兩個同名函數,後面的函數覆蓋了前面的函數(第二個變量覆蓋了第一個變量)
函數聲明和函數表達式
函數聲明:解析器率先讀取函數聲明,使其在執行任何代碼之前可用,至於函數表達式,必須等到解析器執行到它所在的代碼行,才會真正被解釋執行
上面不會報錯,而下面的寫法會報錯,因為執行到函數所在語句之前,變量sum中不會保存有對函數的引用

sum (10,10);

function(num1,num2){

return num1+num2;

}

var sum = function(num1,num2){

return num1+num2;

}

作為值的函數
函數名本身就是變量,所以函數也可以作為值來使用,不僅可以像傳遞參數一樣把一個函數傳遞給另一個函數,而且可以將一個函數作為另一個函數的結果返回
用於給sort函數傳入比較函數(比較規則,默認為toString方法確認順序)
函數內部屬性
arguments 和this 這兩個對象
- 其中arguments主要是用來保存函數參數,但這個對象還有一個callee的屬性,該屬性有一個指針,指向擁有這個arguments對象的函數;即arguments.callee() 指向原函數
- this–引用的是函數據以執行的環境對象(當在網頁的全局作用域中調用函數時,this對象引用的就是window)

window.color = "red";

var o = {color:"blue"};

function sayColor(){

console.log(this.color);

}

sayColor();//"red"

o.sayColor = sayColor;

o.sayColor();

ECMAScript 5規範了另一個函數對象的屬性:caller(調用當前函數的函數的引用,如果是在全局作用域中調用當前函數,值為null)
當在嚴格模式下時,arguments.callee會導致錯誤,arguments.caller也會報錯,與函數的caller不同,嚴格模式下也不能為函數的caller屬性賦值

函數的屬性和方法
每個函數都包含length(函數希望接收的命名參數的個數)和prototype(保存它們所有實例方法的真正所在),
在ECMAScript 5中,prototype屬性不可枚舉,for-in無法發現
每個函數都包含兩個非繼承而來的方法,apply()和call()
這兩個方法都是在特定作用域中調用的函數,實際上等於設置函數體內this對象的值;

  • apply()方法接收兩個參數:一個在其中運行函數的作用域,另一個是參數數組(可以使數組或arguments對象)
  • call()方法與apply方法作用相同,區別僅在於接收參數的方式不同,第一個參數是this,其余參數直接傳遞給函數
  • 這兩個函數強大的地方是能夠擴充函數賴以運行的作用域

window.color = "red";

var o = {color:"blue"};

function sayColor(){

console.log(this.color);

}

sayColor();//"red"

sayColor.call(this);//"red"

sayColor.call(window);//"red"

sayColor.call(o);//"blue"

使用這兩個方法來擴展作用域的最大好處,就是對象不需要與方法有任何耦合關系

  • ECMAScript 5還定義了一個方法,bind(),這個方法會創建一個函數實例,其中this會被綁定到傳給bind()函數的值

window.color = "red";

var o = {color:"blue"};

function sayColor(){

console.log(this.color);

}

var objectSayColor = sayColor.bind(o);

objectSayColor();//blue

  • toLocaleString 和toString 和valueOf方法始終都返回函數的代碼

基本包裝類型

3個特殊的引用類型Boolean、Number和String(每當讀取一個基本數據類型的時候,後臺就會創建一個對應的基本包裝類型的對象,從而可以調用一些方法來操作數據:步驟為:1.創建一個String類型的實例,2.調用指定方法3.銷毀實例)
引用類型和基本包裝類型
區別在於對象的生存期:引用類型的實例,在執行流離開當前作用域之前都一直保持在內存中;自動創建的基本包裝類型的對象,只在代碼執行的瞬間,之後立即銷毀;這意味著我們不能在運行時為基本類型添加屬性和方法;
對於基本包裝類型的實例調用typeof會返回“object”;布爾運算時所有對象都會被轉化為true
Object 構造函數也會向工廠方法一樣,返回相應基本包裝類型的實例
typeof(Number(value))//轉型函數,“number”;typeof(new Number(value)//構造函數,“object”;
Boolean類型

var bObject = new Boolean(true)

Boolean類型重寫了valueOf方法,返回基本類型true或false,重寫了toString()方法,返回字符串“true”“false”;
檢測布爾對象結果為(建議永遠不要使用Boolean對象) 重點內容

typeof falseObject; //object

typeof falseValue; //boolean

falseObject instanceof Boolean; //true

falseValue instanceof Boolean;//false

Number類型

var numberObject = new Number(10);

與Boolean類型類似也重寫了valueOf方法,返回基本類型的數值,重寫了toString()方法,返回字符串形式的數值;另外toString()還可以傳遞一個表示基數的參數,告訴返回幾進制數值的字符串;
數值格式化為字符串的方法
toFixed()方法
按照指定的小數位返回數值的字符串表示;傳入的數字表示幾位小數
toExponential()方法
傳入的參數表示輸出結果中的小數位數10.toExponential(1);//"1.0e+1"
toPrecision() 方法
可能返回固定大小格式(fixed),也可能返回指數格式(exponential)具體看哪種格式合適。該方法接受一個參數,表示所有數字的位數(不包含指數部分)
不建議直接實例化Number類型

var num = 99;

num.toPrecision(1);//"1e+2"

num.toPrecision(2);//"99"

num.toPrecision(3);//"99.0"

String 類型

可以使用構造函數創建

var stringObject = new String("hello world");

String 對象的方法可以在所有基本的字符串值訪問到。其中valueOf()、toLoacleString()、toString()方法,都返回對象表示的基本字符串值
length:即使字符串中包含雙字節字符(不是占一個字節的ASCII字符,每個字符仍然算一個字符,即”高興”.length;//2)
字符方法
訪問字符串中特性字符的方法:charAt()和charCodeAt(),參數為基於0的字符位置;
charAt() 以單字符字符串的形式返回給定位置的那個字符, "高興".charAt(1);//‘興‘
charCodeAt()返回字符編碼
字符串操作方法
concat:將一或多個字符串拼接其阿裏,返回新字符串(實踐中更多是用加號操作符)
slice、substr、substring方法,(可以接收一或兩個參數,不會改變原始字符串)第一個參數都是指定字符串的開始位置
其中slice和substring方法,第二個參數指定的是子字符串到哪裏結束,而substr則為返回的字符個數;如果沒有第二個參數,則將字符串的長度作為結束位置.
在傳遞參數為負值的時候,他們的行為不僅相同
其中slice()會將傳入的負值與字符串的長度相加,substr會將負的第一個參數加上字符串長度,負的第二個值轉換為0,substring會將所有的負值轉換為0;

substring(3,0)//這個方法會從較小的數開始,相當於substring(0,3),slice 不行;slice(4,3)會得到空字符串

字符串的位置方法
indexOf和lastIndexOf,從字符串中搜索給定的子字符串,然後返回子字符串的位置,如果沒有找到則返回-1;不過一個從前向後搜索(indexOf),一個從後向前(lastIndexOf)
可以接收第二個參數,表示字符串從哪個位置開始搜索
在使用第二個參數的情況下,可以通過循環調用indexOf或lastIndexOf來找到所有匹配的子字符串

//關鍵為

pos = stringValue.indexOf("e",pos+1);

trim()方法
會創建一個字符串的副本,刪除前置和後綴的所有空格,然後返回結果
字符串大小寫轉換方法
toLowerCase、toLocaleLowerCase、toUpperCase、toLocaleUpperCase
在不知道代碼將在哪種語言中運行時,使用這對時區的方法更為穩妥
字符串的模式匹配方法
match()方法,本質上和RegExp的exec()方法相同,這個方法只接受一個參數,要麽是正則表達式,要麽是一個RegExp對象;返回一個數組,與exec方法相同
search()方法,與match方法參數相同,返回字符串第一個匹配項的索引,如果沒有,將返回-1;始終是從字符串開頭向後查找模式

replace () 方法接收兩個參數:第一個參數可以是一個RegExp或字符串(不會被轉換成正則表達式),第二個參數可以是一個字符串或者函數,如果第一個參數是字符串,只會替換第一個子字符串,想要替換所有子字符串,只能提供一個正則表達式,而且要有全局指定標誌;第二個參數可以使字符串,也可以使一些特殊的字符序列;

字符序列

替換文本

$$

$

$&

匹配整個模式的字符串

$’

匹配子字符串之前的子字符串

$`

匹配子字符串之後的子字符串

$n

匹配第n個捕獲的子字符串,0~9,沒有定義捕獲組則是空字符串

$nn

匹配第nn個捕獲的子字符串,01~99沒有定義捕獲組則是空字符串

replace 方法的第二個參數可以是一個函數,在只有一個匹配項的情況下,向函數傳遞三個參數,模式的匹配項,其在字符串的位置,原始字符串
split方法
基於指定的分隔符將字符串分割為多個子字符串,並放入一個數值中,分隔符可以是字符串,也可以是RegExp對象,這個方法不會將字符串看成正則表達式,split可以接收第二個參數,用於指定數值的大小,以確保返回的數組不會超過既定大小
localeCompare 方法
比較兩個字符串,字符串在字母表中排在字符串參數之前,則返回一個負數,相等,則返回0,之後,則為正數
formCharCode方法
接收一或多個字符編碼,轉換成一個字符串,charCodeAt的反操作

單體內置對象

在ECMAScript執行前就有,不用顯示實例化
- Global對象
編碼方法
encodeURI()和encodeURIComponent()方法可以對URI進行編碼,以便發送給瀏覽器
encodeURI:主要用於整個uri,不會對本身屬於uri的特殊字符進行編碼,如冒號,正斜杠,問號和#號
encodeURIComponent:主要用於uri的某一段進行編碼,會對他發現的任何非標準字符進行編碼
對應解碼為decodeURI 和decodeURIComponent
eval()方法
只接受一個參數,要執行的ECMAScript字符串,像是一個完整的ECMAScript解析器
不要使用,在嚴格模式下,外部訪問不到任何在eval中創建的函數和變量
Global對象的屬性

屬性

說明

屬性

說明

undefined

特殊值undefined

Date

構造函數Date

NaN

特殊值NaN

RegExp

構造函數RegExp

Infinity

特殊值Infinity

Error

構造函數Error

Object

構造函數Object

EvalError

構造函數EvalError

Array

構造函數Array

RangeError

構造函數RangeError

Function

構造函數Function

ReferenceError

構造函數ReferenceError

Boolean

構造函數Boolean

SyntaxError

構造函數SyntaxError

String

構造函數String

TypeError

構造函數TypeError

Number

構造函數Number

URIError

構造函數URIError

window 對象
全局作用域中聲明的所有變量和函數,都成了window對象的屬性

Math對象

Math對象的屬性
E、LN10、LN2、LOG2E、LOG10E、PI、SQRT1_2、SQRT2
min和max方法
傳入任意多個數值參數
求數組的最大值、最小值Math.max.apply(Math,Array);
舍入方法
Math.ceil() 執行向上舍入
Math.floor() 執行向下舍入
Math.round() 執行標準舍入
random 方法

function (lower,upper){

var choice = upper - lower;

return Math.floor(Math.random()*choice+lower);

}

JavaScript第五章