1.物件介紹
物件作用：一個變數存盤多個資料
物件與陣列異同點
相同點：一個變數存盤多個資料
不同點：
陣列有序存盤：元素與下標 一 一對應
物件無序存盤：屬性名與屬性值 一 一 對應（鍵值對）
//需求 ： 存盤一個人的資訊（name 海海, age ：18 , sex ： ‘男’）
//1.使用三個變數存盤
//弊端 : (1)代碼冗余 （2）不好維護
let name = '海海';
let age = 18;
let sex = '男';
//2.使用陣列存盤 ： 一個變數存盤多個資料
//弊端 ： 代碼閱讀性不高
let arr = ['海海',18,'男'];
console.log(arr);
//3.使用物件 ： 一個變數存盤多個資料，閱讀性更高
let object = {name:'海海',age:18,sex:'男'};
//let object = {'name':'海海','age':18,'sex':'男'}; //這個也可以
console.log(object);
//點語法取值 ：
console.log(object.name);
/*
陣列和物件的異同點
相同點：都是復雜資料型別，一個變數存盤多個資料
不同點：存盤方式不一樣
陣列 ： 連續存盤，元素與下標一一對應
物件： 不連續存盤，屬性名和屬性值一一對應
*/
2.物件取值與賦值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.物件作用 ： 一個變數存盤多個資料
a:陣列和物件的異同點
相同點：都是復雜資料型別，一個變數存盤多個資料
不同點：存盤方式不一樣
陣列 ： 連續存盤，元素與下標一一對應
物件： 不連續存盤，屬性名和屬性值一一對應
2.物件語法
a.宣告： let 物件名 = {屬性名:屬性值}
b.取值： 物件名.屬性名
屬性存在，則獲取屬性值
屬性不存在，則獲取undefined
c.賦值： 物件名.屬性名 = 值
屬性存在，則修改屬性值
屬性不存在，則動態添加屬性
*/
//1.宣告語法 ： let 物件名 = { 屬性名:屬性值，屬性名:屬性值 };
let kid = {
name:'海海',
age:18,
sex:'男'
};
//2.取值語法 : 點語法 ： 物件名.屬性名
//2.1 屬性名存在 ，則是獲取屬性值
console.log(kid.sex);//男
//2.2 屬性名不存在,則獲取undefined
console.log(kid.bgf);//undefined
//3.賦值語法 : 物件名.屬性名 = 值
//3.1 屬性名存在， 則是修改屬性值
kid.name = '海海';
console.log(kid);
//3.2 屬性名不存在，
kid.hobby = '李白';
console.log(kid);
//4.物件取值還有一種方式：字串語法
console.log(kid['hobby']);
</script>
</body>
</html>3.物件屬性補充
-
物件的屬性名字也可以為數字（或數字字串），但是一般不建議這么使用（數字使用陣列更效果更好）
-
數字屬性的取值和賦值訪問需要使用字串語法
<script>
//1.數字宣告物件屬性
let obj = {0:1,2:2}; //不會自動從0開始，而且不需要連續
//2.數字屬性的訪問：字串語法訪問
console.log(obj[0]); //1
//console.log(obj.0); //語法錯誤
//3.動態添加數字屬性
obj[5] = 5;
console.log(obj); //{0:1,2:2,5:5}
</script> 4.復雜物件
<script>
/*
1.物件作用 ： 一個變數存盤多個資料
a:陣列和物件的異同點
相同點：都是復雜資料型別，一個變數存盤多個資料
不同點：存盤方式不一樣
陣列 ： 連續存盤，元素與下標一一對應
物件： 不連續存盤，屬性名和屬性值一一對應
2.物件語法
a.宣告： let 物件名 = {屬性名:屬性值}
b.取值： 物件名.屬性名
屬性存在，則獲取屬性值
屬性不存在，則獲取undefined
c.賦值： 物件名.屬性名 = 值
屬性存在，則修改屬性值
屬性不存在，則動態添加屬性
3.物件初始化
let 物件名 = { 屬性名:屬性值 }
*/
//
//
/*
1.宣告空物件 ： let 物件名= {};
2.物件的初始化 : 宣告的時候賦值
語法： let 物件名 = { 屬性名:屬性值 }
3. 函式有兩種稱呼
函式 ：
方法 ：有歸屬感， 如果物件的屬性值是函式，習慣上稱之為物件的方法
*/
</script>5.物件遍歷
-
挨個讀取物件中的每個屬性：屬性名和屬性值
-
特定語法
for(let 屬性名變數 in 物件變數){
//屬性名就是物件中的每一個屬性
//屬性值通過：物件[屬性名]訪問：屬性名是一個變數，不能使用.
} <script>
let person = {
name:'海海',
age: 18,
sex: '男'
};
/*
1.物件的遍歷 ： 獲取物件的每一個屬性值
2.復習陣列的遍歷語法
固定的for回圈： for(let i = 0;i<陣列.length;i++){ 陣列名[i] }
3.物件無法使用陣列的遍歷語法，物件的遍歷有專用的for回圈結構
for-in回圈 ： for(let key in 物件名){ 物件名[key] }
*** 注意點： 只能使用字串語法取屬性值 ***
*/
for(let key in person){
console.log(key);//屬性名字串
//獲取屬性值
// console.log(person.key);
// console.log(person['key']);
console.log(person[key]);
};
//遍歷物件一般是遍歷復雜物件：即物件內部套物件，每個內部物件都是一組資料，簡單一維物件都是直接訪問，不進行遍歷
</script>6.方法中的this關鍵字
this是物件內部的變數：代表呼叫者物件
<script>
/*
this : 誰呼叫我，我就指向誰
*/
let banzhang = {
name: '海海',
age: 18,
sex: '男',
sayHi:function(){
/* 弊端 ： 物件名變化，代碼也要修改 */
// console.log('你好呀，我的名字叫' + banzhang.name + '我的年齡是' + banzhang.age );
console.log('你好呀，我的名字叫' + this.name + '我的年齡是' + this.age );
}
};
banzhang.sayHi();
banzhang.name = '小陳';
banzhang.sayHi();
//普通函式的歸屬為window物件，所以普通函式內部的this代表window物件的呼叫者
function fn(){
console.log(this); //Window
}
fn();
</script>7.物件的另一種宣告方式
物件可以使用Object物件進行實體化得到
<script>
//1.（最常用）簡潔方式： let 物件名 = { 屬性名：屬性值 }
let p1 = {name:'海海'};
//2.建構式：
//建構式：如果呼叫一個函式使用了new關鍵字，這個函式成為建構式
let p2 = new Object( {name : '海海'} );
/*這兩種方式沒有任何區別，只是語法不同而已*/
console.log ( p1 );
console.log ( p2 );
</script>上一章：JavaScript入門第十四章（高階函式）
下一章：JavaScript入門第十六章（物件經典面試題）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292747.html
標籤：其他
上一篇：在新版的VSCode中，打斷點等除錯一個 js 檔案的程序
下一篇：jQuery常用API