1. 程式人生 > >javascript權威指南筆記

javascript權威指南筆記

  • JavaScript是區分大小寫的語言 ,但HTML並不區分大小寫。

  • 如果語句各自獨佔一行,通常可以省略語句之間的分號(程式結尾或右花括號”}”之前的分號也可以省略);統一風格。JavaScript並不是在所有換行處都填補分號:只是在缺少了分號就無法正確解析程式碼的時候,JavaScipt才會填補分號。如果當前語句和隨後的非空格字元不能當成一個整體來解析的話,javascript就在當前語句行結束處填補分號。 例外:return ,break, continue,如果這三個關鍵字後緊跟著換行,JavaScript則會在換行處填補分號。 ++ –

  • JavaScript解析器有自己的記憶體管理機制,可以自動對記憶體進行垃圾回收。當不再有任何引用指向一個物件,解析器就會知道這個物件沒用了,然後自動回收它所佔用的記憶體資源。

  • JavaScript是一種面向物件的語言,不嚴格的講,這意味著我們不用全域性的定義函式去操作不同型別的值,資料型別本身可以定義方法來使用值。例如:要對陣列中的元素進行排序,不必要將a傳入sort()函式,而是呼叫a的一個方法sort(): a.sort() ;

  • Javascript可以自由地進行資料型別轉換。

  • Javascript變數是無型別的,變數可以被賦予任何型別的值,同樣一個變數也可以重新賦予不同型別的值。不在任何函式內宣告的變數稱為全域性變數,它在javascript程式中的任何地方都是可見的。在函式內宣告的變數具有函式作用域,並且只在函式內可見。

  • Javascript中算術運算在溢位,下溢或被零整除時不會報錯。會返回一個特殊的值。無窮大(infinity)值。下溢是當運算結果無限接近於零並比javascript能表示的最小值還小的時候,javascript將返回0。

  • 字串直接量可以拆分成數行,每行必須以反斜線()結束。

  • javascript中並沒有代表單個字元的“字元型”。實際上是長度為1的字串

  • 加號運算於數字表示兩數相加,作用於字串則表示字串連線。JavaScript中字串是固定不變的,類似replace()和toUpperCase()的方法都返回新字串,原字串本身並沒有發生改變。

  • 不可變的原始值和可變的物件引用

  • 型別轉換: JavaScript中的取值型別非常靈活,JavaScript將根據需求自行轉換型別。

10 + " objects"      // =>"10 objects". 數字10轉換成字串
"7" * "4"            //
=> 28 兩個字串均轉換成數字 var n = 1 -"X"; // => NaN 字串"x"無法轉換成數字 n + " objects" // => "NaN objects" NaN轉換為字串"NaN"


  • 轉換和相等性
由於JavaScript可以做靈活的型別轉換,因此其”==”相等運算子也隨相等的含義靈活多變。
null == undefined   // 這兩值被認為相等
"0" == 0            //在比較之前字串轉換成數字
0 == false          // 在比較之前布林值轉換成數字
"0" == false        // 在比較之前字串和布林值都轉換成數字

“===”恆等運算子在判斷相等時併為做任何型別轉換

**

第一章 JavaScript概述

**
1.JavaScript物件

//物件是名/值對的集合,或字串到值對映的集合
var book = {
   topic:"JavaScript",
   fat:true
};

//通過"."或"[]"來訪問物件屬性
book.topic           // "JavaScript"
book["fat"]          // true
book.arthor = "Flanagan" ; //通過賦值建立一個新屬性
book.contents = {} ;     //{}是一個空物件,它沒有屬性

2.JavaScript陣列

var primes = [2,3,4,5]; //擁有4個值的陣列
primes[0]          // 0 
primes[4] = 9 ;    //通過賦值來新增新元素
primes[4] = 11;    //或通過賦值來改變已有的元素

3.陣列和物件中都可以包含另一個數組或物件

var points = [  //具有兩個元素的陣列
  { x:0 ,y: 0 },
  { x:1 ,y: 1 }
];

var data = {    //一個包含兩個屬性的物件
  trial1:[[1,2],[3,4]],
  trial2:[[2,3],[4,5]]
  };

4.當將函式和物件合寫在一起,函式就變成了”方法”:

