JavaScript 核心概念-物件取值、新增、刪除

物件裡面可以包含很多Type 的屬性，本篇主要陳述每個取值、新增、刪除的方式

取值、新增、刪除的方式可以利用物件. 標記號(點的方式) 呼叫出來!

https://chiangyuchi.github.io/2019/05/06/2019-05-06/

取值的方法01

我就用人體的組成方式，來給大家示範一下

試試看在物件內的函式呼叫方式

component.callFamily

var component={
    name:'俊仁',
    deposit:1000,
    members:{
        kidney:'值錢的腎臟',
        liver:'好用的肝臟,熬夜的好朋友!'
    },

callFamily: function(){
    console.log('聯絡俊仁');
}

};

console.log(component.callFamily);

// 顯示結果
'聯絡俊仁'

取值的方法02

呼叫元件內屬性成員

component.members.kidney

var component={
    name:'俊仁',
    deposit:1000,
    members:{
        kidney:'值錢的腎臟',
       liver:'好用的肝臟,熬夜的好朋友!'
    },

callFamily: function(){
    console.log('聯絡俊仁');
}

};

console.log(component.callFamily);
console.log(component.members.kidney);


// 顯示結果
'聯絡俊仁'
'值錢的腎臟'

取值的方法03

用不同的方式，呼叫元件內屬性成員

這裡我們會試著寫寫看其他的方法，以下是編譯有通過的情況 ，試驗錯誤，就是了解的最好方法。

var component ={
    name:'俊仁',
    deposit:1000,
    members:{
        kidney:'值錢的腎臟',
        liver:'好用的肝臟,熬夜的好朋友!'
    },

    1: '1',
    '$-是俊仁': '$-俊仁 string',

callFamily: function(){
console.log('聯絡俊仁');
}

};

console.log(component.callFamily);
console.log(component.members.kidney);
console.log(1);
console.log(component.$-是俊仁);
console.log(component['$-是俊仁']);


// 顯示結果
'聯絡俊仁'
'值錢的腎臟'
1
['$-是俊仁'] 沒有定義! 

得知一個結論

當你要呼叫屬性名稱時，屬性名稱可以為 = 數值、字串。

---

呼叫函式的方法

呼叫函式的方法就可以用標記法以及中括號。

var component ={
    name:'俊仁',
    deposit:1000,
    members:{
        kidney:'值錢的腎臟',
        liver:'好用的肝臟,熬夜的好朋友!'
    },

    1: '1',
    '$-是俊仁': '$-俊仁 string',
var component ={
    name:'俊仁',
    deposit:1000,
    members:{
        kidney:'值錢的腎臟',
        liver:'好用的肝臟,熬夜的好朋友!'
    },

    1: '1',
    '$-是俊仁': '$-俊仁 string',

callFamily: function(){
console.log('聯絡俊仁');
}

};

console.log(component.callFamily);
console.log(component.members.kidney);
console.log(1);
console.log(component['$-是俊仁']);


// 呼叫函式
component.callFamily();
component['callFamily']();


// 這2個是一樣的方法
// 顯示結果
'聯絡俊仁'
'值錢的腎臟'
1
['$-是俊仁'] 沒有定義! 
'聯絡俊仁'
'聯絡俊仁'

---

新增屬性

進入新增屬性之後，我們一樣試試看一些寫法。

var component ={
    name:'俊仁',
    deposit:1000,
    members:{
        kidney:'值錢的腎臟',
        liver:'好用的肝臟,熬夜的好朋友!'
    },

    1: '1',
    '$-是俊仁': '$-俊仁 string',

callFamily: function(){
console.log('聯絡俊仁');
}

};

console.log(component.callFamily);
console.log(component.members.kidney);
console.log(1);
console.log(component['$-是俊仁']);


// 這2個是一樣的方法
// 呼叫函式
component.callFamily();
component['callFamily']();


// 新增屬性
component.lungs= "肺部";
component['spine'] ="脊椎";
console.log(component);


// 這2個是一樣的方法
// 顯示結果
'聯絡俊仁'
'值錢的腎臟'
1
['$-是俊仁'] 沒有定義! 
'聯絡俊仁'
'聯絡俊仁'

將執行視窗內的物件屬性拉下去，會看到內部的屬性。

---

刪除屬性

刪除componet 裡面的屬性

1.deposit

2.後來新增的[$$$]

delete component.屬性內容;

var component ={
    name:'俊仁',
    deposit:1000,
    members:{
        kidney:'值錢的腎臟',
        liver:'好用的肝臟,熬夜的好朋友!'
    },

    1: '1',
    '$-是俊仁': '$-俊仁 string',

callFamily: function(){
console.log('聯絡俊仁');
}

};

console.log(component.callFamily);
console.log(component.members.kidney);
console.log(1);
console.log(component['$-是俊仁']);


// 這2個是一樣的方法
// 呼叫函式
component.callFamily();
component['callFamily']();


// 新增屬性
component.lungs= "肺部";
component['spine'] ="脊椎";


// 刪除屬性
delete component.deposit;
delete component['$$$'];
console.log(component);

// 這2個是一樣的方法
// 顯示結果
'聯絡俊仁'
'值錢的腎臟'
1
['$-是俊仁'] 沒有定義! 
'聯絡俊仁'
'聯絡俊仁'