JavaScript Day 17. 认识物件

前面说了几篇阵列以及阵列方法，今天终於要讲到跟阵列息息相关的「物件」了。物件包含着一个以上的属性与值，可以单一组物件存在，也可以好几组物件存在於一个阵列之中。

这里也引用一下 MDN 对物件的说法：

物件是一批相关的数据以及 / 或者功能（通常包含了几个变数及函式 — 当它们包含在物件中时被称做「属性」（properties）或「函式」（methods））

物件的型态

以下示范物件的写法，可以看到物件里面可以是字串、数字或是布林值：

// 变数
let farmAnimals = {
	// 属性：值
	animal: 'pig',
	num: 20,
	isEatFood: true
};

console.log(farmAnimals); // {animal: 'pig', num: 20, isEatFood: true}

如果是阵列包着物件，型态会是这个样子：

let farmAnimals = [
	{
		animal: 'pig',
		num: 20,
		isEatFood: true
	},
	{
		animal: 'chick',
		num: 50,
		isEatFood: true
	},
	{
		animal: 'cow',
		num: 10,
		isEatFood: false
	},
	{
		animal: 'sheep',
		num: 10,
		isEatFood: true
	},
];

console.log(farmAnimals); // (4) [{…}, {…}, {…}, {…}]

可以看到阵列里面包着四笔物件。

读取物件的值

和阵列一样，物件属性也是可以让人更有效率使用的，读取的方式很简单：

// 这边希望取 animal 属性的值
let farmAnimals = {
	animal: 'pig',
	num: 20,
	isEatFood: true
};

console.log(farmAnimals.animal); // pig

另外我们更可以针对取出的资料宣告变数，这在一些情况能简化程序码，这里试着示范一个比较长的资料串，方便看出替资料宣告变数的必要性。

let farmAnimals = [
	// 1 个物件
	{
		// 1 个物件
		animal1: {
			variety: 'pig',
			num: 20,
			isEatFood: true
		},
		// 2 个物件
		animal2: {
			// animal2 第 1 个物件
			variety: {
				// variet 里面的 1 个物件
				chick: {
					chickA: '乌骨鸡',
					chickB: '力康鸡',
					chickC: '苏赛克斯鸡'
				}
			},
			// animal2 第 2 个属性
			num: 50,
			// animal2 第 3 个属性
			isEatFood: true
		},
	},
	// 2 个物件
	{
		animal: 'cow',
		num: 10,
		isEatFood: false
	},
	// 3 个物件
	{
		animal: 'sheep',
		num: 10,
		isEatFood: true
	},
];

console.log(farmAnimals[0].animal2.variety.chick.chickC); // 苏赛克斯鸡

以上是一大串复杂的阵列+物件资料，实际上像范例这种阵列包物件又再包物件，或甚至更加复杂的阵列资料是很常见的。

那我来稍微解释一下上面到底在做什麽好了，这个范例有一个 farmAnimals 阵列，我们需要从这个阵列取出「苏赛克斯鸡」，可以看见 farmAnimals 阵列里面有三个物件，我们要的「苏赛克斯鸡」在阵列中的第一个物件里，阵列从 0 开始计算，因此会写 farmAnimals[0]，接着又遇到两个物件，可以看到我们要找的资料在第二个物件，上面有示范物件取值是在前面加上一个「.」，因此这个资料串又加长了，变成这样 farmAnimals[0].animal2，依此类推不断的向物件里面取我们要的值，最後就变成这麽一长串。

但试着想像一下，假如我们需要用这串资料来写 if，是不是 if 括号里面的程序码会看起来超级长，如果我们还需要用到逻辑运算子，这括号都到了第二行了XD

於是替这串资料宣告变数就变成必要的了：

let myChick = farmAnimals[0].animal2.variety.chick.chickC
console.log(myChick); // 苏赛克斯鸡

现在可以看到这一串资料瞬间变的很清爽。

物件新增属性

在阵列的时候有提到，我们可以在必要的时候新增一个空阵列，同样的物件也可以。

let farm = {};

farm.animal = 'pigeon';
farm.num = 10;

console.log(farm); // {animal: 'pigeon', num: 10}

farm.animal 代表的是，我选取了 farm 这个空物件，并且我增加了一个 animal 属性，赋予了一个值 pigeon。

修改物件资料

修改的作法其实跟新增的步骤一样。

let farm = {};
farm.num = 20;

console.log(farm); // {animal: 'pigeon', num: 20}

在字串上我们可以直接像上面这样子的写法，不过也有另一种写；假设鸽子的数量我想要再增加一只，於是可以这麽写 farm.num += 1。

删除物件资料

物件在删除的部分也是很直接的使用 delete，就像范例中的物件资料，蔬菜已被删除^w^

let food = {
	foodA: 'vegetable',
	foodB: 'fruit',
	foodC: 'fish',
	foodD: 'beef',
}

delete food.foodA;
console.log(food);
// {foodB: 'fruit', foodC: 'fish', foodD: 'beef'}

物件的其他读取方式

let food = {
	foodA: 'vegetable',
	foodB: 'fruit',
	foodC: 'fish',
	foodD: 'beef',
}

let delicacy = 'foodD';
console.log(food[delicacy]); // beef

有的时候也会需要使用到这样的读取方式，稍微解释一下他的步骤，会先将 delicacy 变数的字串取出即是 food[foodD]，然後再从 food[foodD] 取出值 'beef'。

那麽究竟什麽时候我们可能会用到上面讨论的方法呢？在更上面的地方我有提到，其实在抓取阵列物件资料的时候，是很容易遇到组合很复杂甚至匪夷所思的情况，譬如说：

let food = {
	foodA: 'vegetable',
	foodB: 'fruit',
	'089': 'beef',
}

console.log(food['089']); // beef

可以看到 '089' 这个字串是没有办法用上述普遍使用的方法去抓取值的，因此会需要使用例外的方法处理。

这篇没有写到太多的理论，主要是我自己在学习的时候其实也没有特别去查物件是什麽，只是看了范例了解他的概念以後，就开始不断的练习，写这篇文章的时候也是以多练习也可以活用的角度，因此如果需要看物件的理论，还是建议可以看一下 MDN。