js高級

第一章: JS簡介

? ? 從當初簡單的語言恋拍,變成了現(xiàn)在能夠處理復雜計算和交互垛孔,擁有閉包、匿名函數(shù)施敢,

? ? 甚至元編程等特性周荐。

要想全面理解和掌握JS,關(guān)鍵在于弄清楚它的本質(zhì)僵娃、歷史和局限性

1.JS簡史

? ? 客戶端語言---? 為了解決撥號概作,表單驗證緩慢的問題

? ? ECMAScript的新腳本語言的標準。

1.2 JS實現(xiàn)

? ? ? ? JS由三部分組成:核心(ECMAScript)默怨、文檔對象模型(DOM)讯榕、瀏覽器對象模型(BOM)

1.2.1 ECMAScript

? ? ECMAScript與Web瀏覽器無關(guān)。ECMAScript這門語言并不包含輸入和輸出定義,它只是基礎(chǔ)愚屁。

? ? 而Web瀏覽器是ECMAScript實現(xiàn)可能的宿主環(huán)境济竹。宿主環(huán)境不僅提供基本的ECMAScript實現(xiàn),

? ? 而且也會提供該語言的擴展--如DOM霎槐,提供了更多具體的功能送浊,以便實現(xiàn)各種操作。

ECMAScript只規(guī)定了下面:

? ? 1.語法

? ? 2.類型

? ? 3.語句

? ? 4.關(guān)鍵字

? ? 5.保留子

? ? 6操作符

? ? 7對象

1.2.2 文檔對象模型(DOM)

? ? 文檔對象模型是針對XML但經(jīng)過擴展用于HTML的應用程序編程接口(API)栽燕。DOM把整個頁面映射為

? ? 一個多層節(jié)點結(jié)構(gòu)罕袋。HTML或XML頁面的中的每個組成部分都是某種類型的節(jié)點。

? ? 用戶可以根據(jù)需求隨意控制任何節(jié)點碍岔。

1.為什么要使用DOM

? ? 由于瀏覽器不兼容的問題浴讯,擔心成為一種趨勢,制定一種標準能夠都兼容蔼啦,減少代碼量榆纽。

2.DOM級別

DOM1:DOM核心和DOM HTML。

DOM核心規(guī)定的是如何映射基于XML的文檔結(jié)構(gòu)捏肢,簡化對文檔結(jié)構(gòu)的操作奈籽。

DOM HTMl在核心加一擴展,添加了對HTML的對象和方法鸵赫。

? ? DOM2:在原來DOM基礎(chǔ)上擴充了鼠標和用戶界面事件衣屏、范圍、遍歷辩棒。

? ? DOM3:進一步擴展了DOM,引入了以統(tǒng)一方式加在和保存文檔的方法狼忱。

1.2.3 瀏覽器對象模型(BOM)

? ? ? ? ? 只處理瀏覽器窗口和框架。也習慣把所有針對瀏覽器的JS擴展放上去一睁,

? ? ? ? ? ? ? 擴展:? ? 1.彈出新瀏覽器窗口

? ? ? ? ? ? ? ? ? ? ? 2.移動钻弄、縮放和關(guān)閉

? ? ? ? ? ? ? ? ? ? ? 3.提供瀏覽器詳細信息

? ? ? ? ? ? ? ? ? ? ? 4.提供所加載頁面的詳細信息

? ? ? ? ? ? ? ? ? ? ? 5.提供分辨率信息

? ? ? ? ? ? ? ? ? ? ? 6.對cookie的支持

? ? ? ? ? ? ? ? ? ? ? 7.XMLHttpRequest 這樣的自定義對象。

小結(jié):

? ? ? ? JS是一種專為網(wǎng)頁交互而設(shè)計的腳本語言者吁,由三個不同的部分組成:

? ? ? ? ? ? 1.ECMAScript窘俺, 提供核心語言功能。

? ? ? ? ? ? 2.文檔對象模型:提供訪問和操作網(wǎng)頁內(nèi)容的方法和接口

? ? ? ? ? ? 3.瀏覽器對象模型:提供與瀏覽器交互的方法和接口

第二章? 在HTML中使用JS

? ? ? ? 如何讓JS既能與HTML頁面共存复凳,又不影響那些頁面在其他瀏覽器中的呈現(xiàn)效果瘤泪。

? ? 最佳的辦法是:添加同意的腳本支持。

2.1元素

? ? ? ? 六個屬性:? ? async:異步加載染坯,只對外部腳本有效均芽。

? ? ? ? ? ? ? ? ? ? ? ? ? ? 表示應該立即下載,但不應妨礙頁面其他操作单鹿,如下載資源或等待加載其他腳本

? ? ? ? ? ? ? ? charset:? 表示通過src屬性指定的代碼的字符集。

? ? ? ? ? ? ? ? defer:? ? 表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行深纲。

? ? ? ? ? ? ? ? src:? 資源文件仲锄。外部腳本文件劲妙。

? ? ? ? ? ? ? ? type:? ? 內(nèi)容類型。常用的 text/javascript

? ? ? ? ? ? ? ? language :廢棄

? ? 兩種使用方式: 直接嵌入儒喊、外部引入镣奋。

? ? 直接嵌入:

? ? ? ? 如果是一個函數(shù)定義,解釋器會解釋到一個函數(shù)的定義怀愧,然后將該定義保存到自己的環(huán)境中侨颈。

? ? ? ? ? ? 在解釋器對元素的內(nèi)部所有代碼求值完畢以前,其余內(nèi)容不會被加載芯义。

? ? 外部:

? ? ? ? 1.如果外部哈垢,同時在標簽中加入嵌入代碼,嵌入代碼會被忽略扛拨。

2.只要不存在defer和async屬性耘分,它會按照順序解析。

2.1.1 標簽位置:

慣例绑警,放在head中求泰。

壞處:1.必須等head中的JS全部下載,才會開始呈現(xiàn)內(nèi)容计盒。

? ? 為了避免渴频,會將JS放在body元素中的內(nèi)容后面。

2.1.2 延遲腳本:defer :放在底部比較好北启。

? ? ? ? 含義:腳本會被延遲到整個頁面都解析完畢后運行卜朗。(也就是遇到再執(zhí)行。)

? ? ? ? ? ? ? ? 一般但不保證一定暖庄,會先于DOMContentLoaded事件執(zhí)行聊替。

? ? defer只支持外部腳本,因此嵌入腳本有 defer,會忽略培廓。

2.1.3 異步腳本:async

? ? ? ? 異步加載一定會在頁面的load事件前執(zhí)行惹悄。 但可能會在DOMContentLoaded事件觸發(fā)之前或之后進行。

2.1.4 在XHTML中的用法

? ? ? ? 可擴展超文本標記語言(XHMTL)肩钠,是將HTML作為XML的應用重新定義的一個標準泣港。

? ? XHTML的語法規(guī)則是非常嚴格的。

2.2 嵌入代碼與外部文件

? ? ? ? 比較強調(diào)使用外部文件

? ? ? ? ? ? 可維護性

? ? ? ? ? ? 可緩存

? ? ? ? ? ? 適應未來

2.3 文檔模式

? ? ? ? 現(xiàn)在使用的是文檔類型(doctype)實現(xiàn)的价匠。

? ? ? ? 一般使用標準模式当纱。

? ? 文檔模式分為兩種:混雜模式和標準模式靶衍。? ? 如果不寫上面的話拾氓,默認開啟標準模式。

2.4

如何解決瀏覽器不支持JS時咒程,如何讓頁面平穩(wěn)退化:

? ?

? ? 情況? ? :1。不支持腳本

? ? ? ? ? 2.支持腳本箫柳,但腳本被禁用手形。

2.5 小結(jié)

第三章 基本概念

3.1 語法

3.1.1 區(qū)分大小寫

? ? ? ? 變量、函數(shù)名悯恍、操作符都區(qū)分大小寫库糠。

3.1.2 標識符

? ? ? ? 其實就是變量名,命名規(guī)則

3.1.4 嚴格模式

? ? ? ? 嚴格模式是為JS定義了一種不同的解析與執(zhí)行模型涮毫。對待一些不確定的行為瞬欧,將會進行處理,對不安全的

? ? ? ? 操作會拋出錯誤罢防。

? ? 方法:? 代碼頂部: "use strict";? 或者指定一個函數(shù)

? ? ? ? function doSomething(){

? ? ? ? ? ? “use strict”艘虎;

? ? ? ? }

? ? 這是一個編譯指示,切換到嚴格模式篙梢。? 嚴格模式下顷帖,JS執(zhí)行結(jié)果會有很大不同

3.1.5 語句

? ? ? ? 以;結(jié)尾。

3.2 關(guān)鍵字和保留子渤滞。

3.3 變量