//定義物件的方法
//"this"關鍵字是對定義方法的物件的引用
var points = [  //具有兩個元素的陣列
  { x:0 ,y: 0 },
  { x:1 ,y: 1 }
];
points.dist = function(){
 var p1 = this[0];
 var p2 = this[1];
 var a = p2.x - p1.x ;
 var b = p2.y - p1.y ;
 return Math.sqrt(a*a+b*b);
}
alert(points.dist()); 

5.定義一個類來表示2D平面幾何中的點,這個類例項化的物件擁有一個名為r()的方法,用來計算點到原點的距離。
prototype 屬性使您有能力向物件新增屬性和方法。

//定義一個建構函式以初始化一個新的Point物件
function Point(x,y){  //按照慣例,建構函式均以大寫字母開始
  this.x = x ;
  this.y = y ;
}

//使用new關鍵字和建構函式來建立一個例項
var p = new Point(1,1);  //平面幾何中的點(1,1) ;

//通過給建構函式的prototye物件賦值來給Point物件定義方法
Point.prototype.r = function(){
  return Math.sqrt(this.x * this.x + this.y*this.y);
}

//Point的例項物件p繼承了方法r()
alert(p.r());

**

第二章 詞法結構

**
1.JavaScript是區分大小寫的語言,也就是說,關鍵字,變數,函式名和所有的識別符號都必須採用一致的大小寫形式。

2.但HTML並不區分大小寫。

3.不能有巢狀的註釋

4.可選的分號:如果語句各自獨佔一行,通常可以省略語句之間的分號。

第三章 型別,值和變數

1.JavaScript解析器有自己的記憶體管理機制,當不再有任何引用指向一個物件,解析器就會知道這個物件沒用,然後自動回收它所佔用的記憶體資源。

2.資料型別本身可以定義方法來使用值。例如要對陣列a中的元素進行排序,不必要將a傳入sort()函式,而是呼叫a的一個方法sort(); a.sout();

3.在JavaScript中,字串是不可變的,可以訪問字串任何位置的文字,但JavaScript並未提供修改已知字串的文字內容的方法。

4.JavaScript變數是無型別的,變數可以被賦予任何型別的值,同樣一個變數也可以重新賦予不同型別的值。

5.JavaScript中的所有數字均用浮點數值表示。

6.Javascript預定義了全域性變數Infinity和NaN,用來表示正無窮大和非數字值。

7.由於舍入誤差,0.3和0.2之間的近似差值實際上並不等於0.2和0.1之間的近似差值。儘量使用整數。

8.轉義字元:在JavaScript字串中,反斜線()有著特殊的用途,反斜線符號後加一個字元,就不再表示它們的字面含義。

9.字串是固定不變的,類似replace和toUpperCase的方法都返回洗的字串

10.字串可以當作只讀陣列

s = "hello ,world";
s[0]           // "h"
s[s.length-1]  // "d"

11.null表示一個特殊值,常用來描述“空值”。undefined是預定義的全域性變數,它的值就是未定義。它們都表示“值的空缺”,兩者往往可以互換,判斷相等運算子“==”認為兩者是相等的。

12.var word = s.substring(s.indexOf("")+1,s.length); //使用字串的屬性
字串既然不是物件,為什麼他會有屬性尼?只要引用了字串s的屬性,JavaScript就會將字串值通過呼叫new String(s)的方式轉換成物件,這個物件繼承了字串的方法,並被用來處理屬性的引用。一旦引用完,這個新建立的物件就會銷燬。

13.JavaScript型別轉換
這裡寫圖片描述

14.由於Javascript可以做靈活的型別轉換,因此其”==”相等運算子也隨相等的含義靈活多變。
以下這些結果均是true:

null == undefined ;
"0" == 0 ;
 0 == false ;
"0" == false ;

15.”===”恆等運算子在判斷相等時未做任何型別轉換。

16.顯式型別轉換

Number("3");
String(false);
Boolean([]);
Object(3);  //=> new Number(3)

17.如果未在var宣告語句中給變數指定初始值,那麼雖然聲明瞭這個變數,但在給它存入一個值之前,它的初始值就是undefined。

18.將函式內的變數宣告”提前”到函式體頂部,同時變數初始化留在原來的位置

var scope = "global" ;
function f() {
  console.log(scope);   //輸出"undefined",而不是“global"
  var scope = "local" ; //變數在這裡賦值初始值,但變數本身在函式體內任何地方均有定義
  console.log(scope);   //輸出"local"
  }

