如我們在 數據類型 一章學到的，JavaScript 中有八種數據類型。有七種原始類型，因為它們的值只包含一種東西（字符串，數字或者其他）。

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

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

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

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

在 JavaScript 中，對象是擁有屬性和方法的數據。

屬性和方法

屬性是與對象相關的值。

方法是能夠在對象上執行的動作。

舉例：汽車就是現實生活中的對象。

汽車的屬性：

car.name=Fiat

car.model=500

car.weight=850kg

car.color=white

汽車的方法：

car.start()

car.drive()

car.brake()

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

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

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

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

JavaScript 中的對象

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

當您像這樣聲明一個 JavaScript 變量時：

var txt = "Hello";

您實際上已經創建了一個 JavaScript 字符串對象。字符串對象擁有內建的屬性 length。對于上面的字符串來說，length 的值是 5。字符串對象同時擁有若干個內建的方法。

屬性：

txt.length=5

方法：

txt.indexOf()

txt.replace()

txt.search()

提示：在面向對象的語言中，屬性和方法常被稱為對象的成員。

在本教程稍后的章節中，您將學到有關字符串對象的更多屬性和方法。

創建 JavaScript 對象

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

你也可以創建自己的對象。

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

實例

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

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

您將在本教程稍后的章節學到更多相關的內容。

訪問對象的屬性

訪問對象屬性的語法是：

_objectName_._propertyName_

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

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

在以上代碼執行后，x 的值是：

12

訪問對象的方法

您可以通過下面的語法調用方法：

_objectName_._methodName_()

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

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

在以上代碼執行后，x 的值是：

HELLO WORLD!

您知道嗎？

提示：在面向對象的語言中，使用 camel-case 標記法的函數是很常見的。您會經常看到 someMethod() 這樣的函數名，而不是 some_method()。

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

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

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

文本和屬性

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

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

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

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

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

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

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

可以使用點符號訪問屬性值：

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

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

user.isAdmin = true;

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

delete user.age;

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

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

列表中的最后一個屬性應以逗號結尾：

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

這叫做尾隨（trailing）或懸掛（hanging）逗號。這樣便于我們添加、刪除和移動屬性，因為所有的行都是相似的。

方括號

對于多詞屬性，點操作就不能用了：

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

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

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

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

let user = {};

// 設置
user["likes birds"] = true;

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

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

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

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

let key = "likes birds";

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

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

例如：

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

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

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

點符號不能以類似的方式使用：

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

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

計算屬性

當創建一個對象時，我們可以在對象字面量中使用方括號。這叫做 計算屬性。

例如：

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

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

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

計算屬性的含義很簡單：[fruit] 含義是屬性名應該從 fruit 變量中獲取。

所以，如果一個用戶輸入 "apple"，bag 將變為 {apple: 5}。

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

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

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

……但是看起來更好。

我們可以在方括號中使用更復雜的表達式：

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

方括號比點符號更強大。它允許任何屬性名和變量，但寫起來也更加麻煩。

所以，大部分時間里，當屬性名是已知且簡單的時候，就使用點符號。如果我們需要一些更復雜的內容，那么就用方括號。

屬性值簡寫

在實際開發中，我們通常用已存在的變量當做屬性名。

例如：

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

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

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

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

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

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

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

屬性名稱限制

我們已經知道，變量名不能是編程語言的某個保留字，如 “for”、“let”、“return” 等……

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

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

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

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

其他類型會被自動地轉換為字符串。

例如，當數字 0 被用作對象的屬性的鍵時，會被轉換為字符串 "0"：

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

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

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

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

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

我們將在 后續章節 中學習 __proto__ 的特殊性質，并給出了 解決此問題的方法。

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

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

讀取不存在的屬性只會得到 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 的左邊必須是 屬性名。通常是一個帶引號的字符串。

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

let user = { age: 30 };

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

為何會有 in 運算符呢？與 undefined 進行比較來判斷還不夠嗎？

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

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

let obj = {
  test: undefined
};

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

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

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

這種情況很少發生，因為通常情況下不應該給對象賦值 undefined。我們通常會用 null 來表示未知的或者空的值。因此，in 運算符是代碼中的特殊來賓。

“for…in” 循環

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

語法：

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

例如，讓我們列出 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” 結構體都允許我們在循環中定義變量，像這里的 let key。

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

像對象一樣排序

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

簡短的回答是：“有特別的順序”：整數屬性會被進行排序，其他屬性則按照創建的順序顯示。詳情如下：

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

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

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

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

但如果我們執行代碼，會看到完全不同的現象：

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

因為這些電話號碼是整數，所以它們以升序排列。所以我們看到的是 1, 41, 44, 49。

整數屬性？那是什么？

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

所以，"49" 是一個整數屬性名，因為我們把它轉換成整數，再轉換回來，它還是一樣的。但是 “+49” 和 “1.2” 就不行了：

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

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

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

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

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

像這樣：

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

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

現在跟預想的一樣了。

總結

對象是具有一些特殊特性的關聯數組。

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

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

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

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

其他操作：

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

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

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

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

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

JavaScript 中的對象非常強大。這里我們只接觸了其冰山一角。在后面的章節中，我們將頻繁使用對象進行編程，并學習更多關于對象的知識。

任務

你好，對象

重要程度: 5

按下面的要求寫代碼，一條對應一行代碼：

