JavaScript標準庫系列——Object對象和Array對象(一)

目錄

導語

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_sonteren創造,所以terenteren_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、popshiftunshift的替代方法;
格式化數組方法

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:對數組元素排序,默認按照字符編碼的序號對每一位進行排序,可傳遞函數作為參數實現自定義排序;

參考資料

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,265評論 0 4
  • 以前有一個人總是悶悶不樂,覺得世上的其他人其他事和自己沒有絲毫關系,直到有一天他在夢里遇見了上帝。他還沒有開口...
    暢游之靈閱讀 553評論 0 0
  • 清廉之士,國之大器;清廉之道,天地圭臬。清廉之詞,《韓非》初解,《辭海》注詳。自微趨大,察古觀今,廉存貪亡。 亙古...
    紅城客閱讀 1,454評論 3 5
  • parco naturale puez odle森林與草甸的結合
    簡_開閱讀 300評論 0 0
  • 2017 11 25 星期六 晴 今天是周六,起的有點晚,等兒子起來了,我就做飯去了,吃完飯,兒子就去做剩...
    99d29bce557c閱讀 199評論 0 0