javascript
Web前端入门第 61 问：JavaScript 各种对象定义与对象取值方法
曾經(jīng)有人說 JS 語言中萬物皆對(duì)象，雖然這種說法不一定完全準(zhǔn)確，但也有一定的道理。原因是 JS 的語法看起來所有的數(shù)據(jù)類型都像是一個(gè)對(duì)象，包括原始類型。
const a = 1.234;
console.log(a.toString());
console.log(a.valueOf());
console.log(a.toFixed(2));
console.log(Number.prototype); // 查看所有 Number 類型的原型鏈方法屬性
const b = '前端路引';
console.log(b.length);
console.log(b.substring(2));
console.log(b.padEnd(10, '*')); // 后填充 * 字符
console.log(String.prototype); // 查看所有 String 類型的原型鏈方法屬性
const c = true;
console.log(c.toString());
console.log(Boolean.prototype); // 查看所有 Boolean 類型的原型鏈方法屬性
以上展示了 Number、String、Boolean 三種原始類型的方法。a.xxx() 這種寫法就表示 xxx 是 a 的方法。
一般定義在對(duì)象上的 函數(shù) 都稱之為 對(duì)象方法，使用語法： xxx.yyy()。對(duì)象除了方法還有 對(duì)象屬性，使用語法： xxx.yyy。
方法和屬性的區(qū)別是：方法是函數(shù)，屬性是值。
舉個(gè)例子：
const obj = {
name: '前端路引', // 對(duì)象屬性
age: 1, // 對(duì)象屬性
sayHi() { // 對(duì)象方法
console.log(`我是${this.name}，我今年${this.age}歲`);
}
}
以上是一個(gè) JS 的對(duì)象字面量定義方式，除了最常用的對(duì)象字面量，還可以像 Array 一樣，使用構(gòu)造函數(shù)來定義對(duì)象，也可以使用 Class 自定義對(duì)象。
對(duì)象定義
JS 的對(duì)象定義可比 數(shù)組 的花樣多多了，下面來一一展示。
對(duì)象字面量
JS 的對(duì)象值與數(shù)組一樣，無任何限制，可以是任意值，包括函數(shù)、數(shù)組、對(duì)象、undefined、null、NaN 等。
const dynamicKey = 'dynamicKey';
const fnKey = () => {};
const obj1 = {
name: '前端路引',
age: 1,
'favorite-color': 'blue', // 含特殊字符的鍵需用引號(hào)包裹
[Symbol('id')]: 123, // Symbol 作為鍵
[dynamicKey]: 'value', // 使用動(dòng)態(tài)變量作為屬性名
[fnKey]: '使用函數(shù)作為鍵名稱',
greet() { // 方法簡(jiǎn)寫（ES6+）
console.log('Hello!');
},
say: function () { // 函數(shù)
console.log('Hi!');
}
};
構(gòu)造函數(shù)
雖然此方法使用較少，但這種方式也可以用來定義一個(gè)對(duì)象。以下代碼與上面的對(duì)象字面量定義的對(duì)象一樣：
const dynamicKey = 'dynamicKey';
const fnKey = () => {};
const obj2 = new Object();
obj2.name = '前端路引';
obj2.age = 1;
obj2['favorite-color'] = 'blue';
obj2[Symbol('id')] = 123;
obj2[dynamicKey] = 'value';
obj2[fnKey] = '使用函數(shù)作為鍵名稱';
obj2.greet = function () {
console.log('Hello!');
}
obj2.say = function () {
console.log('Hi!');
}
Object.create()
使用對(duì)象的靜態(tài)方法 Object.create() 來創(chuàng)建對(duì)象。
靜態(tài)方法和對(duì)象原型鏈方法的區(qū)別是：靜態(tài)方法屬于對(duì)象本身，對(duì)象原型鏈上的方法屬于對(duì)象實(shí)例。
看例子：
const obj3 = Object.create({ // 使用靜態(tài)方法創(chuàng)建對(duì)象
name: '前端路引',
})
obj3.toString() // 調(diào)用原型鏈方法，也稱為實(shí)例方法
Object.create 多用于繼承一個(gè)對(duì)象，擴(kuò)展原有對(duì)象的功能：
const obj4 = {
name: '前端路引',
}
const obj5 = Object.create(obj4);
obj5.age = 1;
obj5['favorite-color'] = 'blue';
自定義構(gòu)造函數(shù)
除了使用 JS 提供的內(nèi)置構(gòu)造函數(shù)，還可以自定義構(gòu)造函數(shù)來創(chuàng)建一個(gè)對(duì)象。比如：
function WeChat () {
this.name = '前端路引';
this.age = 1;
this['favorite-color'] = 'blue';
}
const obj6 = new WeChat();
function 關(guān)鍵字可不止用于函數(shù)定義，還能用來自定義構(gòu)造函數(shù)，這是在 ES6 出現(xiàn)之前自定義類最常用的方式。
Class
為了消除語法歧義，ES6 引入了 Class 定義類，再通過 new 關(guān)鍵字創(chuàng)建實(shí)例對(duì)象，這種方式完全像是 function 的語法糖。
class WeChat {
constructor() {
this.name = '前端路引';
this.age = 1;
this['favorite-color'] = 'blue';
}
say() {
console.log('Hi!');
}
}
const obj7 = new WeChat();
對(duì)象取值
對(duì)象的取值方法也多得眼花繚亂，下面一一展示。
點(diǎn)語法
常規(guī)屬性可以使用 . 取值，比如：
const obj1 = {
name: '前端路引',
age: 1,
'favorite-color': 'blue',
say() {
console.log('Hi!');
}
}
console.log(obj1.name); // 獲取屬性值
console.log(obj1.say()); // 調(diào)用方法
方括號(hào)取值
. 語法有個(gè)問題，比如上面對(duì)象中 favorite-color 屬性，如果直接使用 obj1.favorite-color，會(huì)報(bào)錯(cuò)，因?yàn)?- 會(huì)被當(dāng)做減號(hào)處理，導(dǎo)致報(bào)錯(cuò) ReferenceError: color is not defined。
這時(shí)候可以把對(duì)象當(dāng)做數(shù)組來處理，使用方括號(hào) [] 取值，比如：
const obj1 = {
name: '前端路引',
age: 1,
'favorite-color': 'blue',
say() {
console.log('Hi!');
}
}
console.log(obj1['favorite-color']); // 獲取屬性值
console.log(obj1['say']()); // 調(diào)用方法
使用方括號(hào)取值時(shí)，如果屬性名是動(dòng)態(tài)的，可以使用變量來取值，比如：
const dynamicKey = 'dynamicKey';
const obj1 = {
[dynamicKey]: '前端路引',
}
console.log(obj1[dynamicKey]);
解構(gòu)賦值
作為 ES6 引入的新特性，此寫法如果不了解，那么代碼可能都看不懂。
const obj1 = {
name: '前端路引',
age: 1,
}
const { name, age, up = '微信公眾號(hào)' } = obj1;
console.log(name, age);
// 解構(gòu)賦值，可以添加默認(rèn)值，如果找不到屬性，則使用默認(rèn)值
console.log(up);
Object 靜態(tài)方法
Object 自身還提供了一些靜態(tài)方法，用于獲取數(shù)組的鍵值。
const obj1 = {
name: '前端路引',
age: 1,
}
const keys = Object.keys(obj1); // 返回所有可枚舉屬性名數(shù)組
const values = Object.values(obj1);// 返回所有值數(shù)組
const entries = Object.entries(obj1); // 返回鍵值對(duì)數(shù)組
console.log(keys); // ['name', 'age']
console.log(values); // ['前端路引', 1]
console.log(entries); // 二維數(shù)組 [['name', '前端路引'], ['age', 1]]
Getter / Setter 方法
使用 get 方法，可以設(shè)置對(duì)象的計(jì)算屬性，用于攔截對(duì)象的取值，比如：
const obj1 = {
firstName: '微信公眾號(hào)：',
lastName: '前端路引',
get name() {
return `${this.firstName}：${this.lastName}`; // 微信公眾號(hào)：：前端路引
},
set name(value) {
[this.firstName, this.lastName] = value.split('：');
}
}
console.log(obj1.name); // 微信公眾號(hào)：前端路引
obj1.name = '前端路引：微信公眾號(hào)';
console.log(obj1.name); // 前端路引：微信公眾號(hào)
原型鏈訪問
如果取的屬性對(duì)象本身不存在，則會(huì)順著原型鏈查找，直到找到為止，比如：
const obj1 = {
name: '前端路引',
age: 1,
}
console.log(obj1.toString()); // toString 方法不在對(duì)象本身，是 Object 原型鏈上的方法，也可以使用取值語法訪問
可選鏈
ES2020 引入了可選鏈，用于解決對(duì)象取值時(shí)，如果屬性不存在，會(huì)報(bào)錯(cuò)的問題，比如：
const obj1 = {
name: '前端路引',
age: 1,
}
// 如果直接取值，將會(huì)報(bào)錯(cuò) TypeError: Cannot read properties of undefined (reading 'city')
console.log(obj1.address.city);
// 使用可選鏈，如果屬性不存在，則返回 undefined，不會(huì)報(bào)錯(cuò)
console.log(obj1?.address?.city);
寫在最后
以上已包含絕大多數(shù)應(yīng)用場(chǎng)景，但是也會(huì)有一些不太常用的寫法未包含，比如 Reflect.get(obj, 'a')。作為入門條件，掌握以上內(nèi)容已經(jīng)完全夠用。
總結(jié)
以上是生活随笔為你收集整理的Web前端入门第 61 问：JavaScript 各种对象定义与对象取值方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： InheritableThreadLoc
- 下一篇： Web前端入门第 66 问：JavaSc