概述

JavaScript的實現包含三個部分：

　　1? 核心(ECMAScript)?? 提供核心語言功能

　　2? 文檔對象模型(DOM)? 一套提供了訪問以及操作網頁內容的API

　　3? 瀏覽器對象模型(BOM)? 一套提供了與瀏覽器交互的API

?

　　ECMAScript僅僅定義了這門語言的基礎，如定義了：語法、類型、語句、關鍵字等，實際上這門語言本身不包含輸入輸出定義。

　　而現實中，ECMAScript大多借用了某些宿主環境(如web瀏覽器,Node,Adobe Flash)來實現豐富的功能，這些宿主環境不僅提供了基本的ECMAScript實現，還提供了該語言的擴展(DOM? BOM都是擴展之一)，這些擴展利用ECMAScript的語法等提供更多具體的功能。

　　通過DOM，將html頁面映射為一個多層的節點結構：整個html是一個根節點，根節點下分為head和body子節點，這兩個子節點下的所有html標簽都是一個又一個的子標簽節點……? 通過使用DOM提供的屬性或者方法我們可以快速鎖定到每一個我們想要鎖定的節點。

　　BOM則負責處理瀏覽器窗口和框架，如：? 彈出瀏覽器窗口，移動、縮放、關閉瀏覽器窗口，cookies支持等等

?

?

ECMAScript

--------------------------------------------------------<<<<<<基本概念>>>>>>---------------------------------------------------------------

語法注意事項：

　　1? 區分大小寫

　　2? 標識符，如變量名，函數名，屬性名等第一個字符必須是字母或者下劃線或者美元符，其余可以為數字、字母、下劃線、美元符

　　3? 單行注釋為 //?????????? 多行注釋為? /*?? 注釋內容?? */

　　4? 建議將語句使用 分號? ;? 隔開

　　5? 具有嚴格模式? 'use strict'

變量：

　　1? 松散類型，可以保存任何類型的數據。

　　2? 定義變量時，建議使用? var 關鍵字進行聲明或初始化。不用 var 關鍵字的變量為全局變量。解釋器會率先讀取使用var聲明的變量(變量提升)

　　??? var? name = 'mncu' , age = 88 ;?? 定義多個變量時使用逗號分隔

數據類型：

　　共有六種

　　　　包括5種簡單數據類型，分別是:? Undefined??? Null?? Boolean?? Number?? String??

　　　　和 1 種復雜數據類型：Object，而Object類型還有許多'子'類型，比如：Array? Date ……

　　1? 判斷數據類型時，可以使用typeof()? 或者 typeof

var a = 'hello' typeof a //"string" typeof(a) //"string"
// 數據類型 typeof()后返回的值
/* Undefined ---> undefined
* Null ---> object
* Boolean ---> boolean
* Number ---> number
* String ---> string
* Object ---> object
* 函數 ---> function
*/

　　2? Null類型，值為null，表示一個空對象指針(所以typeof(null)才會返回object) .

　　3? Boolean類型，值為true或者false，可使用Boolean()函數將任意值轉換為對應的Boolean值

　　　　-? 數字0和NaN，空字符串，null，undefined? ------經過Boolean()函數轉換-------->? false

　　　　-? 其他為 true

　　　　-? Boolean存在基本包裝類型，存在基本包裝類型的目的是為了方便操作基本類型。基本包裝類型屬于引用類型，' 基類 '為Object。

　　　　　　　同時，基本包裝類型對應于基本類型，每當讀取一個基本類型時，都會在后臺創建一個對應的基本包裝類型實例，基本包裝類型有　　　　　　　　許多屬性和方法，然后我們就可以使用這些方法對基本包裝類型進行操作，基本包裝類型的值會映射到基本類型中。當我們操作完　　　　　　　　成后，基本包裝類型的實例會被刪除。

?

　　　　　　　如果上段話沒看懂的話，不要緊，只需要知道在javascript中Boolean類型也有屬性以及方法就行了。