? ? ? ? 變量時松散類型贬墩,即弱關(guān)系類型。指的是可以保存任何類型的數(shù)據(jù)妄呕。換句話說陶舞,每個變量僅僅是一個用于保存

? ? ? ? 值的占位符而已。

? ? var message:? 未經(jīng)初始化的變量绪励,會保存一個特殊的值undefined肿孵。

? ? 注意變量的作用域。

3.4 數(shù)據(jù)類型

? ? ? 五種簡單數(shù)據(jù)類型:Undefined|Null|Boolean|Number和String.

? ? ? 一種復雜數(shù)據(jù)類型:Object. 本質(zhì)上是由一組無序的名值對組成的疏魏。 不支持創(chuàng)建自定義類型的極致停做。

3.4.1 typeof 操作符

? ? ? ? 檢測給定變量的數(shù)據(jù)類型。

? ? 使用方法:? 他是一個操作符而不是函數(shù)大莫,因此例子中的圓括號盡管可以使用蛉腌,但不是必需的。

? ? ? ? var message="some string";

alert(typeof message);? ? //返回“string”

alert(typeof (message));? ? //返回...

alert(typeof 95);? ? ? ? ? ? //返回number

alert(typeof null);? ? ? ? //返回object. 因為把他看作是一個空的對象引用只厘。

3.4.2 Undefined類型

var message;

? ? ? ? alert(message);? //"undefined"

? ? ? ? alert(age);? ? //產(chǎn)生錯誤

? ? ? ? 上面的例子烙丛,包含undefined值的變量和尚未定義的變量還是不一樣的。

? ? ? ? 對于尚未聲明過的變量羔味,只能執(zhí)行一項操作河咽,即使用typeof操作符檢測其數(shù)據(jù)類型。

? ? ? ? 未初始化赋元、未聲明的變量使用typeof操作符同樣也會返回undefined值忘蟹。

? ? ? ? ? ? var message;

? ? ? ? ? ? alert(typeof message);? //'undefined'

? ? ? ? ? ? alert(typeof age);? //'undefined'

? ? ? ? 明智的做法:顯式地初始化變量飒房。當使用typeof時,這樣就能檢測出變量是沒有被聲明寒瓦,而不是尚未初始化情屹。

3.4.3 Null 類型

? ? ? ? ? ? Null類型是第二個只有一個值的數(shù)據(jù)類型坪仇,這個特殊的值是null杂腰。從邏輯上看,null值表示一個空對象指針椅文。

? ? ? ? ? ? ? ? var car=null;

? ? ? ? ? ? ? ? alert(typeof car);

? ? ? ? 如果定義的變量準備用來保存對象喂很,那么最好初始化為null. 這樣檢測值就能知道是否已經(jīng)保存了一個對象的引用

? ? ? ? ? ? if(car!=null)

? ? ? ? 實際上,undefined值是派生自null值的皆刺,因此:

