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

掌握 JavaScript 物件指南

發佈於2024-08-27
瀏覽:537

A Guide to Master JavaScript-Objects

对象是 JavaScript 的基本组成部分,是存储和管理数据的支柱。对象是属性的集合,每个属性都是键(或名称)和值之间的关联。了解如何创建、操作和利用对象对于任何 JavaScript 开发人员都至关重要。在本文中,我们将探讨 JavaScript 中的各种对象函数,并提供详细的解释、示例和注释来帮助您掌握它们。

JavaScript 中的对象简介

在 JavaScript 中,对象用于存储数据集合和更复杂的实体。它们是使用对象文字或对象构造函数创建的。

// Using object literals
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Using the Object constructor
let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";

对象属性

  • Object.prototype:每个 JavaScript 对象都从其原型继承属性和方法。
let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true

对象方法

1. 对象分配()

将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。它返回目标对象。

let target = {a: 1};
let source = {b: 2, c: 3};
Object.assign(target, source);
console.log(target); // Output: {a: 1, b: 2, c: 3}

2. 对象.create()

使用指定的原型对象和属性创建一个新对象。

let person = {
    isHuman: false,
    printIntroduction: function() {
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};

let me = Object.create(person);
me.name = "Matthew";
me.isHuman = true;
me.printIntroduction(); // Output: My name is Matthew. Am I human? true

3.Object.defineProperties()

直接在对象上定义新属性或修改现有属性,返回该对象。

let obj = {};
Object.defineProperties(obj, {
    property1: {
        value: true,
        writable: true
    },
    property2: {
        value: "Hello",
        writable: false
    }
});
console.log(obj); // Output: { property1: true, property2: 'Hello' }

4.Object.defineProperty()

直接在对象上定义新属性或修改现有属性并返回对象。

let obj = {};
Object.defineProperty(obj, 'property1', {
    value: 42,
    writable: false
});
console.log(obj.property1); // Output: 42
obj.property1 = 77; // No error thrown, but the property is not writable
console.log(obj.property1); // Output: 42

5.Object.entries()

返回给定对象自己的可枚举字符串键控属性 [key, value] 对的数组。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj)); // Output: [['a', 1], ['b', 2], ['c', 3]]

6. 对象.freeze()

冻结对象。冻结的对象无法再更改;冻结对象可以防止向其中添加新属性、删除现有属性以及更改现有属性的值。

let obj = {prop: 42};
Object.freeze(obj);
obj.prop = 33; // Fails silently in non-strict mode
console.log(obj.prop); // Output: 42

7.Object.fromEntries()

将键值对列表转换为对象。

let entries = new Map([['foo', 'bar'], ['baz', 42]]);
let obj = Object.fromEntries(entries);
console.log(obj); // Output: { foo: 'bar', baz: 42 }

8.Object.getOwnPropertyDescriptor()

返回给定对象的自有属性(即直接存在于对象上而不是在对象的原型链中)的属性描述符。

let obj = {property1: 42};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'property1');
console.log(descriptor);
// Output: { value: 42, writable: true, enumerable: true, configurable: true }

9.Object.getOwnPropertyDescriptors()

返回一个包含对象所有自有属性描述符的对象。