?

　　4? Number類型

　　　　-? NaN? ： Not a Number? 非數值類型

　　　　-? 可使用Number()函數將其他類型轉換為數字類型,轉換規則：

/* true ---> 1* false ---> 0* null ---> 0* undefined ---> NaN* 轉換字符串時，若字符串中只包含數字，則轉換為數字，否則轉換為NaN，空字符串轉換為0* 轉換對象時，則調用該對象的valueOf()方法，對該方法返回的值進行轉換*/

　　　　-? parseInt()函數比Number()函數在轉換字符串時更合理，所以推薦使用該函數，規則如下：

/* 忽略字符前的空格，若第一個非空字符不是數字或者負號，則返回NaN，若第一個* 非空字符串是數字，則向后解析，直到碰到第一個非數字字符。*/ // parseInt()函數可以接受第二個參數，用來明確指定基數。建議明確指定基數 parseInt('22dkfj') // 22 parseInt('22.5') // 22，轉換為整形 parseInt('070',8) // 八進制轉換 parseInt('0x23') // 十六進制轉換

　　　　- ?parseFloat()? 轉換為浮點型，規則同上

　　　　-? Number類型也存在基本包裝類型

//Number的基本包裝類型的方法// 方法//toFixed(num) 將數字轉換為字符格式，若指定num，則按照指定的num返回數字的小數位格式var a = 2;a.toFixed(2); // '2.00'//toExponential(num) 類似于toFixed()，返回數字的指數字符串格式a.toExponential(); //'2e+0'//不建議直接實例化Number類型，因為在使用typeof 和 instanceof測試基本類型與引用類型，結果不同var b = new Number(2);alert(typeof b); // 'object'alert(typeof a); // 'number'alert(b instanceof Number ); // falsealert(a instanceof Number ); // true

?

?

　　5? String類型

　　　　-? 使用toString()轉換為字符串

// 布爾，數值，對象，字符串類型都有 toString()方法 。 Null Nndefined 類型無此方法 var a = 21; a.toString(); // '21' a = true; a.toString() // "true"

　　　　-? 使用String()轉換為字符串

String(null) //"null" String(undefined) //"undefined"

　　　　-? String存在基本包裝類型

str.length 　　　　　　　　 返回字符串長度str.charAt(index)　　　　　　 返回str索引為index數值的單個字符,index為空則默認為0，沒有找到返回空字符串；str.charCodeAt(index)　　　　返回str索引為index數值的單個字符的unicode(統一碼),index為空則默認為0，沒有找到返回NaN；str1.concat(str2)　　　　　　 字符串連接，兩個字符串連接用空格隔開，返回新連接的字符串；str.indexOf(str1)　　　　　　 返回子字符串str1在查找字符串str中第一次出現的位置，沒有找到則返回-1,； str1.localeCompare(str2)　　 判定兩個字符串排序，如果str1排在str2,之前那么返回-1，之后返回1，相等返回0；str.match(regexp)　　　　　　 在str中匹配正則，以數組形式返回匹配到的字符串；str.replace(old,new) 　　　　在字符串str中查找old字符串(可以是正則)，用new字符串來替換；返回替換后的新字符串；str.search(str1) 　　　　　　 在字符串str中查找str1，返回第一次出現str1的位置，沒有找到返回-1；str.slice(start,end(可選)) 返回start和end數值下標之間的字符串.end為空返回start后全部字符串；str.split(" ")　　　　　　　　 把str用split方法中的符號為間隔切割字符串返回一個數組；可以使用正則patternstr.substr(start,length(可選))返回以start下標開始以length為長度之間的字符串，若length為空，則返回下標后得全部字符 串；str.substring(start,end)　　　　一個參數的話返回下標后所有字符串，兩個參數的話，以小的為開始以大的為結束，返回量下標之間的字符 串 ；str.toString()　　　　　　　　　　把str或obj返回字符串對象；str.trim()　　　　　　　　　　　　除去str兩端的空格，返回去空格的字符串，不支持IE8及前面版本； str.valueOf() 　　　　　　　　　　返回str原始值;str.toUpperCase()　　　　　　　　把str字母全部轉成大寫；str.toLowerCase()　　　　　　　　把str字母全部轉成小寫； str.toLocaleUpperCase()　　　　以本地方式把str字母全部轉換成大寫；str.toLocaleLowerCase()　　　　以本地方式把str字母全部轉換成小寫；

