&

js各種對象定義與對象取值方法

freeflydom

2025年6月2日 9:10 本文熱度 311

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

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

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

方法和屬性的區別是：方法是函數，屬性是值。

舉個例子：

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

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

對象定義

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

對象字面量

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

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

構造函數

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

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] = '使用函數作為鍵名稱';
obj2.greet = function () {
  console.log('Hello!');
}
obj2.say = function () {
  console.log('Hi!');
}

Object.create()

使用對象的靜態方法 Object.create() 來創建對象。

靜態方法和對象原型鏈方法的區別是：靜態方法屬于對象本身，對象原型鏈上的方法屬于對象實例。

看例子：

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

Object.create 多用于繼承一個對象，擴展原有對象的功能：

const obj4 = {
  name: '前端路引',
}
const obj5 = Object.create(obj4);
obj5.age = 1;
obj5['favorite-color'] = 'blue';

自定義構造函數

除了使用 JS 提供的內置構造函數，還可以自定義構造函數來創建一個對象。比如：

function WeChat () {
  this.name = '前端路引';
  this.age = 1;
  this['favorite-color'] = 'blue';
}
const obj6 = new WeChat();

function 關鍵字可不止用于函數定義，還能用來自定義構造函數，這是在 ES6 出現之前自定義類最常用的方式。

Class

為了消除語法歧義，ES6 引入了 Class 定義類，再通過 new 關鍵字創建實例對象，這種方式完全像是 function 的語法糖。

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

對象取值

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

點語法

常規屬性可以使用 . 取值，比如：

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

方括號取值

. 語法有個問題，比如上面對象中 favorite-color 屬性，如果直接使用 obj1.favorite-color，會報錯，因為 - 會被當做減號處理，導致報錯 ReferenceError: color is not defined。

這時候可以把對象當做數組來處理，使用方括號 [] 取值，比如：

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

使用方括號取值時，如果屬性名是動態的，可以使用變量來取值，比如：

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

解構賦值

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

const obj1 = {
  name: '前端路引', 
  age: 1,
}
const { name, age, up = '微信公眾號' } = obj1;
console.log(name, age);
// 解構賦值，可以添加默認值，如果找不到屬性，則使用默認值
console.log(up);

Object 靜態方法

Object 自身還提供了一些靜態方法，用于獲取數組的鍵值。

const obj1 = {
  name: '前端路引', 
  age: 1,
}
const keys = Object.keys(obj1);    // 返回所有可枚舉屬性名數組
const values = Object.values(obj1);// 返回所有值數組
const entries = Object.entries(obj1); // 返回鍵值對數組
console.log(keys); // ['name', 'age']
console.log(values); // ['前端路引', 1]
console.log(entries); // 二維數組  [['name', '前端路引'], ['age', 1]]

Getter / Setter 方法

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

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 引入了可選鏈，用于解決對象取值時，如果屬性不存在，會報錯的問題，比如：

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