如何零基礎(chǔ)學(xué)習(xí)VBA—HTMLObjectEleme

如何零基礎(chǔ)學(xué)習(xí)VBA—HTMLObjectElement對象

頭條創(chuàng)作挑戰(zhàn)賽# 在Excel VBA中，HTMLObjectElement對象表示HTML文檔中的<object>元素。它允許您通過VBA代碼訪問和操作HTML文檔中的<object>元素，例如Flash、Java Applets、嵌入式視頻等。使用HTMLObjectElement對象，您可以在VBA中設(shè)置<object>元素的屬性，例如高度、寬度、數(shù)據(jù)等，以及執(zhí)行與<object>元素相關(guān)的操作。

以下是6個代碼實(shí)例來解釋說明HTMLObjectElement對象的用法：

1、獲取HTMLObjectElement對象

Dim obj As HTMLObjectElement
Set obj=ActiveDocument.getElementById("myObject")

2、設(shè)置HTMLObjectElement對象的高度和寬度

obj.Height=100
obj.Width=200

3、獲取HTMLObjectElement對象的數(shù)據(jù)屬性

Dim data As String
data=obj.Data

4、設(shè)置HTMLObjectElement對象的數(shù)據(jù)屬性

obj.Data="http://example.com/myvideo.mp4"

5、獲取HTMLObjectElement對象的classid屬性

Dim classid As String
classid=obj.classid

6、設(shè)置HTMLObjectElement對象的classid屬性

obj.classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

下面是兩個Excel案例代碼來解釋HTMLObjectElement對象的使用：

1、在Excel中插入Flash動畫

Sub InsertFlash()
    Dim obj As HTMLObjectElement
    Set obj=ActiveSheet.OLEObjects.Add(ClassType:="ShockwaveFlash.ShockwaveFlash", _
        Link:=False, DisplayAsIcon:=False, Left:=10, Top:=10, Width:=200, Height:=100).Object
    obj.Movie="http://example.com/myflash.swf"
End Sub

2、在Excel中插入嵌入式視頻

Sub InsertVideo()
    Dim obj As HTMLObjectElement
    Set obj=ActiveSheet.OLEObjects.Add(ClassType:="MediaPlayer.MediaPlayer", _
        Link:=False, DisplayAsIcon:=False, Left:=10, Top:=10, Width:=200, Height:=100).Object
    obj.URL="http://example.com/myvideo.mp4"
End Sub

在這些代碼中，我們使用HTMLObjectElement對象來訪問和操作插入到Excel工作表中的<object>元素。我們可以設(shè)置<object>元素的高度、寬度、數(shù)據(jù)、classid等屬性，以及執(zhí)行與<object>元素相關(guān)的操作，例如播放Flash動畫和嵌入式視頻。

在使用HTMLObjectElement對象時，需要注意以下幾點(diǎn)：

1、要確保已經(jīng)正確地引用了Microsoft HTML Object Library。

2、要確保在HTML文檔中正確地指定了<object>元素的classid屬性，以便在VBA中正確地創(chuàng)建和引用HTMLObjectElement對象。

3、要確保在操作<object>元素之前，已經(jīng)加載了完整的HTML文檔。

4、要確保在設(shè)置<object>元素的屬性之前，已經(jīng)正確地驗(yàn)證了這些屬性的值，以避免出現(xiàn)錯誤。

5、要確保在操作<object>元素之前，已經(jīng)正確地驗(yàn)證了這些元素的狀態(tài)和可用性，以避免出現(xiàn)錯誤。

6、在使用HTMLObjectElement對象時，應(yīng)該遵循良好的編程實(shí)踐，例如使用錯誤處理和代碼注釋等，以提高代碼的可讀性和可維護(hù)性。

現(xiàn)代web開發(fā)中，表單是用戶與網(wǎng)站互動的重要方式之一。HTML5為表單提交提供了強(qiáng)大的功能和豐富的輸入類型，讓收集和驗(yàn)證用戶輸入數(shù)據(jù)變得更加容易和安全。本文將詳細(xì)介紹HTML5表單的各個方面，包括基本結(jié)構(gòu)、輸入類型、驗(yàn)證方法和提交過程。

基本結(jié)構(gòu)

HTML表單由<form>標(biāo)簽定義，它可以包含輸入字段、標(biāo)簽、按鈕等元素。一個基本的表單結(jié)構(gòu)如下所示：

