深入理解JavaScript對象

来源:https://www.cnblogs.com/pglin/archive/2023/02/21/17140678.html
-Advertisement-
Play Games

前言 在 JavaScript 中，對象是一種非常常見的數據類型，幾乎每個程式員都會在日常工作中頻繁地使用對象。在本篇文章中，我們將深入瞭解 JavaScript 對象的一些基本概念和一些高級概念，這些概念對於我們正確理解對象在 JavaScript 中的行為非常重要。 對象的基本概念 在 Java ...


前言

在 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 迴圈遍歷對象屬性。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • B站基於ClickHouse的海量用戶行為分析應用實踐
    數據驅動理念已被各行各業所熟知，核心環節包括數據採集、埋點規劃、數據建模、數據分析和指標體系構建。在用戶行為數據領域，對常見的多維數據模型進行信息提煉和模型整合，可以形成一套常見的數據分析方法來發現用戶行為的內在聯繫，能更好洞察用戶的行為習慣和行為規律，幫助企業挖掘用戶數據的商業價值。 行業內... ...
  • 雲小課｜MRS基礎原理之Flink組件介紹
    閱識風雲是華為雲信息大咖，擅長將複雜信息多元化呈現，其出品的一張圖(雲圖說)、深入淺出的博文(雲小課)或短視頻(雲視廳)總有一款能讓您快速上手華為雲。更多精彩內容請單擊此處。 摘要：Flink是一個批處理和流處理結合的統一計算框架，其核心是一個提供了數據分發以及並行化計算的流數據處理引擎。它的最大亮 ...
  • SQL Server資料庫日常檢查
    摘要：你知道數倉是如何應運而生的嗎？你瞭解數倉未來的發展趨勢嗎？想知道國內數倉專家的看法嗎？ 導語 數據倉庫的發展一直是備受關註的議題，隨著近年來技術的不斷演進，數倉也在更新迭代。 你知道數倉是如何應運而生的嗎？你瞭解數倉未來的發展趨勢嗎？想知道國內數倉專家的看法嗎？ 今天我們邀請到了華為雲數據倉庫 ...
  • ETL的架構設計和實現及其優勢
    ETL的架構 ETL架構的優勢： ETL相對於EL-T架構可以實現更為複雜的數據轉化邏輯 ETL採用單獨的硬體伺服器,可以分擔資料庫系統的負載 ETL與底層的資料庫數據存儲無關，可以保持所有的數據始終在資料庫當中，避免數據的載入和導出，從而保證效率，提高系統的可監控性。 ELT主要通過資料庫引擎來實 ...
  • scrollView 嵌套 recyclerview 時 BaseQuickAdapter 九宮格圖片拖拽到底部刪除
    九宮格圖片佈局，長按直接拖拽圖片，長按時顯示底部刪除佈局，拖拽到刪除佈局處鬆手可刪除佈局，最後添加按鈕不可拖拽，基於 BaseQuickAdapter 基礎上實現 BaseQuickAdapter 確實很好用，簡化我們的實現代碼，它本身也集成了一套拖拽實現，不過目前無法完美的滿足上面的需求，需要做一 ...
  • Android WebView 踩坑日記，字體怎麼突然變小了？？？
    背景 最近，端內在做 webView 統一的時候，個性簽名中的 WebView 替換為 CustomWebView 之後，發現字體突然變小。 一開始不知道是什麼原因，通過二分法查找最近的提交，排查之後，發現是 SignatureWebView 的繼承關係從 WebView 修改為 CustomWeb ...
  • Map數據結構詳解
    Map Object本質上是鍵值對的集合（Hash結構），但Object只能將字元串當做鍵，這就給Object帶來了很大的限制。 let data = {} let s = { name : '東方不敗' } data[s] = '西方求敗' // 如果鍵傳入非字元串的值，會自動為字元串 conso ...
  • 記錄--uni-app實現京東canvas拍照識圖功能
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 最近公司出了一個新的功能模塊(如下圖)，大提上可以描述為實現拍照完上傳圖片，拖動四方框拍照完成上傳功能，大體樣子如下圖。但是我找遍了 dcloud 插件市場，找到的插件都是移動背景圖片來實現裁剪的，跟京東的功能是相反的，沒辦法只能自己來實 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類