? ? ? ? ? ? alert(null ==undefined;? //true

? ? ? ? 如果是對象少辣,記得聲明成null∠鄱辏可以區(qū)分null和undefined.

3.4.4 Boolean類型

? ? ? ? ? ? true和false漓帅,這兩個值與數(shù)字值不是一回事。true不一定等于1,false不一定等于0痴怨。

? ? ? ? 所有類型的值都有與這兩個Boolean值等價的值忙干。可使用Boolean();

? ? ? ? Boolean() 會自動轉(zhuǎn)換在if語句中浪藻。

? ? ? ? ? ? ? ? ? ? ? ? ? ? true? ? ? ? ? ? false

? ? ? ? ? ? ? ? String? ? ? 任何非空? ? ? ? ? 空字符

? ? ? ? ? ? ? ? Number? ? ? 任何非零數(shù)字值? ? ? 0或NaN

? ? ? ? ? ? ? ? Object? ? ? ? 任何對象? ? ? ? ? ? ? ? null

? ? ? ? ? ? ? ? Undefined? ? n/s? ? ? ? ? ? ? undefined

? ? ? ? ? ? eg:? var message="hello";

? ? ? ? ? ? ? ? ? if(message)? ? ? ? //這里使用了轉(zhuǎn)化 Boolean()

3.4.5 Number類型

? ? ? ? ? ? 表示整數(shù)和浮點數(shù)捐迫。

? ? ? ? 八進制:? 07;

? ? ? ? 十六進制? 0xAF;

? ? ? ? 注意永遠不要測試某個特定的浮點數(shù)值。

? ? ? ? if(a+b==0.3)? //不要這樣做爱葵,因為會有誤差施戴。 可能? 0.1+0.2的結(jié)果是=0。30000000000004

2.數(shù)值范圍

? ? ? ? Number.MIN_VALUE : 5e-324

? ? ? ? Number.MAX_VALUE:1.7976931348623157e+308

? ? ? ? 如果超出范圍會轉(zhuǎn)化成特殊的Infinity值萌丈。

? ? ? ? 確定有窮:isFinite()函數(shù)赞哗。

3.NaN(not a number)

? ? ? ? 非數(shù)值是一個特殊的數(shù)值,這個數(shù)值用于表示一個本來要返回數(shù)值的操作數(shù)未返回數(shù)值的情況辆雾。(這樣不會拋錯肪笋。)

? ? ? ? 特點:

? ? ? ? ? ? 1.任何涉及NaN的操作都會返回NaN。

? ? ? ? ? ? 2.NaN與任何值都不相等乾颁,包括NaN本身涂乌。

? ? ? ? ? ? ? ? alert(NaN ==NaN)? //false

? ? ? ? 針對這個定義了,isNaN();(是否為數(shù)值).他會嘗試這個值能否轉(zhuǎn)化為數(shù)值英岭。

? ? ? ? ? ? ? ? alert(isNaN(NaN));? //true

? ? ? ? ? ? ? ? alert(isNaN(10));? ? //false? (10是一個數(shù)值)

? ? ? ? ? ? ? ? alert(isNaN("blue"))? //true (不能轉(zhuǎn)化)

4.數(shù)值轉(zhuǎn)換

? ? ? ? 三個函數(shù)湾盒,把非數(shù)值轉(zhuǎn)化為 數(shù)值: Number()\parseInt()和parseFloat()。

? ? ? ? Number():有點復雜诅妹。

? ? ? ? parseInt():更常用: 從第一個非空格字符開始罚勾,如果不是數(shù)字毅人,返回NaN.可指定進制。

? ? ? ? parseFloat():和parseInt()類似尖殃,

3.4.6 String 類型

? ? ? ? ? ? 單雙引號都可以是字符串丈莺。

1.字符字面量

? ? ? ? String數(shù)據(jù)類型包含一些特殊的字符字面量,也叫轉(zhuǎn)義序列送丰,用于表示非打印字符缔俄。

2.字符串的特點:

? ? ? ? ECMAScript中的字符串是不可變的。一旦創(chuàng)建器躏,他們的值不可改變俐载。如果改變值,先銷毀登失,后用另一個包含

? ? ? ? 新值的字符串填充該變量遏佣。

3.轉(zhuǎn)換為字符串

? ? ? ? toString()方法:若使用參數(shù),代表進制揽浙。 不適用于null\undefined

? ? ? ? ? ? eg: var age=11;

? ? ? ? ? ? ? ? var ageString=age.toString();? ? // “11”? 無參數(shù)状婶。

? ? ? ? ? ? ? ? var ageString=age.toString(2);? //“01011”? 二進制

? ? ? ? String():可使用不知道要轉(zhuǎn)換的值是不是null或undefined的情況下馅巷。

? ? ? ? ? ? ? ? ? ? var value1=null;

? ? ? ? ? ? ? ? ? ? var value2=undefined;

? ? ? ? ? ? ? ? ? ? alert(String(value1));? ? //"null"

? ? ? ? ? ? ? ? ? ? alert(String(value2));? ? //"undefined"

3.4.7 Object類型

? ? ? ? ? ? var o=new Object();

? ? ? ? 其中膛虫,在ECMAScript中,Object類型是所有它的實例的基礎(chǔ)令杈。

? ? ? ? Object的每個實例都有的屬性和方法:

? ? ? ? ? ? 1.Constructor

? ? ? ? ? ? 2.hasOwnProperty("name")

? ? ? ? ? ? 3.isPrototypeOf(object)走敌。

? ? ? ? ? ? 4.propertyIsEnumerble("name"):檢查給定屬性能否使用for-in來枚舉。

? ? ? ? ? ? 5.toLocaleString()

? ? ? ? ? ? 6.toString()

? ? ? ? ? ? 7.valueOf()

3.5 操作符

? ? ? ? ? ? ECMAScript操作符的與眾不同之處在于逗噩,他們能夠適用于很多值掉丽,字符串、數(shù)字值异雁、布爾值捶障,甚至對象。

? ? ? ? ? ? 在使用對象時纲刀,通常會先調(diào)用對象的valueOf()和toString()

? ? 注意:一元加和減操作符

? ? ? ? 在對非數(shù)值應用一元加操作符時项炼,該操作符會想Number()轉(zhuǎn)型函數(shù)一樣對這個值執(zhí)行準換。

? ? ? ? ? ? var s1="01";

? ? ? ? ? ? var s3="z";

? ? ? ? ? ? s1=+s1;? ? //變?yōu)閿?shù)值1

? ? ? ? ? ? s3=+s3;? ? //變?yōu)镹aN.

3.5.4 乘性操作符

? ? ? ? ? ? 與JAVA不同的是示绊,操作數(shù)為非數(shù)值的情況下會執(zhí)行自動的類型轉(zhuǎn)換锭部。

3.5.7 相等操作符

? ? ? ? ? ==、C婧帧=,注意:

? ? ? ? ? ? ? ? 要比較相等性之前拌禾,不能將null和undefined轉(zhuǎn)換成其他任何值。

? ? ? ? ? ? ? ? ? ? ? ? null == 0? ? ? ? ? ? ? false

? ? ? ? ? ? ? ? ? ? ? ? undefined ==0? ? ? ? ? false

? ? ? ==\ === 不一樣展哭,兩個==轉(zhuǎn)換類型再比較湃窍,而===直接進行比較闻蛀。

? ? ? ? ? ? ? “55” == 55;? ? //true,因為轉(zhuǎn)換后想等

? ? ? ? ? ? ? "55" ===55;? ? //false,因為不同的數(shù)據(jù)類型不相等

3.5.8 條件操作符

? ? ? ? ? ? b= a?c:d;

3.5.9 賦值操作符

? ? ? ? ? ? 注意: x=y+7 等價于x=x(y+7)

3.5.10逗號操作符

? ? ? ? 用于賦值時您市,逗號操作符總會返回表達式中的最后一項觉痛。

? ? ? ? ? ? var num=(5,8,9,0);? //num=0

3.6 語句

? ? ? ? 3.6.4 for語句

? ? ? ? ? ? if語句:? 注意:? ECMAScript中不存在塊級作用域。因此在循環(huán)內(nèi)部定義的變量也可以在外部訪問到茵休。

? ? ? ? ? ? ? ? var count=10;

? ? ? ? ? ? ? ? for(var i=0;i

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? alert(i);

? ? 3.6.5 for-in語句:建議使用前薪棒,先確認該對象是不是null或undefined.

? ? ? ? for-in語句是一種精準的迭代語句,可以用來枚舉對象的屬性泽篮。

? ? ? ? ? ? for(var propName in window){

? ? ? ? ? ? ? ? document.write(propName);

? ? ? ? ? ? }

? ? ? ? ECMAScript對象的屬性沒有順序盗尸。因此,for-in輸出的順序是不可預測的帽撑。

3.7 break和continue語句

? ? 獨特的使用辦法:label語句,可以返回到代碼中特定的位置鞍时。

? ? ? ? ? ? var num=0;

? ? ? ? ? ? outermost:

? ? ? ? ? ? for(var i=0;i<10;i++){

? ? ? ? ? ? ? ? for(var j=0;j<10;j++){

? ? ? ? ? ? ? ? ? ? if(i==5 && j==5){

? ? ? ? ? ? ? ? ? ? ? ? break outermost;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? num++;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? alert(num);? ? //55

? ? ? ? ? ? 添加了標簽以后亏拉,會導致break語句不僅會退出內(nèi)部的for語句,也會退出外部的for語句逆巍。為此及塘,當變量i和

? ? ? ? ? ? j都等于5時。num等于55.

? ? ? ? ? ? var num=0;

? ? ? ? ? ? outermost:

? ? ? ? ? ? for(var i=0;i<10;i++){

? ? ? ? ? ? ? ? for(var j=0;j<10;j++){

? ? ? ? ? ? ? ? ? ? if(i==5 && j==5)

? ? ? ? ? ? ? ? ? ? continue outermost;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? num++;

? ? ? ? ? ? }

? ? ? ? ? ? alert(num);? ? //95

? ? ? ? ? ? 在這種情況下锐极,continue會強制繼續(xù)執(zhí)行循環(huán)————退出內(nèi)部循環(huán)笙僚,執(zhí)行外部循環(huán)。

? ? 謹慎使用label語句灵再,如果使用肋层,一定要使用描述性的標簽,同時不要嵌套過多的循環(huán)翎迁。

3.6.8? with語句 :? ? ? 大量使用會導致性能下降栋猖,調(diào)試困難。大程序不建議使用

? ? with語句的作用是將代碼的作用域設(shè)置到一個特定的對象中:

? ? ? ? with(expression) statement;

? ? 舉例汪榔,假如多次使用一個對象蒲拉,可以這樣用,用法:

? ? ? ? ? ? 原來:

? ? ? ? ? ? ? ? var qs=location.search.substring(1);

? ? ? ? ? ? ? ? var hostName=location.hostname;

? ? ? ? ? ? 更改后:

? ? ? ? ? ? with(location){

? ? ? ? ? ? ? ? var qs=search.substring(1);

? ? ? ? ? ? ? ? var hostName=hostname;

? ? ? ? ? ? }

3.6.9 switch 語句

? ? ? ? JS中的switch語句比其他語言強大很多痴腌。switch的表達式可以傳遞任何數(shù)據(jù)類型雌团。

? ? ? ? ? ? ? ? switch("hello world"){

? ? ? ? ? ? ? ? ? ? case "hello"+" world":

? ? ? ? ? ? ? ? ? ? ? ? alert("1");

? ? ? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? ? ? case "goodbye":

? ? ? ? ? ? ? ? ? ? ? ? alert("12");

? ? ? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? }

? ? 也可以當做if語句來使用。

? ? ? ? ? ? var num=25;

? ? ? ? ? ? swtich(true){

? ? ? ? ? ? ? ? case num<0:

? ? ? ? ? ? ? ? ? ? alert("1");

? ? ? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case nume>=0 &&num<=10:

? ? ? ? ? ? ? ? ? ? alert("12");

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? }

3.7 函數(shù)

? ? 在使用return;時士聪,將會返回一個undefined值锦援。這種用法一般用在需要提前停止函數(shù)執(zhí)行而又不需要返回值的情況下。

3.7.1 理解參數(shù)

? ? ECMAScript函數(shù)的參數(shù)與大多數(shù)語言中函數(shù)的參數(shù)不同戚嗅。它可以傳遞很多個參數(shù)雨涛,即使定義只定義了幾個枢舶。原因是ECMAScript中的參數(shù)在內(nèi)部是用一個數(shù)組(arguments)來表示。其實arguments對象只是與數(shù)組類似替久,因為可以使用方括號語法訪問他的每一個元素凉泄。

? ? 函數(shù)一個重要的特點:

? ? ? ? 1.命名的參數(shù)只提供便利,但不是必須的蚯根。

? ? ? ? 2.此外后众,arguments對象可以與命名參數(shù)一起使用。

? ? ? ? 3.arguments的值永遠與對應命名參數(shù)的值保持同步:當修改arguments的值颅拦,命名參數(shù)值也會改變蒂誉。但是命名參數(shù)改變,

? ? ? ? ? ? arguments的值不會改變距帅。

? ? ? ? 4.當你只傳入一個參數(shù)時右锨,那么修改arguments[1],并不會影響第二個命名參數(shù)。因為arguments對象長度由傳入?yún)?shù)決定

? ? ? ? ? ? 而不是由定義函數(shù)時的命名參數(shù)的個數(shù)決定的碌秸。

? ? ? ? 5.沒有傳遞值的命名參數(shù)自動被賦予undefined绍移。

ECMAScript中的所有參數(shù)傳遞的都是值,不可能通過引用傳遞參數(shù)讥电。

3.7.2 沒有重載

? ? ? ? 如果有兩個同名函數(shù)蹂窖,則該名字只屬于后定義的函數(shù)。

第四章? 變量恩敌、作用域和內(nèi)存問題

4.1 基本類型和引用類型的值

? ? ? ? 基本類型值指的是簡單的數(shù)據(jù)段瞬测。

? ? ? ? 引用類型值指的是那些可能由多個值構(gòu)成的對象。

4.1.1 動態(tài)的屬性

? ? ? ? 只能為引用類型的值動態(tài)添加屬性纠炮,普通的數(shù)據(jù)類型不能添加屬性月趟。

? ? ? ? ? ? var name="NAC";

? ? ? ? ? ? ? ? name.age=27;? //錯誤的

4.1.2 復制變量值

? ? ? ? 基本數(shù)據(jù)類型是復制一個副本,對象是引用抗碰,復制的是一個指針狮斗,指向同一個對象。

4.1.3 傳遞參數(shù)

? ? ? ? 值傳遞:復制一個副本弧蝇。

? ? ? ? 指針傳遞:是特殊的值傳遞碳褒,它可以改變指向?qū)ο蟮闹担部梢愿淖冎赶虻膶ο蟆?/p>

? ? ? ? 引用傳遞:可以改變指向?qū)ο蟮闹悼戳疲遣荒芨淖冎赶虻膶ο笊尘菍ο蟮膭e名。

4.1.4 檢測類型

? ? ? ? 使用typeof

? ? instanceof

4.2 執(zhí)行環(huán)境及作用域

? ? ? ? 執(zhí)行環(huán)境定義了變量或函數(shù)有權(quán)訪問的其他數(shù)據(jù)两芳,決定它們各自的行為摔寨。 每個執(zhí)行環(huán)境都有一個與之關(guān)聯(lián)的變量對象,環(huán)境

? ? ? ? 中定義的所有變量和函數(shù)都保存在這個對象中怖辆。雖然我們編寫的代碼無法訪問這個對象是复,但解析器在處理數(shù)據(jù)時會在后臺

? ? ? ? 使用它删顶。

? ? 全局執(zhí)行環(huán)境是最外圍的一個執(zhí)行環(huán)境。不同的宿主環(huán)境淑廊,表示執(zhí)行環(huán)境的對象也不一樣逗余。在web中,全局執(zhí)行環(huán)境被認為

? ? window對象季惩,所有的全局變量和函數(shù)都作為window對象的屬性和方法創(chuàng)建的录粱。

? ? 當代碼在一個環(huán)境中執(zhí)行時,會創(chuàng)建變量對象的一個作用鏈画拾。作用鏈的用途啥繁,是保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的

? ? 有序訪問。作用域鏈的前端青抛,始終都是當前執(zhí)行的代碼所在環(huán)境的變量對象旗闽。如果這個環(huán)境是函數(shù),則將其活動對象作為變量對象脂凶,即arguments對象宪睹。一級一級的包含。

? ? 標識符解析是沿著作用域鏈一級一級地搜索標識符的過程蚕钦。搜索過程使用從前段開始,然后逐漸向后回溯鹅很。

? ? 此外嘶居,在局部作用域中定義的變量可以在局部環(huán)境中與全局變量互換使用。

? ? 內(nèi)部環(huán)境可以通過作用域鏈訪問所有的外部環(huán)境促煮,但外部環(huán)境不能訪問內(nèi)部環(huán)境中任何變量和函數(shù)邮屁。

4.2.1 延長作用域鏈

? ? ? ? 有一些辦法可以延長作用鏈,會在作用鏈的前端臨時增加一個變量對象菠齿,使用完后移除佑吝。

? ? 兩種情況:

1.try-catch的catch塊:會創(chuàng)建一個新的變量對象,其中包含錯誤對象的聲明绳匀。

2.with語句: 會將制定的對象添加到作用域鏈中芋忿。

? ? ? ? ? ? function buildUrl(){

? ? ? ? ? ? ? ? var qs="?debug=true";

? ? ? ? ? ? ? ? with(location){

? ? ? ? ? ? ? ? ? ? var url=href+qs;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? return url;

? ? ? ? ? ? }

? ? ? ? 在這個函數(shù)中,首先with函數(shù)接受了location對象疾棵,把它放在了作用鏈的前端戈钢,并且引用它的屬性href(location.

? ? ? ? href)。使用了with后是尔,內(nèi)部url殉了,可以被外部執(zhí)行環(huán)境接受。

4.2.2 沒有塊級作用域

? ? ? ? if(true){

? ? ? ? ? ? var color="blue";

? ? ? ? }

? ? ? ? alert(color);? //"blue"

? ? ? ? 在c語言中,color在if中執(zhí)行完后拟枚,會銷毀薪铜。后面會報錯众弓。而在JS中,if聲明的變量會添加到當前的執(zhí)行環(huán)境隔箍。

? ? ? ? ? ? 再舉例谓娃,

? ? ? ? for(var i=0;i<10;i++){

? ? ? ? }

? ? ? ? alert(i);? ? //10

? ? ? ? 對于有塊級作用域的語言,for所定義的變量只存在循環(huán)中鞍恢。而在JS中傻粘,執(zhí)行完for,依然存在。

? ? 1.聲明變量

? ? ? ? 使用var 聲明的變量會自動被添加到最接近的環(huán)境中帮掉。

? ? 2.查詢標識符

? ? ? ? 從作用鏈前端開始查詢弦悉,查詢到停止。

4.3 垃圾收集

? ? ? ? JS具有自動垃圾收集機制蟆炊,也就是說稽莉,執(zhí)行環(huán)境會負責管理代碼執(zhí)行過程中使用的內(nèi)存。

? ? 垃圾收集器會按照固定的時間間隔涩搓,周期性地執(zhí)行這一操作:找出不再繼續(xù)使用的變量污秆,然后釋放其占用的內(nèi)存。

? ? 工作機制:垃圾收集器必須追蹤哪個變量游泳哪個變量沒用昧甘,對于不再有用的變量搭上標記良拼,以備將來回收,有兩種

? ? 策略充边。

4.3.1? 標記清除

? ? ? ? 垃圾收集器在運行的時候會給儲存在內(nèi)存中的所有變量都加上標記庸推。然后,他會去掉環(huán)境中的變量以及被環(huán)境中的變量引用的變量的標記浇冰。而在此之后再被加上標記的變量將視為準備刪除的變量贬媒。

4.3.2 引用計數(shù)

? ? ? ? 另一種不太常見的垃圾手機策略叫做引用計數(shù)。含義是跟蹤記錄每個值被引用的次數(shù)肘习。

? ? 當一個值被變量引用時际乘,則該值的引用次數(shù)加1。當變量的值被其他值所取代漂佩,引用數(shù)減1.

? ? ? ? 當變?yōu)?時脖含,說明無法再訪問這個值,當垃圾收集器下次運行時仅仆,他會釋放引用為0的內(nèi)存器赞。

? ? 循環(huán)引用:會導致無法銷毀內(nèi)存,所以不再采用墓拜。

? ? BOM和DOM中的對象就是使用C++以COM對象的形式實現(xiàn)的港柜,c++采用引用計數(shù),當IE中涉及COM對象,就會存在循環(huán)引用的問題夏醉。

? ? 后來改版后爽锥,DOM和BOM都轉(zhuǎn)換成了JS對象,避免了常見的內(nèi)存泄漏畔柔。

4.3.3 性能問題

4.3.4 管理內(nèi)存

? ? ? ? 分配給Web瀏覽器的可用內(nèi)存數(shù)量通常比程序的少氯夷。目的是處于安全方面的考慮,目的防止運行的網(wǎng)頁耗盡呢堃導致系統(tǒng)崩潰靶擦。內(nèi)存限制不僅影響給變量分配內(nèi)存腮考,同時還影響一個線程中同時執(zhí)行的語句數(shù)量。

? ? 因此玄捕,優(yōu)化內(nèi)存最佳的方式踩蔚,就是為執(zhí)行中的代碼只保存必要數(shù)據(jù),一旦數(shù)據(jù)不用枚粘,設(shè)為null馅闽,來釋放引用---解除引用。 這適用于大多數(shù)全局變量和全局對象的屬性馍迄。

4.4 小結(jié):

? ? 1.基本類型值在內(nèi)存中占據(jù)固定大小的空間福也,因此被保存在棧內(nèi)存中。

? ? 2.飲用類型的值是對象攀圈,保存在堆內(nèi)存中暴凑。

第五章 引用類型

? ? ? ? 在JS中,引用類型是一種數(shù)據(jù)結(jié)構(gòu)赘来,用于將數(shù)據(jù)和功能組織在一起搬设。常被稱為類。但它不具備傳統(tǒng)的面相對象語言所支持的類和接口等基本結(jié)構(gòu)撕捍。

5.1 Object 類型

? ? ? ? 到目前為止,我們看到的大多數(shù)引用類型值都是object類型的實例泣洞。

? ? var person=new Object();

? ? person.name="nicho";

? ? person.age=29;

? ? 另一種是使用對象字面量表示法忧风,簡寫形式,目的在于簡化創(chuàng)建包含大量屬性的對象球凰。

? ? ? ? var person={

? ? ? ? ? ? name:"nico",

? ? ? ? ? ? age:29,

? ? ? ? ? ? 5:true? ? ? //5回自動轉(zhuǎn)換成字符串

? ? ? ? };

可以為空:

var person={};? ? ? //花括號代表對象狮腿。()代表數(shù)組。

? ? 可使用對象字面量向函數(shù)傳遞大量可選參數(shù)的首選方式呕诉。

? ? ? ? function displayInfo(args){

? ? ? ? ? ? var output="";

? ? ? ? ? ? if(typeof args.name=="string"){

? ? ? ? ? ? ? ? output+=args.name;

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? displayInfo({

? ? ? ? ? ? name:"nico",

? ? ? ? ? ? age:29

? ? ? ? });

訪問屬性: person["name"]? ? person.name;

第一種方括號語法的優(yōu)勢是通過變量名訪問缘厢、易出錯的屬性名訪問:

? ? ? ? var pro="name";

? ? ? ? person[pro];

? ? ? ? person["first name"]? ? //有空格

5.2 Array類型

? ? ? ? 在JS中,數(shù)組每一項能夠裝任何數(shù)據(jù)類型甩挫。如:第一個裝數(shù)組贴硫,第二個裝對象。

? ? ? ? 并且自動增加數(shù)組大小。

? ? var colors=new Array();

? ? var colors=new Array(20);

? ? var colors=new Array("hello","wolrd",50);

? ? var colors=Array();

? ? //數(shù)組字面量法英遭。

? ? var colors=[];? ? ? //方括號是數(shù)組间护,花括號是對象

? ? var colors=[“world”,123];

? ? 數(shù)組的索引值很有意思挖诸。如果超出現(xiàn)有l(wèi)engh汁尺,會自動增加到該索引值加1.

? ? lengh 的值是可以改變的,增加這個值多律,改變數(shù)組大小痴突。(增大或減小)

? ? ? ? var colors=['red','blue'];

? ? ? ? colors[colors.length]='black';? //在位置2添加狼荞,

? ? ? ? colors[colors.length]='brown‘辽装;? //在位置3添加扛点。

5.2.1 檢測數(shù)組

? ? if(value instanceof Array){

? ? }

? ? 但是instanceof有問題的是丈秩,如果網(wǎng)頁有多個框架,兩個框架間傳遞值奢人,可能Array構(gòu)造函數(shù)不同攻走。

? ? 更好的辦法是: Array.isArray();

? ? ? ? if(Array.isArray(value))? ? //php中是 is_array(value);

5.2.2 轉(zhuǎn)換方法

? ? ? ? var colors=['red','blue'];

? ? ? ? alert(colors.toString());? ? //red,blue? 這個方法以逗號分隔字符串殷勘。

? ? ? ? alert(colors.valueOf());? ? ? //red,blue? 返回數(shù)組,后調(diào)用toString

? ? ? ? alert(colors)? ? ? ? ? ? ? ? //red,blue? ? 因為調(diào)用alert昔搂,會后臺調(diào)用toString

? ? alert(colors.join(','))? ? ? //red,blue

? ? alert(colors.join('||'))? ? //red||blue

5.2.3 棧方法

? ? ? ? jS提供了讓數(shù)組類似于棧的行為玲销。 后進先出。? push\pop

? ? var colors=new Array();

? ? var count=colors.push("red","black");? //返回數(shù)組長度

? ? alert(count);? ? ? //2

? ? count=colors.push("blk");

? ? alert(count);? ? ? //3

? ? var item=colors.pop();

alert(item);? ? ? ? ? //blk

alert(colors.length);? //2

5.2.4 隊列方法

先進先出? push \shift

? ? var colors=new Array();

? ? var count=colors.push("red","black");? //返回數(shù)組長度

? ? alert(count);? ? ? //2

? ? count=colors.push("blk");

? ? alert(count);? ? ? //3

? ? var item=colors.shift();

alert(item);? ? ? ? ? //"red"

alert(colors.length);? //2

? ? unshift():它能在數(shù)組前端添加任意個項并返回新數(shù)組的長度

? ? pop():從數(shù)組后端取出數(shù)據(jù)摘符。

? ? 這模擬了反向隊列贤斜。

? ? var colors=new Array();

? ? var count=colors.push("red","black");

? ? alert(count);? ? ? //2

? ? count=colors.unshift("green");? ? ? green red black

? ? alert(count);? ? ? ? ? ? //3

? ? var item=colors.pop();

alert(item);? ? ? ? ? //"black"

alert(colors.length);? //2

5.2.5 重排序方法:

reverse(): 反轉(zhuǎn)數(shù)組項的順序

? ? sort():默認會為每個數(shù)組項調(diào)用toString()方法,之后對字符串進行比較逛裤。

? ? ? ? var values=[0,1,5,10,15];

? ? ? ? values.sort();

? ? ? ? alert(values);? //0,1,10,15,5

? ? sort()可以接受一個比較函數(shù):

? ? ? ? function compare()

sort(compare);? ? ? ? ? ? //和java中的排序樹類似瘩绒。

5.2.6 操作方法

concat()? 無參,只是復制副本带族,返回新數(shù)組

有參锁荔,復制,若第二個參數(shù)為數(shù)組蝙砌,每一項添加到副本中阳堕,若不是,簡單添加择克。

? ? slice()? 它能夠基于當前數(shù)組中的一個或多個項創(chuàng)建一個新數(shù)組恬总。

? ? ? ? ? ? ? ? 返回從初始位置到結(jié)束位置之間的項。

? ? splice()? ? 主要用途向數(shù)組的中部插入項

? ? ? ? ? ? ? ? 1.刪除? splice(index,length)? ? ? ? ? ? ? ? splice(0,2)

? ? ? ? ? ? ? ? 2.插入多個項? splice(index,length,value1,value2...)? splice(2,0,value,value2)

? ? ? ? ? ? ? ? 3.替換? ? ? ? splice(2,1,value,value2)

? ? ? ? ? ? ? ? 返回一個數(shù)組肚邢,該數(shù)組中包含從原始數(shù)組中刪除的項

? ? ? ? var colors=["red","green","blue"];

? ? ? ? var remove=colors.splice(0,1);

? ? ? ? alert(colors);? ? ? ? ? ? ? ? ? ? //greem blue

? ? ? ? alert(removed);? ? ? ? ? ? ? ? ? ? //red

? ? ? ? var remove=colors.splice(1,0,"yellow","orange");

? ? ? ? alert(colors);? ? ? ? ? ? ? ? ? ? //green yello orange blue

? ? ? ? alert(removed);? ? ? ? ? ? ? ? ? ? //空數(shù)組

? ? ? ? var remove=colors.splice(1,1,"red","purple");

? ? ? ? alert(colors);? ? ? ? ? ? ? ? ? ? //green red purple orange blue

? ? ? ? alert(removed);? ? ? ? ? ? ? ? ? ? //yellow

5.27 位置方法

? ? ? ? ? ? indexOf(searchString)\lastIndexOf(searchString).

? ? ? ? ? ? 要查找的項在數(shù)組中的的位置壹堰。

? ? ? ? 都是嚴格查找,使用===.

? ? ? ? var numbers=[1,2,3,4,5,4,3,2,1];

? ? ? ? alert(numbers.indexOf(4));? ? ? ? ? //3

? ? ? ? alert(number.lastIndexOf(4));? ? ? ? //5

? ? ? ? alert(numbers.indexOf(4,4));? ? ? ? //5,? 從4開始往后查找。

? ? ? ? alert(number.lastIndexOf(4,4));? ? ? ? //3? 從位置4開始從后往前查缀旁。

? ? ? ? var person={name:"nice"};

? ? ? ? var people=[{name:"nice"}];

? ? ? ? var morePeople=[person];

? ? ? ? alert(people.indexOf(person));? ? //-1? ? ? ? person和people不是一個對象

? ? ? ? alert(morePeople.indexOf(person));? //0

5.2.8 迭代方法

? ? ? ? 5個方法:每個方法都接受兩個參數(shù):要在每一項上運行的函數(shù)和運行該函數(shù)的作用域?qū)ο蟆绊憈his的值记劈。

? ? ? ? ? ? every():? 如果該函數(shù)每一項都返回true,則返回true

? ? ? ? ? ? filter(): 返回true的項組成的數(shù)組

? ? ? ? ? ? forEach():? 無返回值

? ? ? ? ? ? map()? ? ? ? 返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組并巍。

? ? ? ? ? ? some():? 如果該函數(shù)的任一項返回true,則返回true目木。

? ? ? ? every()和some()比較:

? ? ? ? ? ? var numbers=[1,2,3,4,5,4,3,2,1];

? ? ? ? ? ? var everyResult=numbers.every(function(item,index,array){

? ? ? ? ? ? ? ? return (item>2);

? ? ? ? ? ? });

? ? ? ? ? ? alert(everyResult); //false

? ? ? ? ? ? var someResult=numbers.some(function(item,index,array){

? ? ? ? ? ? ? ? return (item>2);

? ? ? ? ? ? });

? ? ? ? ? ? alert(someResult); //true

? ? ? ? filter():過濾函數(shù),通過函數(shù)懊渡,篩選出符合條件的項刽射。

? ? ? ? ? ? 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():返回函數(shù)運行的結(jié)果

? ? ? ? ? ? var numbers=[1,2,3,4,5,4,3,2,1];

? ? ? ? ? ? var mapResult=numbers.map(function(item,index,array){

? ? ? ? ? ? ? ? return (item*2);

? ? ? ? ? ? });

? ? ? ? ? ? alert(filterResult);? //[2,4,6,8,10,8,6,4,2]

? ? ? ? foreEach():和for循環(huán)沒什么區(qū)別,

5.2.9 縮小方法

? ? ? ? ? ? reduce()\reduceRight()? 從頭到尾|從尾到頭

? ? ? ? 迭代所有的項剃执,然后構(gòu)件一個最終返回的值誓禁。

? ? ? ? reduce(): 他的第一個參數(shù)是前一項的函數(shù)運行的結(jié)果

? ? ? ? ? ? var values=[1,2,3,4,5];

? ? ? ? ? ? var sum=values.reduce(function(prev,cur,index,array){

? ? ? ? ? ? ? ? return prev+cur;

? ? ? ? ? ? });

? ? ? ? ? ? alert(sum);? ? //15

5.3 Date類型

? ? ? ? ? ? var now=new Date();? //自動獲取當前日期和時間。

? ? ? ? 兩個方法幫助創(chuàng)建日期對象:Date.parse()和Data.UTC();? 都是格林尼治時間

? ? ? ? Date.parse():

? ? ? ? ? ? var someDate=new Date(Date.parse("May 25,2004"));

? ? ? ? 等價于

? ? ? ? ? ? var someDate=new Date("May 25,2004");? //自動調(diào)用Date.parse():

? ? ? ? Data.UTC(): 使用不同的參數(shù)肾档,其他沒什么不同

? ? ? ? ? ? //2000年1月1日0點0分

var y2k=new Date(Date.UTC(2000,0));

? ? ? ? ? ? //2005.5.5,17:55:55

? ? ? ? ? ? var allfiv=? ? new Date(Date.UTC(2005,4,5,17,55,55));? //月摹恰、小時從0計數(shù)

? ? ? ? 本地時間:

? ? ? ? ? ? var data=new Date(2000,5);

? ? ? ? Date.now() 返回此時的毫秒數(shù)。

5.3.1 繼承的方法

5.4 RegExp類型

? ? ? ? var expression=/pattern/flags;

? ? flag: g: 全局模式怒见,即搜索全局俗慈,才返回,而不是查找到第一個就返回

? ? ? ? ? i :不區(qū)分大小寫

? ? ? ? ? m:表示多行遣耍,即在一行文本末尾是否會繼續(xù)查找下一行闺阱。

? ? 字面量形式:

? ? ? ? ? var pattern1=/at/g;? ? ? //查找包含at的所有

? ? ? ? ? var pattern2=/[bc]at/i;? ? //查找bat或cat的匹配項,不區(qū)分大小寫

? ? ? ? ? var pattern3=/.at/gi;? ? //查找所有以at結(jié)尾的三個字符的組合舵变,不區(qū)分大小寫

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //這里的.不是元字符酣溃,指的是任意一個字符。想要表示.纪隙,需要轉(zhuǎn)義

? ? 所有的元字符必須轉(zhuǎn)義赊豌。有:

? ? ? ? ([{ \ ^ $ | ) ? * + . ] }

? ? 如:

? ? ? ? var pattern2=/\[bc\]at/i;? ? 匹配第一個“[bc]at”,不區(qū)分大小寫绵咱。

? ? ? ? ? var pattern3=/\.at/gi;? ? ? 查找所有以".at"的組合亿絮,不區(qū)分大小寫

? ? 構(gòu)造函數(shù)方式:

var pattern2=new RegExp("[bc]at","i");

? ? ? ? ? ? //注意:這里傳入的字符串,那么想要使用特殊的字符就需要雙重轉(zhuǎn)義麸拄,才能變成字面量的模式。

? ? ? ? ? ? 字面量模式? ? ? ? ? ? ? 等價的字符串

? ? ? ? ? ? /\[bc\]at/? ? ? ? ? ? ? “\\[bc\\]at”

? ? ? ? ? ? \.at? ? ? ? ? ? ? ? ? ? "\\.at"

? ? ? ? ? ? \w\\hello\\123? ? ? ? ? "w\\\\hello\\\\123"

? ? ? ? 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");

? ? ? ? ? }

? ? ? ? ? 第一種黔姜,實際上只產(chǎn)生了一個RegExp實例拢切。由于實例屬性不會重置,第二次會從索引值為3的字符開始的。

? ? ? ? 而使用構(gòu)造函數(shù)秆吵,則每次會創(chuàng)建新的實例淮椰。

5.4.1 RegExp 實例屬性

? ? global: 是否設(shè)置g標志。

? ? ignoreCase:是否設(shè)置i標志。

? ? lastIndex: 表示開始搜索下一個匹配項的字符位置主穗。

? ? multiline:是否設(shè)置了m標志

? ? source:正則表達式字符串表示泻拦,會返回字面量形式。

5.4.2 RegExp 實例方法

? ? RegExp對象的主要方法是exec()忽媒。

使用全局變量g后争拐,執(zhí)行exec()函數(shù)會返回字符串中的下一個匹配項,直到末尾晦雨。

var text="cat,bat,sat,fat";

var pattern1=/.at/;

var match=pattern1.exec(text);

alert(matches.index);? ? ? ? //0

alert(matches[0]);? ? ? ? ? //cat

alert(pattern1.lastIndex);? //0

var match=pattern1.exec(text);

alert(matches.index);? ? ? ? //0

alert(matches[0]);? ? ? ? ? //cat

alert(pattern1.lastIndex);? //0

var pattern2=/.at/g;

var match=pattern2.exec(text);

alert(matches.index);? ? ? ? //0

alert(matches[0]);? ? ? ? ? //cat

alert(pattern2.lastIndex);? //0

var match=pattern2.exec(text);

alert(matches.index);? ? ? ? //5

alert(matches[0]);? ? ? ? ? //bat

alert(pattern2.lastIndex);? //8

text() :傳一個參數(shù)架曹,判斷目標字符串與某個模式是否匹配。? true\false闹瞧。

RegExp 繼承的toString()方法都會返回正則表達式的字面量绑雄。

var pattern=new RegExp("\\[bc\\]at","gi");

alert(pattern.toString());? //? /\[bc\]at/gi

5.4.3 RegExp 構(gòu)造函數(shù)屬性

? ? ? ? 通過RegExp可以查看到最近一次正則表達式操作。

? ? var text="this has been a short summer.";

? ? var pattern=/(.)hort/g;

? ? if(pattern.test(text)){

? ? ? ? alert(RegExp.input);? ? ? ? //this has been a short summer

? ? ? ? alert(RegExp.leftContext);? //this has been a

? ? ? ? alert(RegExp.rightContext); //summer.

? ? ? ? alert(RegExp.lastMatch);? ? //short

? ? ? ? alert(RegExp.lastParen);? ? //s

? ? ? ? alert(RegExp.multiline);? ? //false

? ? }

5.5 Function 類型

? ? 函數(shù)實際上是對象奥邮,每個函數(shù)都是Function類型的實例万牺。

function sum(num1,num2){}

等價于

var sum= function(num1,num2){};

在函數(shù)中,函數(shù)名僅僅是指向函數(shù)的指針洽腺,可以多次賦值脚粟。

5.5.1 沒有重載

? ? ? ? function addSomeNumber(num){

? ? ? ? ? return num+100;

? ? ? ? }

? ? function addSomeNumber(num){

? ? ? return num+200;

? ? }

? ? var result=addSomeNumber(100);? ? //300

? ? 聲明了同名函數(shù),但其實后面的覆蓋前面的已脓。

5.5.2 函數(shù)聲明與函數(shù)表達式

? ? ? ? 解析器會執(zhí)行任何代碼之前優(yōu)先解析函數(shù)聲明珊楼,而函數(shù)表達式只會在運行到此行才解析。

? ? alert(sum(10,10));

? ? function sum(){}

? ? 完全可以正常運行度液。

5.5.3 作為值的函數(shù)

? ? ? ? 可以將函數(shù)作為值傳給函數(shù)厕宗。

? ? function A(someFunction,someArgument){

? ? ? ? return someFunction(someArgument);

? ? }

? ? 也可以從一個函數(shù)中返回另一個函數(shù)。

? ? function createFunction(propertyName){

? ? ? ? return function(object1,object2){

? ? ? ? ? ? var value1=object1[propertyName];

? ? ? ? ? ? var value2=object1[propertyName];

? ? ? ? ? ? if(value1>value2)

? ? ? ? ? ? ...

? ? ? ? ? ? ...

...

}

? ? }

? ? var data=[{name:"zhang",age:20},{name:"li",age:21}];

? ? data.sort(createFunction("name"));

5.5.4 函數(shù)內(nèi)部屬性

? ? ? ? 在函數(shù)內(nèi)部堕担,有兩個特殊的對象:arguments和this.

? ? arguments的callee屬性已慢,指向擁有這個arguments對象的函數(shù)。如階乘:

? ? function sum(num){

? ? ? ? if(num<=1){

? ? ? ? ? ? return 1;

? ? ? ? }else{

return num*arguments.callees(num-1);

}

}

? ? this引用的是函數(shù)已執(zhí)行的環(huán)境對象霹购。(誰調(diào)用它佑惠,誰就是this.)

? ? caller. 這個屬性保存著調(diào)用當前函數(shù)的函數(shù)的引用。

? ? function outer(){

? ? ? ? inner();

? ? }

? ? function inner(){

? ? ? ? alert(arguments.callee.caller);

? ? }

? ? outer();

? ? 它會顯示outer的源代碼齐疙。因為outer()調(diào)用了inter()膜楷,所以caller指向outer()..

5.5.5 函數(shù)屬性和方法

? ? ? ? 函數(shù)是一個對象,既然是對象贞奋,就有屬性和方法赌厅。屬性:? length和prototype

? ? ? ? ? ? length 代表函數(shù)想要接受的參數(shù)的個數(shù)

? ? function sayName(name){}

? ? function sayHi(name1,nam2){}

? ? alert(sayName.length)? ? //1

? ? alert(sayHi.length)? ? ? //2

? ? prototype 是保存引用類型所有實例方法的真正所在。即:toString()\valueOf()等方法都保存在prototype

? ? 名下轿塔。

每個對象都包含兩個非繼承而來的方法:apply()\call().

? ? 用途都是在特定的作用域中調(diào)用函數(shù)特愿,實際上等于設(shè)置函數(shù)體內(nèi)this對象的值仲墨。

apply()傳入?yún)?shù)數(shù)組。

