JavaScript >> Javascript 文檔 >  >> Tags >> object

在 JavaScript 中創建對象的 6 種方法

JavaScript 對像是稱為屬性的鍵值對的集合。對象通常用於通過網絡存儲、操作和發送數據。

有多種方法可以在 JavaScript 中創建對象。你可以使用:

  • 對象字面量
  • Object 構造函數
  • 構造函數
  • Object.create() 方法
  • Object.assign() 方法
  • ES6 類

1 — 對象字面量

在 JavaScript 中創建對象的最簡單和最流行的方法是使用對象字面量語法。您需要做的就是將所有鍵值對用冒號分隔(: ) 在花括號內如下所示:

const fruits = {
    mango: '🥭️',
    apple: '🍎',
    lemon: '🍋',
    cherry: '🍒'
};

2 — Object 構造函數

在 JavaScript 中創建對象的第二種方法是使用內置的 Object() 構造函數。您可以使用 new 用於初始化 Object 實例的關鍵字 :

const fruits = new Object();

現在要向上述對象添加屬性,您必須使用點 (. ) 符號如下所示:

const fruits = new Object();

fruits.mango = '🥭️';
fruits.apple = '🍎';
fruits.lemon = '🍋';
fruits.cherry = '🍒';

3 — 構造函數

new 關鍵字也可以與用戶定義的構造函數一起使用來創建對象。構造函數只不過是一個簡單的 JavaScript 函數,當使用 new 調用它時 關鍵字,充當構造函數並返回一個對象。

這是一個例子:

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

const user = new User('John Doe', 45);

在上面的User 函數,this 關鍵字是指正在創建的對象,所以 nameage 成為新創建對象的屬性。

這種方法比內置的 Object 更好 構造函數初始化。它允許我們快速創建多個相同類型的對象,而無需手動為每個對象添加屬性。

4 — Object.create() 方法

Object.create() 方法允許我們創建一個新對象,使用現有對像作為新創建對象的原型。當您想從現有對象創建新對象時,此方法特別有用。

Object.create() 方法最多需要兩個參數。第一個強制參數是用作新創建對象的原型的對象。第二個參數是一個可選對象,其中包含要添加到新對象的屬性。

假設您有以下現有對象:

const Vehicle = {
    maker: 'BMW',
    color: 'Black'
};

使用 Vehicle 創建新對象 的原型,您可以執行以下操作:

const vehicle = Object.create(Vehicle);

console.log(vehicle.maker); // Tesla
console.log(vehicle.color); // Red

您還可以為新對象指定其他屬性作為 Object.create() 的第二個參數 帶有 configurable 等屬性選項 , 可枚舉 , 可寫價值 如下圖:


const vehicle = Object.create(Vehicle, {
    type: {
        value: 'Electric',
        writable: true,
        configurable: true,
        enumerable: false
    }
});

console.log(vehicle.maker); // Tesla
console.log(vehicle.color); // Red
console.log(vehicle.type); // Electric

查看這篇 MDN 文章以了解有關 Object.create() 的更多信息 方法。

5 — Object.assign() 方法

在 JavaScript 中創建對象的第五種方法是使用 Object.assign() 方法。此方法將一個或多個源對像作為輸入,並將所有可枚舉的自身屬性複製到目標對象。

您可以將任意數量的對像傳遞給 Object.assign() 作為參數。第一個參數是目標 目的。其餘參數為source 包含要應用於目標對象的屬性的對象。

讓我們假設您有以下兩個對象:

const car = {
    maker: 'Model X',
    color: 'Black'
};

const maker = {
    name: 'Tesla'
};

現在你想結合兩個 carmaker 對象來創建一個 vehicle 目的。只需使用 Object.assign() 合併兩個現有對像以創建一個新對象,如下所示:

const vehicle = Object.assign({}, maker, car);

console.log(vehicle);

// { name: 'Tesla', maker: 'Model X', color: 'Black' }

查看本指南以了解有關 Object.assign() 的更多信息 方法。

6 — ES6 類

ES6(ECMAScript 2015)首次在 JavaScript 中引入了類的概念。您可以使用 class 關鍵字在 JavaScript 中定義一個新類而不是函數構造函數,然後使用 new 關鍵字來創建它的一個實例。

讓我們看下面的例子:

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

    sayHi() {
        return `Hi ${this.name} 👋`;
    }
}

const user = new User('Atta', 30);

console.log(user.sayHi()); // Hi Atta 👋
console.log(user.age); // 30

結論

這就是在 JavaScript 中創建對象的所有人。我們學習了 6 種不同的創建對象的方法,包括對象字面量語法 Object 構造函數,構造函數,Object.create() , Object.assign() , 和 ES6 類。

所有這些方法在不同的場景中都很有用。 JavaScript 開發人員常用的定義對象的方法是對象字面量。這是在 JavaScript 中定義具有所有必需鍵值對的對象的一種簡單且最快的方法。


Tutorial JavaScript 教程
  1. 大 O:[3] 計數操作

  2. 將 Heatmap.js 與 Angular 中的鼠標懸停集成

  3. 6 個需要避免的 JavaScript 初學者錯誤!

  4. React 中的模塊

  5. JavaScript 命名參數 |示例代碼

  6. 我們沒有生火(休息)

  7. 為什麼我在heroku上部署時不上傳照片

  1. 如何使用 Next.js 和 Netlify 創建聯繫表單

  2. 熨斗最終項目

  3. Laravel Vuejs Livewire 教程

  4. 如何在 JavaScript 中按日期值對數組進行排序

  5. ES2020 中你應該知道的 10 個 JavaScript 新特性

  6. 面向初學者的 Node.js 路線圖

  7. 應用商店還是網頁?為什麼不兼得!?

  1. 你不想把所有的雞蛋都放在一個籃子裡:razzle 插件(二)

  2. 未捕獲的 DOMException:無法在“文檔”上執行“createElement”:提供的標籤名稱

  3. React 應用程序和 GitHub 操作

  4. 愛上開源🍁