當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JavaScript学习总结（二）数组和对象部分

發(fā)布時(shí)間：2025/3/21 javascript 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript学习总结（二）数组和对象部分小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

pt學(xué)習(xí)總結(jié)（二）數(shù)組和對(duì)象部分

2016-09-16 ?? 分類：WEB開發(fā)、編程開發(fā)、首頁(yè)精華暫無(wú)人評(píng)論?????來(lái)源：trigkit4

對(duì)象部分

Object類型

Object?是一個(gè)無(wú)序的集合，可以存放任意類型對(duì)象，所有其他對(duì)象都繼承自這個(gè)對(duì)象。

創(chuàng)建Object類型有兩種，一種是使用new運(yùn)算符，一種是字面量表示法。

1.使用new運(yùn)算符創(chuàng)建Object

var obj = new Object();//注意大寫，也可以直接寫成Object()

注意，通過new Object()?的寫法生成新對(duì)象，與字面量的寫法?obj = {}?是等價(jià)的。

2. 使用字面量方式創(chuàng)建：

var obj = {name : 'trigkit4',age : 21 };//分號(hào)最好加上

在使用字面量聲明Object對(duì)象時(shí)，不會(huì)調(diào)用Object()構(gòu)造函數(shù)（FF除外）

Object.prototype對(duì)象

所有構(gòu)造函數(shù)都有一個(gè)prototype屬性，指向一個(gè)原型對(duì)象。

Object.prototype.print = function(){ console.log(this)}; var obj = new Object(); obj.print() // Object

實(shí)例obj直接繼承了Object.prototype的屬性和方法

1.對(duì)象只是一種特殊的數(shù)據(jù)。對(duì)象擁有屬性和方法。 JavaScript 是面向?qū)ο蟮恼Z(yǔ)言，但 JavaScript 不使用類。 JavaScript 基于 [prototype][1]，而不是基于類的。2.屬性：是隸屬于某個(gè)特定對(duì)象的變量。方法：是只有某個(gè)特定對(duì)象才能調(diào)用的函數(shù)。3.js對(duì)象是屬性和方法的集合。一個(gè)方法就是一個(gè)函數(shù)，是對(duì)象的成員。屬性是一個(gè)值或一組值（以數(shù)組或?qū)ο蟮男问?#xff09;，是對(duì)象的成員。4.js對(duì)象是基于構(gòu)造器函數(shù)的，使用構(gòu)造器函數(shù)創(chuàng)建一個(gè)新對(duì)象時(shí)，就可以說是實(shí)例化了一個(gè)新對(duì)象。屬性是構(gòu)造器函數(shù)內(nèi)部的變量。

使用構(gòu)造器函數(shù)實(shí)例化的對(duì)象：

cat = new Animal();

Javascript是一種基于對(duì)象（object-based）的語(yǔ)言，你遇到的所有東西幾乎都是對(duì)象。但是，它又不是一種真正的面向?qū)ο缶幊?#xff08;OOP）語(yǔ)言，因?yàn)樗恼Z(yǔ)法中沒有class（類）。

對(duì)象（objct）是屬性（property）的集合，每個(gè)屬性都由“名/值對(duì)”構(gòu)成，js同樣定義了一個(gè)特殊的對(duì)象——數(shù)組，它是帶有編號(hào)的值的有序集合。

js還定義了一個(gè)特殊的對(duì)象——函數(shù)，函數(shù)是具有與他相關(guān)聯(lián)的可執(zhí)行代碼的對(duì)象，通過調(diào)用函數(shù)來(lái)執(zhí)行代碼，并返回運(yùn)算結(jié)果。