第四章 表示式和運算子

1.嚴格相等運算子”===”首先計算其運算元的值,然後比較這兩個值,比較過程沒有任何型別轉換。如果兩個值型別不相同,則他們不相等。

2.相等運算子”===”和恆等運算子相似,但相等運算子的比較並不嚴格,如果兩個運算元不是同一個型別,那麼相等運算子會嘗試進行一些型別轉換,然後進行比較。

3.in運算子
in運算子希望它的左運算元是一個字串或可以轉換為字串,希望它的右運算元是一個物件。如果右側的物件有一個名為左運算元值的屬性名,那麼表示式返回true。

var point = { x:1,y:1 } ;//定義一個物件
"x" in point   //true
"z" in point   //false 
"toString" in point //true 

4.instanceof運算子
instanceof運算子希望左運算元是一個物件,右運算元標識物件的類。如果左側的物件是右側類的例項,則表示式返回true,否則返回false。

5.typeof運算子
typeof是一個一元運算子,放在其單個運算元的前面,運算元可以是任何型別。返回值為表示運算元型別的一個字串。
這裡寫圖片描述

6.delete運算子
用來刪除物件屬性或者陣列元素

var a = [1,2,3] ;
delete a[2];    //刪除最後一個數組元素,但陣列長度未變
2 in a ;        // false 

**

第五章 語句

**
1.單獨使用break語句的作用是立即退出最內層的迴圈或switch語句

2.continue不是退出迴圈,而是轉而執行下一次迴圈

3.throw語句
當使用非法引數呼叫函式時丟擲一個Error物件

function factorial(x){
 //如果輸入引數是非法,則丟擲一個異常
 if(x < 0 ) throw new Error("x不能是負數");
 //否則正常返回。。。。。
 }

4.try/catch/finally
這裡寫圖片描述

**

第六章 物件

**
1.物件直接量

var book = {
 "main title": "JavaScript",
 'sub-title':"The Definitive Guide"
 }

2.通過new建立物件
new運算子建立並初始化一個新物件。關鍵字new後跟隨一個函式呼叫。這裡的函式稱做建構函式;

var d = new Date();

3.原型
每一個JavaScript物件都和另一個物件相關聯,另一個物件就是我們熟知的原型,每一個物件都從原型繼承屬性。
(1)通過物件直接量建立的物件都具有同一個原型物件,並可以通過Javascript程式碼Object.prototype獲得對原型物件的引用
(2)通過關鍵字new和建構函式呼叫建立的物件的原型就是建構函式的prototype屬性的值。例如:new Date()建立的物件的原型就是Date.prototype。

4.Object.create()
Object.create()方法建立一個新物件,其中第一個引數是這個物件的原型,第二的可選引數用以對物件的屬性進行進一步的描述。
這裡寫圖片描述
inherit()函式的其中一個用途就是防止庫函式無意間修改那些不受你控制的物件。不是將物件直接作為引數傳入函式,而是將它的繼承函式物件傳入函式。

5.屬性的查詢和設定
可以通過點(.)或方括號([])運算子來獲取屬性的值

var name = author.surname ;
var title = book["main title"];

6.JavaScript物件都是關聯陣列book["main title"];

7.繼承

var o ={} ;//o從Object。prototype繼承物件的方法
o.x = 1 ;  //定義屬性x
var p = inherit(o) ; //p繼承o和Object.prototype
p.y = 2 ;  //定義屬性y
var q = inherit(p) ;  //q繼承q,o和Object.prototype
q.z = 3 ;   //定義屬性z
var s = q.toString() ; //todString繼承自Object.prototype
q.x + q.y         // => 3  x和y分別繼承自o和p

屬性賦值操作首先檢查原型鏈,以此判定是否允許賦值操作。自讀屬性

8.刪除屬性

delete book.author ;
delete book["main title"];

9.檢測屬性
可以通過in運算子,hasOwnPreperty()和propertyIsEnumerable()方法來完成

10.列舉屬性
物件繼承的內建方法不可列舉

var o = {x:1,y:2,z:3};  //三個可列舉的自有屬性
o.propertyIsEnumerable("toString"); //=>false ,不可列舉
for(p in o)   //遍歷屬性
console.log(p);   //輸出x,y和z,不會輸出toString

