(Day10) 物件基础介绍

前言

物件 在 JS 是十分重要的，并且关於物件有几个满重要的特性：

• 物件传参考
• 物件深层/浅层 复制

不过在这之前先来介绍物件基础概念及操作 （混文章）

物件结构

物件是有以下东西组成的：

• 物件最外层的 {} 一般称作物件实字 (Object Literals)。
• 再来是物件实字中的内容是由 属性(property) / 值(value) 组成。

而物件的值可以是任何纯值、阵列、物件本身以及函式：

var school = {
	name:'Taipei University',
	age:45,
	vacation:true,
  teacher:['Mike','Lisha','Bob'],
	classes: {
		student:['Kevin','Clara','Rose'],
	},
	broadcast:function(){
		console.log('学校广播');
	}
}

物件取值

在 JS有两种方法可以获得物件中的值:

• 使用 . 点运算子
• 使用中刮号 []

var school = {
	name:'Taipei University',
	age:45,
	vacation:true,
  teacher:['Mike','Lisha','Bob'],
	classes: {
		student:['Kevin','Clara','Rose'],
	},
	broadcast:function(){
		console.log('学校广播');
	}
}
school.name //Taipei University
school['age'] //45

使用 [] 方法取值，有个好处，是可以透过变数替换 [] 中的值，来取出物件中不同的值，也就是：

var school = {
	name:'Taipei University',
	age:45,
	vacation:true,
  teacher:['Mike','Lisha','Bob'],
	classes: {
		student:['Kevin','Clara','Rose'],
	},
	broadcast:function(){
		console.log('学校广播');
	}
}
var test ='name'
console.log(school[test]) // Taipei University
test = 'age'
console.log(school[test]) // 45

而这个特性 使用 . 运算子，便无法达成了，按照上面范例使用 school.test 他会回传 undefined 。

值得一题的是物件中的属性都会是字串，当属性不是字串时， JS 会自动将物件属性强制转成字串，因此我们实际上在建立物件时，通常会直接忽略属性要写成字串这点。

也因此物件属性是能添加某些特殊符号，不过是只能使用 [] 来取值的，而 . 运算子则无法正确使用。

var obj= {
	'obj-test':'测试文字'
}
obj.obj-test // test is not defined
obj['obj-test'] //测试文字

新增属性

实际上若要在物件新增属性，方法就跟物件取值一样使用 . 运算子或是 [] 指向新属性，接着再使用 = 为该属性赋值。

var school = {
	name:'Taipei University',
	age:45,
	vacation:true,
  teacher:['Mike','Lisha','Bob'],
	classes: {
		student:['Kevin','Clara','Rose'],
	},
	broadcast:function(){
		console.log('学校广播');
	}
}
school.phoneNumber = '02-4050331'
school['address'] = '台北市中正区北平西路3号'
console.log(school.phoneNumber,school['address']) // '02-4050331' , '台北市中正区北平西路3号'

删除属性

要删除属性也很简单，直接使用一元运算子 delete 再使用 . 或 [] 指向要删除的属性。

var school = {
	name:'Taipei University',
	age:45,
	vacation:true,
  teacher:['Mike','Lisha','Bob'],
	classes: {
		student:['Kevin','Clara','Rose'],
	},
	broadcast:function(){
		console.log('学校广播');
	}
}
delete school.age
console.log(school.age) //undefined

ES6 物件函式缩写

上面有提到物件中也能使用函式，正确的写法会是

var school = {
	broadcast:function(){
		console.log('学校广播');
	}
}
school.broadcast() // 学校广播

而 ES6 则为物件函式提供了缩写，可以省略 :function 直接写成 :

var school = {
	broadcast(){
		console.log('学校广播');
	}
}
school.broadcast() // 学校广播

在使用一些大型框架时会很常看到这个缩写方法。

参考资料

• JavaScript 核心篇 (六角学院）