目錄
導語
1. Object對象
2. Array對象
3. 小結
導語
本系列文章將重點講解JavaScript提供的原生庫——標準庫,只要在支持JavaScript語言的平臺,標準庫中的提供的對象的屬性和方法都能使用;
1. Object對象
1.1 Object對象的理解
講JavaScript的標準庫,首先要從Object對象談起,因為之后的所有對象都可以看做是Object對象構造出來的;
因此,Object對象可以看做是一個構造函數,可以創造新對象;
同時Object對象本身可以當作工具方法使用;
1.2 Object對象作為工具方法
-
Object對象自身的方法
Object對象本身作為工具方法可以根據參數的數據類型不同返回對應的包裝對象實例;
不過,實際操作中使用Object對象生成對應包裝對象的實例并不直觀,所以建議不要采用Object方法生成包裝對象的實例; -
Object對象的靜態方法
所謂“靜態方法”,指部署在Object對象上的方法,更為直觀的理解是靜態方法等同于一直呆在Object對象這個“靜態”的對象上,非靜態方法是部署在原型對象prototype上的方法,要在實例被構造函數動態創建才能使用;
Object.keys()和Object.getOwnPropertyNames()
兩個方法都能遍歷對象的屬性(自身的屬性而不是繼承的),不同之處在于Object.keys()只能遍歷可枚舉(enumberable)屬性;
Object.defineProperty()和Object.defineProperties()
前面我們已經通過delete命令對象Object.defineProperty
方法有了一定的了解;
這個方法還有一個比較有意思的應用,就是實現數據的綁定;
//html
<div id="name"></div>
//js
var obj = Object.defineProperty({},"name",{
set:function(name){
document.getElementById('name').innerHTML=name
},
get:function(){
console.log( document.getElementById('name').innerHTML
)
},
})
obj.name = "hello world"
obj.name
【demo】
Object.defineProperties可以一次性配置對象的多個屬性;
Object.create()可以創建一個實例對象,但通常用于從原型對象生成新的實例對象以實現繼承機制;
var Person = {
race: 'monkey'
}
var Asian = Object.create(Person)
//等價于
var Person = function(){
this.race='monkey'
}
var Asian = new Person()
Object.getPrototypeOf()和Object.setPrototypeOf()
如果還沒了解JavaScript的原型和繼承的知識點的,這部分可以先跳過;
Object.getPrototypeOf()返回一個對象的原型,這是獲取原型對象的標準方法;
Object.setPrototypeOf方法可以為現有對象設置原型,返回一個新對象,該方法接受兩個參數,第一個是現有對象,第二個是原型對象;
關于原型和繼承的知識點,詳見【JavaScript的創世神話——一切源于對象】
1.3 Object對象的實例方法
-
Object作為構造函數
Object作為構造函數可以創建實例對象;
var person = new Object();
var pesoon = new Object(new);
//創建對象方法還有;
var person = {};
var person = Object.create(null);
構造函數內可以傳參;
var person = new Object();
person.name = "teren";
person.age = 18;
//等價于
var person = new Object({name:"teren",age:18});
-
Object構造函數的實例的屬性個方法
由Object構造函數構造的實例的屬性和方法,即部署在Object.prototype
對象的屬性和方法,屬于所有實例的“公共屬性和方法”,關于prototype
原型對象小羊將會在《面向對象編程思想》一章詳細闡述;
部署在Object.prototype
對象的常見方法包括:
constructor屬性
constructor屬性返回實例的構造函數,即哪個構造函數創造了實例;
上述person實例的構造函數就是Object
這一構造函數;
hasOwnProperty()方法
hasOwnProperty()方法
判斷傳入的參數是否是實例自身的屬性;
上圖顯示name
是實例自身的屬性,toString
是繼承自Object.prototype
對象的屬性;
isPrototypeOf()方法
isPrototypeOf()
方法用于判斷實例是否是作為參數傳入的另一個對象的原型對象;
上圖teren_son
由teren
創造,所以teren
是teren_son
的原型對象,故teren.isPrototypeOf(teren_son)
為true;
valueOf()方法和toString()方法
這兩個方法很重要,在《JavaScript數據類型(四)》中,小羊提到了數據類型轉換的方法,其中其他類型數據在轉換為數值和字符串過程中js引擎就調用這兩個方法;
valueOf()方法
很好理解的是valueOf()
方法就是返回實例的值,實例是什么數據類型值就返回什么類型;
具體通過調用valueOf()方法進行數據轉換的規則,在后面講完包裝對象Number()
和String()
才進行闡述,因為要運用到這兩個對象的知識點;
toString()方法
toString()
方法返回實例對象的字符串;
實例對象直接調用toString()
方法返回對應字符串,注意對象類型和數組類型數據比較特殊;
使用Object.prototype.toString.call()方法調用將返回數據類型數組;
這個方法也是經常用來判斷數據類型,可參見小羊之前的文章《JavaScript數據類型(四)》的通用庫的初步創建與對象的深淺拷貝章節;
2.Array對象
如果真的要給標準庫的各個對象排個名單的話,那么Array對象肯定能進前兩名,因為JavaScript的網頁應用的數據一定是離不開Array對象的方法的;
關于Array對象,小羊的經驗是只要重點掌握Array對象的實例方法;
雖然Array對象可以用來創建數組,但是直接使用字面量的形式例如[1,2,3]
更簡便;
2.1 Array對象的實例方法
-
Array對象的實例的方法
添加數組元素方法
push:從數組最后一位添加元素,返回新的數組長度,改變原數組;
unshift:從數組第一位添加元素,返回新的數組長度,改變原數組;
刪除數組元素方法
pop:刪除數組最后一個元素,返回該元素,改變原數組;
shift:刪除數組第一個元素,返回該元素,改變原數組;
增刪一體方法
splice:具有刪除和增加數組元素一體的功能,第一個參數是刪除元素的起始位,第二個是刪除的個數,第三個之后是需要增加的元素,最終返回刪除的數組元素,改變原數組;
傳遞3個參數,第二個參數為0
,即不刪除只添加元素,可是實現任意位置的增加操作;
傳遞2個參數實現任意位置的刪除操作;
傳遞1個參數實現數組在該參數位置分段;
可利用
splice()
方法實現在任意位置上的增刪元素,因此可以作為push
、pop
、shift
和unshift
的替代方法;格式化數組方法
join:傳遞一個參數作為分隔符,將所有數組元素按字符串形式返回,元素間包含分隔符,默認以逗號作為分隔符,不改變原數組;
合并數組方法
concat:實現多個數組合并,返回新數組,不改變原數組;
反轉數組方法
reverse:反轉數組,返回反轉數組,改變原數組;
提取數組元素方法
slice:提取原數組一部分,可傳2個參數,第一個為起始位,第二個是結束位(不包含該位的元素),返回新數組,不改變原數組;
只傳1個參數提取以該參數為起始位后的所有元素;
不傳參數提取所有元素;
[注]
對于類數組對象,如果要將其變為數組,可以使用Array.prototype.slice.call()方法
var obj = {0:1,1:2,2:3,length:3}
var arr2 = [].slice.call(obj)
arr2//[1,2,3]
遍歷方法
map:對所有數組元素依次調用一個函數,接受一個函數作為參數,arr.map(function(elem,index,arr){}),一般具有返回值(新數組);
forEach:和map方法類似,但一般不具有返回值,只用于數據操作;
filter:用于篩選數組元素,接受一個函數作為參數,返回結果為true的成員組成一個新數組返回;
以上遍歷的3個方法都不改變原數組;
[JavaScript Tricks]
類數組對象如string要遍歷,無相關方法;
調用數組對象的實例方法;
Array.prototype.forEach.call(likeArray,function(){});
[].forEach.call(likeArray,function(){});
排序方法
sort:對數組元素進行排序,默認是按照字符編碼的序號對每一位進行排序;
實現自定義排序的方法可以傳入一個函數給sort方法,函數又可插入兩個用作比較的數組元素的形參;
第一個由小到大的排序意思是當前一位減后一位大于0時,才移位,因此最終實現較小的在前,較大的在后;
3. 小結
通過全文,我們了解到:
- Object對象是所有對象的鼻祖,標準庫提供的Object對象既可以當做工具方法使用,又可以當做構造函數使用;
- Object對象作為工具方法時,Object()方法去包裝數據,
Object.keys()、Object.getOwnPropertyNames
去遍歷對象屬性,Object.defineProperty()和Object.definePropertyies()
去配置屬性,Object.create()
傳入一個原型對象去創建子對象,Object.getPrototypeOf()和Object.setPrototypeOf()
分別是獲取和設置一個對象的原型對象; - Object對象作為構造函數可以創建一個對象實例,可通過點操作和方括號操作去讀寫對象的屬性和方法;實例對象的方法有
hasOwnProperty()、isPrototypeOf()、valueOf()和toString()
; - Array對象部分主要講解Array實例的方法;
- 添加數組元素的方法有
push()和unshift()
,返回數組長度,改變原數組; - 刪除數組元素的方法有
pop()和shift()
,返回刪除元素,改變原數組; - 增刪一體方法
spllice()
,傳3個參數時,第1個為起始位,第2個為刪除個數,第3個之后為增加的元素;第2個為0時,只增不刪;傳2個參數只刪不增;傳1個參數實現位置分段; - 數據格式化方法
join()
,根據傳入參數的分隔符返回字符串; - 合并數組的方法
concat()
,實現多個數組合并; - 反轉數組方法
reverse()
,將數組元素逆序排列; - 提取元素方法
slice()
,傳2個參數,第1個為起始位,第2個為結束位(不包括結束位);傳1個參數即只有起始位;不傳參數,獲取所有數組元素; - 遍歷方法有3個
map、forEach和filter
,map返回值,forEach只處理數據,filter通常用于篩選; - 排序方法
sort
:對數組元素排序,默認按照字符編碼的序號對每一位進行排序,可傳遞函數作為參數實現自定義排序;
參考資料
- 《JavaScript高級程序設計(第3版)》
- 《JavaScript標準參考教程》——阮一峰