<form action="/submit_form" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">電子郵箱：</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="提交">
</form>

在這個例子中，表單有兩個輸入字段：姓名和電子郵箱。每個輸入字段都有一個<label>標(biāo)簽，這不僅有助于用戶理解輸入的內(nèi)容，也有助于屏幕閱讀器等輔助技術(shù)。<form>標(biāo)簽的action屬性定義了數(shù)據(jù)提交到服務(wù)器的URL，method屬性定義了提交數(shù)據(jù)的HTTP方法（通常是post或get）。

輸入類型

HTML5提供了多種輸入類型，以支持不同的數(shù)據(jù)格式和設(shè)備。

文本輸入

<!-- 單行文本 -->
<input type="text" name="username" placeholder="請輸入用戶名" required>

<!-- 密碼 -->
<input type="password" name="password" required minlength="8">

<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">

<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">

數(shù)值輸入

<!-- 數(shù)值 -->
<input type="number" name="age" min="18" max="100" step="1" required>

<!-- 滑動條 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 電話號碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">

日期和時間輸入

<!-- 日期 -->
<input type="date" name="birthdate" required>

<!-- 時間 -->
<input type="time" name="appointmenttime">

<!-- 日期和時間 -->
<input type="datetime-local" name="appointmentdatetime">

選擇輸入

<!-- 復(fù)選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂</label>

<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<!-- 下拉選擇 -->
<select name="country" required>
  <option value="china">中國</option>
  <option value="usa">美國</option>
</select>

特殊輸入

<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">

<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>

驗(yàn)證方法

HTML5表單提供了內(nèi)置的驗(yàn)證功能，可以在數(shù)據(jù)提交到服務(wù)器之前進(jìn)行檢查。

必填字段

<input type="text" name="username" required>

正則表達(dá)式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請輸入5位數(shù)的郵政編碼">

數(shù)值范圍

<input type="number" name="age" min="18" max="99">

長度限制

<input type="text" name="username" minlength="4" maxlength="8">

表單提交

當(dāng)用戶填寫完表單并點(diǎn)擊提交按鈕時，瀏覽器會自動檢查所有輸入字段的有效性。如果所有字段都滿足要求，表單數(shù)據(jù)將被發(fā)送到服務(wù)器。否則，瀏覽器會顯示錯誤信息，并阻止表單提交。

<input type="submit" value="提交">

可以使用JavaScript來自定義驗(yàn)證或處理提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  // 檢查表單數(shù)據(jù)
  if (!this.checkValidity()) {
    event.preventDefault(); // 阻止表單提交
    // 自定義錯誤處理
  }
  // 可以在這里添加額外的邏輯，比如發(fā)送數(shù)據(jù)到服務(wù)器的Ajax請求
});

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>

<!-- 表單定義 -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>

  <label for="email">電子郵件：</label>
  <input type="email" id="email" name="email">
  <br>

  <input type="button" value="提交" onclick="submitForm()">
</form>

<script>
// JavaScript函數(shù)，處理表單提交
function submitForm() {
  // 獲取表單元素
  var form=document.getElementById('myForm');
  
  // 創(chuàng)建一個FormData對象
  var formData=new FormData(form);
  
  // 創(chuàng)建一個空對象來存儲表單數(shù)據(jù)
  var formObject={};
  
  // 將FormData轉(zhuǎn)換為普通對象
  formData.forEach(function(value, key){
    formObject[key]=value;
  });
  
  // 將對象轉(zhuǎn)換為JSON字符串
  var jsonString=JSON.stringify(formObject);
  
  // 彈出包含JSON字符串的對話框
  alert(jsonString);
  
  // 阻止表單的默認(rèn)提交行為
  return false;
}
</script>

</body>
</html>

在這個例子中：

我們定義了一個包含姓名和電子郵件輸入字段的表單，以及一個按鈕，當(dāng)點(diǎn)擊按鈕時會調(diào)用submitForm函數(shù)。
在submitForm函數(shù)中，我們首先獲取表單元素并創(chuàng)建一個FormData對象。然后，我們遍歷FormData對象，將表單數(shù)據(jù)復(fù)制到一個普通的JavaScript對象formObject中。
接著，我們使用JSON.stringify方法將formObject轉(zhuǎn)換成JSON字符串。
最后，我們使用alert函數(shù)彈出一個包含JSON字符串的對話框。

