」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 掌握 JavaScript 中的對象

掌握 JavaScript 中的對象

發佈於2024-12-22
瀏覽:189

Mastering Objects in JavaScript

JavaScript 中的对象

在 JavaScript 中,对象是键值对的集合,其中值可以是数据(属性)或函数(方法)。对象是 JavaScript 的基础,因为 JavaScript 中几乎所有内容都是对象,包括数组、函数,甚至其他对象。


1.创建对象

一个。对象字面量

创建对象的最简单方法是使用大括号 {}。

例子

const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!

B.对象构造函数

使用对象构造函数创建一个空对象。

例子

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!

C。使用 Object.create()

该方法创建一个具有指定原型的新对象。

例子

const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!

2.访问对象属性

一个。点符号

使用点 (.) 访问属性。

例子

console.log(person.name); // Output: Alice

B.括号表示法

使用方括号 ([]) 访问属性。对于动态属性名称很有用。

例子

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25

3.添加、修改和删除属性

  • 添加
person.country = "USA";
console.log(person.country); // Output: USA
  • 修改
person.age = 26;
console.log(person.age); // Output: 26
  • 删除
delete person.age;
console.log(person.age); // Output: undefined

4.对象中的方法

当函数是对象的属性时,它被称为 方法.

例子

const car = {
  brand: "Tesla",
  start: function () {
    console.log("Car started!");
  },
};

car.start(); // Output: Car started!

5.迭代对象属性

一个。用于...in

迭代对象的所有可枚举属性。

例子

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

B.使用 Object.keys()

返回对象键的数组。

例子

Object.keys(person).forEach((key) => {
  console.log(`${key}: ${person[key]}`);
});

C。使用 Object.entries()

返回[键,值]对的数组。

例子

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

6。对象方法

JavaScript 提供了几种处理对象的内置方法。

  • Object.assign():将属性从一个对象复制到另一个对象。
const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // Output: { a: 1, b: 2 }
  • Object.freeze():防止修改对象。
const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // No effect
console.log(obj.a); // Output: 1
  • Object.seal():防止添加或删除属性,但允许修改现有属性。
const obj = { a: 1 };
Object.seal(obj);
obj.b = 2; // No effect
obj.a = 3; // Works
console.log(obj); // Output: { a: 3 }

7.原型与继承

JavaScript 中的对象有一个原型,它是它们继承属性和方法的另一个对象。

例子

const animal = { eats: true };
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // Output: true (inherited)
console.log(dog.barks); // Output: true

8.对象解构

解构允许将对象的属性提取到变量中。

例子

const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name); // Output: Alice
console.log(age); // Output: 25

9.概括

  • 对象是可以存储属性和方法的键值对。
  • 使用对象文字进行简单的对象创建。
  • 使用点或方括号表示法访问对象属性。
  • 使用 Object.keys()、Object.assign() 和 Object.freeze() 等内置方法进行有效的对象操作。
  • 掌握对象对于理解原型和继承等高级 JavaScript 概念至关重要。

嗨,我是 Abhay Singh Kathayat!
我是一名全栈开发人员,拥有前端和后端技术方面的专业知识。我使用各种编程语言和框架来构建高效、可扩展且用户友好的应用程序。
请随时通过我的商务电子邮件与我联系:[email protected]