JS中沒有類][3，但是它取了一個(gè)新的名字叫“原型對(duì)象”，因此"類==原型對(duì)象"，詳情見：JavaScript類的寫法（一）

二：類(原型對(duì)象)和對(duì)象(實(shí)例)的區(qū)別與聯(lián)系

1.類(原型對(duì)象)是抽象，是概念的，代表一類事物。 2.對(duì)象是具體的，實(shí)際的，代表一個(gè)具體的事物。 3.類(原型對(duì)象)是對(duì)象實(shí)例的模板，對(duì)象實(shí)例是類的一個(gè)個(gè)體。

一個(gè)常見的誤解是數(shù)字的字面值（literal）不是對(duì)象。這是因?yàn)?JavaScript 解析器的一個(gè)錯(cuò)誤，它試圖將點(diǎn)操作符解析為浮點(diǎn)數(shù)字面值的一部分。

有很多變通方法可以讓數(shù)字的字面值看起來(lái)像對(duì)象。

2..toString(); // 第二個(gè)點(diǎn)號(hào)可以正常解析 2 .toString(); // 注意點(diǎn)號(hào)前面的空格 (2).toString(); // 2先被計(jì)算

刪除屬性

刪除屬性的唯一方法是使用 delete 操作符；設(shè)置屬性為?undefined?或者?null?并不能真正的刪除屬性，而僅僅是移除了屬性和值的關(guān)聯(lián)。

JavaScript面向?qū)ο笕筇卣?/h3> 封裝：不考慮內(nèi)部實(shí)現(xiàn)，只考慮功能使用繼承：從已有對(duì)象上，繼承出新的對(duì)象多態(tài)：所謂多態(tài)，就是指一個(gè)引用在不同情況下的多種狀態(tài)，

1.封裝

封裝就是要把屬于同一類事物的共性(包括屬性與行為)歸到一個(gè)類中,以方便使用.比如人這個(gè)東東,可用下面的方式封裝:

人{(lán)

年齡(屬性一) 身高(屬性二) 性別(屬性三)做事(行為之一) 走路(行為之二) 說話(行為之三)

}

封裝的好處：

封裝保護(hù)了內(nèi)部數(shù)據(jù)的完整性；封裝使對(duì)象的重構(gòu)更輕松；弱化模塊間的耦合，提高對(duì)象的可重用性；有助于避免命名空間沖突；

看下面一個(gè)例子：

這就是最簡(jiǎn)單的封裝了，把兩個(gè)屬性封裝在一個(gè)對(duì)象里面。但是，這樣的寫法有兩個(gè)缺點(diǎn)，一是如果多生成幾個(gè)實(shí)例，寫起來(lái)就非常麻煩；二是實(shí)例與原型之間，沒有任何辦法，可以看出有什么聯(lián)系。

構(gòu)造函數(shù)模式

為了解決從原型對(duì)象生成實(shí)例的問題，Javascript提供了一個(gè)構(gòu)造函數(shù)（Constructor）模式。

所謂"構(gòu)造函數(shù)"，其實(shí)就是一個(gè)普通函數(shù)，但是內(nèi)部使用了this變量。對(duì)構(gòu)造函數(shù)使用new運(yùn)算符，就能生成實(shí)例，并且this變量會(huì)綁定在實(shí)例對(duì)象上。

比如boy和girl的原型對(duì)象現(xiàn)在就可以這樣寫：

我們現(xiàn)在就可以生成實(shí)例對(duì)象了。

這時(shí)boy和girl會(huì)自動(dòng)含有一個(gè)constructor屬性，指向它們的構(gòu)造函數(shù)。

alert(boy.constructor == Person); //truealert(girl.constructor); //輸出整串構(gòu)造函數(shù)代碼，自己試試吧

Prototype模式?Javascript規(guī)定，每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性，指向另一個(gè)對(duì)象。這個(gè)對(duì)象的所有屬性和方法，都會(huì)被構(gòu)造函數(shù)的實(shí)例繼承。

這意味著，我們可以把那些不變的屬性和方法，直接定義在prototype對(duì)象上。

然后，生成實(shí)例:

這時(shí)所有實(shí)例的type屬性和eat()方法，其實(shí)都是同一個(gè)內(nèi)存地址，指向prototype對(duì)象，因此就提高了運(yùn)行效率。

