曾經(jīng)有人說 JS 語言中萬物皆對象，雖然這種說法不一定完全準(zhǔn)確，但也有一定的道理。原因是 JS 的語法看起來所有的數(shù)據(jù)類型都像是一個(gè)對象，包括原始類型。

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 的方法。

一般定義在對象上的 函數(shù) 都稱之為 對象方法，使用語法： xxx.yyy()。對象除了方法還有 對象屬性，使用語法： xxx.yyy。

方法和屬性的區(qū)別是：方法是函數(shù)，屬性是值。

舉個(gè)例子：

const obj = {
  name: '前端路引', // 對象屬性
  age: 1, // 對象屬性
  sayHi() { // 對象方法
    console.log(`我是${this.name}，我今年${this.age}歲`);
  }
}

以上是一個(gè) JS 的對象字面量定義方式，除了最常用的對象字面量，還可以像 Array 一樣，使用構(gòu)造函數(shù)來定義對象，也可以使用 Class 自定義對象。

對象定義

JS 的對象定義可比 數(shù)組 的花樣多多了，下面來一一展示。

對象字面量

JS 的對象值與數(shù)組一樣，無任何限制，可以是任意值，包括函數(shù)、數(shù)組、對象、undefined、null、NaN 等。

const dynamicKey = 'dynamicKey';
const fnKey = () => {};
const obj1 = {
  name: '前端路引', 
  age: 1,
  'favorite-color': 'blue', // 含特殊字符的鍵需用引號包裹
  [Symbol('id')]: 123, // Symbol 作為鍵
  [dynamicKey]: 'value', // 使用動態(tài)變量作為屬性名
  [fnKey]: '使用函數(shù)作為鍵名稱',
  greet() { // 方法簡寫（ES6+）
    console.log('Hello!');
  },
  say: function () { // 函數(shù)
    console.log('Hi!');
  }
};

構(gòu)造函數(shù)

雖然此方法使用較少，但這種方式也可以用來定義一個(gè)對象。以下代碼與上面的對象字面量定義的對象一樣：

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()

使用對象的靜態(tài)方法 Object.create() 來創(chuàng)建對象。

靜態(tài)方法和對象原型鏈方法的區(qū)別是：靜態(tài)方法屬于對象本身，對象原型鏈上的方法屬于對象實(shí)例。

看例子：

const obj3 = Object.create({ // 使用靜態(tài)方法創(chuàng)建對象
  name: '前端路引',
})
obj3.toString() // 調(diào)用原型鏈方法，也稱為實(shí)例方法

Object.create 多用于繼承一個(gè)對象，擴(kuò)展原有對象的功能：

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è)對象。比如：

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í)例對象，這種方式完全像是 function 的語法糖。

class WeChat {
  constructor() {
    this.name = '前端路引';
    this.age = 1;
    this['favorite-color'] = 'blue';
  }
  say() {
    console.log('Hi!');
  }
}
const obj7 = new WeChat();

對象取值

對象的取值方法也多得眼花繚亂，下面一一展示。

點(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)用方法

方括號取值

. 語法有個(gè)問題，比如上面對象中 favorite-color 屬性，如果直接使用 obj1.favorite-color，會報(bào)錯(cuò)，因?yàn)?nbsp;- 會被當(dāng)做減號處理，導(dǎo)致報(bào)錯(cuò) ReferenceError: color is not defined。

這時(shí)候可以把對象當(dāng)做數(shù)組來處理，使用方括號 [] 取值，比如：

const obj1 = {
  name: '前端路引', 
  age: 1,
  'favorite-color': 'blue',
  say() {
    console.log('Hi!');
  }
}
console.log(obj1['favorite-color']); // 獲取屬性值
console.log(obj1['say']()); // 調(diào)用方法

使用方括號取值時(shí)，如果屬性名是動態(tài)的，可以使用變量來取值，比如：

const dynamicKey = 'dynamicKey';
const obj1 = {
  [dynamicKey]: '前端路引',
}
console.log(obj1[dynamicKey]);

解構(gòu)賦值

作為 ES6 引入的新特性，此寫法如果不了解，那么代碼可能都看不懂。

const obj1 = {
  name: '前端路引', 
  age: 1,
}
const { name, age, up = '微信公眾號' } = 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); // 返回鍵值對數(shù)組
console.log(keys); // ['name', 'age']
console.log(values); // ['前端路引', 1]
console.log(entries); // 二維數(shù)組  [['name', '前端路引'], ['age', 1]]

Getter / Setter 方法

使用 get 方法，可以設(shè)置對象的計(jì)算屬性，用于攔截對象的取值，比如：

const obj1 = {
  firstName: '微信公眾號：',
  lastName: '前端路引',
  get name() {
    return `${this.firstName}：${this.lastName}`; // 微信公眾號：：前端路引
  },
  set name(value) {
    [this.firstName, this.lastName] = value.split('：');
  }
}
console.log(obj1.name); // 微信公眾號：前端路引
obj1.name = '前端路引：微信公眾號';
console.log(obj1.name); // 前端路引：微信公眾號

原型鏈訪問

如果取的屬性對象本身不存在，則會順著原型鏈查找，直到找到為止，比如：

const obj1 = {
  name: '前端路引', 
  age: 1,
}
console.log(obj1.toString()); // toString 方法不在對象本身，是 Object 原型鏈上的方法，也可以使用取值語法訪問

可選鏈

ES2020 引入了可選鏈，用于解決對象取值時(shí)，如果屬性不存在，會報(bào)錯(cuò)的問題，比如：

const obj1 = {
  name: '前端路引', 
  age: 1,
}
// 如果直接取值，將會報(bào)錯(cuò) TypeError: Cannot read properties of undefined (reading 'city')
console.log(obj1.address.city);
// 使用可選鏈，如果屬性不存在，則返回 undefined，不會報(bào)錯(cuò)
console.log(obj1?.address?.city);

寫在最后

以上已包含絕大多數(shù)應(yīng)用場景，但是也會有一些不太常用的寫法未包含，比如 Reflect.get(obj, 'a')。作為入門條件，掌握以上內(nèi)容已經(jīng)完全夠用。

轉(zhuǎn)自https://www.cnblogs.com/linx/p/18903865