【基礎(chǔ)】五分鐘學(xué)會(huì)JavaScript對(duì)象類(lèi)型

1 Object介紹

在JavaScript中Object是最基本,最常用,最強(qiáng)大的數(shù)據(jù)類(lèi)型,也是面向?qū)ο缶幊痰幕A(chǔ)。在JavaScript的六種基本的數(shù)據(jù)類(lèi)型中,Object是唯一的復(fù)雜數(shù)據(jù)類(lèi)型,唯一的可變數(shù)據(jù)類(lèi)型。一個(gè)Object就是一個(gè)基本數(shù)據(jù)類(lèi)型以名稱(chēng)值對(duì)存儲(chǔ)的無(wú)序列表。

2 Object創(chuàng)建

Object的創(chuàng)建方法有很多種,本文只介紹簡(jiǎn)單的字面值創(chuàng)建,構(gòu)造模式。

2.1 字面值

最簡(jiǎn)單的Object創(chuàng)建方式。

var apple = {
    name:"蘋(píng)果",
    color:"紅色",
    origin:["棲霞","臨猗"],
    showDesc:function () {
        console.log(this.name+"是"+this.color+"的");
    }
};

2.2 構(gòu)造模式

對(duì)于應(yīng)用程序中只做簡(jiǎn)單的數(shù)據(jù)存儲(chǔ),字面值的創(chuàng)建方式非常的簡(jiǎn)單有效。但是對(duì)于復(fù)雜的應(yīng)用時(shí),比如我們需要構(gòu)建10種水果時(shí),每種水果都有名稱(chēng),顏色,產(chǎn)地等,如應(yīng)用上述方式就需要重復(fù)多次創(chuàng)建對(duì)象。我們應(yīng)用構(gòu)造模式并引入水果(fruit)對(duì)象來(lái)解決上述問(wèn)題。

function Fruit(theName,theColor,theOrigin) {
    this.name = theName;
    this.color = theColor;
    this.origin = theOrigin;
    this.showDesc = function () {
        console.log(this.name+"是"+this.color+"的");
    }
}

應(yīng)用這種方式,可以很方便的創(chuàng)建各種水果,如果需要改變水果的描述方法(showDesc)也只需要做一處改動(dòng)就好。也可以新增自有方法和屬性。

var mango = new Fruit("芒果","黃色",["陵水","南寧"]);
//輸出 芒果是黃色的
mango.showDesc();

3 訪問(wèn)屬性

Object對(duì)象中的第一項(xiàng)都被稱(chēng)為屬性(函數(shù)被稱(chēng)為方法),一般來(lái)說(shuō)屬性值可以通過(guò)點(diǎn)號(hào)(.)或中括號(hào)([])加屬性名的方式獲得。屬性名可以是字符串(String)也可以是數(shù)字(Number),但一般最好不要用數(shù)字做為屬性名稱(chēng),如果用數(shù)字做屬性名稱(chēng),只能采用中括號(hào)的方式訪問(wèn)屬性。

var ageGroup = {15:"兒童",60:"老人"};
//輸出 兒童
console.log(ageGroup["15"]);
//拋出 SyntaxError 
console.log(ageGroup.15);

3.1 點(diǎn)號(hào)(.)

var people = {name:"iFat3",sex:"男"};
//輸出 iFat3
console.log(people.name);

3.2 中括號(hào)([])

var people = {name:"iFat3",sex:"男"};
//輸出 iFat3
console.log(people["name"]);

4 屬性存在與否判定

var people = {name:"iFat3",sex:"男"};
//輸出 true
console.log("name" in people);
//輸出 false
console.log("age" in people);
//輸出 true,繼承而來(lái)
console.log("toString" in people);

5 自有屬性判定

var people = {name:"iFat3",sex:"男"};
//輸出 true
console.log(people.hasOwnProperty("name"));
//輸出 false,繼承屬性非自有屬性
console.log(people.hasOwnProperty("toString"));

6 訪問(wèn)并枚舉屬性

var people = {name:"iFat3",sex:"男"};
//輸出 name sex
for(var item in people) {
    console.log(item);
}

7 刪除屬性

只能刪除自有屬性,不能刪除繼承屬性。

var people = {name:"iFat3",sex:"男"};
delete people.sex;
//輸出 undefined
console.log(people.sex);
delete people.toString();
//輸出 [object Object]
console.log(people.toString());

8 序列化和反序列化

使用JSON.stringify函數(shù)來(lái)序列化對(duì)象,使用JSON.parse函數(shù)來(lái)反序列化對(duì)象。

var people = {name:"iFat3",sex:"男"};
var peopleStr = JSON.stringify(people);
//輸出 string
console.log(typeof peopleStr);
//輸出 {"name":"iFat3","sex":"男"}
console.log(peopleStr);
var people2 = JSON.parse(peopleStr);
//輸出 object
console.log(typeof people2);
//輸出 iFat3
console.log(people2.name);

本文并未介紹JavaScript的原型屬性,Prototype部分內(nèi)容較多會(huì)另做介紹。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,981評(píng)論 19 139
  • 國(guó)家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿:20170802 前言: 排版 ...
    庭說(shuō)閱讀 11,178評(píng)論 6 13
  • 很早以前就有過(guò)要寫(xiě)點(diǎn)什么的念頭,也曾經(jīng)嘗試過(guò)寫(xiě)小說(shuō),也只是寫(xiě)了個(gè)沒(méi)有任何新意的開(kāi)頭就不了了之就,希望在簡(jiǎn)書(shū)能夠...
    氵方子閱讀 156評(píng)論 0 0
  • 兒子快四歲了,像孫猴子一樣,沒(méi)休止地鬧騰著,不用給他支點(diǎn),他也能翹起整個(gè)世界,無(wú)時(shí)無(wú)刻不考驗(yàn)著我思索人生的意義。 ...
    林子里的蒹葭閱讀 403評(píng)論 4 5