版本聲明 本文轉載於:https://dev.to/abhay_yt_52a8e72b213be229/mastering-objects-in-javascript-4p57?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 在 Go 中使用 WebSocket 進行即時通信
    在 Go 中使用 WebSocket 進行即時通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    程式設計 發佈於2024-12-23
  • 儘管程式碼有效,為什麼 POST 請求無法擷取 PHP 中的輸入?
    儘管程式碼有效,為什麼 POST 請求無法擷取 PHP 中的輸入?
    解決PHP 中的POST 請求故障在提供的程式碼片段中:action=''而非:action="<?php echo $_SERVER['PHP_SELF'];?>";?>"檢查$_POST陣列:表單提交後使用 var_dump 檢查 $_POST 陣列的內...
    程式設計 發佈於2024-12-23
  • 如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    在 PHP 中組合關聯數組在 PHP 中,將兩個關聯數組組合成一個數組是常見任務。考慮以下請求:問題描述:提供的代碼定義了兩個關聯數組,$array1 和 $array2。目標是建立一個新陣列 $array3,它合併兩個陣列中的所有鍵值對。 此外,提供的陣列具有唯一的 ID,而名稱可能重疊。要求是建...
    程式設計 發佈於2024-12-23
  • 插入資料時如何修復「常規錯誤:2006 MySQL 伺服器已消失」?
    插入資料時如何修復「常規錯誤:2006 MySQL 伺服器已消失」?
    插入記錄時如何解決「一般錯誤:2006 MySQL 伺服器已消失」介紹:將資料插入MySQL 資料庫有時會導致錯誤「一般錯誤:2006 MySQL 伺服器已消失」。當與伺服器的連線遺失時會出現此錯誤,通常是由於 MySQL 配置中的兩個變數之一所致。 解決方案:解決此錯誤的關鍵是調整wait_tim...
    程式設計 發佈於2024-12-23
  • 為什麼我的 Angular HTTP POST 值在 PHP 中未定義,如何修復它?
    為什麼我的 Angular HTTP POST 值在 PHP 中未定義,如何修復它?
    Angular HTTP POST 到PHP:處理未定義的POST 值在AngularJS 中,對PHP 端點執行HTTP POST 請求有時會導致未定義的值伺服器端的POST 值。當預期資料格式與 Angular 應用程式傳送的實際資料不符時,就會發生這種情況。 要解決此問題,確保正確設定 Con...
    程式設計 發佈於2024-12-23
  • Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta:列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而,隨著 Beta 2 的後續發布,這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    程式設計 發佈於2024-12-23
  • 大批
    大批
    方法是可以在物件上呼叫的 fns 數組是對象,因此它們在 JS 中也有方法。 slice(begin):將陣列的一部分提取到新數組中,而不改變原始數組。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index ...
    程式設計 發佈於2024-12-23
  • Go可以存取初始標準輸入流嗎?
    Go可以存取初始標準輸入流嗎?
    在 Go 中,您可以存取初始標準輸入嗎? 在 Go 中,使用 os.Stdin 從原始標準輸入讀取應該會產生所需的結果,如圖所示通過這個代碼片段:package main import "os" import "log" import "io&quo...
    程式設計 發佈於2024-12-23
  • 極簡密碼管理器桌面應用程式:進軍 Golang 的 Wails 框架(第 2 部分)
    極簡密碼管理器桌面應用程式:進軍 Golang 的 Wails 框架(第 2 部分)
    Hi again, coders! In the first part of this short series we saw the creation and operation of a desktop application to store and encrypt our passwords...
    程式設計 發佈於2024-12-23
  • ES6 React 元件:何時使用基於類別與函數式?
    ES6 React 元件:何時使用基於類別與函數式?
    在ES6 基於類別和函數式ES6 React 元件之間做出選擇使用React 時,開發人員面臨著使用ES6 基於類別的選擇組件或功能ES6 組件。了解每種類型的適當用例對於最佳應用程式開發至關重要。 函數式 ES6 元件:無狀態且簡單函數式元件是無狀態的,這表示它們不維護任何內部狀態。他們只是接收道...
    程式設計 發佈於2024-12-23
  • 如何在 PHP 中找到兩個平面數組之間的唯一值?
    如何在 PHP 中找到兩個平面數組之間的唯一值?
    在平面數組之間查找唯一值給定兩個數組,任務是確定僅存在於其中一個數組中的值。此操作通常稱為尋找兩個集合之間的差異。 在 PHP 中,您可以利用 array_merge、array_diff 和 array_diff 函數來實現此操作。詳細解法如下:$array1 = [64, 98, 112, 92...
    程式設計 發佈於2024-12-23
  • CSS 可以在內聯區塊元素中本機插入換行符號嗎?
    CSS 可以在內聯區塊元素中本機插入換行符號嗎?
    CSS 在行內區塊元素中插入換行符:理論探索在不斷發展的Web 開發領域,這種能力操縱內容流仍然是最重要的。經常出現的一個特殊挑戰涉及在內聯區塊元素中插入換行符。 考慮以下 HTML 結構:<h3 id="features">Features</h3> &...
    程式設計 發佈於2024-12-23
  • 如何在 PHP 中輕鬆轉換時區之間的時間和日期?
    如何在 PHP 中輕鬆轉換時區之間的時間和日期?
    在PHP 中轉換時區之間的時間和日期使用PHP,您可以輕鬆地在不同時區之間轉換時間和日期。此功能在處理全球資料的應用程式或與來自不同位置的使用者一起工作時特別有用。 取得時區偏移量要取得與 GMT 的時間偏移量,您可以使用 DateTimeZone 類別。它提供了時區及其各自偏移量的完整清單。 $t...
    程式設計 發佈於2024-12-23
  • HTML 格式標籤
    HTML 格式標籤
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    程式設計 發佈於2024-12-23
  • 如何在Windows上安裝並使用Pip進行Python套件管理?
    如何在Windows上安裝並使用Pip進行Python套件管理?
    Pip:在Windows 上安裝Python 套件的輕鬆方式在Windows 上安裝Python 套件可能是一項艱鉅的任務,特別是如果您在使用EasyInstall 時遇到困難。幸運的是,EasyInstall 的後繼者 Pip 提供了更簡化和簡化的解決方案。 在Windows 上逐步安裝Pip若要...
    程式設計 發佈於2024-12-23

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3