let obj = {property1: 42};
let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/* Output:
{
  property1: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

10.Object.getOwnPropertyNames()

返回直接在给定对象上找到的所有属性(包括不可枚举属性,使用 Symbol 的属性除外)的数组。

let obj = {a: 1, b: 2, c: 3};
let props = Object.getOwnPropertyNames(obj);
console.log(props); // Output: ['a', 'b', 'c']

11.Object.getOwnPropertySymbols()

返回直接在给定对象上找到的所有符号属性的数组。

let obj = {};
let sym = Symbol('foo');
obj[sym] = 'bar';
let symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Output: [Symbol(foo)]

12.Object.getPrototypeOf()

返回指定对象的原型(即内部 [[Prototype]] 属性的值)。

let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

13. 对象.is()

判断两个值是否相同。

console.log(Object.is('foo', 'foo')); // Output: true
console.log(Object.is({}, {})); // Output: false

14.Object.isExtensible()

确定是否允许扩展对象。

let obj = {};
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false

15. 对象.isFrozen()

确定对象是否被冻结。

let obj = {};
console.log(Object.isFrozen(obj)); // Output: false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // Output: true

16. 对象.isSealed()

确定对象是否被密封。

let obj = {};
console.log(Object.isSealed(obj)); // Output: false
Object.seal(obj);
console.log(Object.isSealed(obj)); // Output: true

17. 对象.keys()

返回给定对象自己的可枚举属性名称的数组,以与正常循环相同的顺序进行迭代。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']

18. 对象.preventExtensions()

防止对象的任何扩展。

let obj = {};
Object.preventExtensions(obj);
obj.newProp = 'test'; // Throws an error in strict mode
console.log(obj.newProp); // Output: undefined

19. 对象.seal()

密封对象,防止向其添加新属性并将所有现有属性标记为不可配置。只要当前属性的值可写,就仍然可以更改。

let obj = {property1: 42};
Object.seal(obj);
obj.property1 = 33;
delete obj.property1; // Throws an error in strict mode
console.log(obj.property1); // Output: 33

20. 对象.setPrototypeOf()

将指定对象的原型(即内部 [[Prototype]] 属性)设置为另一个对象或 null。

let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

21. 对象.values()

返回给定对象自己的可枚举属性值的数组,其顺序与 for...in 循环提供的顺序相同。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // Output: [1, 2, 3]

实际例子

示例 1:克隆对象

使用 Object.assign() 克隆对象。

let obj = {a: 1, b: 2};
let clone = Object.assign({}, obj);
console.log(clone); // Output: {a: 1, b: 2}

示例 2:合并对象

使用Object.assign()合并对象。

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
let merged = Object.assign({},

 obj1, obj2);
console.log(merged); // Output: {a: 1, b: 3, c: 4}

示例 3:创建具有指定原型的对象

使用Object.create()创建具有指定原型的对象。

let proto = {greet: function() { console.log("Hello!"); }};
let obj = Object.create(proto);
obj.greet(); // Output: Hello!

示例 4:定义不可变属性

使用 Object.defineProperty() 定义不可变属性。

let obj = {};
Object.defineProperty(obj, 'immutableProp', {
    value: 42,
    writable: false
});
console.log(obj.immutableProp); // Output: 42
obj.immutableProp = 77; // Throws an error in strict mode
console.log(obj.immutableProp); // Output: 42

示例 5:将对象转换为数组

使用Object.entries()将对象转换为键值对数组。

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);
console.log(entries); // Output: [['a', 1], ['b', 2], ['c', 3]]

结论

对象是 JavaScript 的核心组件,提供了一种灵活的方式来管理和操作数据。通过掌握对象函数,您可以轻松执行复杂的操作,编写更高效、可维护的代码。这个综合指南涵盖了 JavaScript 中最重要的对象函数,并配有详细的示例和解释。练习使用这些函数并尝试不同的用例,以加深您的理解并提高您的编码技能。

版本聲明 本文轉載於:https://dev.to/imsushant12/a-guide-to-master-javascript-objects-362b?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • Go 中的並發模式;工作池和扇出/扇入
    Go 中的並發模式;工作池和扇出/扇入
    Go 以其卓越的並發模型而聞名,但許多開發人員只專注於 goroutine 和通道。然而,工作池和扇出/扇入等並發模式提供了真正的效率。 本文將介紹這些進階概念,幫助您最大限度地提高 Go 應用程式的吞吐量。 為什麼並發很重要 並發允許程式有效率地執行任務,特別是在處理 I/O ...
    程式設計 發佈於2024-11-06
  • 如何在 C++ 中將單一字元轉換為 std::string?
    如何在 C++ 中將單一字元轉換為 std::string?
    從單字建立字串從單一字元建立字串人們可能會遇到需要將表示為char 資料類型的單字轉換為std:: string。從字串中取得字元很簡單,只需在所需位置索引字串即可。然而,相反的過程需要不同的方法。 要從單字建立std::string,可以使用多種方法:char c = 34; std::strin...
    程式設計 發佈於2024-11-06
  • JavaScript 變數名稱中美元符號的含義是什麼?
    JavaScript 變數名稱中美元符號的含義是什麼?
    JavaScript 變數名稱中美元符號的意義在程式設計領域,命名約定的使用對於增強程式碼至關重要可讀性並遵循最佳實務。在 JavaScript 中,美元符號 ($) 通常會作為變數名稱的前綴出現,特別是引用 jQuery 物件的變數名稱。 美元符號的用途是什麼? 與流行的看法相反,JavaScri...
    程式設計 發佈於2024-11-06
  • 如何重新排列 CSS 網格佈局中的列以實現移動響應?
    如何重新排列 CSS 網格佈局中的列以實現移動響應?
    在CSS 網格佈局中重新排序列在CSS 網格佈局中,有多種技術可以修改列的順序以實現具體佈局。本問題探討了重新排列行動佈局列的可能性,例如將列移到底部,同時在桌面佈局上保持所需的列順序。 解決方案選項:grid-template-areas: 此屬性可讓您在網格內定義命名區域,然後將網格項目指派給這...
    程式設計 發佈於2024-11-06
  • Hacktoberfest 週線上拍賣系統
    Hacktoberfest 週線上拍賣系統
    概述 在 Hacktoberfest 的第三週,我決定為一個較小但有前途的專案做出貢獻:線上拍賣系統。儘管該專案仍處於早期階段,但它已經顯示出成長潛力,而且我看到了幫助改進其程式碼庫的機會。我的任務是透過減少冗餘程式碼和改進整體結構來重構項目,使其更具可維護性和可擴展性。 ...
    程式設計 發佈於2024-11-06
  • 如何使用“exception_ptr”在 C++ 執行緒之間傳播異常?
    如何使用“exception_ptr”在 C++ 執行緒之間傳播異常?
    在C 中的線程之間傳播異常當從主線程調用的函數生成多個線程時,就會出現在C 中的執行緒之間傳播異常的任務用於CPU 密集型工作的工作執行緒。挑戰在於處理工作執行緒上可能發生的異常並將其傳播回主執行緒以進行正確處理。 傳統方法一種常見方法是手動捕獲工作線程上的各種異常,記錄它們的詳細信息,然後在主線程...
    程式設計 發佈於2024-11-06
  • 如何使用 3D CSS 轉換來修復 Firefox 中的鋸齒狀邊緣?
    如何使用 3D CSS 轉換來修復 Firefox 中的鋸齒狀邊緣?
    使用3D CSS 變換時Firefox 中的鋸齒狀邊緣與Chrome 中使用CSS 變換時的鋸齒狀邊緣問題類似,Firefox 在3D 變換中也出現了這個問題。背面可見性作為 Chrome 中的潛在解決方案,在 Firefox 中被證明無效。 解決方案:要在Firefox 中緩解此問題,您可以實施以...
    程式設計 發佈於2024-11-06
  • 為什麼 PHP 的 mail() 函數會為電子郵件發送帶來挑戰?
    為什麼 PHP 的 mail() 函數會為電子郵件發送帶來挑戰?
    為什麼PHP 的mail() 函數達不到要求:限制和陷阱雖然PHP 提供了mail() 函數用於發送電子郵件,但它卻失敗了與專用庫或擴展相比較短。以下是與使用mail() 相關的缺點和限制的全面檢查:格式問題:mail() 可能會遇到以下問題:標題和內容格式,尤其是作業系統之間的換行差異。這些錯誤可...
    程式設計 發佈於2024-11-06
  • 使用 npyConverter 簡化 NumPy 檔案轉換
    使用 npyConverter 簡化 NumPy 檔案轉換
    如果您使用 NumPy 的 .npy 檔案並需要將其轉換為 .mat (MATLAB) 或 .csv 格式,npyConverter 就是適合您的工具!這個簡單的基於 GUI 的工具透過乾淨且用戶友好的介面提供 .npy 檔案的批量轉換。 主要特點 批次轉換:將目錄下所有.npy檔...
    程式設計 發佈於2024-11-06
  • 如何停用特定線路的 Eslint 規則?
    如何停用特定線路的 Eslint 規則?
    停用特定行的Eslint 規則在JSHint 中,可以使用語法停用特定行的linting 規則: /* jshint ignore:start */ $scope.someVar = ConstructorFunction(); /* jshint ignore:end */對於 eslint,有幾...
    程式設計 發佈於2024-11-06
  • 如何在沒有錯誤的情況下將清單插入 Pandas DataFrame 單元格?
    如何在沒有錯誤的情況下將清單插入 Pandas DataFrame 單元格?
    將清單插入Pandas 儲存格問題在Python 中,嘗試將清單插入Pandas DataFrame 的儲存格可能會導致錯誤或意圖想不到的結果。例如,當嘗試將清單插入DataFrame df 的儲存格1B 時:df = pd.DataFrame({'A': [12, 23], 'B': [np.na...
    程式設計 發佈於2024-11-06
  • Matplotlib 中的「plt.plot」、「ax.plot」和「figure.add_subplot」之間的主要差異是什麼?
    Matplotlib 中的「plt.plot」、「ax.plot」和「figure.add_subplot」之間的主要差異是什麼?
    Matplotlib 中繪圖、軸與圖形之間的差異Matplotlib 是一個用於建立視覺化的物件導向的 Python 函式庫。它使用三個主要物件:圖形、軸和繪圖。 圖形圖形表示將在其中顯示可視化的整個畫布或視窗。它定義畫布的整體大小和佈局,包括邊距、背景顏色和任何其他全域屬性。 軸軸表示圖中繪製資料...
    程式設計 發佈於2024-11-06
  • FireDucks:以零學習成本獲得超越 pandas 的效能!
    FireDucks:以零學習成本獲得超越 pandas 的效能!
    Pandas 是最受歡迎的庫之一,當我在尋找一種更簡單的方法來加速其性能時,我發現了 FireDucks 並對它產生了興趣! 與 pandas 的比較:為什麼選擇 FireDucks? Pandas 程式可能會遇到嚴重的效能問題,這取決於其編寫方式。然而,作為一名數據科學家,我想花...
    程式設計 發佈於2024-11-06
  • CSS 網格:嵌套網格佈局
    CSS 網格:嵌套網格佈局
    介紹 CSS Grid 是一種佈局系統,因其在創建多列佈局方面的靈活性和效率而迅速受到 Web 開發人員的歡迎。它最有用的功能之一是能夠建立嵌套網格佈局。嵌套網格可以在設計複雜網頁時提供更多控制和精確度。在本文中,我們將探討在 CSS Grid 中使用嵌套網格佈局的優點、缺點和主要...
    程式設計 發佈於2024-11-06
  • 適用於 Java 的 Jupyter 筆記本
    適用於 Java 的 Jupyter 筆記本
    Jupyter Notebook 的强大 Jupyter Notebooks 是一个出色的工具,最初是为了帮助数据科学家和工程师使用 python 编程语言简化数据处理工作而开发的。事实上,笔记本的交互性使其非常适合快速查看代码结果,而无需搭建开发环境、编译、打包等。此功能对于数据...
    程式設計 發佈於2024-11-06

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

Copyright© 2022 湘ICP备2022001581号-3