注意，這個例子中我們使用了type="button"而不是type="submit"，因?yàn)槲覀儾幌Ｍ韱斡心J(rèn)的提交行為。我們的JavaScript函數(shù)submitForm會處理所有的邏輯，并且通過返回false來阻止默認(rèn)的表單提交。如果你想要使用type="submit"，你需要在<form>標(biāo)簽上添加一個onsubmit="return submitForm()"屬性來代替按鈕上的onclick事件。

結(jié)論

HTML5的表單功能為開發(fā)者提供了強(qiáng)大的工具，以便創(chuàng)建功能豐富、用戶友好且安全的網(wǎng)站。通過使用HTML5的輸入類型和驗(yàn)證方法，可以確保用戶輸入的數(shù)據(jù)是有效的，同時提高用戶體驗(yàn)。隨著技術(shù)的不斷進(jìn)步，HTML5表單和相關(guān)API將繼續(xù)發(fā)展，為前端工程師提供更多的可能性。

如我們在數(shù)據(jù)類型一章學(xué)到的，JavaScript 中有八種數(shù)據(jù)類型。有七種原始類型，因?yàn)樗鼈兊闹抵话环N東西（字符串，數(shù)字或者其他）。

相反，對象則用來存儲鍵值對和更復(fù)雜的實(shí)體。在 JavaScript 中，對象幾乎滲透到了這門編程語言的方方面面。所以，在我們深入理解這門語言之前，必須先理解對象。

我們可以通過使用帶有可選 屬性列表 的花括號 {…} 來創(chuàng)建對象。一個屬性就是一個鍵值對（“key: value”），其中鍵（key）是一個字符串（也叫做屬性名），值（value）可以是任何值。

我們可以把對象想象成一個帶有簽名文件的文件柜。每一條數(shù)據(jù)都基于鍵（key）存儲在文件中。這樣我們就可以很容易根據(jù)文件名（也就是“鍵”）查找文件或添加/刪除文件了。

JavaScript 中的所有事物都是對象：字符串、數(shù)字、數(shù)組、日期，等等。

在 JavaScript 中，對象是擁有屬性和方法的數(shù)據(jù)。

屬性和方法

屬性是與對象相關(guān)的值。

方法是能夠在對象上執(zhí)行的動作。

舉例：汽車就是現(xiàn)實(shí)生活中的對象。

汽車的屬性：

car.name=Fiat

car.model=500

car.weight=850kg

car.color=white

汽車的方法：

car.start()

car.drive()

car.brake()

汽車的屬性包括名稱、型號、重量、顏色等。

所有汽車都有這些屬性，但是每款車的屬性都不盡相同。

汽車的方法可以是啟動、駕駛、剎車等。

所有汽車都擁有這些方法，但是它們被執(zhí)行的時間都不盡相同。

JavaScript 中的對象

在 JavaScript 中，對象是數(shù)據(jù)（變量），擁有屬性和方法。

當(dāng)您像這樣聲明一個 JavaScript 變量時：

var txt="Hello";

您實(shí)際上已經(jīng)創(chuàng)建了一個 JavaScript 字符串對象。字符串對象擁有內(nèi)建的屬性 length。對于上面的字符串來說，length 的值是 5。字符串對象同時擁有若干個內(nèi)建的方法。

屬性：

txt.length=5

方法：

txt.indexOf()

txt.replace()

txt.search()

提示：在面向?qū)ο蟮恼Z言中，屬性和方法常被稱為對象的成員。

在本教程稍后的章節(jié)中，您將學(xué)到有關(guān)字符串對象的更多屬性和方法。

創(chuàng)建 JavaScript 對象

JavaScript 中的幾乎所有事務(wù)都是對象：字符串、數(shù)字、數(shù)組、日期、函數(shù)，等等。

你也可以創(chuàng)建自己的對象。

本例創(chuàng)建名為 "person" 的對象，并為其添加了四個屬性：

實(shí)例

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

創(chuàng)建新 JavaScript 對象有很多不同的方法，并且您還可以向已存在的對象添加屬性和方法。

您將在本教程稍后的章節(jié)學(xué)到更多相關(guān)的內(nèi)容。

訪問對象的屬性

訪問對象屬性的語法是：

_objectName_._propertyName_

本例使用 String 對象的 length 屬性來查找字符串的長度：

var message="Hello World!";
var x=message.length;

