摘要:構造函數本身就是一個函數,只不過該函數是出于創建新對象的目的而定義的。使用的構造函數是,它只為新對象定義了默認的屬性和方法。第一種就是操作符后跟構造函數第二種是使用對象字面量表示法。
本文記錄了我在學習前端上的筆記,方便以后的復習和鞏固。
Object類型
Array類型
Date類型
RegExp類型
Function類型
基本包裝類型
單體內置對象
引用類型的值(對象)是引用類型的一個實例。引用類型是一種數據結構,用于將數據和功能組織在一起。也常被稱為類。引用類型有時候也被稱為對象定義,因為它們描述的是一類對象所具有的屬性和方法。
新對象是使用new操作符后跟一個構造函數來創建的。構造函數本身就是一個函數,只不過該函數是出于創建新對象的目的而定義的。
var person = new Object();
這段代碼創建了Object引用類型的一個新實例,然后把該實例保存在變量person中。使用的構造函數是Object,它只為新對象定義了默認的屬性和方法。
5.1 Object 類型創建Object實例的方式有兩種。
第一種就是new操作符后跟Object構造函數
var person = new Object(); person.name = "Nicholas"; person.age = 29;
第二種是使用對象字面量表示法。(簡化創建包含大量屬性的對象過程)
var person = { name : "Nicholas", age : 29 }
使用對象字面量語法時,屬性也可以使用字符串
var person = { "name" : "Nicholas", "age" : 29, 5 : true } //屬性名會自動轉換為字符串
另外,使用對象字面量語法時,如果留空花括號,則可以定義只包含默認屬性的方法的對象
var person = {}; //與new Object()相同 person.name = "Nicholas"; person.age = 29;
在通過對象字面量定義對象時,實際上不會調用Object構造函數
對象字面量也是向函數傳遞大量可選參數的首選方式
function displayInfo(args) { var output = ""; if(typeof args.name == "string"){ output += args.name; } if(typeof args.age == "number"){ output += args.age; } console.log(output) //Nicholas29,Greg } displayInfo({ name: "Nicholas", age: 29 }); displayInfo({ name: "Greg" });
這種傳遞參數的模式最適合需要向函數傳入大量可選參數的情形。一般來講,命名參數雖然容易處理,但是有多個可選參數的情況下就會顯示不夠靈活。最好的做法是對那些必須值使用命名參數,而使用對象字面量來封裝多個可選參數。
一般訪問對象屬性都是點表示法。不過也可以使用方括號來訪問對象的屬性
console.log(person["name"]); //"Nicholas" console.log(person.name); //"Nicholas" //方括號語句主要優點是可以通過變量來訪問屬性 var propertyName = "name"; console.log(person[propertyName]); //"Nicholas"
5.2 Array 類型通常,除非必須使用變量來訪問屬性嗎,否則我們建議使用點表示法。
與其他語言不同,ECMAScript數組的每一項可以保存任何類型的數據,可以用數組第一個位置保存字符串,第二位置保存數值,第三位置保存對象,以此類推。而且ECMAScript數組的大小是可以動態調整的,即可以隨著數據的添加自動增長以容納新增數據。
創建數組的基本方式有兩種。第一種是使用Array構造函數:
var color = new Array(); var colors = new Array(20); //將創建length值為20的數組 var colors2 = new Array("red", "blue", "green"); //創建一個包含3個字符串的數組 var names = new Array("Greg"); //創建一個包含1項的數組;
第二種方式是使用數組字面量表示法:
var colors = ["red", "blue", "green"] //創建一個包含3個字符串的數組 var names = []; //創建一個空數組 var values = [1,2,]; //不要這樣!這樣會創建一個包含2或3項的數組 var options = [,,,,,]; //不要這樣!這樣會創建一個包含5或5項的數組
與對象一樣,在使用數組字面量表示法時,也不會調用Array構造函數(Firefox3及更早版本除外)
讀取數組和數組length
var colors = ["red", "blue", "green"]; var names = []; colors[2] = "black"; //修改第三項 colors[3] = "brown"; //新增第四項 console.log(colors[0]); //"red" console.log(colors.length); //4 console.log(names.length); //0 //數組length不是只讀的,通過設置這個屬性可以從數組的末尾移除項或添加新項 colors.length = 2; //修改數組的長度為2,數組就只有2個項了 console.log(colors[2]); //undefined colors.length = 4; console.log(colors[3]); //undefined;
利用length屬性也可以方便的在數組末尾添加新項
var colors = ["red", "blue", "green"]; colors[colors.length] = "black"; colors[colors.length] = "brown"; colors[99] = "while"; console.log(colors.length) //100 //位置5到98實際上都是不存在的訪問他們都將返回undefined5.2.1 檢測數組
對于一個網頁,或者一個全局作用域而言,使用instanceof操作符就能得到滿意的結果:
if(value instanceof Array) { //... }
instanceof操作符的問題在于,它假定只有一個全局執行環境。如果網頁中包含多個框架,那實際上就存在兩個以上不同的全局執行環境,從而存在兩個以上不同版本的Array構造函數。如果你從一個框架向另一個框架傳入一個數組,那么傳入的數組與在第二個框架中原生創建的數組分別具有各自不同的構造函數。
為了解決這個問題,ECMAScript5新增了Array.isArray()方法。這個方面目的是最終確定某個值到底是不是數組,而不管它是在哪個全局執行環境中創建的。
if(Array.isArray(value)){ //... }
5.2.2 轉換方法注意:不建議使用instanceof可能會出現異常,推薦使用Array.isArray方法
所有對象都具有toLocaleString()、toString()和valueOf()方法。數組調用toString()方法會返回由數組中每個值得字符串形式拼接而成的一個以逗號分隔的字符串,調用valueOf()返回的還是數組。
var colors = ["red", "blue", "green"]; console.log(colors.toString()); //red,blue,green console.log(colors.valueOf()); //返回整個數組 console.log(colors); //返回整個數組 alert(colors.valueOf()); //red,blue,green alert(colors); //red,blue,green
由于alert()要接收字符串參數,所以它會在后臺調用toString()方法。
使用join()方法,則可以使用不同的分隔符來構建這個字符串。join()方法值接收一個參數,即用作分隔符的字符串,然后返回包含所有數組項的字符串。
var colors = ["red", "green", "blue"]; alert(colors.join(",")); //red,green,blue alert(colors.join("||")); //red||green||blue
5.2.3 桟方法 和 5.2.4隊列方法 桟方法如果數組中的某一項值是null或者undefined,那么該值在join()、toLocaleString()、toString()、valueOf()方法返回的結果中以空字符串表示。
在桟中項的插入(叫做推入)和移除(叫做彈出),只發生在一個位置——桟的頂部。ECMAScript為數組專門提供了push()和pop()方法,以便實現類似桟的行為。
push()方法可以接受任意數量的參數,把它們逐個添加到數組末尾,并返回修改后數組的長度。而pop()方法則從數組末尾移除最后一項,減少數組的length值,然后返回移除的項(值)。
隊列方法shift()方法能夠移除數組中的第一個項并返回該項,同時將數組長度減1。結合使用shift()和push()方法,可以使用隊列一樣使用數組
ECMAScript還為數組提供了一個unshift()方法。unshift()與shift()的用途相反,它能在數組前端添加任意個項并返回數組的長度。因此同時使用unshift()和pop()方法,可以從相反方向來模擬隊列,即在數組前端添加項,從數組末端移除項。
//push var colors = new Array(); //創建一個數組 var count = colors.push("red", "green"); //推入兩項(從后推入) console.log(count); //2 count = colors.push("black"); //推入一項(從后推入) console.log(count); //3 console.log(colors); //["red","green","black"] //pop var item = colors.pop(); //取得最后一項 console.log(item); //"black" console.log(colors.length); //2 console.log(colors); //["red","green"] //shift var shit = colors.shift(); //取得第一項 console.log(shit); //"red" console.log(colors.length); //1 console.log(colors); //["green"] //unshift var unshit = colors.unshift("red","blue"); //推入兩項(從前推入) console.log(unshit); //3 console.log(colors); //["red","blue","green"]5.2.5 重排序方法
reverse()和sort()可以用來對數組進行重排序。
reverse()方法會反轉數組項的順序。
sort()方法會調用數組中每一項的toString()方法,并根據返回的字符串來對整個數組進行升序的排序,顯然大部分情況下這種默認行為都不是我們所需要的。所以,我們可以傳入一個比較函數作為sort()方法的參數,以便確定排序的順序。
var num = [0, 5, 1, 10, 15]; num.sort(); alert(num); //結果并非是0,1,5,10,15 而是0,1,10,15,5. 原因是sort比較的是字符串 /* 因此,sort()方法可以接收一個比較函數作為參數,以便我們指定哪個值位于哪個值的前面 ** 比較函數接收兩個參數,如果第一個參數應該位于第二個參數之前則返回一個負數,相等返回0,在之后就返回正數 */ function compare(value1, value2){ return value2 - value1; //降序則改為value1 - value2; } var num = [0, 5, 1, 10, 15]; num.sort(compare); alert(num);//0,1,5,10,15 //若只是想反轉數組,而不用排序就用reverse() var num = [0, 5, 1, 10, 15]; num.reverse(); alert(num);//15,10,1,5,05.2.6 操作方法
concat():用于拼接數組
slice():用于獲取數組中的某幾個項
splice():主要用途是向數組的中部插入項
方法一:concat()方法可以基于當前數組中的所有項創建個新數組,簡單點就是創建個副本,然后將接受到的參數添加到這個副本的末尾, 原來的數組不會動。
//可接收0個、1個或多個參數,沒有參數就相當于復制當前數組,返回當前數組的副本 //參數若是值,就直接加到副本數組的末尾。參數若是數組,則將數組中的每一項加到副本末尾 var colors = ["red", "green", "blue"]; var colors2 = colors.concat("yello", ["black", "brown"]); console.log(colors); //red,green,blue原數組不動 console.log(colors2); //red,green,blue,yello,black,brown
方法二:slice( )它能夠基于當前數組中的一項或多個項創建一個新數組。接收一個參數或者兩個參數,即返回項的起始位置和結束位置。不傳則到末尾。如有2參,結束位置并不包括結束位置所在項(理解從0開始)。注意 不影響原數組
var arr = ["red", "green", "blue", "yello", ""purple]; var arr2 = arr.slice(1); //因為第二個參數沒有,所以從arr[1]開始獲取后面全部項 var arr3 = arr.slice(1,4); //截取arr[1]開始到arr[4]前 console.log(arr2); //green,blue,yellow,purple console.log(arr3); //green,blue,yellow
方法三:在數組方法中算是最強大的方法了。它有很多種用法,主要用途是向數組的中部插入項,但使用這種方法的方式則有如下三種。
1.刪除: 可以刪除任意數量的項,只需指定2個參數: 要刪除第一項的位置和要刪除的項的數目。
舉個栗子,splice(0,2); //刪除數組的前兩項
2.插入: 可以給指定位置插入任意數量的項。3+個參數,起始位置,0(要刪除的項數為0項,也就是不刪除)和要插入的項。如果要插入多個項,則把項作為第四、第五,以致任意多個項。
舉個栗子: splice(2, 0, “red”, “yellow”, “green”); //在位置2依次插入red, yellow,green
3.替換 可以在指定位置刪除任意多項,且同時刪除任意多項。3個參數。 (startPos, delNum, insertNum) delNum 可以和insertNum不相等
`舉個栗子: splice(2, 1, “red”, “green”);//刪除位置2的1項,再從位置2插入red,green
注意: splice()方法始終返回一個從原始數組刪除的項的數組,若沒有刪除項返回即為空。
簡單點說,就是刪了什么就返回了什么,沒刪就返回空。`
var arr = ["red", "green", "blue"]; var removed = arr.splice(0,1); //刪除第一項 console.log(arr); //green,blue console.log(removed); //red,返回的數組中只包含一項 removed = arr.splice(1, 0, "yellow", "orange"); //從位置1開始插入兩項 console.log(arr); //green,yellow,orange,blue console.log(removed); //返回的事這個空數組 removed = arr.splice(1, 1, "red", "purole"); //插入兩項,刪除一項 console.log(arr); //green,red,purole,orange,blue console.log(removed); //yellow,返回的數組中只包含一項5.2.7 位置方法
indexOf():從數組的開頭開始向后查找某一項
lastIndexOf():從數組的末尾開始向前查找某一項
5.2.8 迭代方法兩個方法都返回要查找的項在數組的索引位置,或者在沒找到的情況下返回- 1
ECMAScript5為數組定義了5個迭代方法。每個方法都接收兩個參數: 要在每一項上運行的函數和運行該函數的作用域對象(可選)—-影響this的值。每一項運行的函數包含三個參數: 數組項的值、該項在數組中的位置和數組對象本身。以下是五個方法的作用
every(): 對數組中每一項運行指定函數,如果該函數每一項都為true,則返回true,否則false。
filter(): 對數組中每一項運行指定函數, 返回該函數會返回true的項組成的數組(篩選出true的項)
forEach(): 對數組中每一項運行指定函數, 沒有返回值。
map(): 對數組中每一項運行指定函數, 返回每次函數調用的結果組成的數組
some(): 對數組中每一項運行指定函數, 如果該函數對任一項返回true就返回true
以上方法都不會改變原數組的值。
方法的理解:
every() 可以理解成 &&,全為真則真
filter() 篩選,篩選出真的項組成的數組,
forEach() 可以遍歷數組為數組的每個項添加方法
map() 映射 不管結果是什么,都返回一個由結果組成的數組,并不只是true false
some 可以理解 || 或操作,有一個為真則為真
5.2.9 歸并方法都接受兩個參數:一個在每一項上都調用的函數和作為歸并基礎的初始值。傳個reduce和reduceRight()的函數都接受4個參數:前一個值、當前值,項的索引和數組對象。
reduce(): 從數組第一項開始,逐個遍歷到最后一項,可以用來數組求和
reduceRight(): 從數組最后一項開始,逐個遍歷到第一項,可以用來數組求和
這兩個方法都會迭代數組的所有項,然后構建一個最終返回的值。
//可以用來求和 var arr = [1,2,3,4,5]; var sum = arr.reduce(function(prev, cur, index, array){ return prev + cur; }) console.log(sum); //155.5 Function類型
函數是Function類型的實例,函數是對象,因此函數名實際上也是一個指向函數對象的指針,不會與某個函數綁定。
//函數聲明語法定義函數 function sum (num1, num2){ return num1 + num2 }; //函數表達式定義函數 var sum = function sum (num1, num2){ return num1 + num2 }; //使用Function構造函數 var sum = new Function("num1", "num2", "return num1 + num2"); //不推薦會導致解析兩次代碼
一個函數可能會有多個名字:
function sum (num1, num2){ return num1 + num2 }; console.log(sum(10,10)); //20 var anotherSum = sum; //此時,anotherSum和sum的指針都指向了同一個函數 console.log(anotherSum(10,10)); //20 sum = null //設為null指針就沒了和函數斷絕關系 console.log(anotherSum(10,10)); //20
5.5.1 沒有重載(深入理解)注意:使用不帶圓括號的函數名是訪問函數指針,而非調用函數
兩個同名函數,后面的函數會覆蓋前面的函數
5.5.2 函數聲明與函數表達式alert(sum(10,10)); function sum(num1, num2){ return num1 + num2; }
以上代碼完全可以正常運行,因為在代碼開始執行之前,解析器就已經通過一個名為函數聲明提升的過程,讀取并將函數聲明添加到執行環境中。對代碼求值時,JavaScript引擎在第一遍會聲明函數并將它們放在源代碼樹的頂部。
alert(sum(10,10)); var sum = function sum(num1, num2){ return num1 + num2; }
這段會錯誤,原因是函數位于一個初始化語句中,而不是一個函數聲明。
5.5.3 作為值得函數因為ECMAScript中的函數名本身就是變量,所以函數也可以作為值來使用。也就是說,不僅可以像傳遞參數一樣把一個函數傳遞給另一個函數,而且可以將一個函數作為另一個函數的結果返回。
function createComparisonFunction(proertyName) { return function(obj1, obj2) { var val1 = obj1[proertyName]; var val2 = obj2[proertyName]; if(val1 < val2){ return -1; }else if(val1 > val2){ return 1; }else{ return 0; } } } var data = [{ name: "Jason", age: 20 }, { name: "Cor", age: 30 }]; data.sort(createComparisonFunction("name"); console.log(data[0].name); //Cor data.sort(createComparisonFunction("age")); console.log(data[0].name); //Jason5.5.4 函數的內部屬性
在函數內部,有兩個特殊的對象:arguments和this。
arguments的主要用途是保存函數參數但這個對象還有名叫callee的屬性、該屬性是一個指針,指向擁有這個arguments對象的函數。
function factorial(num) { if(num <= 1){ return 1; }else{ //return num * factorial(num-1) //這個函數的執行與函數名factorial緊緊耦合在一起 return num * arguments.callee(num-1); //解除耦合 } }; var trueFactorial = factorial; factorial = function(){ return 0; }; console.log(trueFactorial(5)) //120 console.log(factorial(5)) //0
函數內部的另一個特殊對象是this,this引用的是函數執行的環境對象——或者也可以說this值(當在網頁的全局作用域中調用函數時,this對象引用的就是window)
window.color = "red"; var o = { color : "blue" }; function sayColor() { console.log(this.color); } sayColor(); //"red" o.sayColor = sayColor; //把sayColor函數賦給對象o o.sayColor(); //"blue" //this的引用是對象o
ECMAScript5也規范化了另一個函數對象的屬性:caller。這個屬性中保存著調用當前函數的函數的引用,如果是在全局作用域中調用當前函數,它的值為null。
function outer(){ inner(); } function inner(){ console.log(arguments.callee.caller); //為了實現更松散的耦合 } outer();
5.5.5 函數屬性和方法注意:當函數在嚴格模式下運行是,訪問arguments.callee會導致錯誤。ECMAScript 5 還定義了arguments.caller屬性,但在嚴格模式下訪問它也會導致錯誤,而在非嚴格模式下這個屬性始終是undefined。定義arguments.callee屬性是為了分清arguments.caller和函數的caller屬性。以上變化都是為了加強這門語言的安全性,這樣第三方代碼就不能在相同的環境里窺視其他代碼了。
嚴格模式還有一個限制:不能為函數的caller屬性賦值,否則會導致錯誤。
ECMAScript的函數也是對象,因此函數也有屬性和方法。每個函數包含兩個屬性: length和prototype。length屬性表示函數的參數數量
function jason(a, b, c) {}; console.log(jason.length); //3;
對于ECMAScript的引用類型而言,prototype是保存它們所有實例方法的真正所在。toString()和valueOf()等方法實際上都保存在prototype名下,只不過是通過各自對象的實例訪問。在創建自定義引用類型以及實現繼承時,prototype屬性的作用是極為重要的。在ECMAScript5中,prototype屬性是不可枚舉的,因此使用for-in無法發現。
每個函數都包含兩個非繼承而來的方法:apply() 和call()。這兩個方法的用途都是在特定的作用域中調用函數,實際上等于設置函數體內this對象的值。首先,apply()方法接收兩個參數:一個是在其中運行的作用域,另一個是參數數組。其中第二個參數可以使Array的實例,也可以是arguments對象。
1.apply():/*定義一個人類*/ function Person(name,age) { this.name=name; this.age=age; } /*定義一個學生類*/ function Student(name,age,grade) { Person.apply(this,arguments); this.grade=grade; } //創建一個學生類 var student=new Student("qian",21,"一年級"); //測試 alert("name:"+student.name+" "+"age:"+student.age+" "+"grade:"+student.grade); //大家可以看到測試結果name:qian age:21 grade:一年級 //學生類里面我沒有給name和age屬性賦值啊,為什么又存在這兩個屬性的值呢,這個就是apply的神奇之處.
分析:
Person.apply(this,arguments);
this:在創建對象在這個時候代表的是student
arguments:是一個數組,也就是["qian”,”21”,”一年級”];
通俗的說:用student去執行Person這個類里面的內容,在Person這個類里面存在this.name等之類的語句,這樣就將屬性創建到了student對象里面
call()法與apply()方法作用相同,它們的區別僅在于接受參數的方式不同。在使用call()方法時,傳遞給函數的參數必須逐個列舉出來
在上面Student函數里面可以將apply中修改成如下:
function Student(name,age,grade) { Person.call(this,name,age); this.grade=grade; } //效果是一樣的3.什么情況下用apply,什么情況下用call
在給對象參數的情況下,如果參數的形式是數組的時候,比如apply示例里面傳遞了參數arguments,這個參數是數組類型,并且在調用Person的時候參數的列表是對應一致的(也就是Person和Student的參數列表前兩位是一致的) 就可以采用 apply , 如果我的Person的參數列表是這樣的(age,name),而Student的參數列表是(name,age,grade),這樣就可以用call來實現了,也就是直接指定參數列表對應值的位置(Person.call(this,age,name,grade));
4.apply的一些其他巧妙用法細心的人可能已經察覺到,在我調用apply方法的時候,第一個參數是對象(this), 第二個參數是一個數組集合, 在調用Person的時候,他需要的不是一個數組,但是為什么他給我一個數組我仍然可以將數組解析為一個一個的參數,這個就是apply的一個巧妙的用處,可以將一個數組默認的轉換為一個參數列表([param1,param2,param3]) 轉換為(param1,param2,param3) 這個如果讓我們用程序來實現將數組的每一個項,來裝換為參數的列表,可能都得費一會功夫,借助apply的這點特性,所以就有了以下高效率的方法:
Math.max 可以實現得到數組中最大的一項
因為Math.max 參數里面不支持Math.max([param1,param2]) 也就是數組
但是它支持Math.max(param1,param2,param3…),所以可以根據剛才apply的那個特點來解決 var max=Math.max.apply(null,array),這樣輕易的可以得到一個數組中最大的一項(apply會將一個數組裝換為一個參數接一個參數的傳遞給方法)
這塊在調用的時候第一個參數給了一個null,這個是因為沒有對象去調用這個方法,我只需要用這個方法幫我運算,得到返回的結果就行,.所以直接傳遞了一個null過去
var nums = [3, 2, 1, 5, 4]; var max = Math.max.apply(null, nums); console.log(max); //5
Math.min 可以實現得到數組中最小的一項
var nums = [3, 2, 1, 5, 4]; var min = Math.min.apply(null, nums); console.log(min); //1
Array.prototype.push 可以實現兩個數組合并
同樣push方法沒有提供push一個數組,但是它提供了push(param1,param,…paramN) 所以同樣也可以通過apply來裝換一下這個數組,即:
var nums = [1, 2, 3, 4, 5]; var nums2 = [6, 7, 8, 9]; var max = Array.prototype.push.apply(nums, nums2); console.log(nums); //1,2,3,4,5,6,7,8,9
也可以這樣理解nums調用了push方法,參數是通過apply將數組裝換為參數列表的集合.
通常在什么情況下,可以使用apply類似Math.min等之類的特殊用法:
一般在目標函數只需要n個參數列表,而不接收一個數組的形式([param1[,param2[,…[,paramN]]]]),可以通過apply的方式巧妙地解決這個問題!
5.bind()ECMAScript5還定義了一個方法:bind()。這個方法會創建一個函數的實例,其this值會被綁定到傳給bind()函數的值。
window.color = "red"; var o = { color : "blue" }; function sayColor() { console.log(this.color); } var objectSayColor = sayColor.bind(o); //sayColor()調用bind()并傳入對象o,并創建了objectSayColor函數。objectSayColor()函數的this值等于o objectSayColor(); //blue
5.6 基本包裝類型每個繼承的toLocaleString()和toString()方法始終都返回函數的代碼。另外一個繼承的valueOf()方法同樣只返回函數代碼。
為了便于操作基本類型值,ECMAScript還提供了3個特殊的引用類型:Boolean、Number和String。這些類型與本章介紹的其他引用類型相似,但同時也具有與各自的基本類型相應的特殊行為。實際上,每當讀取一個基本類型值的時候,后臺就會創建一個對應的基本包裝類型的對象,從而讓我們能夠調用一些方法來操作這些數據。
var s1 = "some text"; //基本類型值 var s2 = s1.substring(2); //調用了s1的substring()方法,結果保存s2
基本類型值不是對象,因而從邏輯上它們不應該有方法(但它們確實有方法)。其實,后臺已經自動完成了一系列的處理。當第二行代碼訪問s1時,訪問過程處于一種讀取模式,也就是要從內存中讀取這個字符串的值。而在讀取模式訪問字符串時,后臺都會自動完成下列處理。
(1)創建String類型的一個實例;
(2)在實例上調用指定的方法;
(3)銷毀這個實例。
可以將以上三個步驟想象成是執行了下列代碼。
var s1 = new String("some text"); //創建String類型的一個實例; var s2 = s1.substring(2); //在實例上調用指定的方法; s1 = null; //銷毀這個實例。
經過此番處理,基本的字符串值就變得跟對象一樣了。而且,上面的三個步驟也分別適用于Boolean和Number類型對于的布爾值和數字值。
引用類型與基本包裝類型的主要區別就是對象的生存期。使用new操作符創建的引用類型的實例,在執行流離開當前作用域之前都一直保存在內存中。而自動創建的基本包裝類型的對象,則只存在于一行代碼的執行瞬間,然后立即被銷毀。這意味著我們不能在運行時為基本類型值添加屬性和方法。
var s1 = "some text"; s1.color = "red"; alert(s1.color); //undefined 第二行創建的String對象在執行這行時已經被銷毀
對基本包裝類型的實例調用typeof會返回"object",而且所有基本包裝類型的對象都會被轉換為布爾值的true
Object構造函數也會像工廠方法一樣,根據傳入值的類型返回相應的基本類型包裝的實例。
var obj = new Object("some text"); //把字符串傳給Object構造函數,就會創建String實例;而傳入數值會得到Number的實例,傳入布爾值參數就會得到Boolean的實例。 console.log(obj instanceof String); //true
要注意的是,使用new調用基本包裝類型的構造函數,與直接調用同名的轉型函數是不一樣的。例如:
var value = "25"; var number = Number(value); //轉型函數 變量number保存的是基本類型的值25 console.log(typeof number); //number var obj = new Number(value); //構造函數 變量obj保存的是Number的實例 console.log(typeof obj); //object
5.6.1 Boolean類型盡管不建議顯式的創建基本包裝類型的對象,但它們操作基本類型值的能力還是相當重要的。而每個2基本包裝類型都提供了操作響應值的便捷方法。
Boolean類型是與布爾值對應的引用類型。Boolean類型的實例重寫了valueOf()方法,返回基本類型值true或false;重寫了toString()方法,返回字符串"true"和"false"。
var falseObject = new Boolean(false); var result = falseObject && true; //布爾表達式中的所有對象都會被轉換為true。因此表達式是true && true console.log(result); //true var falseValue = false; result = falseValue && true; console.log(result) //false alert(typeof falseObject); //object alert(typeof falseValue); //boolean alert(falseObject instanceof Boolean); //true alert(falseValue instanceof Boolean); //false
5.6.2 Number類型建議永遠不要使用Boolean對象
Number是與數字值對于的引用類型。要創建Number對象,可以在調用Number構造函數時向其中傳遞相應的數值。
var numberObject = new Number(10);
與Boolean類型一樣。Number類型也重寫了valueOf()、toLocaleString()和toString()方法。重寫后的valueOf()方法返回對象表示的基本類型數值,另外兩個方法則返回字符串形式的數值。
Number類型還提供了一些用于將數值格式化為字符串的方法。
toFixed()toFixed()方法會按照知指定的小數位返回數值的字符串表示:
var num = 10.005; console.log(num.toFixed(2)); //"10.01"
能夠自動舍入的特性,使得toFixed()方法很適合處理貨幣值。不同瀏覽器的給這方法的舍入規則可能會有所不同。
toExponential()toExponential()方法返回以指數表示法(e表示法)表示的數值得字符串形式。toExponential()也接收一個參數,該參數也是指定輸出結果中的小數位數。
var num = 10; console.log(num.toExponential(1)); //"1.0e+1"toPrecision()
對于一個數值來說,toPrecision()方法可能會返回固定大小(fixed)格式,也可能返回指數(exponential)的格式;具體規則是看哪種格式最合適。這個方法接收一個參數,即表示數值的所有數字的位數(不包含指數部分)。
var num = 99; console.log(num.toPrecision(1)); //"1e+2" console.log(num.toPrecision(2)); //"99" console.log(num.toPrecision(3)); //"99.0"
與Boolean對象雷士,Number對象也以后臺方式為數值提供了重要的功能。但與此同時,我們仍然不建議直接實例化Number類型,而原因與顯式創建Boolean對象一樣。具體來講,就是在使用typeof和instanceof操作符測試基本類型數值與引用類型數值時,得到的結果完全不同,如下
var numberObject = new Number(10); var numberValue = 10; alert(typeof numberObject); //"object" alert(typeof numberValue); //"number" alert(numberObject instanceof Number); //true alert(numberValue instanceof Number) //false5.6.3 String類型
String類型是字符串對象包裝類型。可以使用String構造函數創建
var stringObject = new String("hello world");
String對象的方法也可以在所有基本的字符串值中訪問到。其中,繼承的valueOf()、toLocaleString()和toString()方法,都返回對象所表示的基本字符串值。
String類型每個實例都有一個length屬性
var stringValue = "hello world"; console.log(stringValue.length); //"11"
String類型提供了很多方法,用于輔助完成對ECMAScript中字符串的解析和操作。
1. 字符方法兩個用于訪問字符串中特定字符的方法是:charAt()和charCodeAt()。
var stringValue = "hello world"; console.log(stringValue.charAt(1)); //"e" 返回字符串1的位置的字符 console.log(stringValue.charCodeAt()); //"101" 返回字符串1的位置的字符編碼 console.log(stringValue[1]); //"e" 返回字符串1的位置的字符2. 字符串操作方法
操作字符串的方法:
concat() 用于將以或多個字符串拼接起來
var stringValue "hello "; var result = stringValue.concat("world", "!"); 可以接收多個參數 console.log(result); //"hello world" console.log(stringValue); //"hello"
ECMAScript還提供了三個基于子字符串創建新字符串的方法:slice()、substr()和substring()這三個方法都會返回被操作字符串的一個子字符串,而且也都接受一或兩個參數。第一個參數指定子字符串的開始位置,第二個參數(在指定的情況下)表示字符串到哪結束。slice()和substring()指第二個參數指定的是子字符串最后一個字符后面的位置。而substr()的第二個參數指定的則是返回的字符個數。如果沒有給這些方法傳遞第二個參數,則將字符串的長度作為結束位置。這三個方法不會修改字符串本身的字——只返回一個基本類型的字符串字。
var stringValue = "hello world"; console.log(stringValue.slice(3)); //"lo world" console.log(stringValue.substring(3)); //"lo world" console.log(stringValue.substr(3)); //"lo world" console.log(stringValue.slice(3, 7)); //"lo w" console.log(stringValue.substring(3, 7)); //"lo w" console.log(stringValue.substr(3, 7)); //"lo worl" console.log(stringValue.slice(-3)); //"rld" slice會將傳入的負值和字符串想家 console.log(stringValue.substring(-3)); //"hello world" substring會把所有負值轉換為0 console.log(stringValue.substr(-3)); //"rld" substr將負的第一個參數加上字符串的長度 console.log(stringValue.slice(-3, -4)); //"lo w" console.log(stringValue.substring(-3, -4)); //"hel" console.log(stringValue.substr(-3, -4)); //"" 轉換為0等于包含0個字符串3.字符串位置方法
indexOf() (從前往后)從一個字符串中搜索給定的子字符串,然后返回子字符串的位置。
- lastIndexOf() (從后往前)
ECMAScript5為所有字符串定義了trim()方法。這個方法會創建一個字符串的副本,刪除前置及后綴的所有空額然后返回結果
trimLeft() 刪除字符串開頭空格
trimRight() 刪除字符串末尾空格
5.字符串大小寫轉換方法toLocaleUpperCase() —— 轉換大寫
toUpperCase() —— 轉換大寫
toLocaleLowerCase() —— 轉換小寫
toLowerCase() —— 轉換小寫
6.字符串的模式匹配方法match()匹配
search()查找
replace()替換
split()分割字符串
7.localeCompare()方法這個方法比較兩個字符串
8.fromCharCode()方法String構造函數本身還有一個靜態方法。這個方法接收一或多個字符編碼,然后把它轉換為字符串。
5.7 單體內置對象ECMA-262對內置對象的定義是:“由ECMAScript實現提供的、不依賴于宿主環境的對象,這些對象在ECMAScript程序執行之前就已經存在了”意思就是說,開發人員不必顯式地實例化內置對象,因為它們已經實例化了。前面我們已經介紹了大多數的內置對象,例如Object、Array和String。ECMA-262還定義了兩個單體內置對象:Global和Math。
5.7.1 Global對象注:每個內置對象(built-in object)都是原生對象(Native Object),一個內置的構造函數是一個內置的對象,也是一個構造函數。
Global(全局)對象可以說是ECMAScript中最特別的一個對象了,因為你不管從什么角度看,這個對象都是不存在的。不屬于任何其他對象的屬性和方法,最終都是它的屬性和方法。所有在全局作用域定義的屬性和函數,都是Global對象的屬性。諸如isNaN()、isFinite()、parseInt()以及parseFloat(),實際上全都是Global對象的方法
1.URI 編碼方法encodeURI()——編碼
encodeURIComponent()——編碼
encodeURI()——解碼
encodeURIComponent()——解碼
2.eval()方法Javascript 的 eval 函數可以在當前作用域執行一段包含 Javascript 代碼的字符串。
然而,eval 函數只有在當前作用域中直接被調用并且被調用的函數名為 eval 才會被執行。
eval 函數的使用應該被避免,99.9% 使用 eval 函數所實現的功能都可以通過不使用 eval 函數來實現。
3.Global 對象的屬性eval 函數應該盡可能地避免使用。任何使用 eval 函數的代碼都應該被質疑,遠離eval
特殊的值undefined、NaN以及Infinity都是Global對象的屬性。所有原生引用類型的構造函數,象Object和Function,也都是Global對象的屬性。
4.window 對象ECMAScript雖然沒有指出如何直接訪問Global對象,但Web瀏覽器都是將這個全局對象作為window對象的一部分加以實現的。因此全局作用域中聲明的所有變量和函數,就都成為了window對象的屬性。
JavaScript中的window對象除了扮演ECMAScript規定的Global對象的角色外,還承擔了很多別的任務。
另一種取得Global對象的方法:
var global = function(){ return; }5.7.2 Math對象 1.Math對象的屬性
Math對象包含的屬性大都是數學計算中可能會用到的一些特殊值
2min()和max()方法可以找到最大值max和最小值min
用于數組
var values = [1, 2, 3, 5, 4]; var max = Math.max.applu(null, values); //53.舍入方法
Math.ceil() 執行向上舍入,即它總是將數值向上舍入為最接近的整數
Math.floor() 執行向下舍入,即它總是將數值向下舍入為最接近的整數
Math.round() 執行標準舍入,即它總是將數值四舍五入為最接近的整數
console.log(Math.ceil(25.9)); //26 ceil(25.5)——26 ceil(25.1)——26 console.log(Math.round(25.9)); //26 round(25.5)——26 round(25.1)——25 console.log(Math.floor(25.9)); //25 floor(25.5)——25 floor(25.1)——254.random()方法
隨機數
值 = Math.floor(Math.random() * 可能值得總數 + 第一個可能的值) //隨機數1-10之間 var num = Math.floor(Math.random() * 10 + 1); //2-10 var num = Math.floor(Math.random() * 9 + 2); //計算數值 function selectFrom(lowerValue, upperValue) { var choices = upperValue - lowerValue + 1; return Math.floor(Math.random() * choices + lowerValue); } //2-10 var num = selectFrom(2, 10); //隨機抽取 var colors = ["red", "green", "blue"]; var color = colors[selectFrom(0, colors.lenght-1)]; //0到數組的長度
最后,如有錯誤和疑惑請指出,多謝各位大哥
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82694.html
摘要:的理解函數與其他語言函數最大的不同在于,其不介意傳入多少參數以及參數的類型比如函數的形參有兩個,但是調用函數傳入的參數可以寫一個,三個或不寫參數對應等,解析器都可以正常解析,這是因為中參數在內部是以一個數組形式來表示,故而不需要關系傳入參數 ECMAScript function的理解 ECMAScript 函數與其他語言函數最大的不同在于,其不介意傳入多少參數以及參數的類型...
摘要:具體來說就是當執行流進入下列任何一個語句時,作用域鏈就會得到加長語句的塊和語句。這兩個語句都會在作用域鏈的前端添加一個變量對象。對來說,會將指定的對象添加到作用域鏈中。 1. 基本類型和引用類型的值 JavaScript變量可以用來保存兩種類型的值:基本類性值和引用類性值?;绢愋椭翟醋砸韵?種基本數據類型:Undefined、Null、Boolean、Number和String。基本...
摘要:語句中的塊語句對來說,將會指定對象添加到作用域鏈中。在嚴格模式下,初始化未經聲明的變量會導致錯誤。查詢標識符搜索過程從作用域鏈的前端開始,向上逐級查詢與給定名字匹配的標識符。 本文記錄了我在學習前端上的筆記,方便以后的復習和鞏固。 4.1基本類型和引用類型的值 ECMAScript變量可能包含兩種不同數據類型的值:基本類型值和引用類型值?;绢愋椭傅氖呛唵蔚臄祿?,而引用類型值指那些可...
摘要:因為即使包含了其他的代碼,也只會下載并執行屬性內的外部腳本文件,嵌入的額外代碼會被忽略。在腳本中,如果程序員在對某個變量賦值之前未聲明,賦值操作將自動聲明該變量。共有中數據類型。阻止事件冒泡火狐瀏覽器創建元素添加子元素刪除子元素數組拼接方法 所有的web開發都是【請求】+【響應】 推薦JavaScript中使用單引號引用字符串,HTML中使用雙引號,防止沖突 JavaScript代碼...
摘要:第條盡量少使用全局對象避免聲明全局變量盡量聲明局部變量避免對全局變量增加屬性第條始終聲明局部變量第條避免使用語句第條熟練使用閉包的函數值包含了比調用他們時執行所需要的代碼還要更多的信息。那些在其所涵蓋的作用域內跟蹤變量的函數稱為閉包。 書還沒看完。一遍看,一遍寫讀書筆記。 這本書的序是JavaScript之父Brendan Eich寫的,作者是JavaScript標準化委員會專家。可想...
摘要:函數式對象的一個子類型,中的函數是一等公民內置對象中還有一些對象子類型,通常被稱為內置對象。內容對象的內容是由一些存儲在特定命名位置的任意類型的值組成的,我們稱之為屬性。 語法 對象兩種定義形式 聲明(文字)形式 構造形式 //聲明(文字)形式 var myObj = { key: value // ... } //構造形式 var myObj = new Ob...
閱讀 2164·2021-11-11 16:55
閱讀 1685·2019-08-30 15:54
閱讀 2817·2019-08-30 15:53
閱讀 2211·2019-08-30 15:44
閱讀 1152·2019-08-30 15:43
閱讀 965·2019-08-30 11:22
閱讀 1942·2019-08-29 17:20
閱讀 1566·2019-08-29 16:56