alert(boy.eat == girl.eat); //true

原型屬性是一個(gè)內(nèi)置屬性，它指定了對(duì)象所擴(kuò)展的構(gòu)造器函數(shù)。
下面的代碼為Animal構(gòu)造器函數(shù)添加一個(gè)新的屬性size，這個(gè)新屬性是cat對(duì)象的原型屬性。通過使用原型屬性，所有擴(kuò)展Animal構(gòu)造器函數(shù)的對(duì)象就可以訪問size屬性

cat = new Animal("feline","meow", "walk/run"); cat.prototype.size = "fat";

在這種情況下，所有的Animal對(duì)象的size屬性都是“fat”。原型默認(rèn)為Object的新實(shí)例, 由于仍是對(duì)象, 故可以給該對(duì)象添加新的屬性。就好像style是javascript的一個(gè)對(duì)象一樣，也可以往style后繼續(xù)添加屬性。

對(duì)象在查找某個(gè)屬性的時(shí)候，會(huì)首先遍歷自身的屬性，如果沒有則會(huì)繼續(xù)查找[[Prototype]]引用的對(duì)象，如果再?zèng)]有則繼續(xù)查找[[Prototype]].[[Prototype]]引用的對(duì)象，依次類推，直到[[Prototype]].….[[Prototype]]為undefined（Object的[[Prototype]]就是undefined）

簡(jiǎn)單說就是通過對(duì)象的[[Prototype]]保存對(duì)另一個(gè)對(duì)象的引用，通過這個(gè)引用往上進(jìn)行屬性的查找，這就是原型鏈。

null 對(duì)象

js給變量賦null值的作用在于：
賦值一個(gè)空指針，容易讓人理解這個(gè)變量是準(zhǔn)備用來(lái)存放對(duì)象的。也方便調(diào)錯(cuò)

全局的window對(duì)象

JavaScript中的任何一個(gè)全局函數(shù)或變量都是window的屬性。
self對(duì)象與window對(duì)象完全相同，self通常用于確認(rèn)就是在當(dāng)前的窗體內(nèi)。

window的主對(duì)象主要有如下幾個(gè)：

JavaScript document 對(duì)象 JavaScript frames 對(duì)象 JavaScript history 對(duì)象 JavaScript location 對(duì)象 JavaScript navigator 對(duì)象 JavaScript screen 對(duì)象

幾個(gè)常用方法

valueof()方法：返回指定對(duì)象的原始值 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ù)組中返回選定的元素。

對(duì)象字面量

對(duì)象字面量是用于創(chuàng)建包含大量屬性的過程，如下所示：

這里需要注意的是屬性和屬性值以冒號(hào)(:)隔開；多個(gè)屬性用逗號(hào)(,)隔開。對(duì)象字面量亦可以定義方法，只需在這個(gè)對(duì)象的屬性上寫上function就行，這是一個(gè)匿名函數(shù)，調(diào)用它只需要寫上他的方法名()即可。

基本值類型包裝器

js有五種基本的值類型：number、string、Boolean、null和undefined。除了null和undefined外，其他三個(gè)都具有所謂的基本包裝對(duì)象。可以使用內(nèi)置構(gòu)造函數(shù)Number()、String()和Boolean()創(chuàng)建包裝對(duì)象。

var num = new Number(10); console.log(typeof num);//object

Object()方法

Object() // 返回一個(gè)空對(duì)象 Object(undefined) // 返回一個(gè)空對(duì)象 Object(null) // 返回一個(gè)空對(duì)象 Object(1) // 等同于 new Number(1) Object('foo') // 等同于 new String('foo') Object(true) // 等同于 new Boolean(true) Object([]) // 返回原數(shù)組 Object({}) // 返回原對(duì)象 Object(function(){}) // 返回原函數(shù)

數(shù)組部分

1.Array 對(duì)象

