JAVASCRIPT高程筆記-------第五章引用類型

時間 2019-11-16

標籤 javascript 高程筆記第五引用類型欄目 JavaScript 简体版

原文原文鏈接

1、Object類型javascript

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

②給定直接量：正則表達式

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

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

2、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中的bugapp

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 ;dom

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);  //true
var someValue = values.some(function (item,index,array){
	return item >=  5 ;
});
console.log(someValue);  //true

var 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,4
	return prev + cur;
});
alert(sum1);   //15
var sum2 = values.reduceRight(function(prev,cur,index,array){
　　　　 console.log(index); // 3,2,1,0
	return prev + cur;
});
alert(sum2);//15

3、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頁

4、正則表達式 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:表示匹配全部

　　正則表達式中的元字符使用必須進行轉義

RegExp對象的實例方法

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

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

利用JS 正則表達式驗證郵箱格式

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 = "swb@163.com";
var str2= "swb163.com";
alert(pattern.test(str1));  //true
alert(pattern.test(str2));  //false

5、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()方法建立一個字符串的副本刪除前置以及後綴的空格，而後返回結果不會修改字符串自己，此外谷歌8+ 火狐3.5+瀏覽器還支持非標準的trimLeft()和trimRight()方法分別刪除字符串的前置和後綴空格

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

字符串模式匹配

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

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

　　替換replace()方法接收2個參數，第一個參數爲RegExp對象或者一個字符串，第二個參數爲一個字符串或者函數若第一個參數爲字符串，那麼只會替換第一次找到的子串，若是全局替換則第一個參數只能傳遞正則表達式而且指定全局標識

　　分割 split()方法接收一個或者兩個參數第一個參數爲分隔符或者爲一個正則表達式對象，第二個參數爲返回數組的大小

字符串比較 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=1
console.log(decodeURIComponent(value2));  //https://i.cnblogs.com/EditPosts.aspx?postid=7628143  &update=1

5.7.2 eval()方法 --接收一個字符串形式的 ECMAscript 參數當JS解析器發現eval()方法時會將其參數進行解析運行，經過eval()方法解析處理的script 會認爲是當前執行環境的一部分所以被解析執行的代碼具備與該執行環境相同的做用域鏈當嚴格模式下時外部沒法訪問該方法解析執行的變量

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() 方法獲取指定小數位的隨機數