前言

在 JavaScript 中，物件是一種非常常見的資料型別，幾乎每個程式員都會在日常作業中頻繁地使用物件，在本篇文章中，我們將深入了解 JavaScript 物件的一些基本概念和一些高級概念，這些概念對于我們正確理解物件在 JavaScript 中的行為非常重要，

物件的基本概念

在 JavaScript 中，物件是由鍵值對組成的集合，鍵是一個字串或者 Symbol 型別的值，值可以是任何型別的資料，包括其他物件，物件是一種動態資料結構，可以通過添加、洗掉或修改屬性來改變物件的狀態，以下是 JavaScript 中定義物件的一些基本語法：

const myObj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
};

在這個物件中，每一個鍵都有一個相應的值，可以使用點運算子或方括號運算子來訪問物件的屬性：

console.log(myObj.key1); // 輸出 'value1'
console.log(myObj['key2']); // 輸出 'value2'

可以通過以下方式向物件添加新的屬性：

myObj.newKey = 'newValue';
console.log(myObj.newKey); // 輸出 'newValue'

物件也可以作為函式的引數和回傳值：

function createObj() {
  return { key1: 'value1', key2: 'value2', key3: 'value3' };
}

const obj = createObj();
console.log(obj.key1); // 輸出 'value1'

物件的高級概念-原型

在 JavaScript 中，物件之間可以有一種原型關系，即一個物件可以繼承另一個物件的屬性和方法，每一個物件都有一個原型物件，它是另一個物件的參考，可以通過 Object.getPrototypeOf(obj) 來訪問，

在 JavaScript 中，有兩種方式來創建一個新物件：

使用物件字面量 {} 或者 new Object() 來創建一個空物件，
使用建構式來創建一個物件，

建構式可以使用 new 關鍵字來呼叫，它會創建一個新的物件并把這個物件的原型設定為建構式的 prototype 屬性，
在后一種方式中，可以通過建構式的 prototype 屬性來為新物件添加方法和屬性，新創建的物件會繼承建構式的原型，因此可以訪問這些方法和屬性，以下是一個簡單的例子：

function MyObj() {
  this.name = 'My Object';
}

MyObj.prototype.getName = function () {
  return this.name;
};

const obj = new MyObj();
console.log(obj.getName()); // 輸出 'My Object'

this

在 JavaScript 中，this 關鍵字指的是當前正在執行的函式的背景關系物件，在物件中，this 指向該物件本身，例如：

const myObj = {
  name: 'My Object',
  getName: function () {
    return this.name;
  },
};

console.log(myObj.getName()); // 輸出 'My Object'

JS物件的創建和訪問

在JS中，物件是一種復合值，包含了無數個屬性（key-value pairs），它可以是字串、數字、布林值、陣列或者其他物件等等，物件是JS中最重要的資料結構之一，

物件的創建

物件字面量

最常見的創建物件的方法是使用物件字面量，物件字面量是一個由若干鍵值對組成的物件，這種方式創建的物件可以直接使用{}來表示，也可以使用一個變數來存盤這個物件，

const person = { name: 'Alice', age: 18, gender: 'female' };

物件字面量創建的物件可以直接在定義時添加屬性，也可以后期添加，

const person = {};
person.name = 'Alice';
person.age = 18;
person.gender = 'female';

Object建構式

除了物件字面量之外，還可以使用Object建構式來創建物件，可以使用new關鍵字和Object建構式創建一個空物件，或者將一個現有物件作為引數傳遞給Object建構式來創建一個與該物件相同的新物件，

const emptyObj = new Object();
const person = new Object({ name: 'Alice', age: 18, gender: 'female' });

工廠函式

工廠函式是一個回傳物件的函式，它們通過抽象化物件的創建和初始化來降低重復代碼的量，當需要創建多個類似的物件時，可以使用工廠函式來代替每個物件都寫一遍相同的代碼，

function createPerson(name, age, gender) {
  return { name, age, gender };
}

const person1 = createPerson('Alice', 18, 'female');
const person2 = createPerson('Bob', 20, 'male');

建構式

建構式是一種特殊的函式，用于創建并初始化一個由該型別定義的物件，當我們使用new關鍵字創建物件時，實際上是在呼叫建構式，

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

const person1 = new Person('Alice', 18, 'female');
const person2 = new Person('Bob', 20, 'male');

class

ES6引入了class語法，讓JS的面向物件編程更加直觀和易于理解，使用class創建物件的語法如下：

class Person {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
}

const person1 = new Person('Alice', 18, 'female');
const person2 = new Person('Bob', 20, 'male');

訪問物件的屬性

訪問 JS 物件的屬性和方法通常有兩種方式：點語法和方括號語法，
使用點語法，可以通過物件名稱后面跟隨一個句點，然后是屬性名，來訪問物件的屬性和方法，例如：