? ? function sum(num1,num2){}

? ? function callSum1(num1,num2){

? ? ? ? return sum.apply(this,arguments);

? ? }

? ? function callSum1(num1,num2){

? ? ? ? return sum.apply(this,[num1,num2]);

? ? }

? ? alert(callSum1(10,10));? //20

? ? alert(callSum2(10,10));? ? //20

? ? 解釋:this揍障,指代的誰調(diào)用的它目养,這里是window對象,那么就變成了window.sum(10,10);

? call要傳入每個參數(shù)毒嫡。

? ? function sum(num1,num2){}

? ? function callSum1(num1,num2){

? ? ? ? return sum.call(this,[num1,num2]);

? ? }

? ? alert(callSum1(10,10));? //20

來個復雜的例子:

? ? function baseClass()

? ? {

? ? ? this.showMsg = function()

? ? ? {

? ? ? ? alert("baseClass::showMsg");

}

}

? ? function extendClass()

? ? {

? ? ? ? this.showMsg =function ()

? ? ? ? {

? ? ? ? ? ? alert("extendClass::showMsg");

? ? ? ? }

? ? }

如果我想使用extendClass的一個實例instance調(diào)用baseClass的對象方法showMsg怎么辦癌蚁?

? ? extendClass.prototype = new baseClass();