在以上代碼執(zhí)行后，x 的值是：

訪問對象的方法

您可以通過下面的語法調(diào)用方法：

_objectName_._methodName_()

這個例子使用 String 對象的 toUpperCase() 方法來把文本轉(zhuǎn)換為大寫：

var message="Hello world!";
var x=message.toUpperCase();

在以上代碼執(zhí)行后，x 的值是：

HELLO WORLD!

您知道嗎？

提示：在面向?qū)ο蟮恼Z言中，使用 camel-case 標(biāo)記法的函數(shù)是很常見的。您會經(jīng)常看到 someMethod() 這樣的函數(shù)名，而不是 some_method()。

我們可以用下面兩種語法中的任一種來創(chuàng)建一個空的對象（“空柜子”）：

let user=new Object(); // “構(gòu)造函數(shù)” 的語法
let user={};  // “字面量” 的語法

通常，我們用花括號。這種方式我們叫做字面量。

文本和屬性

我們可以在創(chuàng)建對象的時候，立即將一些屬性以鍵值對的形式放到 {...} 中。

let user={     // 一個對象
  name: "John",  // 鍵 "name"，值 "John"
  age: 30        // 鍵 "age"，值 30
};

屬性有鍵（或者也可以叫做“名字”或“標(biāo)識符”），位于冒號 ":" 的前面，值在冒號的右邊。

在 user 對象中，有兩個屬性：

第一個的鍵是 "name"，值是 "John"。
第二個的鍵是 "age"，值是 30。

生成的 user 對象可以被想象為一個放置著兩個標(biāo)記有 “name” 和 “age” 的文件的柜子。

我們可以隨時添加、刪除和讀取文件。

可以使用點(diǎn)符號訪問屬性值：

// 讀取文件的屬性：
alert( user.name ); // John
alert( user.age ); // 30

屬性的值可以是任意類型，讓我們加個布爾類型：

user.isAdmin=true;

我們可以用 delete 操作符移除屬性：

delete user.age;

我們也可以用多字詞語來作為屬性名，但必須給它們加上引號：

let user={
  name: "John",
  age: 30,
  "likes birds": true  // 多詞屬性名必須加引號
};

列表中的最后一個屬性應(yīng)以逗號結(jié)尾：

let user={
  name: "John",
  age: 30,
}

這叫做尾隨（trailing）或懸掛（hanging）逗號。這樣便于我們添加、刪除和移動屬性，因?yàn)樗械男卸际窍嗨频摹?/span>

方括號

對于多詞屬性，點(diǎn)操作就不能用了：

// 這將提示有語法錯誤
user.likes birds=true

JavaScript 理解不了。它認(rèn)為我們在處理 user.likes，然后在遇到意外的 birds 時給出了語法錯誤。

點(diǎn)符號要求 key 是有效的變量標(biāo)識符。這意味著：不包含空格，不以數(shù)字開頭，也不包含特殊字符（允許使用 $ 和 _）。

有另一種方法，就是使用方括號，可用于任何字符串：

let user={};

// 設(shè)置
user["likes birds"]=true;

// 讀取
alert(user["likes birds"]); // true

// 刪除
delete user["likes birds"];

現(xiàn)在一切都可行了。請注意方括號中的字符串要放在引號中，單引號或雙引號都可以。

方括號同樣提供了一種可以通過任意表達(dá)式來獲取屬性名的方法 —— 跟語義上的字符串不同 —— 比如像類似于下面的變量：

let key="likes birds";

// 跟 user["likes birds"]=true; 一樣
user[key]=true;

在這里，變量 key 可以是程序運(yùn)行時計(jì)算得到的，也可以是根據(jù)用戶的輸入得到的。然后我們可以用它來訪問屬性。這給了我們很大的靈活性。

例如：

let user={
  name: "John",
  age: 30
};

let key=prompt("What do you want to know about the user?", "name");

// 訪問變量
alert( user[key] ); // John（如果輸入 "name"）

點(diǎn)符號不能以類似的方式使用：

let user={
  name: "John",
  age: 30
};

let key="name";
alert( user.key ) // undefined

計(jì)算屬性

當(dāng)創(chuàng)建一個對象時，我們可以在對象字面量中使用方括號。這叫做 計(jì)算屬性。

例如：

let fruit=prompt("Which fruit to buy?", "apple");

let bag={
  [fruit]: 5, // 屬性名是從 fruit 變量中得到的
};

