摘要:目錄導語對象對象小結導語本系列文章將重點講解提供的原生庫標準庫,只要在支持語言的平臺,標準庫中的提供的對象的屬性和方法都能使用對象對象的理解講的標準庫,首先要從對象談起,因為之后的所有對象都可以看做是對象構造出來的因此,對象可以看做是一個構
目錄 導語 1. Object對象 2. Array對象 3. 小結 導語
本系列文章將重點講解JavaScript提供的原生庫——標準庫,只要在支持JavaScript語言的平臺,標準庫中的提供的對象的屬性和方法都能使用;
1. Object對象講JavaScript的標準庫,首先要從Object對象談起,因為之后的所有對象都可以看做是Object對象構造出來的;
因此,Object對象可以看做是一個構造函數,可以創造新對象;
同時Object對象本身可以當作工具方法使用;
Object對象自身的方法
Object對象本身作為工具方法可以根據參數的數據類型不同返回對應的包裝對象實例;
不過,實際操作中使用Object對象生成對應包裝對象的實例并不直觀,所以建議不要采用Object方法生成包裝對象的實例;
Object對象的靜態方法
所謂“靜態方法”,指部署在Object對象上的方法,更為直觀的理解是靜態方法等同于一直呆在Object對象這個“靜態”的對象上,非靜態方法是部署在原型對象prototype上的方法,要在實例被構造函數動態創建才能使用;
Object.keys()和Object.getOwnPropertyNames()
兩個方法都能遍歷對象的屬性(自身的屬性而不是繼承的),不同之處在于Object.keys()只能遍歷可枚舉(enumberable)屬性;
Object.defineProperty()和Object.defineProperties()
前面我們已經通過delete命令對象Object.defineProperty方法有了一定的了解;
這個方法還有一個比較有意思的應用,就是實現數據的綁定;
//html //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的創世神話——一切源于對象】
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()方法調用將返回數據類型數組;
如果真的要給標準庫的各個對象排個名單的話,那么Array對象肯定能進前兩名,因為JavaScript的網頁應用的數據一定是離不開Array對象的方法的;
關于Array對象,小羊的經驗是只要重點掌握Array對象的實例方法;
雖然Array對象可以用來創建數組,但是直接使用字面量的形式例如[1,2,3]更簡便;
Array對象的實例的方法
添加數組元素方法
push:從數組最后一位添加元素,返回新的數組長度,改變原數組;
unshift:從數組第一位添加元素,返回新的數組長度,改變原數組;
刪除數組元素方法
pop:刪除數組最后一個元素,返回該元素,改變原數組;
shift:刪除數組第一個元素,返回該元素,改變原數組;
增刪一體方法
splice:具有刪除和增加數組元素一體的功能,第一個參數是刪除元素的起始位,第二個是刪除的個數,第三個之后是需要增加的元素,最終返回刪除的數組元素,改變原數組;
傳遞3個參數,第二個參數為0,即不刪除只添加元素,可是實現任意位置的增加操作;
傳遞2個參數實現任意位置的刪除操作;
傳遞1個參數實現數組在該參數位置分段;
可利用splice()方法實現在任意位置上的增刪元素,因此可以作為push、pop、shift和unshift的替代方法;
格式化數組方法
join:傳遞一個參數作為分隔符,將所有數組元素按字符串形式返回,元素間包含分隔符,默認以逗號作為分隔符,不改變原數組;
合并數組方法
concat:實現多個數組合并,返回新數組,不改變原數組;
反轉數組方法
reverse:反轉數組,返回反轉數組,改變原數組;
提取數組元素方法
slice:提取原數組一部分,可傳2個參數,第一個為起始位,第二個是結束位(不包含該位的元素),返回新數組,不改變原數組;
只傳1個參數提取以該參數為起始位后的所有元素;
不傳參數提取所有元素;
遍歷方法
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時,才移位,因此最終實現較小的在前,較大的在后;
通過全文,我們了解到:
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標準參考教程》——阮一峰
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/86688.html
摘要:目錄導語包裝對象的理解三大包裝對象的知識點小結導語包裝對象是為了彌補基本數據類型的非對象特性而產生的,對于基本類型值而言,本來是不存在屬性和方法的,但是我們可以在使用字面量創建字符串時,調用例如的方法,那么其內在原理究竟是什么呢閱讀完本篇文 目錄 導語 1. 包裝對象的理解 2. 三大包裝對象的知識點 3. 小結 導語 包裝對象是為了彌補基本數據類型的非對象特性而產生的,對于基本類型...
摘要:,微軟發布,同時發布了,該語言模仿同年發布的。,公司在瀏覽器對抗中沒落,將提交給國際標準化組織,希望能夠成為國際標準,以此抵抗微軟。同時將標準的設想定名為和兩類。,尤雨溪發布項目。,正式發布,并且更名為。,發布,模塊系統得到廣泛的使用。 前言 作為程序員,技術的落實與鞏固是必要的,因此想到寫個系列,名為 why what or how 每篇文章試圖解釋清楚一個問題。 這次的 why w...
摘要:新的標準上周,語言規范的最終草案,第版,被提交給大會進行審查。從那時起,標準委員會就一直致力于的制定直至今日。是語言的一次重大的升級。這種說法也可以被看作是委員會給出的一個承諾。 簡介 歡迎來到深度探索 ES6!在這個新的周系列里,我們將探索 ECMAScript 6。這是一種 JavaScript 語言即將到來的新版本。ES6 包含了很多新的語言功能,且這些語言功能使得 JS 更加強...
摘要:因為在微信小程序中,和都是,加上又強制使用嚴格模式,為,掛載就會發生錯誤,所以就有人又發了一個,代碼變成了這就是現在的樣子。 前言 在 《JavaScript 專題系列》 中,我們寫了很多的功能函數,比如防抖、節流、去重、類型判斷、扁平數組、深淺拷貝、查找數組元素、通用遍歷、柯里化、函數組合、函數記憶、亂序等,可以我們該如何組織這些函數,形成自己的一個工具函數庫呢?這個時候,我們就要借...
摘要:多個窗口意味著多個全局環境,不同的全局環境擁有不同的全局對象,從而擁有不同的內置類型構造函數。比如,表達式會返回,因為屬性得到的僅僅是構造函數,而且是可以被手動更改的,只是返回的構造函數的名字,它并不返回類名。 原文:ES6時代,你真的會克隆對象嗎(二) 上一篇,我們從Symbol和是否可枚舉以及屬性描述符的角度分析了ES6下怎么淺拷貝一個對象,發表在掘金和segmentfault上(...
閱讀 3652·2021-09-27 14:02
閱讀 1788·2019-08-30 15:56
閱讀 1743·2019-08-29 18:44
閱讀 3276·2019-08-29 17:21
閱讀 485·2019-08-26 17:15
閱讀 1174·2019-08-26 13:57
閱讀 1238·2019-08-26 13:56
閱讀 2878·2019-08-26 11:30