? ? var instance = new extendClass();

? ? var baseinstance = new baseClass();

? ? baseinstance.showMsg.call(instance);//顯示baseClass::showMsg

? ? 這句話的意思就是:使用instance是調(diào)用者,調(diào)用他方法中和baseinstance.showMsg相同的方法审胚。

? apply()和call()的真正用武之地就是:擴充函數(shù)賴以運行的作用域匈勋。

? ? ? ? window.color="red";

? ? ? ? var o={color:"blue"};

? ? ? ? function sayColor(){ alert(this.color);}

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

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

? ? ? ? sayColor.call(o);? //red

? ? 使用call和apply()方法最大的好處就是降低耦合, 我們不需要在對象中定義方法膳叨,當對象需要方法時洽洁,直接

? ? 讓這個方法.call(對象)即可。

? bind()方法:會闖一個函數(shù)的實例菲嘴,其this值會被綁定到傳給bind()函數(shù)的值饿自。

? ? ? window.color="red";

? ? var o={color:"blue"};

? ? function sayColor(){ alert(this.color);}

? ? var objectSayColor=sayColor.bind(o);

? ? objectSayColor();? //blue

5.6 基本包裝類型

? ? ? 為了便于操作基本類型值,還提供了3個特殊的引用類型:Boolean\Number和String龄坪。

