JAVASCRIPT高程筆記-------第五章 參考型別

標籤：reducer   沒有   多行   pos   upd   lte   樣本   指定   trim   

一、Object類型

1.1建立方式 ①new關鍵字 ： var person = new Oject();  

②給定直接量：

var person = {name : "zhangsan",age  : "18"}

1.2.訪問方式 ：一種為 對象點屬性名稱   “person.name”   或者使用中括弧  “person["name"]” 使用中括弧必須用引號括起來  或者括弧內使用的是變數  例如：var b="name"；  person[b] 

二、array 數群組類型

 與其他程式設計語言同屬於資料的有序列表，不同之處則它能儲存任意資料類型！

2.1  聲明方式  ①new對象方式    var a = new Array();    建立一個空數組 長度為0 ，  或者傳入數字 指定數組的長度  var b = new Array(5);建立長度為5的數組， 或者在傳入指定值 var b = new Array("lisi");  注意：僅當傳入一個number類型資料時 才會初始化數組長度 ，var b = new Array(5,"lisi");此時的數組 b則長度為2  第一個值為number類型的資料5，第二個值為字串類型“lisi”     這種方式聲明  可以省略new關鍵字

　　　　　　② 直接量  var person = new Object();  var b = [5,"lisi",person];   數組b的第一個值為number類型資料5，第二個值為字串“lisi”，第三個值為Object 對象 person  ！ var b  = [] ; 此時b 為空白數組   ，奇葩寫法 var a = [1,2, ]   var b = [,,,]     a數組可能會存在2項 或者 3項的值  第三項為undefined  而b則有可能包含 3項或者4項undefined值  ECMAscript中的bug

2.2 數組的length屬性   var b = new Array(5);  alert(b.length)  則等於5 ，   js中 數組的length屬性 並非是唯讀屬性    因此可以利用此特性  實現在數組末尾進行添加資料    var b = [] ;  b[b.length]=5;  b[b.length] = "zhangsan";  alert(b.length); 最後的b.length值等與2 ;

2.3 檢測是否為數組      