　　6? Object類型?

　　　　-? 定義一個對象：? var obj = new Object()

　　　　-? Object是幾乎所有類型的基礎，因此所有對象都共享Object的屬性與方法。列出兩個常見的Object方法：

　　　　　　valueOf()

　　　　　　toString()

　　6.1? Array類型

　　　　與Python中的list類似，Array是一個? 可存儲任意類型? 數據的? 有序? 列表。

　　　　來看看該對象的屬性以及方法。

//創建----------------------------------- /* 創建分為兩種方式* 1 使用構造函數* 2 使用字面量*/var a = new Array(); // 第一種方式，創建一個空的數組a = []; // 第二種方式，創建一個空的數組//屬性----------------------------------a = [1,'df',true];//1 獲取數組的長度r = a.length; // 3//請注意，直接給Array的length賦一個新的值會導致Array大小的變化a.length = 2; // a:[1, "df"]//方法----------------------------------//----------操作方法// concat() 連接 一個參數：數組// slice() 切片 兩個參數：開始索引,結束索引// splice() 參數：指定起始索引，從該索引開始刪除的項數，要插入的項1，要插入的項2 ……a = [1,2,3];var r = a.concat([4,5]); // r: [1,2,3,4,5] a:[1,2,3] a = [1,2,3];a.slice(1,2); // 從索引1開始到索引2結束，但不包括2 [2]a.slice(1); // 從索引1開始到最后 [2,3]a.slice(); // 從頭至尾 [1,2,3] a = [1,2,3,4,5];a.splice(1,2); //返回刪除的項組成的數組[2,3] a:[1,4,5]a.splice(1,0,2.1,2.2); //返回[] a:[1, 2.1, 2.2, 4, 5]//----------棧方法，先進后出。// pop() 刪除最后一個元素// push() 在數組后添加若干元素 多個參數：a.push(4,5); // 返回數組的長度 a: [1,2,3,4,5]a.pop(); // 返回刪除的元素， a: [1,2,3,4]//---------隊列方法，先進先出。//shift() 刪除頭部元素//unshift() 在頭部添加元素a = [1,2,3];a.shift(); // 返回刪除的元素 a: [2,3] , 若數組為空，則返回undefineda.unshift(4,5); // 返回數組長度 a: [4,5,1,2,3]//---------重排序方法//reverse() 反轉//sort() 排序,默認按照升序排序，可接收一個比較函數作為參數，比較函數接收兩個參數，// 若第一個參數應該位于第二個參數之前，則返回負數；……之后，則返回正數；// 若相等，則返回0a = [1,2,3];a.reverse(); // a: [3,2,1]a.sort(); // 返回 [1,2,3]a.sort(function(v1,v2){return v2 - v1;}); // 返回[3,2,1]//----------位置方法//indexOf() 兩個參數：要查找的項，表示查找位置起點的索引a = [1,2,3];a.indexOf(2); //返回1
a.indexOf(3); // 返回 -1，如果要檢索的字符串值沒有出現，則該方法返回 -1。
//----------轉換方法//join() 它把當前Array的每個元素都用指定的字符串連接起來，然后返回連接后的字符串a = [1,2,3];a.join('-'); //返回"1-2-3"//----------迭代方法//一共5個，都接受兩個參數：函數，運行該函數的作用域對象//every() 對每一項運行給定函數，若每項都返回true，則返回true// filter() 對每一項運行給定函數，返回函數返回true的項數// forEach() 對每一項運行給定函數，無返回值// map() 對每一項運行給定函數，返回每次含數調用的結果組成的數組// some() 對每一項運行給定函數，若有一項項返回true，則返回truea = [1,2,3];a.every(function(v1){return v1 >= 2;}); //返回 falsea.filter(function(v1){return v1 >= 2;}); //返回[2,3]a.map(function(v1){return v1 >= 2;}); //返回[false,true,true]a.some(function(v1){return v1 >= 2;}); //返回true//------------縮小方法//reduce() 支持兩個參數：函數，初始值//第一次運行時，將數組的第一個元素作為參數一，第二個元素作為參數二；//第二次運行時，將第一次運行的結果作為參數一，第三個元素作為參數二，以此類推。a = [1,2,3];a.reduce(function(v1,v2){return v1 + v2;}); //返回6