? 實際上昭雌,每當讀取一個基本類型,后臺會創(chuàng)建一個對應的基本包裝類型的對象,能夠調(diào)用一些方法操作這些數(shù)據(jù)健田。

? eg:? ? var s1="some text";

? ? ? ? ? ? var s2=s1.substring(2);

? 基本包裝類型和引用類型的區(qū)別主要在生存期烛卧。基本包裝類型的生存期在執(zhí)行完即銷毀妓局,而引用類型是一直保存在內(nèi)存中的总放。

? eg:

? ? ? ? ? var s1="some text";

? ? ? ? ? s1.color="red";? ? ? //當代碼執(zhí)行到這行時,創(chuàng)建實例對象好爬,調(diào)用指定方法或?qū)傩跃中郏N毀。

? ? ? ? ? alert(s.color);? //undefined

5.6.1 Boolean類型: 不推薦使用存炮。

? ? ? ? Boolean類型的實例重寫了valueOf()方法炬搭,返回基本類型值true和false.toString 返回字符串"true"和“false”

? ? var falseObject=new Boolean(false);

? ? var result=falseObject && true;

? ? alert(result);? //true

? ? var falseValue=false;

? ? result=falseValue && true;

alert(result);? ? ? ? ? ? //false

? ? 第一個創(chuàng)建了一個對象,在布爾表達式中的所有對象都會被轉(zhuǎn)換為true,因此結(jié)果為true穆桂。

