JS 對象 創建對象 對象的屬性 對象的遍歷

對象

　　JavaScript 中的對象（Object）是一組數據的無序集合。其中，每一條數據都是由鍵:值組成（例 如：name:'HanMeiMei' ）。

　　其中，值可以是任意數據類型，而鍵只能是字符串類型。

注：其實，在 JavaScript 中，除了六種基本數據類型之外，就還只有一種引用數據類型 —— 對象。

 

定義對象、創建對象

　　定義對象的方式有兩種：

 

　　　　字面量方式：

let obj1 = {};

　　　　

　　　　 構造函數方式：

let obj2 = new Object();

 

 

對象的屬性

 

　　當對象中某一條數據的鍵所對應的值是非函數類型，則我們將這條數據叫做對象的屬性。

 

let student = {
 name: 'HanMeiMei',
 age: 20
}
/*name 和 age 兩個鍵對應的值都不是函數，因此這兩條數據我們就叫做 student 對象的屬
*性。
*/

 

　　　　屬性操作

 

　　通過點運算符 . 來操作一個對象的屬性。

let person = {
     name: "lisa",
     job: "SoftWare Engineer"
};
person.name = "zhangsan"; // 修改已有的屬性
person.age = 30; // 添加沒有的屬性
console.log( person.job ); // 查看已有的屬性

 

　　通過方括號 [] 操作一個對象的屬性。

let person = {
     name: "lisa",
     job: "SoftWare Engineer"
};
person["name"] = "zhangsan"; // 修改已有的屬性
person["age"] = 30; // 添加沒有的屬性
console.log( person["job"] ); // 查看已有的屬性

 

　　通過 delete 關鍵字來刪除一個對象的屬性。

let person = {
     name: "lisa",
     job: "SoftWare Engineer"
};
delete person.job; // 刪除 person 對象的屬性 job，只能一個一個的刪除

 

 

對象的方法

 

　　當對象中某一條數據的鍵所對應的值是函數類型，則我們將這條數據叫做對象的方法。

let person = {
 name: 'HanMeiMei',
 introduce: function(){
 console.log( 'my name is HanMeiMei' );
     }
}
//introduce 對應的值是函數，這條數據我們就叫做 person 對象的方法。

 

　　方法操作

　　對象方法的操作類似於對象屬性的操作，同樣具有以下三種方式：

 

　　　　通過點運算符 . 來訪問一個對象的方法。

let person = {
     name: 'HanMeiMei',
     introduce: function(){
         console.log( 'my name is HanMeiMei' );
     }
}
person.introduce(); // 調用 person 對象的 introduce 方法        

 

　　　　通過方括號 [] 來訪問一個對象的方法。

let person = {
     name: 'HanMeiMei',
     introduce: function(){
         console.log( 'my name is HanMeiMei' );
     }
}
person["introduce"](); // 調用 person 對象的 introduce 方法

 

　　　　通過 delete 關鍵字來刪除一個對象的方法。

let person = {
     name: 'HanMeiMei',
     introduce: function(){
        console.log( 'my name is HanMeiMei' );
     }
}
delete person.introduce; // 方法名后面沒有方括號    

 

 

 

注：刪除屬性，輸出該屬性為undefined,刪除方法，調用方法時會報錯。

 

對象的遍歷

 

　　for-in

let person = {
    name: 'HanMeiMei',
    age: 20,
    gender: 'male',
    introduce: function () {
        console.log('my name is HanMeiMei');
    }
}
let name = Symbol('name');
person[name] = `看不到`;
console.log(person);
for (let key in person) {
    console.log(key); 
}

 

 

 

注：for-in 無法遍歷通過 symbol 值定義的屬性。

　　

　　for-of

//獲取對象的鍵名
for(let item of Object.keys(person)){
    console.log(item);
}

 

 

//獲取對象的值
for(let item of Object.values(person)){
    console.log(item);
}

 

 

//獲取對象的鍵值對
for(let item of Object.entries(person)){
    console.log(item);
}

 

 

注：同樣都看不到symbol 值定義的屬性。

 

console.log(Reflect.ownKeys(person));//輸出person對象所有的鍵
console.log(Reflect.ownValues(person));//想要 輸出person對象所有的值  此句報錯

 

 

 注：這個方法可以看到symbol值定義的屬性（鍵），但是沒有對應的取值方法。

 

　　

對象方法中的 this

 

　　對象的方法中可以使用 this 關鍵字。

let foo = {
     bar: function(){
         console.log(this);
     }
}
foo.bar(); // { bar: [Function: bar] }

　　對象方法中的 this 永遠指向調用該方法時 . 或 [] 前的那個對象。如上例中 bar 方法的 this 就一定指向 foo 對象。

 

對象的擴展

 

　　對象的解構

var { name: name, age: age } = { name: "zhangsan", age: 20 };
console.log( name ); // zhangsan
console.log( age ); // 20

　　var { name: name, age: age } 中，“:”后面的 name(age) 是 var 將要聲明的變量，“:”前面的 name(age) 指定了該變量在賦值符號右邊的對象中取哪一個屬性的值，

　　在 ES6 中，如果屬性名跟屬性值的變量名相同時，可以簡寫。即：

let a = 1;
let b = 2;
let obj = { a: a, b: b }
// 簡寫
let obj = { a, b }

　　所以：

let { name, age } = { name: "zhangsan", age: 20 };
console.log( name ); // zhangsan
console.log( age ); // 20

　　

　　對象解構的默認值

　　對象的解構賦值允許指定默認值。

// 沒有默認值
let { name1 } = {};
console.log( name1 ); // undefined
// 有默認值
let { name2 = "張三" } = {};
console.log( name2 ); // 張三
let { name3 = "張三", age } = { name3: "李四", age: 30 };
console.log( name3, age ); // 李四 30

 

 

總結

　　不管是數組、Set、Map，還是對象，它們都表現出了一個共同的特征，可以按某種特定的結構存放大量的數據。

　　這些數據存放在一起作為一個整體我們可以稱它們是一個集合；而集合中數據間存在關系，這就說明數據是有結構的，那么這個集合也可以叫做數據結構。

　　所謂數據結構，就是計算機存儲和組織數據的方式。說得通俗一點，主要就是指將數據以什么樣的結構 存儲到計算機里面。

 

　　所以數組、Set、Map，對象，它們就都是一種數據結構。數組、Set、Map還能歸屬於對象。

　　在程序方面，最為常用的數據結構，就是數組，這種結構將多個數據有序的排列在一起，形成了一個集合。