alert( bag.apple ); // 5 如果 fruit="apple"

計(jì)算屬性的含義很簡單：[fruit] 含義是屬性名應(yīng)該從 fruit 變量中獲取。

所以，如果一個用戶輸入 "apple"，bag 將變?yōu)?{apple: 5}。

本質(zhì)上，這跟下面的語法效果相同：

let fruit=prompt("Which fruit to buy?", "apple");
let bag={};

// 從 fruit 變量中獲取值
bag[fruit]=5;

……但是看起來更好。

我們可以在方括號中使用更復(fù)雜的表達(dá)式：

let fruit='apple';
let bag={
  [fruit + 'Computers']: 5 // bag.appleComputers=5
};

方括號比點(diǎn)符號更強(qiáng)大。它允許任何屬性名和變量，但寫起來也更加麻煩。

所以，大部分時間里，當(dāng)屬性名是已知且簡單的時候，就使用點(diǎn)符號。如果我們需要一些更復(fù)雜的內(nèi)容，那么就用方括號。

屬性值簡寫

在實(shí)際開發(fā)中，我們通常用已存在的變量當(dāng)做屬性名。

例如：

function makeUser(name, age) {
  return {
    name: name,
    age: age,
    // ……其他的屬性
  };
}

let user=makeUser("John", 30);
alert(user.name); // John

在上面的例子中，屬性名跟變量名一樣。這種通過變量生成屬性的應(yīng)用場景很常見，在這有一種特殊的 屬性值縮寫 方法，使屬性名變得更短。

可以用 name 來代替 name:name 像下面那樣：

function makeUser(name, age) {
  return {
    name, // 與 name: name 相同
    age,  // 與 age: age 相同
    // ...
  };
}

我們可以把屬性名簡寫方式和正常方式混用：

let user={
  name,  // 與 name:name 相同
  age: 30
};

屬性名稱限制

我們已經(jīng)知道，變量名不能是編程語言的某個保留字，如 “for”、“l(fā)et”、“return” 等……

但對象的屬性名并不受此限制：

// 這些屬性都沒問題
let obj={
  for: 1,
  let: 2,
  return: 3
};

alert( obj.for + obj.let + obj.return );  // 6

簡而言之，屬性命名沒有限制。屬性名可以是任何字符串或者 symbol（一種特殊的標(biāo)志符類型，將在后面介紹）。

其他類型會被自動地轉(zhuǎn)換為字符串。

例如，當(dāng)數(shù)字 0 被用作對象的屬性的鍵時，會被轉(zhuǎn)換為字符串 "0"：

let obj={
  0: "test" // 等同于 "0": "test"
};

// 都會輸出相同的屬性（數(shù)字 0 被轉(zhuǎn)為字符串 "0"）
alert( obj["0"] ); // test
alert( obj[0] ); // test (相同的屬性)

這里有個小陷阱：一個名為 __proto__ 的屬性。我們不能將它設(shè)置為一個非對象的值：

let obj={};
obj.__proto__=5; // 分配一個數(shù)字
alert(obj.__proto__); // [object Object] — 值為對象，與預(yù)期結(jié)果不同

我們從代碼中可以看出來，把它賦值為 5 的操作被忽略了。

我們將在后續(xù)章節(jié) 中學(xué)習(xí) __proto__ 的特殊性質(zhì)，并給出了解決此問題的方法。

屬性存在性測試，“in” 操作符

相比于其他語言，JavaScript 的對象有一個需要注意的特性：能夠被訪問任何屬性。即使屬性不存在也不會報(bào)錯！

讀取不存在的屬性只會得到 undefined。所以我們可以很容易地判斷一個屬性是否存在：

let user={};

alert( user.noSuchProperty===undefined ); // true 意思是沒有這個屬性

這里還有一個特別的，檢查屬性是否存在的操作符 "in"。

語法是：

"key" in object

例如：

let user={ name: "John", age: 30 };

alert( "age" in user ); // true，user.age 存在
alert( "blabla" in user ); // false，user.blabla 不存在。

請注意，in 的左邊必須是 屬性名。通常是一個帶引號的字符串。

如果我們省略引號，就意味著左邊是一個變量，它應(yīng)該包含要判斷的實(shí)際屬性名。例如：

let user={ age: 30 };

let key="age";
alert( key in user ); // true，屬性 "age" 存在