? ? alert(typeof falseObject);? //object

? ? alert(typeof falseValue) ;? //Boolean

? ? alert(falseObject instanceof Boolean); true

? ? alert(falseValue instanceof Boolean ); false

? ? typeof對基本類型返回Boolean. 對引用類型返回object.

? ? 由于Boolean對象是Boolean類型的實例宫盔,所以為true.

5.6.2? Number 類型

? ? ? ? Number 類型重寫了valueOf()\toString等方法。

? var? number =10;

? alert(num.toString(2));? //"1010"

? toString()方法加參數(shù)享完,可以轉(zhuǎn)換進制飘言。

? 還提供了一些用于將數(shù)值格式化為字符串的方法

? toFixed():按照指定小數(shù)位返回數(shù)值的字符串表示。 適用于貨幣值驼侠。

? ? ? ? ? var num=10;

? ? ? ? ? alert(num.toFixed(2));? //"10.00"

? ? ? 如果本身包含的小數(shù)位比指定的還多姿鸿。那么指定的最后一位舍入。

? ? ? ? ? var num=10.005;

? ? ? ? ? alert(num.toFixed(2));"10.01"

? ? ? toExponential():返回以指數(shù)表示法表示的數(shù)值的字符串形式倒源。

? ? ? ? ? var num=10;

? ? ? ? ? alert(num.toExponential(1)); //1.0e+1

? ? ? toPrecision():會根據(jù)規(guī)則看哪個表示合適返回值苛预。接受一個函數(shù),即表示數(shù)值的所有

? ? ? 位數(shù)笋熬。

? ? ? ? ? var num=99;

? ? ? ? ? alert(num.toPrecision(1));? //1e+2

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

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

5.6.3 String 類型

? ? 1.字符方法

? ? ? ? charAt()和charCodeAt()热某。一個返回給定位置的字符,一個返回給定位置的字符編碼胳螟。

? ? ? ? ? ? var stringValue="hello world".

? ? ? ? ? ? alert(stringValue.chartAt(1));"e"

? ? ? ? ? ? alert(stringValue.chartCodeAt(1));"101"

? ? ? ? ? ? alert(stringValue[1]);? //"e"? 也可以使用這種方式訪問昔馋。

2.字符串操作方法

? ? concat():將一或多個字符串拼接起來。

? ? ? ? var stringValue="hello ";

? ? ? ? var result=stringValue.concat("world");

? ? ? ? alert(result);? ? //"hello world"

? ? ? ? var result=stringValue.concat("world","!");? //可拼接多個糖耸。

? ? ? ? alert(result);? ? //"hello world !"

? ? slice()\substr()和substring():三個都是字符切割函數(shù)秘遏。

? ? ? ? ? ? var 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"

//substr第二個參數(shù)是返回字符個數(shù)

3.字符串位置方法

? ? indexOf()和lastIndexOf().這兩個方法都是從一個字符串中搜索給定的子字符串,返回

? ? 返回位置嘉竟,如果沒有返回-1.一個從前邦危,一個從后。