?

?

?　　6.2? Date類型

　　　　在說明Date類型之前，我們來說一下時間戳的概念：

　　　　時間戳是個什么東西？時間戳是一個自增的整數，它表示從1970年1月1日零時整的GMT時區開始的那一刻，到現在的毫秒數。假設瀏覽器所在電腦的　　　　　　時間是準確的，那么世界上無論哪個時區的電腦，它們此刻產生的時間戳數字都是一樣的，所以，時間戳可以精確地表示一個時刻，并且與時區　　　　　　無關。

//獲取當前時間 //注意，當前時間是瀏覽器從本機操作系統獲取的時間，所以不一定準確，因為用戶可以把當前時間設定為任何值。var now = new Date();// 創建指定日期和時間的Date對象var d = new Date(2015, 5, 19, 20, 15, 30, 123);d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)// 創建指定日期的時間戳var d = Date.parse('2015-06-24T19:49:22.875+08:00');d; // 1435146562875var d = new Date(1435146562875); //根據時間戳創建Date對象// 方法now; // Thu Oct 13 2016 21:05:16 GMT+0800 (中國標準時間)now.getFullYear(); // 2016, 年份now.getMonth(); // 9, 月份，注意！！月份范圍是0~11，9表示10月now.getDate(); // 13, 表示13號now.getDay(); // 4, 表示星期4now.getHours(); // 21, 24小時制now.getMinutes(); // 05, 分鐘now.getSeconds(); // 16, 秒now.getMilliseconds(); // 875, 毫秒數now.getTime(); // 1476363916265, 以number形式表示的時間戳//Date對象表示的時間總是按瀏覽器所在時區顯示的，不過我們既可以顯示本地時間， // 也可以顯示調整后的UTC時間：now.toLocaleString(); // "2016/10/13 下午9:05:16"，本地時間（北京時區+8:00），顯示的字符串與操作系統設定的格式有關now.toUTCString(); // "Thu, 13 Oct 2016 13:05:16 GMT"，UTC時間，與本地時間相差8小時

?

?

　　6.3? RegExp類型

　　　　正則表達式----一種強悍的匹配字符串的武器

/*創建 *分為兩種方式： * 1 字面量 * 2 使用構造函數 *//* 使用字面量創建的格式為： var expression = /pattern/flags ;* 使用構造函數進行創建的格式： var expression = new RegExp('pattern','flags')* flags:* g: 全局模式，將pattern應用于所有字符串，而非在發現第一個字符串時停止* i: 不區分大小寫* m: 多行模式** pattern:* 模式中所使用的所有元字符必須轉義* \d 匹配一個數字* \w 匹配一個數字或者字母* \s 匹配一個空格* . 匹配任意一個字符** [a-z] 匹配任意一個a-z之間的字符* [amn] 匹配任意一個a或者m或者n* a|A 匹配a或者A* \\ 特殊字符需要進行轉義，也就是添加一個反斜杠\* 特殊字符包括： - + { } [ ] \ | . ( ) ^ $ ? _** * 匹配前面的字符任意次* + 匹配前面的字符一次或者多次* ? 匹配前面的字符0次或1次* {n} 匹配前面的字符n次* {n,m} 匹配前面的字符n-m次** ^ 匹配行首* $ 匹配行尾*/var re1 = /ABC\-001/;var re2 = new RegExp('ABC\\-001');// 因為構造函數傳入的pattern是字符串，所以需要雙重轉義 re1; // /ABC\-001/re2; // /ABC\-001//* 方法* 存在兩個方法：* 1 exec() 接受一個參數，也就是將要應用模式的字符串，然后返回第一個匹配信息的數組，* 若沒有匹配項，則返回null。全局標識 g 對該方法無效。* 返回的數組是一個array，且包含兩個額外的屬性：index input* index: 匹配項在字符串中的位置 input：應用正則的字符串* 2 text() 接受一個字符串餐宿，若匹配則返回true，否則返回false*/

