JS 物件
- 1.?JS 物件
- JS 物件是什么？
- JS 物件資料型別
- JS 物件的訪問
- 2.?JS 物件的宣告方法
- 3.?JS 物件中的this
- 4.?一些常用的操作方法
- 4.1) Object.keys(obj), Object.getOwnPropertyNames(obj)
- 4.2) Object.values(obj)
- 4.3) Object.entries(obj), Object.fromEntries()
- 4.4) Object.assign()
- 4.5) 擴展運算子
- 4.6) 洗掉物件屬性
- 4.7) for...in遍歷物件
- 4.8) hasOwnProperty 檢測驗性
1.?JS 物件
JS 物件是什么？
JS 物件就是一系列屬性的集合，一個屬性包含一個名和一個值，一個屬性的值可以是函式，這種情況下屬性也被稱為方法，
JS 物件資料型別
在 JS 中，物件的型別是參考型別，
JS 物件的訪問
不同于C++等其它語言，JS 物件全是 public，
2.?JS 物件的宣告方法
這里介紹四種基礎的宣告方法：
//通過字面量形式宣告物件
let obj = {
name: 'milk',
getName: function() {
return this.name;
}
}
// 通過 new 運算子宣告物件
let obj = new Object();
obj.name = "milk";
// 通過函式宣告的方式宣告物件
function creatObj(nameVal) {
this.name = nameVal;
}
let obj = new createObj("milk");
/*
原型方式宣告物件:
原型方式是將該物件的屬性/方法寫在他的prototype屬性所指的物件上，
(每一個函式或者說物件都有一個prototype屬性，這個屬性以物件的形式存在)
*/
function drinking() {};
drinking.prototype.name = "milk";
drinking.prototype.pride = 8;
let obj = new drinking();
console.log(obj.name); // milk
3.?JS 物件中的this
在物件方法中， this 指向呼叫它所在方法的物件，
舉個例子：
let person = {
fname: '序員',
lname: '程',
fullname: function() {
return this.lname + this.fname;
}
}
let get_full_name = person.fullname();
console.log(person.fullname()); // 程式員
console.log(get_full_name); // 程式員
4.?一些常用的操作方法
4.1) Object.keys(obj), Object.getOwnPropertyNames(obj)
let drinking = {
name : "milk"
};
// 給一個不可列舉屬性 pride
Object.defineProperty(drinking, "pride", {
value : 8,
enumerable : false
});
// 獲取可列舉的屬性鍵
console.log(Object.keys(drinking)); // ['name']
// 獲取所有的屬性鍵
console.log(Object.getOwnPropertyNames(drinking)); // ['name', 'pride']
4.2) Object.values(obj)
// 獲取可列舉物件的屬性值
let drinking = {
name : "milk",
pride : 8
}
console.log(Object.values(drinking)); // ['milk', 8]
4.3) Object.entries(obj), Object.fromEntries()
let drinking1 = {
name : "milk",
pride : 8
}
// 獲取可列舉物件的鍵值對，回傳它們組成的陣列
console.log(Object.entries(drinking1)); //[['name', 'milk'], ['pride', 8]]
// Object.fromEntries() 把鍵值對串列轉換為物件
let arr = [['name', 'milk'], ['pride', 8]];
let drinking2 = Object.fromEntries(arr);
console.log(drinking2); // {name: 'milk', pride: 8}
4.4) Object.assign()
// 將一個或多個物件的屬性復制給目標物件，是淺拷貝
let drinking1 = {
name1 : "milk",
pride1 : 8
};
let drinking2 = {
name2 : "tea",
pride2 : 12
};
let drinking = Object.assign(drinking1, drinking2);
console.log(drinking); // {name1: 'milk', pride1: 8, name2: 'tea', pride2: 12}
4.5) 擴展運算子
// ... 可以用來創建物件，是一個淺拷貝
let drinking1 = {
name1 : "milk",
pride1 : 8
};
let drinking2 = {
name2 : "tea",
pride2 : 12
};
let drinking = {...drinking1, ...drinking2};
console.log(drinking); // {name1: 'milk', pride1: 8, name2: 'tea', pride2: 12}
4.6) 洗掉物件屬性
let drinking = {
name : "milk",
pride : 8
};
delete drinking.pride;
console.log(drinking); // {name: 'milk'}
4.7) for…in遍歷物件
// 遍歷物件可列舉屬性
let drinking = {
name : "milk",
pride : 8
};
for (i in drinking) {
console.log(i);
}
4.8) hasOwnProperty 檢測驗性
// 檢測物件自身是否包含指定的屬性
// 不檢測原型鏈上繼承的屬性，即可以用來避免for...in遍歷繼承來的屬性
let drinking = {
name : "milk",
pride : 8
};
console.log(drinking.hasOwnProperty('name')); // true
console.log(drinking.hasOwnProperty('weight')); // false
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/309530.html
標籤：其他
下一篇：Vue后端程式員極速入門