? ? 第一個參數(shù)是字符串舍扰,第二個參數(shù)是搜索起始位置倦蚪。

4.trim()方法

? ? 創(chuàng)建一個字符串副本,刪除前置及后綴的所有空格边苹,然后返回結(jié)果陵且。

5.字符串大小寫轉(zhuǎn)換方法

? ? toLowerCase()、toUpperCase().

6.字符串的模式匹配方法

? ? match():只接受一個參數(shù)个束,要么正則表達式慕购,要么是一個RegExp對象。

? ? ? ? var text="cat,bat,sat,fat";

? ? ? ? var pattern=/.at/;

? ? ? ? var matches=text.match(pattern);

? ? ? ? alert(matches.index);

? ? search():一個參數(shù)播急,字符串或RegExp對象指定的一個正則表達式脓钾。

? ? replace()方法:

? ? var text="cat,bat,sat,fat";

? ? var result=text.replace("at","ond");

? ? alert(result);? //"crond"

? ? 字符序列

? ? result=text.replace(/.at/g,"word ($1)");

? ? alert(result);? //word (cat),word (bat),word (sat),word (fat)

? ? 第二個參數(shù)為函數(shù)

? ? text.replace(/[<>"&]/g,function(match,pos,originalText){

? ? ? ? switch(match){

? ? ? ?    

? ? ? ? }

? ? })

? ? var colorText="red,blue,green,yellow";

? ? var color1=colorText.split(",");

? ? var color2=colorText.split(/{FNXX==XXFN}+/);

7.localeCompare()

? ? ? ? ? ? 比較:規(guī)則就是前面的減去后面的

? ? ? ? ? ? var stringValue="yellow";

? ? ? ? ? ? alert(stringValue.localeCompare("brick"));? ? //1

? ? ? ? ? ? alert(stringValue.localeCompare("zoo"));? ? ? ? //-1

8.fromCharCode()方法

? ? ? ? 接受字符編碼,轉(zhuǎn)換成字符出阿妹桩警。

5.7 單體內(nèi)置對象

? ? ? ? 由ECMAScript實現(xiàn)提供的可训、不依賴于宿主環(huán)境的對象,這些對象在ECMAScript程序執(zhí)行前就已經(jīng)存在了捶枢。

? ? ? ? 如:Oject|Array|String|Global|Math

5.7.1 Global對象

? ? ? ? 不屬于任何其他對象的屬性和方法握截,最終都是它的屬性和方法。

1.URI編碼方法(URI:uniform Resource Identifiers 通用資源標識符烂叔,是更高層次的URL)

? ? ? ? Global對象的encodeURI()和encodeURIComponent()方法可以對URI進行編碼谨胞。

? ? encodeURI:用于整個URI,只對空格編碼.這個作用于URL跳轉(zhuǎn)的時候蒜鸡。

? ? 和encodeURIComponent():對任何非標準字符進行編碼胯努。? 使用它牢裳,傳遞一個長的url不會被截斷。

2.eval()方法? ==>能夠解釋代碼字符串叶沛。

? ? ? ? 像是一個完整的ECMAScirpt解析器蒲讯。只接受一個參數(shù),即要執(zhí)行的ECMAScript字符串灰署。

? ? eval("alert('hi')");? === alert("hi");

? ? 當解析器發(fā)現(xiàn)代碼中調(diào)用eval方法時判帮,他會將傳入的參數(shù)當作實際的ECMAScript語句來解析,然后把執(zhí)行結(jié)果插入到原位置溉箕。通過eval()

? ? 執(zhí)行的代碼被認為是包含該次調(diào)用的執(zhí)行環(huán)境的一部分晦墙,因此被執(zhí)行的代碼具有與該執(zhí)行環(huán)境相同的作用鏈。

? ? var msg="hello world";

? ? eval("alert(msg)");? ? //hello world

? ? eg2:

? ? eval("fucntion sayHi(){alert("123")}");

? ? sayHi();

3肴茄。Global 對象的屬性

4.window 對象

? ? ? ? 瀏覽器將Global對象作為window對象的一部分加以實現(xiàn)晌畅。

? ? 可以取得Global對象的方法:

? ? ? ? var global=function(){return this}();

5.7.2 Math對象

min()和max()方法

? ? ? ? var max=Math.max(3,4,5,6123,15);

? ? 這種避免多余循環(huán)和if語句來檢驗最大值。

? ? 要找到數(shù)組中最大最小值独郎,使用apply();

? ? ? ? var values=[1,2,3,45,67,4,];

? ? ? ? var max=Math.max.apply(Math,values);? //這里關(guān)鍵是Math作為第一個參數(shù)踩麦,正確設(shè)置了this值。

舍入方法: Math.ceil()\Math.floor()\Math.round()

4.random()方法

? ? ? ? var num=Math.floor(Math.random()*10+1);

?

? ? ?

?

? ?

? ? ?

? ? ? ? ? ? ? ?

? ? ? ? ?

? ? ? ?

? ? ? ?

? ?

?

?

? ?

? ?

? ?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末氓癌,一起剝皮案震驚了整個濱河市谓谦,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌贪婉,老刑警劉巖反粥,帶你破解...
    沈念sama閱讀 206,013評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異疲迂,居然都是意外死亡才顿,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,205評論 2 382
  • 文/潘曉璐 我一進店門尤蒿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來郑气,“玉大人,你說我怎么就攤上這事腰池∥沧椋” “怎么了?”我有些...
    開封第一講書人閱讀 152,370評論 0 342
  • 文/不壞的土叔 我叫張陵示弓,是天一觀的道長讳侨。 經(jīng)常有香客問我,道長奏属,這世上最難降的妖魔是什么跨跨? 我笑而不...
    開封第一講書人閱讀 55,168評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮囱皿,結(jié)果婚禮上勇婴,老公的妹妹穿的比我還像新娘忱嘹。我一直安慰自己,他們只是感情好耕渴,可當我...
    茶點故事閱讀 64,153評論 5 371
  • 文/花漫 我一把揭開白布德谅。 她就那樣靜靜地躺著,像睡著了一般萨螺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上愧驱,一...
    開封第一講書人閱讀 48,954評論 1 283
  • 那天慰技,我揣著相機與錄音,去河邊找鬼组砚。 笑死吻商,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的糟红。 我是一名探鬼主播艾帐,決...
    沈念sama閱讀 38,271評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼盆偿!你這毒婦竟也來了柒爸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,916評論 0 259
  • 序言:老撾萬榮一對情侶失蹤事扭,失蹤者是張志新(化名)和其女友劉穎捎稚,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體求橄,經(jīng)...
    沈念sama閱讀 43,382評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡今野,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,877評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了罐农。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片条霜。...
    茶點故事閱讀 37,989評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖涵亏,靈堂內(nèi)的尸體忽然破棺而出宰睡,到底是詐尸還是另有隱情,我是刑警寧澤溯乒,帶...
    沈念sama閱讀 33,624評論 4 322
  • 正文 年R本政府宣布夹厌,位于F島的核電站,受9級特大地震影響裆悄,放射性物質(zhì)發(fā)生泄漏矛纹。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,209評論 3 307
  • 文/蒙蒙 一光稼、第九天 我趴在偏房一處隱蔽的房頂上張望或南。 院中可真熱鬧孩等,春花似錦、人聲如沸采够。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,199評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蹬癌。三九已至权她,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間逝薪,已是汗流浹背隅要。 一陣腳步聲響...
    開封第一講書人閱讀 31,418評論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留董济,地道東北人步清。 一個月前我還...
    沈念sama閱讀 45,401評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像虏肾,于是被迫代替她去往敵國和親廓啊。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,700評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 有人說過封豪,很多彎路到最后都成了直路谴轮,所有的坑到最后也都成了坦途;所謂的直路和坦途并不是擺在眼前的撑毛,都是不斷的的...
    老衲法號一眉道人閱讀 1,314評論 0 4
  • http://www.cnblogs.com/LS-tuotuo/p/5898708.html講述了特詳細的基礎(chǔ)知...
    泡芙小姐110閱讀 570評論 0 1
  • JS高級教程 1.探討了JS面向?qū)ο蟪绦蛟O(shè)計和繼承的方式书聚,以及如何在HTML等標記語言中使用它。在深入剖析了事件和...
    vernwang閱讀 918評論 0 50
  • 繼承 一藻雌、混入式繼承 二雌续、原型繼承 利用原型中的成員可以被和其相關(guān)的對象共享這一特性,可以實現(xiàn)繼承胯杭,這種實現(xiàn)繼承的...
    magic_pill閱讀 1,050評論 0 3
  • 1,javascript 基礎(chǔ)知識 Array對象 Array對象屬性 Arrray對象方法 Date對象 Dat...
    Yuann閱讀 891評論 0 1