为了转生而点技能-JavaScript，day6(初探物件构造及物件取值

物件(Object)

构造：物件就是多种属性的集合，里面有属性及值，其中属性只能是字串，增加属性利用,号。

前面说到除了七个primitive data type/primitive value(原始型/纯值)外，其他都是物件。

var person = {  name: 'Kuro',  job: 'Front-end developer',  sayName: function() {    alert( this.name );  },};属性：name值：'Kuro'属性：sayName值：function

上面这种直接用{}建立物件的方法，称为「物件实字 (Object literal)」。

---

function也是Object，可以利用console.dir()，会发现function拥有跟物件一样的格式内容。console.dir()可以用来展示JavaScript中指定对象的属性，但是请勿再正式环境使用它。

---

读取属性：

利用.号或是[]号：

var person = {  name: 'Kuro',  job: 'Front-end developer',  family: {      mom:'Mary',      dad:'Tom',      },  sayName: function() {    alert( this.name );  },  100:'$100',  '200':'$200',};var manager = name ;console.log(person.name);         //'Kuro'console.log(person.family.mom);   //'Mary'console.log(person['name']);   //'Mary'console.log(person[manager]);   //'Kuro'console.log(person[100]);   //'$100'console.log(person['200']);   //'$200'console.log(person.'200');   //'$200'执行物件里面的函式:person.sayName();person['sayName']();

[]号：可以读取变数，上面例子的变数为manager；可以读取数字形式的值。

---

事后增加属性：利用=号。

var person = {  name: 'Kuro',  job: 'Front-end developer',  sayName: function() {    alert( this.name );  },};person.dog = '小狗';console.log(person.dog);  //增加了dog属性；值是'小狗'person['cat'] = '小猫';console.log(person.cat);  //增加了cat属性；值是'小猫'var girl = 'Mary';girl.dad = 'Tom';console.log(girl);  //'Mary'是字串，属于primitive data type。

如需在纯值建立属性，可採用建构式的方式。

---

在阵列上也可新增：

---

如果读取未定义的属性，那该值会出现undefined错误讯息。如果直接读取未定义属性的值，则会直接出现错误讯息如下图，且会造成中断效果，之后的程式码都会无法运作。

解决之道：

        girl.dad = 'Dad';        console.log(girl.dad);       //'Dad'        girl.dad.name = 'Tom';        console.log(girl.dad.name); //undefined(因为girl.dad = 'Dad'，只是在girl增加属性dad并且设定值为'Dad'，并未建立第二层物件的属性name)                        girl.dad = {            name: 'TOM',        };        console.log(girl.dad);       //{name: 'TOM'}        console.log(girl.dad.name);  //'TOM'        

或是直接在原本的物件上新增：

实务上有时候会发生下图情况，a是not defined的错误讯息，代表a根本"不存在"，并使之后的程式码都无法执行。
此时可以利用console.log(window.a)，使window浏览器变成一个物件，a变成属性，那就会出现undefined，且之后的程式码都可以顺利进行。

---

事后删除属性：利用delete即可。

var person = {  name: 'Kuro',  job: 'Front-end developer',  sayName: function() {    alert( this.name );  },};delete person.name；delete person['job']；

宣告的变数，无法用delete删除。

---

参考文章：

JS var 变数的秘密：一文看懂 var、let、const 无宣告变数细节：https://tw.alphacamp.co/blog/javascript-var-let-const关于 delete 变数诡异行为与解释问题：https://andyyou.github.io/2016/02/25/variable-delete-operate/