淺析 JavaScript 數據類型 | Object 基礎

這是我參與8月更文挑戰的第3天，活動詳情查看8月更文挑戰數組

前言

上次咱們對基本數據類型有了基礎的認識，今天咱們主要了解一下引用數據類型中的 Object 對象的基礎知識，以普通對象做爲例子，開啓探索之旅。瀏覽器

定義

爲了瞭解 Object，咱們使用普通對象進行講解：markdown

普通對象有如下特色：app

有大括號包裹起來的
有零到多組屬性名和屬性值（鍵值對）組成，用逗號分隔
key 不能是引用數據類型，value 能夠是任何的數據類型

到底何爲屬性？是用來作什麼的？post

屬性就是用來描述當前對象特徵/特色的，屬性名是當前具有這個特徵，屬性值是對這個特徵的描述（專業語法：屬性名稱爲鍵【key】，屬性值稱爲值【value】，一組屬性名和屬性值稱爲一組鍵值對）ui

不知道你們，看了上面關於「屬性名」和屬性值的描述，是否理解？不理解的話，能夠看下這個例子：url

想象咱們在製做一個策略類戰爭遊戲，玩家能夠操做一堆士兵攻擊敵方。一個士兵，就比如如是一個對象，那咱們看看士兵有什麼屬性，以下圖：上面的兵種、攻擊力、生命值，就是屬性，屬性也不過如此。spa

let person = {
    name: '追夢玩家',
    age: 18
};
// person 就是一個對象，name 和 age 是 person 的屬性 
複製代碼

屬性的操做

其實就是對鍵值對的增刪查改，簡稱「CURD」3d

獲取

語法：code

對象.屬性名 . 能夠理解成的，對象的屬性名都是字符串格式的
對象[屬性]

person.name // => 點操做符
person['name'] 
// 硬核玩家的操做 通常來講，對象的屬性名都是字符串格式的（屬性值不固定，任何格式均可以）
複製代碼

增/改

JS對象中，一個對象當中的屬性名是不容許重複的（利用這點，能夠實現數組去重），是惟一的。若是重複的話，有可能會報錯的，有可能不報錯！！！

增：對原有對象不存在的屬性進行操做就是增長
改：對原有對象存在的屬性進行操做就是修改

var obj = { name: '追夢玩家', age: 18 };
obj.name = '磚家'; // => 原有對象中存在name屬性，此處屬於「修改」屬性值
obj.sex = '男'; // => 原有對象中**不存在**sex屬性，此處至關於給當前對象「新增」一個屬性 sex
obj[age] // 這樣寫不行，會報錯，爲何呢？能夠嘗試一下，後面會講解
obj['age'] = 28;
複製代碼

刪除

注：delete 是關鍵字

完全刪除：對象中不存在這個屬性了

delete obj['age'];
obj.age // undefined
複製代碼

不完全（假）刪除：並無移除這個屬性，只是讓當前屬性的值爲空

obj['sex'] = null;
// obj下的 sex 屬性仍是存在的，只不過它的值設置爲 null 而已
複製代碼

在獲取屬性值的時候，若是當前對象有這個屬性名，則能夠正常獲取到值（哪怕是 null ），可是若是沒有這個屬性，則獲取的結果是 undefined

obj.age // obj 對象沒有 age 屬性，返回 undefined
obj.sex // obj 對象有 sex 屬性，可是賦值爲 null，返回 null
複製代碼

對象的屬性名說明

一個對象中的屬性名不只僅是字符串格式的，還有多是數字格式的「類數組」

當咱們存儲的屬性名不是字符串也不是數字的時候，瀏覽器會把這個值轉換爲字符串（toString方法），而後再進行存儲

var obj = {
    name: '追夢玩家',
    0: 100
};

obj[0] // => 100
obj['0'] // => 100
// 錯誤寫法：obj.0 => Uncaught SyntaxError: Unexpected number
// SyntaxError => 語法錯誤

// 存儲的屬性名爲 true
obj[true] = false;
// 能夠在控制檯輸出 obj，看看
複製代碼

咱們怎麼驗證存儲的屬性不是字符串也不是數字的時候呢？咱們能夠在控制檯輸出 obj，看看。

經過運行 Object.keys(obj) 這個方法，能夠看到 obj 的屬性名，都是字符串類型的

不知道你們還記不記得，文章開頭說，key 不能是引用數據類型。這個要怎麼理解呢？

咱們能夠用一個例子來理解下：

var obj = {
    name: '追夢玩家'
};

obj[{}] = 500;
console.log(obj[{xxx:'xxx'}]); // 請問，輸出結果？
console.log(obj[{}] === obj[{xxx:'xxx'}]); // 請問，輸出結果？ 
複製代碼

結果，如圖：爲何 obj[{}] === obj[{xxx:'xxx'}] 的結果是 true？

若是理解上面對象的屬性名的相關處理，就好理解了。

其實就是會將對象轉換爲字符串 '[object Object]'，做爲屬性名進行存儲。

obj[{}] = 500;
// 先把({}).toString()後的結果做爲對象的屬性名存儲進來 obj['[object Object]'] = 500
obj[{xxx:'xxx'}];
// => 獲取的時候也是先把對象轉換爲字符串'[object Object]'，而後獲取以前存儲的 500，因此存儲對象沒有用
複製代碼

數組也是對象

屬性名是數字，數字從零開始，逐級遞增，每個數字表明着當前項的位置=>咱們把這種數字屬性名叫作「索引」
默認有一個 length 屬性存儲數組的長度，調用數組方法，length 都會自動更新

var obj = {
    a : 12
}
var ary = [12,23]; // => 12和23都是屬性值，屬性名呢？

// 經過觀察結果，咱們發現數組對象的「屬性名」是數字（咱們把數字屬性名稱爲當前對象的索引）
// 獲取屬性值，跟普通對象獲取是同樣的。
ary[0] // 12
ary['0'] // 12
ary.0 // => 報錯 => Uncaught SyntaxError: Unexpected number
ary.length // => 2
ary['length'] // => 2
複製代碼

怎麼理解數組和對象的關係呢？

數組是對象的一種細分，對象包含數組。對象擁有的，數組一樣能夠有，只不過數組在某些形式上特殊一點。數組的屬性名是數字，數組是一種特殊的對象，對象有的，它也有，對象沒有的，它也有。好比數組，有 push 方法，而對象沒有。

關於對象的一點細節知識

先看一下，下面這個代碼，輸出結果是？

var obj = {
  name: '追夢玩家',
  age: 18
};
var name = '磚家';

console.log(obj.name);
console.log(obj['name']);
console.log(obj[name]);
複製代碼

結果，如圖：若是沒有答對的話，就說明你沒有理解'name' 和 name 的區別

// 'name'和name的區別
// => 'name'是一個字符串值，它表明的是自己
// => name（代名詞/容器）是一個變量不是字符串值，它表明的是自己存儲的這個值

obj.name // => 獲取的是 name 屬性的值
obj['name'] // => 獲取的是 name 屬性的值
obj[name] // => 此處的 name 是一個變量，咱們要獲取的屬性名不叫作 name ，是 name 存儲的值'磚家' => obj['磚家'] => 沒有這個屬性，屬性值是 undefined 
複製代碼

總的來講，就是

obj['key'] 獲取屬性名爲 key 的屬性值
obj.key 獲取屬性名爲 key 的屬性值
obj[key] 獲取 key 這個變量存儲的那個值，做爲屬性名對應的屬性值