前面有介绍了基本型别，基本型别有 string、number、boolean、null、undefined 这五个型别，剩下的可以都归类於物件型别。

什麽是物件型别？

如同标题所说，基本型别所存入的值比较单纯简单，每个值都没有关连，如同一个商店卖的商品一样。

let coffee = 45;
let sandwich = 30;

而现在要来介绍的物件型别，就是由 0 个到多个的资料属性所组合而成的，让资料有关连性！就像我要购买咖啡与三明治一样，让这两个商品装进我的购物袋。

const shopping_bag = {
  coffee: 45,
  sandwich: 30
};

当然这只是简单的比喻，实际并没那麽简单。

物件（object）

先来介绍最基础的物件（object）

物件可以多个属性值组合而成，属於无序集合体，每个属性都会有一个对应值，特色是由{}包起来。

就像一个人有名字（string）、性别（string）、年龄（number），就很适合用物件来新增。

宣告物件的方法

利用 new Object() 新增物件

这是以前新增物件的方法，利用 new Object() 帮变数新增 {} 空物件，再由赋值语句 物件名.属性名 = 属性值，进行新增物件属性。

const person = new Object();
person.name = "毛毛";
person.gender = "男";

利用空物件 {} 新增物件

这是现在大多数人都使用的方法，更简单直观，直接宣告物件并在里面定义属性 { key: value, key2: value }。
物件结构：

• 使用 {} 包住
• key 命名，尽量具有语意，尽量避免使用 数字、数字英文混和 与 空白键，如果 数字开头与英文混和 或 含有空白键，需使用引号 '' 包起来，而单纯数字就不需要引号包起来。
• value 值可以是任何型别，只要遵守型别规则就可以了。
• 多个属性值用 , 做区隔。

const person = {
  name : "毛毛",
  gender : "男"
}

当然也可以先宣告空物件

也可以透过宣告空物件，再看需要新增进去。

const person = {};
person.name = "毛毛";
person.gender = "男";

如何存取物件的 value 值

就跟前面新增属性值的方法一样

• 使用 . 取值，通常都使用这个方式取值，比较直观

  const person = {
    name : "毛毛",
    gender : "男"
  }
  
  console.log( person.name );  // "毛毛"
  

• 使用 [""] 取值，通常使用在 key 的命名法不符合常规变数命名时（如：数字开头 或 字串中间有空格），藉由自动转型使用中括号框起字串取值，如果 key 命名是纯数字，可以不使用引号取值。

  const obj = {
    1 : "我是 1",
    "2a" : "我是 2a",
    'my name': "毛毛"
  }
  
  console.log( obj.1 );          // 报错
  console.log( obj[1] );         // "我是 1"
  console.log( obj["1"] );       // "我是 1"
  console.log( obj[2a] );        // 报错
  console.log( obj["2a"] );      // "我是 2a"
  console.log( obj[my name] );   // 报错
  console.log( obj["my name"] ); // "毛毛"
  

如何新增物件属性

眼尖的人应该已经有发现，其实前面介绍如何新增物件时，就有新增物件属性。
需注意 物件的 key 会自动转型成字串型别，而 value 可以存任何型别。

而新增方法其实就跟存取方法几乎一模一样，使用赋值语句直接赋值即可！如：person.name = "毛毛";
注意的要点也差不多，尽量使用有语意的字串来命名 key。

如何删除物件属性

这就要使用到一元运算子 delete，在要删除的属性前面使用 delete 就会删除属性。

const wallet = {};   // 设一个钱包
wallet.money = 1000; // 钱包内多了 1000 元
console.log( wallet.money );  // 1000

delete wallet.money; // 钱包内移除了 1000 元
console.log( wallet.money );  // undefined

阵列（array）

跟物件（object）有点相似，阵列也是多个值组合而成。
与物件不一样的是，属於有序集合体，阵列的属性名为数字索引，阵列索引号码由 0 开始。
虽然可以有很多不同的值组合，但通常都会放同类型、具有关联性的值统合成阵列。

就像一个班级有你（string）、我（string）、他（string），都是班级里的学生，就很适合用阵列。

宣告阵列的方法

其实跟宣告物件的方法差不多，你会觉得似曾相似。
就想像原本的所有属性值，变成有序的索引值就好。

利用 new Array() 新增阵列

这是以前新增阵列的方法，利用 new Array() 帮变数新增 [] 空物件，再由赋值语句 阵列名[ 索引号码 ] = 属性值，进行新增阵列内容。
因为索引号码一定是有序数字，所以只能使用 阵列名[ 索引号码 ] 来新增存取。