Array?對(duì)象：提供對(duì)創(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ù)組和對(duì)象字面量：var aTest =?[]；創(chuàng)建數(shù)組時(shí)，使用數(shù)組字面量是個(gè)好選擇；類似的，對(duì)象字面量也可用于節(jié)省空間。以下兩行是相等的，但是使用對(duì)象字面量的更加簡(jiǎn)短：

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?來(lái)緩存數(shù)組的長(zhǎng)度。

Array 構(gòu)造函數(shù)

由于?Array?的構(gòu)造函數(shù)在如何處理參數(shù)時(shí)有點(diǎn)模棱兩可，因此總是推薦使用數(shù)組的字面語(yǔ)法 -?[]?- 來(lái)創(chuàng)建數(shù)組。

因此下面的代碼將會(huì)使人很迷惑：

new Array(3, 4, 5); // 結(jié)果: [3, 4, 5] new Array(3) // 結(jié)果: []，此數(shù)組長(zhǎng)度為 3

應(yīng)該盡量避免使用數(shù)組構(gòu)造函數(shù)創(chuàng)建新數(shù)組。推薦使用數(shù)組的字面語(yǔ)法。它們更加短小和簡(jiǎn)潔，因此增加了代碼的可讀性。

Array數(shù)組的屬性

Array數(shù)組的3個(gè)屬性：length屬性、prototype屬性、constructor屬性

1.length屬性

Length屬性表示數(shù)組的長(zhǎng)度，即其中元素的個(gè)數(shù)。因?yàn)閿?shù)組的索引總是由0開始，所以一個(gè)數(shù)組的上下限分別是：0和length-1。和其他大多數(shù)語(yǔ)言不同的是，JavaScript數(shù)組的length屬性是可變的，這一點(diǎn)需要特別注意。

2.prototype屬性

返回對(duì)象類型原型的引用。prototype屬性是object共有的。

對(duì)于Array數(shù)組對(duì)象，以以下例子說明prototype屬性的用途。
給數(shù)組對(duì)象添加返回?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)建對(duì)象的函數(shù)。說明：constructor屬性是所有具有prototype的對(duì)象的成員。它們包括除Global和Math對(duì)象以外的所有JScript固有對(duì)象。constructor屬性保存了對(duì)構(gòu)造特定對(duì)象實(shí)例的函數(shù)的引用。

例如：

x = new String("Hi"); if(x.constructor==String) //進(jìn)行處理（條件為真）。 //或 function MyFunc{ //函數(shù)體。 } y=new MyFunc; if(y.constructor==MyFunc)//進(jìn)行處理（條件為真）。

對(duì)于數(shù)組來(lái)說：

y = new Array();

Array 對(duì)象方法

方法描述

concat()	連接兩個(gè)或更多的數(shù)組，并返回結(jié)果。
join()	把數(shù)組的所有元素放入一個(gè)字符串。元素通過指定的分隔符進(jìn)行分隔。
pop()	刪除并返回?cái)?shù)組的最后一個(gè)元素
push()	向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度。
reverse()	顛倒數(shù)組中元素的順序。
shift()	刪除并返回?cái)?shù)組的第一個(gè)元素
slice()	從某個(gè)已有的數(shù)組返回選定的元素
sort()	對(duì)數(shù)組的元素進(jìn)行排序
splice()	刪除元素，并向數(shù)組添加新元素。
toSource()	返回該對(duì)象的源代碼。
toString()	把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。
toLocaleString()	把數(shù)組轉(zhuǎn)換為本地?cái)?shù)組，并返回結(jié)果。
unshift()	向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。
valueOf()	返回?cái)?shù)組對(duì)象的原始值

sort()方法

語(yǔ)法

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沒有按照順序來(lái)排列呢？這是因?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è)值的相對(duì)順序的數(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 的值。

附上一張數(shù)組的思維導(dǎo)圖：

?

轉(zhuǎn)載于:https://www.cnblogs.com/momjs/p/5897223.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript学习总结（二）数组和对象部分的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。