var value = [1,2,3];if(value instanceof Array){//coding...}或者if(Array.isArray(value)){//coding...}

　　第一種方式存在的缺陷，當網頁進行通訊時 因為頁面a與頁面b 並不是同一個全域執行環境，從而存在兩個不同版本的Array建構函式，那麼可能會驗證失敗！為瞭解決此問題 ECMAscript 5新增了 Array.isArray()方法   此方法只關心變數是否為數群組類型而不關心是由哪裡的執行環境建立

2.4 js數組的特性  ---棧（last-in-first-out）

由於 數組的length 屬性並非唯讀  因此可以實現棧結構的資料存放區後進先出     分別是push()和pop()方法，當調用push()方法時將資料插入數組的尾部，數組長度+1！而pop方法則將數組最後一個元素彈出，數組長度-1；

2.5    js數組特性---隊列 （first-in-first-out）  shift()和unshift()方法   shift方法擷取數組內第一個元素的值，並將數組中第二個元素的值移動到第一個元素的位置上，  unshift()方法則相反 ，插入一個新值放入數組第一個元素上，而原有第一個元素則變成第二個元素！

2.6 數組重排序  reverse()與 sort()方法， reverse方法用於反轉數組的順序，sort方法 會按照值的大小進行排序  注意的是 sort方法將調用每個元素的tostring方法擷取字串 然後根據字串進行比較 範例程式碼

var b = [0,1,5,10,15]b.sort();alert(b); //0,1,10,15,5

　自訂比較子利用sort()進行排序

function compare1(value1,value2){if(value1 > value2){return -1;}else if(value1 < value2){return 1;}else{return 0;}}function compare2(value1,value2){return value1 - value2;}var values = [0,1,5,15,10,7,9,8]values.sort(compare2);alert(values);

 

concat()方法  由數組對象調用，複製原有對象中的資料 再 根據參數 產生一個新的數組對象，接受一個或者多個參數 或者數組   將 接受的參數 依次插入 新的數組當中

slice() 方法  基於當前數組中的一個或者多個元素 建立一個新的數組   接受一個或者兩個參數 （參數為數組的下標 ）  當參數為一個時  截取數組中指定下標開始到數組末尾的元素，兩個參數時 截取 startIndex，endIndex之間的元素 產生一個新的數組返回    特點是 含頭不含尾！

 

splice（）方法  主要使用者向數組當中插入元素   根據參數個數 形成不同的功能 第一個參數為 起始位置，第二個參數為刪除的個數，第三個參數。。或者第N個參數 均為 數組中插入的值 

兩個參數--- 數組刪除元素用法   splice(0,2)   表示從0下標開始 刪除數組中兩個元素的值

var values = [0,1,5,15,10,7,9,8];var value1 = values.splice(0,2);alert(values); [5,15,10,7,9,8]

三個參數---向數組中插入元素   splice(0,2,"aa","bb")     從起始位置0下標開始 刪除兩個元素，插入兩個新元素  亦可以說 數組元素替換功能 

var values = [0,1,5];var value1 = values.splice(0,2,"aa","bb");alert(values);  // [‘aa‘,‘bb‘,5]

　　indexOf()和lastIndexOf()方法   尋找元素  一個或者2個參數   第一個參數為要尋找的元素，第二個參數為尋找的起始位置   尋找方式以 全類型相等尋找  “===” 

數組的迭代方法  這些方法都接受一個指定的函數 

every()   對數組每個元素運行指定函數 ，如果數組中每個元素對應函數都返回true 則此方法返回true  否則返回false

fiter()  對數組每個元素運行指定函數  返回 函數返回為true的元素 組成一個新的數組

forEach() 對數組每個元素運行指定函數  無傳回值

map()  對數組每個元素運行指定函數 返回 函數運行結果的數組

some()   對數組每個元素運行指定函數 ，如果數組中某個元素對應函數都返回true 則此方法返回true  否則返回false

var values = [0,1,5,15,10,7,9,8]var everyValue = values.every(function (item,index,array){return item >=  0 ;});console.log(everyValue);  //truevar someValue = values.some(function (item,index,array){return item >=  5 ;});console.log(someValue);  //truevar fiterValue = values.filter(function (item,index,array){return item >=  0 ;});console.log(fiterValue); // [0, 1, 5, 15, 10, 7, 9, 8]var mapValue = values.map(function (item,index,array){return item >=  5 ;}) console.log(mapValue);  // [false, false, true, true, true, true, true, true]

　　

reduce()和 reduceRigth() 方法  順序執行給定函數和逆序執行給定函數 最終遍曆整個數組 的子項執行指定的函數   ，function中第一個參數為 數組第一個元素的值    第二個為當前的元素值，第三個為元素的索引   第四個為數組對象

此方法從數組第二項元素開始遍曆

var values = [1,2,3,4,5];var sum1 = values.reduce(function(prev,cur,index,array){
　　　　　console.log(index);  //1,2,3,4return prev + cur;});alert(sum1);   //15var sum2 = values.reduceRight(function(prev,cur,index,array){
　　　　 console.log(index); // 3,2,1,0return prev + cur;});alert(sum2);//15

　　

三、Date類型

　　javascript中date類型使用的是UTC時間（1970年1月1日午夜0時） 的毫秒數來儲存時間資訊，   var date = new Date(); 預設擷取目前時間值    若需要根據指定時間建立日期對象 則需要傳入表示該日期時間的毫秒數（即UTC時間距指定時間的毫秒數），

　　Date.parse();接收指定格式的日期文字轉化成 毫秒數  如果傳入的字串不能表示日期，則此方法返回NaN    ，當在Date對象的建構函式中傳入字串時  js後台解析也是通過調用Date.parse()方法來擷取毫秒數

       Date.UTC()方法   也是返回表示指定日期的毫秒數  而它的參數 分別是年份 基於0的月份（一月是0，二月是1。。。。  ），月的天數（1-31）、小時（0-23）、分（0-59）、秒（0-59），毫秒（0-99）    而這些參數中只有 年份和月份 是必要參數，其他不傳，都會預設為0

 　　ECMAscript 5 　中 新增了 Date.now()方法 返回目前時間的毫秒值  Date對象的其他方法 具體查閱 文檔 js高程 102頁

 

 四、Regex  RegExp類型

   var expression = new RegExp("") 

pattern ：運算式格式

flags： 標識符  g:表示匹配所有字串，而不是在發現第一個匹配項後立即停止，  i：表示 不區分大小寫     m：表示 多行模式

範例程式碼

var expression = /[bc]at/i;var str  = ‘cat‘;alert(expression.test(str));  // true   i:表示忽略大小寫var expression = /[bc]at/g; var str  = ‘cat‘;alert(expression.test(str)); // true   g:表示匹配所有

　　Regex中的 元字元 使用  必須進行轉義  

RegExp對象的執行個體方法

 exec() 方法  捕獲 匹配項的字串  返回被捕獲字串的數組    但不同於普通數組    額外提供了 index和input屬性    index  表示匹配的索引位置，input 表示應用Regex的字串

test() 方法    返回布爾值    只驗證是否包含 符合規定的字串對象   包含返回true  否則返回false

 利用JS Regex驗證郵箱格式

var pattern = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/gi;var str1 = "[email protected]";var str2= "swb163.com";alert(pattern.test(str1));  //truealert(pattern.test(str2));  //false

　　

五、Function 類型

 js中 每個函數都是Function類型的執行個體，因此函數名稱作為指標 指向棧記憶體中的Function執行個體 ,  函數的聲明樣本 ：  他們的意義幾乎一致

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

②function sum(num1,num2) {return num1+num2}   //參考java中的匿名對象

③ var sum = new Function("num1"",num2","return num1+num2");  //不推薦此寫法  （此寫法產生二次解析，第一次解析常規ECMA代碼，第二次解析傳入建構函式中的字串）

概念：沒有重載  同名函數會產生覆蓋的效果 

函式宣告與函數運算式  js解析器 在向執行環境中載入資料時 會先讀取函式宣告，並使其在執行代碼時可用（可以訪問） ，而函數運算式則必須等代執行它所在的代碼位置才會真正被解析執行   

alert(sum(10,10)); //20 function sum(num1,num2){return num1+num2;}alert(sum2(10,10));  //報錯var sum2 = function (num1,num2){return num1+num2;}

　js解析器 會通過一個名為函式宣告提升的過程，讀取並將函式宣告添加到執行環境中，因此即使函式宣告在調用此函數的後面 ，js引擎也能將函式宣告提升到執行環境的頂部， 而第二種 方式  函數位於一個初始化語句中而不是一個函式宣告，在執行函數所在語句之前不會儲存有對函數的引用  所有在執行 sum2求和時 會產生錯誤

5.5 函數的方法和屬性

函數的屬性和方法 ，函數是特殊的對象，每個函數都包含兩個屬性：length 和 propertype

length屬性工作表示 函數希望接收參數的個數  ；

propertype屬性 是儲存參考型別的執行個體方法的真正所在 ，類似toString()和valueOf()等方法都儲存在propertype名下

apply()方法 可以擴充函數運行環境的方法   apply方法接收2個參數 第一個參數為 函數的運行環境，第二個是參數數組 也可以是Array的執行個體或者是arguments對象

call()方法 作用與apply方法一致  ，區別在與 參數   它的第一個參數為函數的運行環境，然後其他的參數作為參數列表直接傳遞給函數本身     

var num1 = 10;var num2 = 10;var o = new Object();o["num1"] = 5;o["num2"] = 5;function sum(){    //this代表的當前執行環境    return this.num1 + this.num2 ;}alert(sum.apply(this));  // 結果值20 傳入預設全域 window對象alert(sum.apply(o));  // 結果值10 傳入自訂Object對象 o

 

通過apply和call方法 可以實現 對象與方法的解耦  亦可以看做 函數的重用

5.6 基本封裝類型  Boolen 、Number和String 

var s1 = ‘some text‘;var s2 = s1.substring(2);alert(s2);  //me text

   JS內部執行時  讀取s1的值時  會自動的建立String 對象 s1  ，所以 可以正常調用substring()方法      與手動進行建立String對象的區別 則是 執行完s2的賦值代碼後這個對象 被立即銷毀了 ：範例程式碼

var s1 = ‘some text‘;s1.color = ‘red‘;alert(s1.color); //undefined  var s2 = new String("some text");s2.color = ‘red‘;alert(s2.color);  //red

　　

Number 對象  重寫了toString方法   預設無參 則返回數位字串形式    也可以傳入表示基數的參數   根據基數返回對應進位數值的字串形式     樣本  var num = 10; alert(num.toString(2)) ;//結果值為‘1010‘

　　toFixed()方法   返回安裝指定的小數位轉化的字串   樣本： var num = 10;  alert(  num.toFixed(2) )   // 結果為  “10.00”      注意 以四捨五入的特性去返回數值  並且 IE8 以及更早的版本 中 此方法存在bug  IE9後修複

String 對象     注意 字串的常用操作方法 都不會修改原有字串本身的值，而是執行後 都會返回一個新的字串值

  charAt()方法  返回指定下標的字元   charCodeAt()；返回指定下標字元的ASCII碼錶中的值

 concat(); 接收 一個或者多個參數  按照參數列表的位置 依次添加至字串的末尾

slice()、substr()、substring()   字元擷取子串方法    這三個方法都接收一個或者2個參數 ，第一個參數為子串在當前字串中的下標，第二個參數（若存在第二個參數）表示子串到哪裡結束，區別  slice和substr的第二個參數表示的是字串的下標位置  而substr則是 返回子串的個數

var s1= ‘ABCDEFGH‘;alert(s1.slice(2,5));   // ‘CDE‘   從下標 2開始 到下標5 結束  含頭不含尾alert(s1.substring(2,5));// ‘CDE‘   從下標 2開始 到下標5 結束  含頭不含尾

alert(s1.substr(2,5)); // ‘CDEFG‘   從下標2開始截取  截取5個子串 進行返回

　　

字串的位置操作方法  indexOf()和lastIndexOf()方法  接收一個或者兩個參數  第一個參數為要尋找的字元，第二個參數為尋找的起點位置   區別 indexOf從左往右開始尋找 而lastIndexOf則是從右往左尋找    若未找到指定字元 返回-1  找到則返回字元的下標位置

trim()方法 建立一個字串的副本 刪除前置以及尾碼的空格，然後返回結果    不會修改字串本身 ， 此外Google8+ Firefox3.5+瀏覽器 還支援非標準的trimLeft()和trimRight()方法  分別刪除字串的前置和尾碼空格

toLowerCase()和toUpperCase()  字串大小寫轉換   toLocaleLowerCase()和toLocaleUpperCase() 針對地區的大小寫轉化

字串模式比對

　　捕獲 match()  本質上與Regex對象的exec()方法一致   此方法只接收一個參數  要麼是Regex  要麼RegExp對象   返回一個數組  數組中依次存放與Regex所匹配的子串

　　尋找search()方法 接收的參數與match方法一致   返回第一個匹配子串的索引 ， 未匹配則返回-1  從左至右開始匹配

　　替換replace()方法  接收2個參數，第一個參數為RegExp對象或者一個字串，第二個參數為一個字串或者函數    若第一個參數為字串，那麼只會替換第一次找到的子串 ，如果全域替換 則第一個參數只能傳遞Regex 並且指定全域標識

　　分割 split()方法  接收 一個或者兩個參數   第一個參數為分隔字元 或者為一個Regex對象，第二個參數為返回數組的大小

字串比較 localeCompare()  如果字串在字母表中排在參數字串的前面，則返回一個負數 反之返回正數       相同字串 則返回0   

fromCharCode() 方法  接收一個或者多個參數  參數類型為Number    返回參數對應ASCII表中的字元   

 

5.7單體內建對象  ----全域對象

  Global 對象--所有在全域範圍中定義的屬性和方法 都是該對象的屬性和方法   例如 常用的 isNaN，parseInt。。。

5.7.1URI編碼方法

 encodeURI()和encodeURIComponent()  方法 可以對URI進行編碼  從而 發送瀏覽器進行解析    encodeURI 針對於URI中的某一段內容進行編碼，不會本身屬於URI的特殊字元進行編碼，例如冒號、斜杠，問號，＃號，而encodeURIComponent則會對整個URI進行編碼

decodeURI()和decodeURIComponent()方法則對編碼後的URI進行解碼  樣本：

var URI = ‘https://i.cnblogs.com/EditPosts.aspx?postid=7628143  &update=1‘;var value1 = encodeURI(URI);var value2 = encodeURIComponent(URI);console.log(value1);  // 結果https://i.cnblogs.com/EditPosts.aspx?postid=7628143%20%20&update=1       encodeURI()方法將尾碼postid後的空格轉化成了 ‘%20‘console.log(value2 ); // https%3A%2F%2Fi.cnblogs.com%2FEditPosts.aspx%3Fpostid%3D7628143%20%20%26update%3D1     encodeURIComponent()方法則是將整個URI中出現的特殊字元進行了重編碼console.log(decodeURI(value1));   //https://i.cnblogs.com/EditPosts.aspx?postid=7628143  &update=1console.log(decodeURIComponent(value2));  //https://i.cnblogs.com/EditPosts.aspx?postid=7628143  &update=1

　　

 5.7.2 eval()方法    --接收一個字串形式的 ECMAscript  參數   當JS解析器發現eval()方法時  會將其參數進行解析運行   ，通過eval()方法解析處理的script 會認為是當前執行環境的一部分因此被解析執行的代碼具有與該執行環境相同的範圍鏈     當strict 模式下時 外部無法訪問該方法解析執行的變數

 

5.7.4   window對象  ---- 瀏覽器的預設執行環境     js中定義的任何全域變數或者方法 都是此對象的一部分   參考第八章

5.7.5  Math對象  提供一系列的數學公式計算 

  min()和max()方法 接收多個參數  返回 其中最小或者最大的參數值     小技巧  求數組中最大值   var array = [3,5,9,6,15,28,7]     var max = Math.max.apply(Math,array);

ceil()方法 執行向上舍入    例如  Math.ceil(5.1)    執行結果等於 6    對於在X和X+1 之間的值 執行此方法   返回 X+1 的值     

floor()方法與ceil()方法相反 向下舍入  例如 Math.floor(5.1)  執行結果 = 5  對於在X與x+1之間的值  執行後 返回 X 的值

round()方法 標準的數學四捨五入     

random()方法  產生一個0-1之間的隨機數 不含0和1       樣本  var num =  Math.random()     //num = 0.12121111931743789      小技巧 使用Number對象的 toFixed() 方法擷取指定小數位的隨機數 

 

 

 

 

 

　

JAVASCRIPT高程筆記-------第五章 參考型別