const obj = {
  name: 'Alice',
  age: 25,
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

console.log(obj.name); // 輸出 'Alice'
console.log(obj.age); // 輸出 25
obj.sayHello(); // 輸出 'Hello, my name is Alice and I am 25 years old.'

使用方括號語法，可以通過物件名稱后面跟隨一個方括號，里面是屬性名或者變數名，來訪問物件的屬性和方法，例如：

const obj = {
  name: 'Alice',
  age: 25,
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

console.log(obj['name']); // 輸出 'Alice'
console.log(obj['age']); // 輸出 25
obj['sayHello'](); // 輸出 'Hello, my name is Alice and I am 25 years old.'

使用方括號語法時，可以在方括號中使用運算式，例如：

const obj = {
  name: 'Alice',
  age: 25,
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

const propName = 'name';
console.log(obj[propName]); // 輸出 'Alice'

const method = 'sayHello';
obj[method](); // 輸出 'Hello, my name is Alice and I am 25 years old.'

需要注意的是，在方括號語法中，屬性名或者變數名必須用引號括起來，否則會被解釋為變數名，另外，在使用方括號語法訪問物件的屬性和方法時，可以使用變數名，這個變數名可以在運行時決定，

總的來說，訪問 JS 物件的屬性和方法是非常簡單的，但是需要注意使用點語法和方括號語法的區別，以及在使用方括號語法時需要注意屬性名或者變數名的引號問題，

物件的遍歷

遍歷物件是很常見的操作，物件的遍歷可以使用 for-in 回圈，也可以使用 Object.keys() 方法遍歷物件的鍵名，

const obj = { name: 'Tom', age: 18, gender: 'male' };

// 使用 for-in 回圈遍歷物件
for (let key in obj) {
  console.log(key, obj[key]);
}

// 使用 Object.keys() 方法遍歷物件的鍵名
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});

物件常用的三個方法

Object.keys(), Object.values(), 和 Object.entries() 都是用于操作物件的方法，

Object.keys(obj)：回傳一個由給定物件的所有可列舉自身屬性的屬性名組成的陣列，
Object.values(obj)：回傳一個給定物件的所有可列舉自身屬性的屬性值組成的陣列，
Object.entries(obj)：回傳一個給定物件自身可列舉屬性的鍵值對陣列，

下面我們舉個例子來說明這三個方法的使用:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  email: '[email protected]'
};

// Object.keys()
const keys = Object.keys(person);
console.log(keys); // ['firstName', 'lastName', 'age', 'email']

// Object.values()
const values = Object.values(person);
console.log(values); // ['John', 'Doe', 30, '[email protected]']

// Object.entries()
const entries = Object.entries(person);
console.log(entries); // [['firstName', 'John'], ['lastName', 'Doe'], ['age', 30], ['email', '[email protected]']]

通過這三個方法，我們可以方便地操作物件，快速獲取物件的屬性、屬性值以及屬性和屬性值的鍵值對，
小技巧可以通過Object.entries()方便的將物件轉為Map型別，

物件的拷貝

在 JavaScript 中，物件的賦值是淺拷貝，即只會拷貝物件的參考，如果需要實作物件的深拷貝，則需要使用一些特殊的方法，

淺拷貝

淺拷貝只是將物件的參考拷貝給了另一個物件，因此在修改原物件時，拷貝物件也會發生變化，

const obj1 = { name: 'Tom', age: 18 };
const obj2 = obj1;

obj1.age = 20;

console.log(obj1); // { name: 'Tom', age: 20 }
console.log(obj2); // { name: 'Tom', age: 20 }

Object.assign()

該方法可以將多個物件合并為一個物件，實作淺拷貝，

const obj1 = { name: 'Tom', age: 18 };
const obj2 = { gender: 'male' };
const obj3 = Object.assign({}, obj1, obj2);

console.log(obj3); // { name: 'Tom', age: 18, gender: 'male' }

深拷貝

使用深拷貝創建的物件，對其進行操作不會影響原有物件，實作物件的深拷貝需要使用一些特殊的方法，常見的深拷貝方法有 JSON.parse(JSON.stringify()) 和遞回拷貝兩種方法，

JSON.parse(JSON.stringify())

JSON.parse(JSON.stringify()) 方法可以實作深拷貝，但是只能處理物件中的原始型別，不能處理函式、正則運算式等型別，

const obj1 = { name: 'Tom', age: 18, hobbies: ['reading', 'music'] };
const obj2 = JSON.parse(JSON.stringify(obj1));

obj1.hobbies.push('travel');

console.log(obj1); // { name: 'Tom', age: 18, hobbies: [ 'reading', 'music', 'travel' ] }
console.log(obj2); // { name: 'Tom', age: 18, hobbies: [ 'reading', 'music' ] }

遞回拷貝

遞回拷貝可以處理任何型別的資料，包括函式、正則運算式等，在拷貝物件時，需要遞回遍歷物件的屬性，并將屬性值進行拷貝，

function deepClone(obj) {
  // 判斷是否為物件或陣列
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  // 判斷是陣列還是物件
  const newObj = Array.isArray(obj) ? [] : {};

  // 遍歷物件或陣列
  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      newObj[key] = deepCopy(obj[key]);
    }
  }

還可用第三方庫Lodash實作深淺拷貝，

總結

在 JavaScript 中，物件是由鍵值對組成的集合，每個鍵值對就是物件的一個屬性，屬性名是鍵，屬性值可以是任何資料型別，包括基本型別、物件型別和函式型別等，物件可以通過字面量、建構式以及 Object.create() 方法創建，也可以通過 Object.defineProperty() 方法定義屬性的 getter 和 setter，

JavaScript 的物件具有動態性，可以隨時添加或洗掉屬性，也可以改變屬性的值，通過使用“點”或“中括號”語法可以訪問和修改物件的屬性值，此外，可以使用 Object.keys()、Object.values()、Object.entries() 等方法來遍歷物件的屬性，也可以使用 for...in 和 for...of 回圈遍歷物件屬性，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544635.html

標籤：JavaScript

上一篇：使用VS code將本地的專案推送到gitee的方法（圖例）

下一篇：Map資料結構詳解

深入理解JavaScript物件

前言