?

?

?

操作符：

　　1? 一元操作符

　　　　-? 遞增和遞減，仿照C中的++? --

　　　　-? 一元加和減

+true // 1 +'01' // 1 +'undefined' // NaN +null // 0

　　2? 布爾操作：

　　　　非? ：? !

　　　　與? ：? &&

　　　　或? ：? ||

　　3? 乘性操作符???

　　　　*?? 乘

　　　　/?? 除

　　　　%? 求模

　　4? 加性操作符(拼接)

　　　　var? a = 'hello' + 'world' ? ? //hello world

　　　　拼接優先級高于一元加，下面來兩個小例子，自己試驗一下，想一想為什么是這個結果吧。

var foo = "11"+2-"1"; console.log(foo); console.log(typeof foo); // 111var foo = "11"+2+"1"; //體會加一個字符串'1' 和 減去一個字符串'1'的不同 console.log(foo); console.log(typeof foo); //1121

　　5? 關系操作符

　　　　<? >? <=? >=

　　　　注意事項：?

　　　　 ? 1? 兩個字符串進行比較時，比較兩個字符串中的第一個字符對應的字符編碼值，若相等則比較第二個字符……以此類推

　　　　 ? 2? 一個字符串(或布爾)一個數值進行比較時，關系操作符傾向于將比較的值轉換為數字類型 。

　　　　 ? 　2.1---當字符串無法轉換為合法的數字時，將字符串轉換為NaN(not a number)，NaN與任何操作數比較，結果都是false(包括它自己)。

'10' < '5' // true 注意事項 1 '10' < 5 // false 注意事項 2
'a' < 5 // false 注意事項 2.1
'a' >= 5 //false 注意事項 2.1

　　6? 相等操作符

　　　　==? 不全等，只要數值相等即可，類型可以不等 ?? 1 == ‘1’ ? // true

　　　　===? 全等 ，數值與類型必須相等。建議使用全等。

　　條件操作符

　　　　variable = boolean_expression ? true_value : false_value ;

　　　　當boolean_expression為true時，variable值為true_value，反之則為false_value

?

?

函數

　　function? function_name(arg1,arg2...){?? }

　　　　-? 參數只提供便利，非必需。

　　　　- ECMAScript 不介意傳入多少個參數，也不在乎傳入的參數是什么類型

　　　　- 函數無重載

　　　　- 解釋器會率先讀取使用function聲明的函數(函數提升)

　　　　- 函數名是變量，函數也可以作為值使用

　　　　- 函數具有內部屬性 arguments 和 this

　　　　　　arguments 是一個包含當前函數參數的類數組對象

　　　　　　this引用的是函數據以執行的環境對象，比如：在全局中調用函數，則this引用的是window對象。

　　　　- 函數的屬性

　　　　　　FunctionName.length ? 函數希望接受的參數的個數

　　　　　　FunctionName.prototype? 指向函數的原形對象

　　　　- 函數的方法

　　　　　　apply()? call()? 在特定的作用域中調用本函數，實際上就是定義this的值。

?

轉載于:https://www.cnblogs.com/MnCu8261/p/5950850.html

總結

以上是生活随笔為你收集整理的javascript高级程序设计--笔记01的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。