1. 創建一個空的對象 user。
2. 為這個對象增加一個屬性，鍵是 name，值是 John。
3. 再增加一個屬性，鍵是 surname，值是 Smith。
4. 把鍵為 name 的屬性的值改成 Pete。
5. 刪除這個對象中鍵為 name 的屬性。

解決方案

檢查空對象

重要程度: 5

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

應該像這樣：

let schedule = {};

alert( isEmpty(schedule) ); // true

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

alert( isEmpty(schedule) ); // false

打開帶有測試的沙箱。

解決方案

對象屬性求和

重要程度: 5

我們有一個保存著團隊成員工資的對象：

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

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

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

解決方案

將數值屬性值都乘以 2

重要程度: 3

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

例如：

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

multiplyNumeric(menu);

// 調用函數之后
menu = {
  width: 400,
  height: 600,
  title: "My menu"
};

注意 multiplyNumeric 函數不需要返回任何值，它應該就地修改對象。

var person = new Object();
person.name = "Alice";
person.age = 23;
person[5] = true;

var person = {
 "name" : "Alice",
 age : 23,
 5 : true
};

alert(person.name);

alert(person["name"];

var property = "name";
alert(person[property];

alert(person[5]);

在前面

今年國慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費，睡覺、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風，趕緊起來把文章寫完。

這篇文章比較基礎，在國慶期間的業余時間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關于文件上傳的各種場景和應用都涵蓋了,若有疏漏和問題還請留言斧正和補充。

自測讀不讀

以下是本文所涉及到的知識點，break or continue ?

• 文件上傳原理
• 最原始的文件上傳
• 使用 koa2 作為服務端寫一個文件上傳接口
• 單文件上傳和上傳進度
• 多文件上傳和上傳進度
• 拖拽上傳
• 剪貼板上傳
• 大文件上傳之分片上傳
• 大文件上傳之斷點續傳
• node 端文件上傳

原理概述

原理很簡單，就是根據 http 協議的規范和定義，完成請求消息體的封裝和消息體的解析，然后將二進制內容保存到文件。

我們都知道如果要上傳一個文件，需要把 form 標簽的enctype設置為multipart/form-data,同時method必須為post方法。

那么multipart/form-data表示什么呢？

multipart互聯網上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。

multipart/form-data 結構

看下 http 請求的消息體

• 請求頭：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請求要上傳文件，其中boundary表示分隔符，如果要上傳多個表單項，就要使用boundary分割，每個表單項由———XXX開始，以———XXX結尾。

• 消息體- Form Data 部分

每一個表單項又由Content-Type和Content-Disposition組成。

Content-Disposition: form-data 為固定值，表示一個表單元素，name 表示表單元素的 名稱，回車換行后面就是name的值，如果是上傳文件就是文件的二進制內容。

Content-Type：表示當前的內容的 MIME 類型，是圖片還是文本還是二進制數據。

解析

客戶端發送請求到服務器后，服務器會收到請求的消息體，然后對消息體進行解析，解析出哪是普通表單哪些是附件。

可能大家馬上能想到通過正則或者字符串處理分割出內容，不過這樣是行不通的，二進制buffer轉化為string,對字符串進行截取后，其索引和字符串是不一致的，所以結果就不會正確，除非上傳的就是字符串。

不過一般情況下不需要自行解析，目前已經有很成熟的三方庫可以使用。

至于如何解析，這個也會占用很大篇幅，后面的文章在詳細說。

最原始的文件上傳

使用 form 表單上傳文件

在 ie時代，如果實現一個無刷新的文件上傳那可是費老勁了，大部分都是用 iframe 來實現局部刷新或者使用 flash 插件來搞定，在那個時代 ie 就是最好用的瀏覽器（別無選擇）。

DEMO

這種方式上傳文件，不需要 js ，而且沒有兼容問題，所有瀏覽器都支持，就是體驗很差，導致頁面刷新，頁面其他數據丟失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        選擇文件:
            <input type="file" name="f1"/> input 必須設置 name 屬性，否則數據無法發送<br/>
<br/>
            標題：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 傳</button>

</form>

復制代碼

文件上傳接口

服務端文件的保存基于現有的庫koa-body結合 koa2實現服務端文件的保存和數據的返回。

在項目開發中，文件上傳本身和業務無關，代碼基本上都可通用。

在這里我們使用koa-body庫來實現解析和文件的保存。

koa-body 會自動保存文件到系統臨時目錄下，也可以指定保存的文件路徑。

然后在后續中間件內得到已保存的文件的信息，再做二次處理。

• ctx.request.files.f1 得到文件信息，f1為input file 標簽的 name
• 獲得文件的擴展名，重命名文件

NODE

/**
 * 服務入口
 */
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存庫
var fs = require('fs');
var Koa = require('koa2');

var app = new Koa();
var port = process.env.PORT || '8100';

var uploadHost= `http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //設置文件的默認保存目錄，不設置則保存在系統臨時目錄下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 開啟文件上傳，默認是關閉
}));

//開啟靜態文件訪問
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次處理，修改名稱
app.use((ctx) => {
    var file = ctx.request.files.f1;//得道文件對象
    var path = file.path;
    var fname = file.name;//原文件名稱
    var nextPath = path+fname;
    if(file.size>0 && path){
        //得到擴展名
        var extArr = fname.split('.');
        var ext = extArr[extArr.length-1];
        var nextPath = path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式輸出上傳文件地址
    ctx.body = `{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
復制代碼

CODE

https://github.com/Bigerfe/fe-learn-code/