const person = new Array();
person[0] = "花花";
person[1] = "泡泡";
person[2] = "毛毛";

利用空阵列 [] 新增物件

这是现在大多数人都使用的方法，更简单直观，直接宣告阵列并在里面定义属性 [ value, value ]。
阵列结构：

• 使用 [] 包住
• value 值可以是任何型别，但通常使用阵列的 value 值会具有相关性。
• 多个 value 值用 , 做区隔。

const person = [ "花花", "泡泡", "毛毛" ];

当然也可以先宣告空阵列

也可以透过宣告空物件，再看需要新增进去。

const person = [];
person[0] = "花花";
person[1] = "泡泡";
person[2] = "毛毛";

如何 新增 与 删除 阵列索引

这聪明的你应该马上就猜到！没错～跟物件使用的方法非常像，因为索引值都是数字，所以直接用 [] 来存取阵列索引值就可以了！
但是阵列还有更好的新增删除方法。

如果是用索引直接新增，会产生一个问题。如下：

const person = [ "花花", "泡泡", "毛毛" ];

/* 这时一个手残，把索引值案到 9 */
person[9] = "尤教授";
console.log( person );  // [ "花花", "泡泡", "毛毛", , , , , , , "尤教授" ]

你会发现索引值打错，会多很多个还没定义的索引值先占位子！
每次新增删除都还要小心翼翼地计算索引值。

在阵列最末端新增索引值 push()

这时候使用 push() 这个方法就能无後顾之忧的在阵列最後面新增索引值了！

const person = [ "花花", "泡泡", "毛毛" ];

person.push("尤教授");
console.log( person );  // [ "花花", "泡泡", "毛毛", "尤教授" ]

删除阵列最末端的索引值 pop()

有新增就会有删除！使用 pop() 这个方法就能毫无顾忌地删除阵列最後的索引值了！

const person = [ "花花", "泡泡", "毛毛", "尤教授", "魔鞋啾啾" ];

person.pop();
console.log( person );  // [ "花花", "泡泡", "毛毛", "尤教授" ]

删除 与 新增 最前头的索引值 shift() 与 unshift()

既然有处理阵列最末端的，当然也有处理阵列最前头的索引值！

const person = [ "魔鞋啾啾", "花花", "泡泡", "毛毛", "尤教授" ];

person.shift();
console.log( person );    // [ "花花", "泡泡", "毛毛", "尤教授" ]
person.unshift("魔人啾啾");
console.log( person );    // [ "魔人啾啾", "花花", "泡泡", "毛毛", "尤教授" ]

如何获取阵列的长度 length

有时候阵列很长时，可以依靠 length 语法来获取阵列的长度！

const person = [ "花花", "泡泡", "毛毛", "尤教授", "魔人啾啾" ];

console.log( person.length );  // 5

甚至修改阵列长度

利用 length 修改阵列，让阵列直接删除多余的值 或 添加未定义的值！

const person = [ "花花", "泡泡", "毛毛", "尤教授", "魔人啾啾" ];
person.length = 3; // 把阵列长度修改为 3
console.log( person );  // [ "花花", "泡泡", "毛毛" ]
person.length = 5; // 在修改回 5
console.log( person );  // [ "花花", "泡泡", "毛毛", , ]

除了用在阵列也能用在字串

length 除了可以用在察看阵列的长度，也能用来查看字串的字数，不过跟阵列不同的是不能修改字串的长度！

const name = "Mao";
console.log( name.length );  // 3

还有更多方法

还有很多阵列方法可以使用，有兴趣的可以再去看 JavaScript Array 阵列操作方法

如何透过程序码判断 阵列 和 物件

前面我们有教过一元运算子的 typeof 可以用来判断型别，但会发现判断阵列与物件时，回传的都是 "object"！
这时候 JavaScript 有新增一个判断阵列的方法 Array.isArray()。

const arr = [];
const person = [ "花花", "泡泡", "毛毛" ];
const obj = {};

console.log( Array.isArray(arr) );      // true
console.log( Array.isArray(person) );   // true
console.log( Array.isArray(obj) );      // false

总结

这边先大概了解了物件型别的基础了～至少会定义与增删改查，物件型别这个坑还很深，我们现在才刚踏进去，明天先介绍函式（function），介绍完函式，我们再继续把物件型别这个坑挖深！

参考资料

• 008 天 重新认识 JavaScript
• JavaScript Array 阵列操作方法