為何會有 in 運(yùn)算符呢？與 undefined 進(jìn)行比較來判斷還不夠嗎？

確實(shí)，大部分情況下與 undefined 進(jìn)行比較來判斷就可以了。但有一個例外情況，這種比對方式會有問題，但 in 運(yùn)算符的判斷結(jié)果仍是對的。

那就是屬性存在，但存儲的值是 undefined 的時候：

let obj={
  test: undefined
};

alert( obj.test ); // 顯示 undefined，所以屬性不存在？

alert( "test" in obj ); // true，屬性存在！

在上面的代碼中，屬性 obj.test 事實(shí)上是存在的，所以 in 操作符檢查通過。

這種情況很少發(fā)生，因?yàn)橥ǔＧ闆r下不應(yīng)該給對象賦值 undefined。我們通常會用 null 來表示未知的或者空的值。因此，in 運(yùn)算符是代碼中的特殊來賓。

“for…in” 循環(huán)

為了遍歷一個對象的所有鍵（key），可以使用一個特殊形式的循環(huán)：for..in。這跟我們在前面學(xué)到的 for(;;) 循環(huán)是完全不一樣的東西。

語法：

for (key in object) {
  // 對此對象屬性中的每個鍵執(zhí)行的代碼
}

例如，讓我們列出 user 所有的屬性：

let user={
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // 屬性鍵的值
  alert( user[key] ); // John, 30, true
}

注意，所有的 “for” 結(jié)構(gòu)體都允許我們在循環(huán)中定義變量，像這里的 let key。

同樣，我們可以用其他屬性名來替代 key。例如 "for(let prop in obj)" 也很常用。

像對象一樣排序

對象有順序嗎？換句話說，如果我們遍歷一個對象，我們獲取屬性的順序是和屬性添加時的順序相同嗎？這靠譜嗎？

簡短的回答是：“有特別的順序”：整數(shù)屬性會被進(jìn)行排序，其他屬性則按照創(chuàng)建的順序顯示。詳情如下：

例如，讓我們考慮一個帶有電話號碼的對象：

let codes={
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  // ..,
  "1": "USA"
};

for(let code in codes) {
  alert(code); // 1, 41, 44, 49
}

對象可用于面向用戶的建議選項(xiàng)列表。如果我們的網(wǎng)站主要面向德國觀眾，那么我們可能希望 49 排在第一。

但如果我們執(zhí)行代碼，會看到完全不同的現(xiàn)象：

USA (1) 排在了最前面
然后是 Switzerland (41) 及其它。

因?yàn)檫@些電話號碼是整數(shù)，所以它們以升序排列。所以我們看到的是 1, 41, 44, 49。

整數(shù)屬性？那是什么？

這里的“整數(shù)屬性”指的是一個可以在不做任何更改的情況下與一個整數(shù)進(jìn)行相互轉(zhuǎn)換的字符串。

所以，"49" 是一個整數(shù)屬性名，因?yàn)槲覀儼阉D(zhuǎn)換成整數(shù)，再轉(zhuǎn)換回來，它還是一樣的。但是 “+49” 和 “1.2” 就不行了：

// Number(...) 顯式轉(zhuǎn)換為數(shù)字
// Math.trunc 是內(nèi)建的去除小數(shù)部分的方法。
alert( String(Math.trunc(Number("49"))) ); // "49"，相同，整數(shù)屬性
alert( String(Math.trunc(Number("+49"))) ); // "49"，不同于 "+49" ? 不是整數(shù)屬性
alert( String(Math.trunc(Number("1.2"))) ); // "1"，不同于 "1.2" ? 不是整數(shù)屬性

……此外，如果屬性名不是整數(shù)，那它們就按照創(chuàng)建時的順序來排序，例如：

let user={
  name: "John",
  surname: "Smith"
};
user.age=25; // 增加一個

// 非整數(shù)屬性是按照創(chuàng)建的順序來排列的
for (let prop in user) {
  alert( prop ); // name, surname, age
}

所以，為了解決電話號碼的問題，我們可以使用非整數(shù)屬性名來欺騙程序。只需要給每個鍵名加一個加號 "+" 前綴就行了。

像這樣：

let codes={
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA"
};

for (let code in codes) {
  alert( +code ); // 49, 41, 44, 1
}

現(xiàn)在跟預(yù)想的一樣了。

總結(jié)

