1. 程式人生 > >JAVASCRIPT高程筆記-------第五章 引用類型

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

str1 筆記 efi 針對 lis 取字符 哪裏 oca sum

一、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);  //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

  

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

技術分享

四、正則表達式 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 = "[email protected]";
var str2= "swb163.com";
alert(pattern.test(str1));  //true
alert(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()方法 創建一個字符串的副本 刪除前置以及後綴的空格,然後返回結果 不會修改字符串本身 , 此外谷歌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() 方法獲取指定小數位的隨機數

 

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