舉例講解JavaScript中關(guān)于對(duì)象操作的相關(guān)知識(shí)
從數(shù)組到對(duì)象
var myarr = ['red','blue','yellow','purple']; myarr;// ["red","blue","yellow","purple"] myarr[0];//"red" myarr[3];//"purple'
數(shù)組大家都很熟悉吧,我們可以理解為一個(gè)Key對(duì)應(yīng)一個(gè)Value,而這個(gè)Key在數(shù)組中,已經(jīng)默認(rèn)了(如上述代碼,它的key分別是0,1,2,3 value是red,blue,yellow,purple)。
那么一個(gè)對(duì)象就可以理解為一個(gè)自定義Key的數(shù)組??慈缦麓a
var hero ={ breed: 'Turtle', occupation:'Ninja' };
上述代碼我們可以了解到:
1.對(duì)象的名稱叫hero.
2.和數(shù)組不同的是用符號(hào)'{'替代了'['
3.對(duì)象的屬性(如breed和occupation)用符號(hào)','分隔
4.Key和Value的語(yǔ)法是 KEY:VALUE
還有需要注意到是不管屬性(也就是key)是放在雙引號(hào),單引號(hào),或者是沒(méi)有引號(hào),他們的結(jié)果都是一樣的,下面的代碼是一樣的
var obj={a:1,b:2}; var obj={'a':1,'b':2}; var obj={"a":1,"b":2};
推薦的寫(xiě)法是不要把屬性放在引號(hào)中。除非屬性的名稱是特殊符號(hào),如數(shù)字,或者帶有空格等等。
本篇很簡(jiǎn)單,要注意的是,定義數(shù)組的符號(hào)[] ,而定義對(duì)象的符號(hào)為{}
元素,屬性,方法
學(xué)習(xí)數(shù)組的時(shí)候,我們可以說(shuō)數(shù)組里包含了元素,當(dāng)談到對(duì)象的時(shí)候,我們可以改變下說(shuō)法
var animal={ name: 'dog', run:function(){ alert("running"); } }
name就是屬性(property),run本身是個(gè)函數(shù),在這個(gè)對(duì)象中,我們叫方法(method)。
訪問(wèn)對(duì)象的屬性
有兩種方式訪問(wèn)對(duì)象的屬性。
用數(shù)組的形式如:animal['name']
用點(diǎn)的方式訪問(wèn):animal.name
第一種訪問(wèn)方法適合任意情況。但是如果屬性是無(wú)效的命名的話,如上一節(jié)所說(shuō)的屬性命名'1name'或者'my name'這種情況用點(diǎn)的方式訪問(wèn)就是錯(cuò)誤的。這一點(diǎn)要注意。
下面具體看一個(gè)對(duì)象訪問(wèn)的例子
var book = { name:'Javascript Fundation', published:jixie. author:{ firstname:'nicholas', lastname:'xia' } };
1.獲取author對(duì)象的firstname屬性
book.author.firstname //nicholas
2.獲取author對(duì)象的lastname屬性,我們嘗試用另一個(gè)寫(xiě)法
book['author']['lastname'] //xia
我們也可以用混合的訪問(wèn)方式
book.author['lastname']或者book['author'].lastname 這些方式都是有效的,要靈活去運(yùn)用
在屬性是動(dòng)態(tài)的情況下,一般用數(shù)組的訪問(wèn)對(duì)象的方法。
var key ='lastname' book.author[key];//xia
調(diào)用對(duì)象的方法
var hero = { breed: 'Turtle', occupation: 'Ninja', say: function() { return 'I am ' + hero.occupation; } } hero.say();
訪問(wèn)對(duì)象的方法很簡(jiǎn)單,有點(diǎn)就行,不過(guò)也可以用數(shù)組的方式,看起來(lái)比較詭異
如 hero['say']();
不推薦這種寫(xiě)法,訪問(wèn)對(duì)象的時(shí)候盡量用點(diǎn)的方式。
修改屬性和方法
因?yàn)镴avascript是動(dòng)態(tài)語(yǔ)言,所以在任何時(shí)候都可以修改對(duì)象的屬性和方法??慈缦碌睦?/p>
var hero={};
hero是個(gè)空的對(duì)象。
typeof hero.breed;//undefined
說(shuō)明了hero對(duì)象沒(méi)有breed的屬性
接下來(lái)可以添加屬性和方法了
hero.breed = 'turtle'; hero.name = 'Leonardo'; hero.sayName = function() {return hero.name;};
調(diào)用方法
hero.sayName();//Leonardo
刪除屬性
delete hero.name;//true hero.sayName();//方法失敗
This
var hero = { name : 'Rafaelo', sayName : function(){ return this.name; } } hero.sayName();//Rafaelo
this的意思就是這個(gè)對(duì)象的意思,關(guān)于this的復(fù)雜問(wèn)題以后在討論。
構(gòu)造函數(shù)(Constructor Functions)
另一種創(chuàng)建對(duì)象的方式是用構(gòu)造函數(shù),直接看例子
function Hero(){ this.name ='Refaelo'; } var hero = new Hero(); hero.name;//Refaelo
這種方式的好處在于創(chuàng)建個(gè)對(duì)象的時(shí)候可以傳入?yún)?shù)
function Hero(name){ this.name = name; this.whoAreYou = function(){ return this.name; } } var hi = new Hero('nicholas'); hi.whoAreYou();//nicholas
要注意的時(shí)候,不要丟點(diǎn) new 操作符。。。
全局對(duì)象
上幾節(jié)我們說(shuō)過(guò)全局變量的事情,已經(jīng)說(shuō)過(guò)了我們要盡量避免使用全局變量,當(dāng)我們學(xué)過(guò)對(duì)象的時(shí)候,我們?cè)诳纯慈肿兞烤烤乖趺椿厥拢鋵?shí)全局變量就是全局對(duì)象一個(gè)屬性了。如果主機(jī)的環(huán)境是web瀏覽器,全局變量就是window。
如果我們定義 var a = 1;
我們可以這么理解:
一個(gè)全局變量a,
做為window的一個(gè)屬性a.我們可以這么調(diào)用window.a或者window['a']
再看看預(yù)定義函數(shù)的parseInt('123 m');我們可以寫(xiě)為window.parseInt('123 m');
constructor 屬性
對(duì)象建立之后,后臺(tái)有創(chuàng)建了個(gè)隱藏屬性,constructor.
h2.constructor;//Hero(name)
因?yàn)閏onstructor的屬性是對(duì)函數(shù)的引用。如果你不關(guān)心h2對(duì)象是由什么創(chuàng)建的,而只關(guān)心創(chuàng)建一個(gè)新的對(duì)象和h2相似就用如下寫(xiě)法
var h3 = h2.constructor('Nicholas'); h3.name ;//Nicholas
我們來(lái)看看如下寫(xiě)法的意思
var o = {}; o.constructor;//Object() typeof o.constructor;//"functions"
其實(shí)就是隱藏了 new Object() ,更深的層次應(yīng)用以后幾個(gè)教程在說(shuō)明。
instanceof 操作符
用instanceof來(lái)判斷對(duì)象是否是指定的構(gòu)造函數(shù)創(chuàng)建的。
function Hero(){ } var h = new Hero(); var o = {}; h instanceof Hero;//true h instanceof Object;//false o instanceof Object;//true
要注意的是instanceof 后面的是個(gè)引用 不是個(gè)函數(shù) 如錯(cuò)誤寫(xiě)法 h instanceof Hero();//錯(cuò)誤
函數(shù)返回對(duì)象
可以用構(gòu)造函數(shù)來(lái)創(chuàng)建個(gè)對(duì)象,也可以通過(guò)普通函數(shù)返回對(duì)象來(lái)創(chuàng)建對(duì)象
function factory(name){ return { name:name }; }
用這個(gè)方法創(chuàng)建對(duì)象
var o = factory('one'); o.name
讓我們接下來(lái)看看比較少見(jiàn)的構(gòu)造函數(shù)返回對(duì)象的例子
function C(){ this.a = 1; return {b:2}; } var c2 = new C(); typeof c2.a //undefined c2.b; // 2
說(shuō)明了 并不返回this了 而是返回了對(duì)象{b:2}。。這點(diǎn)要注意
傳遞對(duì)象
如果傳遞一個(gè)對(duì)象到函數(shù)里,那么傳遞的是個(gè)引用。如果改變了這個(gè)引用,也就會(huì)改變?cè)嫉膶?duì)象。
下面是個(gè)對(duì)象賦值的例子
var original = {name:'nicholas'}; var copy =original; copy.name;//'nicholas'; copy.name = 'Jason'; original.name;// 'Jason';
修改了copy的屬性name 也就等于修改了original的屬性name
對(duì)象傳參到函數(shù)中,也是同樣的。
function modify(o){ o.name ='Jason' } var original={name:'nicholas'}; modify(original); original.name;//Jason
對(duì)象的比較
兩個(gè)對(duì)象的比較如果是true的話,那么他們就是同一個(gè)對(duì)象的引用。
var fido ={breed:'dog'}; var benji ={breed:'dog'}; benji===fido; //false; benji==fido; //false;
以上的代碼都不是同一引用,所以都是false
- JavaScript操作XML/HTML比較常用的對(duì)象屬性集錦
- 詳解JavaScript對(duì)Date對(duì)象的操作問(wèn)題(生成一個(gè)倒數(shù)7天的數(shù)組)
- JavaScript對(duì)象屬性檢查、增加、刪除、訪問(wèn)操作實(shí)例
- JavaScript創(chuàng)建一個(gè)object對(duì)象并操作對(duì)象屬性的用法
- javascript內(nèi)置對(duì)象操作詳解
- 淺析javascript操作 cookie對(duì)象
- JavaScript基礎(chǔ)語(yǔ)法、dom操作樹(shù)及document對(duì)象
- js用Date對(duì)象的setDate()函數(shù)對(duì)日期進(jìn)行加減操作
- Jquery操作js數(shù)組及對(duì)象示例代碼
- javascript對(duì)象的使用和屬性操作示例詳解
- 解析JavaScript中delete操作符不能刪除的對(duì)象
- javascript對(duì)象的相關(guān)操作小結(jié)
相關(guān)文章
詳解在網(wǎng)頁(yè)上通過(guò)JS實(shí)現(xiàn)文本的語(yǔ)音朗讀
這篇文章主要介紹了在網(wǎng)頁(yè)上通過(guò)JS實(shí)現(xiàn)文本的語(yǔ)音朗讀,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03DOM下的節(jié)點(diǎn)屬性和操作小結(jié)
DOM 節(jié)點(diǎn)屬性操作方法小結(jié)。2009-05-05javascript XMLHttpRequest對(duì)象全面剖析
通過(guò)不必把Web頁(yè)面寄送到服務(wù)器而實(shí)現(xiàn)數(shù)據(jù)傳送,XMLHttpRequest對(duì)象為客戶端與服務(wù)器之間提供了一種動(dòng)態(tài)的交互能力。2010-04-04window.location.href的用法(動(dòng)態(tài)輸出跳轉(zhuǎn))
無(wú)論在靜態(tài)頁(yè)面還是動(dòng)態(tài)輸出頁(yè)面中window.location.href都是不錯(cuò)的用了跳轉(zhuǎn)的實(shí)現(xiàn)方案2014-08-08javascript學(xué)習(xí)筆記(五)正則表達(dá)式
正則表達(dá)式在web開(kāi)發(fā)中會(huì)經(jīng)常用到,主要用于驗(yàn)證用戶輸入的數(shù)據(jù)的格式。2011-04-04javascript cookie基礎(chǔ)應(yīng)用之記錄用戶名的方法
這篇文章主要介紹了javascript cookie基礎(chǔ)應(yīng)用之記錄用戶名的方法,涉及javascript基于cookie針對(duì)數(shù)據(jù)存儲(chǔ)的簡(jiǎn)單應(yīng)用,需要的朋友可以參考下2016-09-09