整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
JavaScript中的對象是擁有屬性和方法的數據，今天小編將為大家帶來大數據編程入門：JavaScript對象。
真實生活中的對象，屬性和方法
真實生活中，手機是一個對象，并且有它的屬性，如品牌和顏色等，方法有開機關機等。
比如對象為手機（phone），屬性有：
phone.name=Redmi
phone.color=black
phone.size=6.67inch
phone.processor=phegda1200
方法有：
phone.start()
phone.working()
phone.call()
phone.stop()
所有的手機都有這些屬性，但是每款手機的屬性都不一樣；以及所有手機都擁有這些方法，但是它們被執行的時間可能會不一樣。
JavaScript對象
在JavaScript中，幾乎所有的事物都是對象。
注意：在JavaScript中，對象非常重要。理解對象后，就可以理解JavaScript。
在下面的代碼中變量為phone，所設置的值為”Redmi”:
var phone = “Redmi”;
一個對象也是一個變量，但是一個對象可以包含多個值（多個變量），并且每個值都以name:value的形式呈現。
var phone = {name:”Redmi”,color:”black”};
在上面的示例中，兩個值（“Redmi”,”black”）賦予變量phone。
注意：在JavaScript中的對象是變量的容器。
對象定義
可以在JavaScript中使用字符定義和創建對象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<p>創建 JavaScript 對象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"路飛", lastName:"夢奇", age:20, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.firstName + " 現在 " + person.age + " 歲.";
</script>
</body>
</html>
運行結果：
在JavaScript中定義對象可以跨越多行，不強制要求空格和換行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<p>創建 JavaScript 對象。</p>
<p id="demo"></p>
<script>
var person = {
firstName : "路飛",
lastName : "夢奇",
age : 20,
eyeColor : "black"
};
document.getElementById("demo").innerHTML =
person.firstName + " 現在 " + person.age + " 歲。";
</script>
</body>
</html>
運行結果：
對象屬性
可以說“JavaScript對象是變量的容器”。
然而，我們通常認為“JavaScript對象是鍵值對的容器”。
鍵值對通常寫為name:value（鍵和值用冒號分隔）。
鍵值對在JavaScript對象中通常稱為對象屬性。
注意：在JavaScript中的對象是屬性變量的容器。
對象鍵值對的寫法類似于：
PHP 中的關聯數組
Python 中的字典
C 語言中的哈希表
Java 中的哈希映射
Ruby 和 Perl 中的哈希表
訪問對象屬性
在JavaScript中可以通過兩種方式來訪問對象屬性：
示例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<p>
有兩種方式可以訪問對象屬性：
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
firstName : "索隆",
lastName : "羅羅諾亞",
id : 1
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>
運行結果：
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<p>
有兩種方式可以訪問對象屬性:
</p>
<p>
你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
var person = {
firstName: "索隆",
lastName : "羅羅諾亞",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>
運行結果：
對象方法
對象的方法定義函數并作為對象的屬性存儲。
通過添加()調用對象方法（作為函數）。
此實例訪問person對象的fullname()方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<p>創建和使用對象方法。</p>
<p>對象方法作為一個函數定義存儲在對象屬性中。</p>
<p id="demo"></p>
<script>
var person = {
firstName: "索隆",
lastName : "羅羅諾亞",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
運行結果：
如果要訪問person對象的fullname屬性，它將作為定義函數的字符串返回：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<p>創建和使用對象方法。</p>
<p>對象方法是一個函數定義,并作為一個屬性值存儲。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName: "路飛",
lastName : "夢奇",
id : 9,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "不加括號輸出函數表達式：" + person.fullName;
document.getElementById("demo2").innerHTML = "加括號輸出函數執行結果：" + person.fullName();
</script>
</body>
</html>
運行結果：
訪問對象方法
可以使用以下語法創建對象方法：
methodName : function() {
// 代碼
}
可以使用下面的語法訪問對象：
objectName.methodName()
通常，fullname()是作為person對象的方法，而fullname是一個屬性。
如果使用fullname屬性，而不添加()，它將返回函數的定義：
objectName.methodName
有許多方法可以創建、使用和修改JavaScript對象。
同樣的，還有許多方法可以創建、使用和修改屬性和方法。
以上就是關于大數據編程入門：JavaScript對象的全部內容了，希望這篇文章可以幫助到大家~
HTML DOM 節點
在 HTML DOM (Document Object Model) 中 , 每一個元素都是 節點:
文檔是一個文檔。
所有的HTML元素都是元素節點。
所有 HTML 屬性都是屬性節點。
文本插入到 HTML 元素是文本節點。are text nodes。
注釋是注釋節點。
Document 對象
當瀏覽器載入 HTML 文檔, 它就會成為 document 對象。
document 對象是HTML文檔的根節點與所有其他節點（元素節點，文本節點，屬性節點, 注釋節點）。
Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。
提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。
瀏覽器支持
所有主要瀏覽器都支持 Document 對象。
Document 對象屬性和方法
HTML文檔中可以使用以上屬性和方法:
| 屬性 / 方法 | 描述 |
|---|---|
| document.activeElement | 返回當前獲取焦點元素 |
| document.addEventListener() | 向文檔添加句柄 |
| document.adoptNode(node) | 從另外一個文檔返回 adapded 節點到當前文檔。 |
| document.anchors | 返回對文檔中所有 Anchor 對象的引用。 |
| document.applets | 返回對文檔中所有 Applet 對象的引用。 |
| document.baseURI | 返回文檔的絕對基礎 URI |
| document.body | 返回文檔的body元素 |
| document.close() | 關閉用 document.open() 方法打開的輸出流，并顯示選定的數據。 |
| document.cookie | 設置或返回與當前文檔有關的所有 cookie。 |
| document.createAttribute() | 創建一個屬性節點 |
| document.createComment() | createComment() 方法可創建注釋節點。 |
| document.createDocumentFragment() | 創建空的 DocumentFragment 對象，并返回此對象。 |
| document.createElement() | 創建元素節點。 |
| document.createTextNode() | 創建文本節點。 |
| document.doctype | 返回與文檔相關的文檔類型聲明 (DTD)。 |
| document.documentElement | 返回文檔的根節點 |
| document.documentMode | 返回用于通過瀏覽器渲染文檔的模式 |
| document.documentURI | 設置或返回文檔的位置 |
| document.domain | 返回當前文檔的域名。 |
| document.domConfig | 返回normalizeDocument()被調用時所使用的配置 |
| document.embeds | 返回文檔中所有嵌入的內容（embed）集合 |
| document.forms | 返回對文檔中所有 Form 對象引用。 |
| document. getElementsByClassName() | 返回文檔中所有指定類名的元素集合，作為 NodeList 對象。 |
| document.getElementById() | 返回對擁有指定 id 的第一個對象的引用。 |
| document.getElementsByName() | 返回帶有指定名稱的對象集合。 |
| document.getElementsByTagName() | 返回帶有指定標簽名的對象集合。 |
| document.images | 返回對文檔中所有 Image 對象引用。 |
| document.implementation | 返回處理該文檔的 DOMImplementation 對象。 |
| document.importNode() | 把一個節點從另一個文檔復制到該文檔以便應用。 |
| document.inputEncoding | 返回用于文檔的編碼方式（在解析時）。 |
| document.lastModified | 返回文檔被最后修改的日期和時間。 |
| document.links | 返回對文檔中所有 Area 和 Link 對象引用。 |
| document.normalize() | 刪除空文本節點，并連接相鄰節點 |
| document.normalizeDocument() | 刪除空文本節點，并連接相鄰節點的 |
| document.open() | 打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。 |
| document.querySelector() | 返回文檔中匹配指定的CSS選擇器的第一元素 |
| document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的所有元素節點列表 |
| document.readyState | 返回文檔狀態 (載入中……) |
| document.referrer | 返回載入當前文檔的文檔的 URL。 |
| document.removeEventListener() | 移除文檔中的事件句柄(由 addEventListener() 方法添加) |
| document.renameNode() | 重命名元素或者屬性節點。 |
| document.scripts | 返回頁面中所有腳本的集合。 |
| document.strictErrorChecking | 設置或返回是否強制進行錯誤檢查。 |
| document.title | 返回當前文檔的標題。 |
| document.URL | 返回文檔完整的URL |
| document.write() | 向文檔寫 HTML 表達式 或 JavaScript 代碼。 |
| document.writeln() | 等同于 write() 方法，不同的是在每個表達式之后寫一個換行符。 |
警告 !!!
在 W3C DOM核心，文檔對象 繼承節點對象的所有屬性和方法。
很多屬性和方法在文檔中是沒有意義的。
HTML 文檔對象可以避免使用這些節點對象和屬性：
| 屬性 / 方法 | 避免的原因 |
|---|---|
| document.attributes | 文檔沒有該屬性 |
| document.hasAttributes() | 文檔沒有該屬性 |
| document.nextSibling | 文檔沒有下一節點 |
| document.nodeName | 這個通常是 #document |
| document.nodeType | 這個通常是 9(DOCUMENT_NODE) |
| document.nodeValue | 文檔沒有一個節點值 |
| document.ownerDocument | 文檔沒有主文檔 |
| document.ownerElement | 文檔沒有自己的節點 |
| document.parentNode | 文檔沒有父節點 |
| document.previousSibling | 文檔沒有兄弟節點 |
| document.textContent | 文檔沒有文本節點 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
們知道生活中客觀存在的一切事物皆為對象,那在程序中的對象是什么樣子呢?我們可以將程序中的對象理解為客戶端世界中的對象在一種計算機中的一種表示方式.所有的編程語言中提到的對象其性質都是類似的,它往往對應內存中的一塊區域,在這個區域中存儲對象的屬性或方法信息。
一、類
在面向對象編程中，對象是一個類的實例，類定義了一組公開的屬性和方法。類簡化了同一類型的多個對象的創建。
1 var star = {}; //組裝一個star對象 2 star[“Polaris”] = new Object; 3 star[“Mizar”] = new Object; 4 star[“Polaris”].constellation = “Ursa Minor”; 5 star[“Mizar”].constellation = “Ursa Major”;
以下為使用偽類組裝一個star對象：【主要目的是：簡化代碼重復率，提高閱讀效率】
1 var star = {};
2 function Star(constell,type,specclass,magnitude) {
3 this.constellation = constell;
4 this.type = type;
5 this.spectralClass = specclass;
6 this.mag = magnitude;
7 }
8
9 star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0);
10 star["Mizar"] = new Star("Ursa Major","Spectroscopic Binary","A1 V",2.3);
二、創建對象
2.1 兩種方法創建對象：
1 var star=new Object; //new關鍵字
2 var star={} //花括號
2.2 為對象添加屬性
1 star.name="Polaris";
2 star.constellation="Ursa Minor";
2.3 遍歷對象屬性 用for…in..函數
1 function Star(constell,type,specclass,magnitude) {
2 this.constellation = constell;
3 this.type = type;
4 this.spectralClass = specclass;
5 this.mag = magnitude;
6 }
7 star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0);
8 star["Mizar"] = new Star("Ursa Major","Spectroscopic Binary","A1 V",2.3);
9 star["Aldebaran"] = new Star("Taurus","Irregular Variable","K5 III",0.85);
10 star["Rigel"] = new Star("Orion","Supergiant with Companion","B8 Ia",0.12);
11
12 for (var element in star) { //元素名
13 for (var propt in star[element]) { //屬性值
14 alert(element + ": " + propt + " = " + star[element][propt]);
15 }
16 }
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
