JavaScript每天必學(xué)之?dāng)?shù)組和對象部分
對象部分
Object類型
Object 是一個(gè)無序的集合,可以存放任意類型對象,所有其他對象都繼承自這個(gè)對象。
創(chuàng)建Object類型有兩種,一種是使用new運(yùn)算符,一種是字面量表示法。
1.使用new運(yùn)算符創(chuàng)建Object
var obj = new Object();//注意大寫,也可以直接寫成Object()
注意,通過new Object() 的寫法生成新對象,與字面量的寫法 obj = {} 是等價(jià)的。
2. 使用字面量方式創(chuàng)建:
var obj = { name : 'trigkit4', age : 21 };//分號最好加上
在使用字面量聲明Object對象時(shí),不會(huì)調(diào)用Object()構(gòu)造函數(shù)(FF除外)
Object.prototype對象
所有構(gòu)造函數(shù)都有一個(gè)prototype屬性,指向一個(gè)原型對象。
Object.prototype.print = function(){ console.log(this)}; var obj = new Object(); obj.print() // Object
實(shí)例obj直接繼承了Object.prototype的屬性和方法
1.對象只是一種特殊的數(shù)據(jù)。對象擁有屬性和方法。 JavaScript 是面向?qū)ο蟮恼Z言,但 JavaScript 不使用類。 JavaScript 基于 [prototype][1],而不是基于類的。
2.屬性:是隸屬于某個(gè)特定對象的變量。方法:是只有某個(gè)特定對象才能調(diào)用的函數(shù)。
3.js對象是屬性和方法的集合。一個(gè)方法就是一個(gè)函數(shù),是對象的成員。屬性是一個(gè)值或一組值(以數(shù)組或?qū)ο蟮男问剑菍ο蟮某蓡T。
4.js對象是基于構(gòu)造器函數(shù)的,使用構(gòu)造器函數(shù)創(chuàng)建一個(gè)新對象時(shí),就可以說是實(shí)例化了一個(gè)新對象。屬性是構(gòu)造器函數(shù)內(nèi)部的變量。
使用構(gòu)造器函數(shù)實(shí)例化的對象:
cat = new Animal();
Javascript是一種基于對象(object-based)的語言,你遇到的所有東西幾乎都是對象。但是,它又不是一種真正的面向?qū)ο缶幊蹋∣OP)語言,因?yàn)樗恼Z法中沒有class(類)。
<script type="text/javascript"> //對象是名/值對的集合 var browser = { //對象是由花括號括起來的 name:"Firefox", kernel:"Gecko" }; </script> //通過點(diǎn)號(.)或“[]”來訪問對象的屬性 browser.name //"Firefox" browser["kernel"] //"Gecko"
對象(objct)是屬性(property)的集合,每個(gè)屬性都由“名/值對”構(gòu)成,js同樣定義了一個(gè)特殊的對象——數(shù)組,它是帶有編號的值的有序集合。
js還定義了一個(gè)特殊的對象——函數(shù),函數(shù)是具有與他相關(guān)聯(lián)的可執(zhí)行代碼的對象,通過調(diào)用函數(shù)來執(zhí)行代碼,并返回運(yùn)算結(jié)果。
JS中沒有類,但是它取了一個(gè)新的名字叫“原型對象”,因此"類==原型對象",詳情見:JavaScript類的寫法(一)
二、類(原型對象)和對象(實(shí)例)的區(qū)別與聯(lián)系
1.類(原型對象)是抽象,是概念的,代表一類事物。
2.對象是具體的,實(shí)際的,代表一個(gè)具體的事物。
3.類(原型對象)是對象實(shí)例的模板,對象實(shí)例是類的一個(gè)個(gè)體。
一個(gè)常見的誤解是數(shù)字的字面值(literal)不是對象。這是因?yàn)?JavaScript 解析器的一個(gè)錯(cuò)誤,它試圖將點(diǎn)操作符解析為浮點(diǎn)數(shù)字面值的一部分。
有很多變通方法可以讓數(shù)字的字面值看起來像對象。
2..toString(); // 第二個(gè)點(diǎn)號可以正常解析
2 .toString(); // 注意點(diǎn)號前面的空格
(2).toString(); // 2先被計(jì)算
刪除屬性
刪除屬性的唯一方法是使用 delete 操作符;設(shè)置屬性為 undefined 或者 null 并不能真正的刪除屬性,而僅僅是移除了屬性和值的關(guān)聯(lián)。
JavaScript面向?qū)ο笕筇卣?/strong>
封裝:不考慮內(nèi)部實(shí)現(xiàn),只考慮功能使用
繼承:從已有對象上,繼承出新的對象
多態(tài):所謂多態(tài),就是指一個(gè)引用在不同情況下的多種狀態(tài),
1.封裝
封裝就是要把屬于同一類事物的共性(包括屬性與行為)歸到一個(gè)類中,以方便使用.比如人這個(gè)東東,可用下面的方式封裝:
人{(lán)
年齡(屬性一)
身高(屬性二)
性別(屬性三)
做事(行為之一)
走路(行為之二)
說話(行為之三)
}
封裝的好處:
封裝保護(hù)了內(nèi)部數(shù)據(jù)的完整性;
封裝使對象的重構(gòu)更輕松;
弱化模塊間的耦合,提高對象的可重用性;
有助于避免命名空間沖突;
看下面一個(gè)例子:
<script type="text/javascript"> var boy = {}; //創(chuàng)建一個(gè)空對象 boy.name = "小明";//按照原型對象的屬性賦值 boy.age = 12; var girl = {}; girl.name = "小紅"; girl.age = 10; </script>
這就是最簡單的封裝了,把兩個(gè)屬性封裝在一個(gè)對象里面。但是,這樣的寫法有兩個(gè)缺點(diǎn),一是如果多生成幾個(gè)實(shí)例,寫起來就非常麻煩;二是實(shí)例與原型之間,沒有任何辦法,可以看出有什么聯(lián)系。
構(gòu)造函數(shù)模式
為了解決從原型對象生成實(shí)例的問題,Javascript提供了一個(gè)構(gòu)造函數(shù)(Constructor)模式。
所謂"構(gòu)造函數(shù)",其實(shí)就是一個(gè)普通函數(shù),但是內(nèi)部使用了this變量。對構(gòu)造函數(shù)使用new運(yùn)算符,就能生成實(shí)例,并且this變量會(huì)綁定在實(shí)例對象上。
比如boy和girl的原型對象現(xiàn)在就可以這樣寫:
<script type="text/javascript"> function Person(name,age){ this.name = name; this.age = age; } </script>
我們現(xiàn)在就可以生成實(shí)例對象了。
<script type="text/javascript"> var boy = new Person("小明",12); var girl = new Person("小紅",10); alert(boy.name); //小明 alert(boy.age); //12 </script>
這時(shí)boy和girl會(huì)自動(dòng)含有一個(gè)constructor屬性,指向它們的構(gòu)造函數(shù)。
alert(boy.constructor == Person); //true
alert(girl.constructor); //輸出整串構(gòu)造函數(shù)代碼,自己試試吧
Prototype模式 Javascript規(guī)定,每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性,指向另一個(gè)對象。這個(gè)對象的所有屬性和方法,都會(huì)被構(gòu)造函數(shù)的實(shí)例繼承。
這意味著,我們可以把那些不變的屬性和方法,直接定義在prototype對象上。
<script type="text/javascript"> function Person(name,age){ this.name = name; this.age = age; } Person.protype.type = "人類"; Person.protype.eat = function(){ alert("吃米飯"); } </script>
然后,生成實(shí)例:
<script type="text/javascript"> var boy = new Person("小明","12"); var girl = new Person("小紅","10"); alert(boy.type);//人類 boy.eat();//吃飯 </script>
這時(shí)所有實(shí)例的type屬性和eat()方法,其實(shí)都是同一個(gè)內(nèi)存地址,指向prototype對象,因此就提高了運(yùn)行效率。
alert(boy.eat == girl.eat); //true
原型屬性是一個(gè)內(nèi)置屬性,它指定了對象所擴(kuò)展的構(gòu)造器函數(shù)。
下面的代碼為Animal構(gòu)造器函數(shù)添加一個(gè)新的屬性size,這個(gè)新屬性是cat對象的原型屬性。通過使用原型屬性,所有擴(kuò)展Animal構(gòu)造器函數(shù)的對象就可以訪問size屬性
cat = new Animal("feline","meow", "walk/run"); cat.prototype.size = "fat";
在這種情況下,所有的Animal對象的size屬性都是“fat”。原型默認(rèn)為Object的新實(shí)例, 由于仍是對象, 故可以給該對象添加新的屬性。就好像style是javascript的一個(gè)對象一樣,也可以往style后繼續(xù)添加屬性。
<script type="text/javascript"> /*定義一個(gè)Person類*/ function Person(_name,_age,_salary){ //Person類的公開屬性,類的公開屬性的定義方式是:”this.屬性名“ this.Name=_name; //Person類的私有屬性,類的私有屬性的定義方式是:”var 屬性名“ var Age=_age; var Salary=_salary; //定義Person類的公開方法(特權(quán)方法),類的公開方法的定義方式 是:”this.functionName=function(){.....}“ this.Show=function(){ alert("Age="+Age+"\t"+"Salary="+Salary);//在公開方法里面訪問類的私有屬性是允許的 } </script>
對象在查找某個(gè)屬性的時(shí)候,會(huì)首先遍歷自身的屬性,如果沒有則會(huì)繼續(xù)查找[[Prototype]]引用的對象,如果再?zèng)]有則繼續(xù)查找[[Prototype]].[[Prototype]]引用的對象,依次類推,直到[[Prototype]].….[[Prototype]]為undefined(Object的[[Prototype]]就是undefined)
簡單說就是通過對象的[[Prototype]]保存對另一個(gè)對象的引用,通過這個(gè)引用往上進(jìn)行屬性的查找,這就是原型鏈。
null 對象
js給變量賦null值的作用在于:
賦值一個(gè)空指針,容易讓人理解這個(gè)變量是準(zhǔn)備用來存放對象的。也方便調(diào)錯(cuò)
全局的window對象
JavaScript中的任何一個(gè)全局函數(shù)或變量都是window的屬性。
self對象與window對象完全相同,self通常用于確認(rèn)就是在當(dāng)前的窗體內(nèi)。
window的主對象主要有如下幾個(gè):
JavaScript document 對象
JavaScript frames 對象
JavaScript history 對象
JavaScript location 對象
JavaScript navigator 對象
JavaScript screen 對象
幾個(gè)常用方法
valueof()方法:返回指定對象的原始值
split() 方法將字符串分割為字符串?dāng)?shù)組,并返回此數(shù)組。
indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。
substring() 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。
substr() 方法從字符串中提取從 startPos位置開始的指定數(shù)目的字符串。
join()方法用于把數(shù)組中的所有元素放入一個(gè)字符串。
arrayObject.join(分隔符)
reverse() 方法用于顛倒數(shù)組中元素的順序。
slice() 方法可從已有的數(shù)組中返回選定的元素。
對象字面量
對象字面量是用于創(chuàng)建包含大量屬性的過程,如下所示:
<script type="text/javascript"> var company = { name : "Microsoft", ages : 39, employees : 99000, CEO : "Nadella" }; </script>
這里需要注意的是屬性和屬性值以冒號(:)隔開;多個(gè)屬性用逗號(,)隔開。對象字面量亦可以定義方法,只需在這個(gè)對象的屬性上寫上function就行,這是一個(gè)匿名函數(shù),調(diào)用它只需要寫上他的方法名()即可。
<script type="text/javascript"> var dog = { name:"husky", age:2, run:function(){ return "123"; } } alert(dog.run());//如果輸入dog.run,那么會(huì)彈出它后面的function部分的代碼 </script>
基本值類型包裝器
js有五種基本的值類型:number、string、Boolean、null和undefined。除了null和undefined外,其他三個(gè)都具有所謂的基本包裝對象??梢允褂脙?nèi)置構(gòu)造函數(shù)Number()、String()和Boolean()創(chuàng)建包裝對象。
var num = new Number(10); console.log(typeof num);//object Object()方法 Object() // 返回一個(gè)空對象 Object(undefined) // 返回一個(gè)空對象 Object(null) // 返回一個(gè)空對象 Object(1) // 等同于 new Number(1) Object('foo') // 等同于 new String('foo') Object(true) // 等同于 new Boolean(true) Object([]) // 返回原數(shù)組 Object({}) // 返回原對象 Object(function(){}) // 返回原函數(shù)
數(shù)組部分
1.Array 對象
Array 對象:提供對創(chuàng)建任何數(shù)據(jù)類型的數(shù)組的支持。
arrayObj = new Array()
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
定義:var arr = [2,3,45,6]; var arr = new Array(2,4,5,7)
兩者是定義沒有任何差別,[]的性能高,因?yàn)榇a短。
使用數(shù)組和對象字面量:var aTest = [];創(chuàng)建數(shù)組時(shí),使用數(shù)組字面量是個(gè)好選擇;類似的,對象字面量也可用于節(jié)省空間。以下兩行是相等的,但是使用對象字面量的更加簡短:
var oTest = new Object; //盡量不用 var oTest = { }; //最好的選擇,或者var 0Test = [ ];
遍歷為了達(dá)到遍歷數(shù)組的最佳性能,推薦使用經(jīng)典的 for 循環(huán)。
var list = [1, 2, 3, 4, 5, ...... 100000000]; for(var i = 0, l = list.length; i < l; i++) { console.log(list[i]); }
上面代碼有一個(gè)處理,就是通過 l = list.length 來緩存數(shù)組的長度。
Array 構(gòu)造函數(shù)
由于 Array 的構(gòu)造函數(shù)在如何處理參數(shù)時(shí)有點(diǎn)模棱兩可,因此總是推薦使用數(shù)組的字面語法 - [] - 來創(chuàng)建數(shù)組。
因此下面的代碼將會(huì)使人很迷惑:
new Array(3, 4, 5); // 結(jié)果: [3, 4, 5]
new Array(3) // 結(jié)果: [],此數(shù)組長度為 3
應(yīng)該盡量避免使用數(shù)組構(gòu)造函數(shù)創(chuàng)建新數(shù)組。推薦使用數(shù)組的字面語法。它們更加短小和簡潔,因此增加了代碼的可讀性。
Array數(shù)組的屬性
Array數(shù)組的3個(gè)屬性:length屬性、prototype屬性、constructor屬性
1.length屬性
Length屬性表示數(shù)組的長度,即其中元素的個(gè)數(shù)。因?yàn)閿?shù)組的索引總是由0開始,所以一個(gè)數(shù)組的上下限分別是:0和length-1。和其他大多數(shù)語言不同的是,JavaScript數(shù)組的length屬性是可變的,這一點(diǎn)需要特別注意。
2.prototype屬性
返回對象類型原型的引用。prototype屬性是object共有的。
對于Array數(shù)組對象,以以下例子說明prototype屬性的用途。
給數(shù)組對象添加返回?cái)?shù)組中最大元素值的方法。要完成這一點(diǎn),聲明一個(gè)函數(shù),將它加入Array.prototype,并使用它。
function array_max() { var i,max=this[0]; for(i=1;i<this.length;i++) { if(max<this[i]) max=this[i]; } return max; } Array.prototype.max=array_max; var x=new Array(1,2,3,4,5,6); var y=x.max();
該代碼執(zhí)行后,y保存數(shù)組x中的最大值,或說6。
3.constructor屬性
表示創(chuàng)建對象的函數(shù)。說明:constructor屬性是所有具有prototype的對象的成員。它們包括除Global和Math對象以外的所有JScript固有對象。constructor屬性保存了對構(gòu)造特定對象實(shí)例的函數(shù)的引用。
例如:
x = new String("Hi"); if(x.constructor==String) //進(jìn)行處理(條件為真)。 //或 function MyFunc{ //函數(shù)體。 } y=new MyFunc;
if(y.constructor==MyFunc)//進(jìn)行處理(條件為真)。
對于數(shù)組來說:
y = new Array();
Array 對象方法
sort()方法
語法
arrayObject.sort(sortby)
sortby可選。規(guī)定排序順序。必須是函數(shù)。
var arr = [11,2,28,4,5,1];
console.log(arr.sort());//return [1, 11, 2, 28, 4, 5]
為毛這里的11、28沒有按照順序來排列呢?這是因?yàn)椴粠?shù)的sort是按照字符編碼的順序進(jìn)行排序的。
那么,如果要讓數(shù)組元素按照從小到大排序呢?看下面代碼:
var arr = [11,2,28,4,5,1]; console.log(arr.sort(function(a,b){ return a-b;//return [1, 2, 4, 5, 11, 28] }));
如果想按照其他標(biāo)準(zhǔn)進(jìn)行排序,就需要提供比較函數(shù),該函數(shù)要比較兩個(gè)值,然后返回一個(gè)用于說明這兩個(gè)值的相對順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個(gè)參數(shù) a 和 b,其返回值如下:
若 a 小于 b,在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前,則返回一個(gè)小于 0 的值。
若 a 等于 b,則返回 0。
若 a 大于 b,則返回一個(gè)大于 0 的值。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript實(shí)現(xiàn)輪播圖代碼
在前端程序開發(fā)中,經(jīng)常會(huì)實(shí)現(xiàn)js輪播圖的效果,怎么實(shí)現(xiàn)的呢?下面小編給大家分享基于基于JavaScript實(shí)現(xiàn)輪播圖代碼 ,非常不錯(cuò),感興趣的朋友可以參考下2016-07-07js基于面向?qū)ο髮?shí)現(xiàn)網(wǎng)頁TAB選項(xiàng)卡菜單效果代碼
這篇文章主要介紹了js基于面向?qū)ο髮?shí)現(xiàn)網(wǎng)頁TAB選項(xiàng)卡菜單效果代碼,實(shí)例演示了鼠標(biāo)滑過即點(diǎn)擊兩種方式實(shí)現(xiàn)tab選項(xiàng)卡切換功能,涉及JavaScript鼠標(biāo)事件控制頁面元素屬性變換的功能,需要的朋友可以參考下2015-09-09詳解Javascript動(dòng)態(tài)操作CSS
本文我們會(huì)討論如何通過 JavaScript 在運(yùn)行時(shí)操作 CSS,從而動(dòng)態(tài)地更新應(yīng)用到我們的元素上的式樣。本文所用的技術(shù)是我們已經(jīng)看到過的,但在利用 CSS DOM 來進(jìn)行操作的時(shí)候還需要注意幾個(gè)特殊點(diǎn)。2014-12-12JS獲取select的value和text值的簡單實(shí)例
本篇文章主要是對JS獲取select的value和text值的簡單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02JavaScript實(shí)現(xiàn)字符串與HTML格式相互轉(zhuǎn)換
這篇文章主要介紹了JavaScript實(shí)現(xiàn)字符串與HTML格式相互轉(zhuǎn)換,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03JavaScript數(shù)據(jù)結(jié)構(gòu)中串的表示與應(yīng)用實(shí)例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)中串的表示與應(yīng)用,結(jié)合實(shí)例形式簡單分析了基于javascript順序操作實(shí)現(xiàn)串結(jié)構(gòu)與串的拼接操作相關(guān)技巧,需要的朋友可以參考下2017-04-04使一個(gè)函數(shù)作為另外一個(gè)函數(shù)的參數(shù)來運(yùn)行的javascript代碼
使一個(gè)函數(shù)作為另外一個(gè)函數(shù)的參數(shù)來運(yùn)行的javascript代碼...2007-08-08