10.物件的三個屬性
每一個物件都有與之相關的原型(prototype) ,類和可擴充套件想

11.原型屬性
物件的原型屬性是用來繼承屬性的。
可以通過p.isPrototypeOf(o)來檢測p是否是o的原型

var p = {x:1};  //定義一個原型物件
var o = Object.create(p); //使用這個原型建立一個物件
p.isPrototypeOf(o)   //=> true :o繼承自p
Object.prototype.isPrototypeOf(o)  //=> true  :p繼承自Object.prototype

12.類屬性
物件的類屬性是一個字串,用以表示物件的型別資訊。

13.序列化物件
物件序列化是指將物件的狀態轉換為字串,也可將字串還原為物件。提供JSON.stringify()和JSON.parse()用來序列化和還原Javascript物件。

o = {x:1,y:{z:[false,null,""]}} ;
s = JSON.stringifu(o) ;   //=> '{"x":1,"y":{"z":[false,null,""]}}'
p = JSON.parse(s) ; //p是o的深拷貝

14.物件方法
所有的Javascript物件都從Object.prototype繼承屬性。

15.toString()方法
下面這行程式碼的計算結果為字串”[object Object]”:

var s = {x:1,y:1}.toString();

**

第七章 陣列

**
1.建立陣列
(1)使用陣列直接量建立陣列

var empty = [] ; //沒有元素的陣列
var primes = [1,2,3,4,5] ; 
var misc = [1.1 , true ,"a", ] ; //3個不同型別的元素和結尾的逗號

(2)呼叫建構函式Array()是建立陣列另一個方法

var a = new Array() ;
var a = new Array(10) ; //指定長度
var a = new Array(4,2,4,5,"testing");

2.陣列的讀寫

var a = [1] ;
var value = a[0] ;//讀第一個
a[1] = 32 ; //寫第二個

a.push("da") ;//在末尾天降一個元素
delete a[1] ;  //a在索引1的位置不再有元素

3.陣列的方法
(1) join()
Array.join()方法將陣列中所有元素都轉化為字串並連線在一起,返回最後生成的字串。可以指定一個可選字串在生成的字串中來分割陣列的各個元素,如果不指定分隔符,預設使用逗號

var a = [1,2,3] 
a.join();  //=>"1,2,3"
a.join('-'); //=>"1-2-3";

(2)reverse()
將陣列中的元素顛倒順序

(3)sort()
將陣列中的元素排序並返回排序後的陣列

(4)concat()
建立並返回一個新陣列

var a = [1,2,3];
a.concat(4,5)   //返回[1,2,3,4,5]

(5)slice()
返回指定陣列的一個子陣列

var a = [1,2,3,4,5] ;
a.slice(0,3) ;  //返回[1,2,3] 

(6)splice()
能夠從陣列中刪除元素,插入元素到陣列或者同時完成這兩種操作

(7)push()和pop()
push()和pop()方法允許將陣列當作棧來使用

var stack = [] ;
stack.push(1,2) ; //stack:[1,2] ;
stack.pop();      //stack:[1];

(8)unshify()和shift()
類似於push()和pop(),不一樣的是從頭部插入

(9)toString()和toLocaleString()

[1,2,3].toString()  //生成'1,2,3'

3.ECMAScripte5中陣列的方法
(1)forEach()
forEach()方法從頭至尾遍歷陣列,為每個元素呼叫指定的函式。傳遞的函式作為forEach()的第一個引數,forEach()使用三個引數呼叫改函式:陣列元素,元素的索引和陣列本身。如果只關心陣列元素的值,可以編寫只有一個引數的函式

var data = [1,2,3,4,5];
var sum = 0 ;
data.forEach(function(value){ sum +=value;});

data.forEach(function(v,i,a){ a[i] = v + 1 ;});

forEach()無法在所有元素都傳遞給呼叫的函式之前終止遍歷,必須把forEach()方法放在一個try塊中,並丟擲一個異常。

(2)map()
將呼叫的陣列的每個元素傳遞給指定的函式,並返回一個數組,它包含該函式的返回值

a = [1,2,3] ;
b = a.map(function(x){ return x*x; }); //b是[1,4,9]

(3)filter()
返回陣列是呼叫的陣列的一個子集 篩選陣列