對象是具有一些特殊特性的關(guān)聯(lián)數(shù)組。

它們存儲屬性（鍵值對），其中：

屬性的鍵必須是字符串或者 symbol（通常是字符串）。
值可以是任何類型。

我們可以用下面的方法訪問屬性：

點(diǎn)符號: obj.property。
方括號 obj["property"]，方括號允許從變量中獲取鍵，例如 obj[varWithKey]。

其他操作：

刪除屬性：delete obj.prop。
檢查是否存在給定鍵的屬性："key" in obj。
遍歷對象：for(let key in obj) 循環(huán)。

我們在這一章學(xué)習(xí)的叫做“普通對象（plain object）”，或者就叫對象。

JavaScript 中還有很多其他類型的對象：

Array 用于存儲有序數(shù)據(jù)集合，
Date 用于存儲時間日期，
Error 用于存儲錯誤信息。
……等等。

它們有著各自特別的特性，我們將在后面學(xué)習(xí)到。有時候大家會說“Array 類型”或“Date 類型”，但其實(shí)它們并不是自身所屬的類型，而是屬于一個對象類型即 “object”。它們以不同的方式對 “object” 做了一些擴(kuò)展。

JavaScript 中的對象非常強(qiáng)大。這里我們只接觸了其冰山一角。在后面的章節(jié)中，我們將頻繁使用對象進(jìn)行編程，并學(xué)習(xí)更多關(guān)于對象的知識。

任務(wù)

你好，對象

重要程度: 5

按下面的要求寫代碼，一條對應(yīng)一行代碼：

創(chuàng)建一個空的對象 user。
為這個對象增加一個屬性，鍵是 name，值是 John。
再增加一個屬性，鍵是 surname，值是 Smith。
把鍵為 name 的屬性的值改成 Pete。
刪除這個對象中鍵為 name 的屬性。

解決方案

檢查空對象

重要程度: 5

寫一個 isEmpty(obj) 函數(shù)，當(dāng)對象沒有屬性的時候返回 true，否則返回 false。

應(yīng)該像這樣：

let schedule={};

alert( isEmpty(schedule) ); // true

schedule["8:30"]="get up";

alert( isEmpty(schedule) ); // false

打開帶有測試的沙箱。

解決方案

對象屬性求和

重要程度: 5

我們有一個保存著團(tuán)隊(duì)成員工資的對象：

let salaries={
  John: 100,
  Ann: 160,
  Pete: 130
}

寫一段代碼求出我們的工資總和，將計(jì)算結(jié)果保存到變量 sum。從所給的信息來看，結(jié)果應(yīng)該是 390。

如果 salaries 是一個空對象，那結(jié)果就為 0。

解決方案

將數(shù)值屬性值都乘以 2

重要程度: 3

創(chuàng)建一個 multiplyNumeric(obj) 函數(shù)，把 obj 所有的數(shù)值屬性值都乘以 2。

例如：

// 在調(diào)用之前
let menu={
  width: 200,
  height: 300,
  title: "My menu"
};

multiplyNumeric(menu);

// 調(diào)用函數(shù)之后
menu={
  width: 400,
  height: 600,
  title: "My menu"
};

注意 multiplyNumeric 函數(shù)不需要返回任何值，它應(yīng)該就地修改對象。

在線咨詢

上一篇：那些離不開的 Chrome 擴(kuò)展插件
下一篇：東方同人游戲《東方的迷宮幻想鄉(xiāng)和通天的大樹》

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

如何零基礎(chǔ)學(xué)習(xí)VBA—HTMLObjectEleme

基本結(jié)構(gòu)

輸入類型

文本輸入

數(shù)值輸入

日期和時間輸入

選擇輸入

特殊輸入

驗(yàn)證方法

必填字段

正則表達(dá)式

數(shù)值范圍

長度限制

表單提交

完整例子

結(jié)論

屬性和方法

JavaScript 中的對象

創(chuàng)建 JavaScript 對象

實(shí)例

訪問對象的屬性

訪問對象的方法

您知道嗎？

文本和屬性

方括號

計(jì)算屬性

屬性值簡寫

屬性名稱限制

屬性存在性測試，“in” 操作符

“for…in” 循環(huán)

像對象一樣排序

總結(jié)

任務(wù)

你好，對象

檢查空對象

對象屬性求和

將數(shù)值屬性值都乘以 2

您的項(xiàng)目需求