a = [5,4,3,2,1];
smallvalues = a.filter(function(x){return x<3 });  //[2,1]
everyother = a.filter(function(x,i) { return i%2 == 0 }); //[5,3,1]

(4)every()和some()
every()和some()方法是陣列的邏輯判定:它們對陣列元素應用指定的函式進行判定,返回true或false

//every()方法是針對所有
a = [1,2,3,4,5];
a.every(function(x) { return x < 10 ;})   // => true 所有值<10

//some()方法指存在
a = [1,2,3,4,5];
a.some(function(x) { return x%2 === 0 ;})  //=> true :a含有偶數

(5)reduce()和reduceRight()
使用指定的函式將陣列元素進行組合

//reduce 
//第一個是執行化簡操作的函式。化簡函式就是用某種方法把來兩個值組合為一個值。第二個引數是一個傳遞給函式的初始值
var a = [1,2,3,4,5] ;
var sum = a.reduce(function(x,y) { return x+y },0);  //陣列求和

//reduceRight是從右開始

6.indexOf()和lastIndexOf()
搜尋整個陣列中具有給定值的元素,返回找到的第一個元素的索引或如果沒有找到就返回-1

a = [0,1,2,1,0] ;
a.indexOf(1)   // 1:a[1]是1
a.lastIndexOf(1)  // 3:a[3]是1

7.作為陣列的字串
字串的行為類似於只讀的陣列

var s = test ;
s[1]   // => "e"

**

第八章 函式

**
1.在JavaScript中,函式不僅是一種語法,也是值,也就是說,可以將函式值賦予給變數。

function square(x) { return x*x ;}
var s = square ;  //s和square指代同一個函式
square(4);  // => 16
s(4);       // => 16

2.在Javascript程式中,函式是值。對函式執行typeof運算會返回字串”function”,但是函式是JavaScript中特殊的物件。

3.prototype屬性
每一個函式都包含一個prototype屬性,這個屬性是指向一個物件的引用,這個物件稱為”原型物件”。

4.Function()建構函式
函式可以通過Function()建構函式來定義

var f = new Function("x","y","return x*y;");
//等價
var f = function(x,y) {return x*y;}

**

第九章 類和模組

**
1.每個Javascript函式都自動擁有一個prototype屬性。

var F = function() {} ; //這是一個函式物件
var p = F.prototype; //這是F相關聯的原型物件
var c = p.constructor ; //這是與原型相關聯的函式
c === F // true 

2.類的擴充
可以通過給原型物件新增新方法來擴充Javascript類

3.instanceof運算子
如果o繼承自c.prototype,則表示式o instanceof c 值為true。這裡的繼承可以不是直接

。。。。。。。。。待續

**

第十章 正則表示式的模式匹配

**
1.就像通過引號包裹字元的方法來定義字串直接量一樣,正則表示式直接量定義為包含在一對斜槓(/)之間的字元

//用來匹配所有以字母"s"結尾的字串
var pattern = /s$/;

//用建構函式RegExp()也可以定義與之等價的正則表示式
var pattern = new RegExp("s$");

2.直接量字元
這裡寫圖片描述

3.字元類
這裡寫圖片描述

4.重複
這裡寫圖片描述

5.非貪婪重複
只需在待匹配的字元後跟隨一個問號即可。/a+?/也可以匹配一個或多個連續字母a,但它是儘可能少地匹配。

6.對於”aaab”作為匹配字串時,使用非貪婪匹配/a+?b/,它會匹配儘可能少的a和一個b。但實際上,這個模式卻匹配整個字串,這是因為正則表示式的模式匹配總是尋找字串中第一個可能匹配的位置

7.指定匹配位置
這裡寫圖片描述

8.修飾符
修飾符是放在”/”符號之外
這裡寫圖片描述

9.用於模式匹配的String方法
(1)search(),引數是一個正則表示式,返回第一個與之匹配的子串的起始位置,如果找不到將返回-1.

"JavaScript".search(/script/i);  //返回4

(2)replace()方法用來執行檢索和替換操作。

//將所有不區分大小寫的javascript都替換成大小寫正確的JavaScript
//如果不到修飾符g,則只替換所匹配的第一個子串
text.replace(/javascript/gi,"JavaScript");

(3)match()方法是最常用的String正則表示式方法
返回的是一個由匹配結果組成的陣列。

"1 plus 2 equals 3".match(/\d+/g)  ;  //返回["1","2","3"]

即使match()執行的不是全域性檢索,它也返回一個數組。在這種情況下,陣列的第一個元素就是匹配的字串,餘下的元素則是正則表示式中用圓括號括起來的子表示式。

//解析一個url
var url = /(\w+):\/\/([\w.]+)\/(\S*)/;
var text = "Visit my blog at http://www.example.com/~david";
var result = text.match(rul);
if(result != null){
  var fullurl = result[0] ;//包含"http://www.example.com/~david"
  var protocol = result[1]; //包含"http"
  var host = result[2]; //包含"www.example.com"
  var path = result[3]; //包含"~david"
  }

(4)split()方法
這個方法用以將呼叫它的字串拆分為一個子串組成的陣列

"123,456,789".split(","); //返回["123","456","789"]

10.RegExp物件
RegExp()建構函式帶有兩個字串引數,第一個引數包含正則表示式的主體部分,也就是正則表示式中兩條斜線之間的文字。
當給RegExp()傳入一個字串表述的正則表示式時,必須將”\”替換成”\”.

//全域性匹配字串中的5個數字,注意這裡使用了"\\",而不是"\"
var zipcode = new RegExp("\\d{5}","g");

如果待檢索的字串是由使用者輸入的,就必須是使用RegExp()建構函式。

11.RegExp的方法
RegExp物件定義了兩個用於執行模式匹配操作的方法
(1)exec()
exec()方法與String方法match()相似,只是RegExp方法的引數是一個字串,而String方法的引數是一個RegExp物件。

(2)test()
test的引數是一個字串,對某個字串進行檢測,如果包含正則表示式的一個匹配結果,則返回true

var pattern = /java/i;
pattern.test("JavaScript"); //返回true

**

第十一章 Javascript的子集和擴充套件

**

**

第十三章 Web瀏覽器中的JavaScript

**
1.Window物件表示Web瀏覽器的一個視窗或窗體,並且可以用識別符號window來引用它。

2.Window物件的onload處理是最重要的事件處理程式之一,當顯示在視窗中的文件內容穩定並可以操作時觸發它。Javascript程式碼通常封裝在onload事件處理程式裡。

3.JavaScript語言核心並不包含任何執行緒機制,客戶端JavaScript想嚴格的單執行緒工作。

4.IE裡的條件註釋
如果這個類庫只有IE需要(並且也只為IE工作),使用條件註釋引入它,其他瀏覽器就不會載入它

<!--[if IE]><script src="excanvas.js"></script><![endif]-->

**

第十四章 Window物件

**
1.Window物件是客戶端JavaScript程式的全域性物件。

2.計時器
setTimeout()和setInterval()可以註冊在指定的時間之後單次或重複呼叫的函式。
(1)Window物件的setTimeout()方法用來實現一個函式在指定的毫秒數之後執行。
(2)setInterval()會在指定毫秒數的間隔裡重複呼叫。

3.解析URL
Window物件location屬性引用的是Location物件,它表示該視窗中當前顯示的文件的URL.

4.瀏覽器和螢幕資訊
(1)Navigator物件
引用的是包含瀏覽器廠商和版本資訊的Navigator物件。
(2)Screen物件
它提供有關視窗顯示的大小和可用的顏色數量的資訊。屬性width和height指定的是以畫素為單位的視窗大小,屬性availWidth和availHeight指定的實際可用的顯示大小。

5.開啟和關閉視窗

//開啟允許改變大小的瀏覽器視窗,並且包含狀態列,工具欄和位址列
var w = window.open("smallwin.html","smallwin","width=400,height=350,status=yes,resizable=yes");

**

第十五章 指令碼化文件

**

**

第二十章 客戶端儲存

**
1.客戶端儲存有以下形式:
(1)Web儲存:Web儲存標準所描述的API包含localStorage物件和seeionStorage物件,這兩個物件實際上是持久化關聯陣列

(2)cookie : 只適合儲存少量文字資料,不及如此,任何cookie形式儲存的資料,不論服務端是否需要,每一次HTTP請求都會把這些資料傳輸到服務端上。

(3)IE User Data

2.Web儲存之localStorage和sessionStorage