在 JavaScript 中為物件建立對映函式

Alex Dulcianu 2023年1月30日 2022年5月1日
  1. 在 JavaScript 中使用通用 map() 方法為物件建立對映函式
  2. 使用 for in 迴圈為 JavaScript 中的物件建立對映函式
  3. 使用 JavaScript 中物件的自定義對映函式建立新物件
  4. 在 JavaScript 中使用 Object.entries()Object.fromEntries() 為物件建立對映函式
  5. 在 JavaScript 中使用 Object.entries()Object.fromEntries() 編寫函式以對映你的物件
在 JavaScript 中為物件建立對映函式

在很多情況下,你希望對 JavaScript 中的物件執行某些操作。標準庫包含實現此目的的各種方法,但這並不意味著涵蓋了所有情況。

在這種情況下,沒有本地方法可以迭代物件的屬性並執行類似於 Array.prototype.map 函式的操作。

因此,如果你想檢查每個屬性併為其新增特定值,那麼你無法使用標準庫方法來做到這一點。值得慶幸的是,你可以從頭開始建立地圖功能並根據需要對其進行自定義。

在 JavaScript 中使用通用 map() 方法為物件建立對映函式

使用本機 map() 函式,此方法可以達到預期的效果。但是,你應該知道,此方法將修改原始物件,而不是建立新物件。

如果你不關心原始物件並且想要結果,那麼你可以通過以下方式實現此目的:

let testObject = { "first": 1, "second": 2, "third": 3};

Object.keys(testObject).map(function(key, value) {
    testObject[key] += 1
});

console.log(testObject);

輸出:

{ first: 2, second: 3, third: 4 }

使用 for in 迴圈為 JavaScript 中的物件建立對映函式

或者,你也可以使用簡單的 for 迴圈來迭代物件的屬性並執行所需的計算。此方法使用 hasOwnProperty() 函式來檢查物件是否具有有效屬性。

let testObject = { "first": 1, "second": 2, "third": 3};

for (var key in testObject) {
    if (testObject.hasOwnProperty(key)) {
        testObject[key] += 1;
    }
}

console.log(testObject);

輸出:

{ first: 2, second: 3, third: 4 }

使用 JavaScript 中物件的自定義對映函式建立新物件

如上所述,前一種方法在執行所需操作時會覆蓋原始物件。如果你不想這樣做,則可以改為建立一個新物件並保持原始物件不變。

Obvisouly,這種方法需要更多的程式碼,但結果更乾淨一些。

let testObject = { "first": 1, "second": 2, "third": 3};

function customMap(object, mapFn) {
    return Object.keys(object).reduce(function(result, key){
        result[key] = mapFn(object[key])
        return result
        }, {});
   }

let newObject = customMap(testObject, function(value) {
    return value + 1
});

console.log(testObject);
console.log(newObject);

輸出:

{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }

輸出顯示原始物件和具有修改值的新建立物件。如果你好奇,我們使用的 mapFn 引數是 Array.from() 方法的一部分,它被設計為用作對映函式。

在 JavaScript 中使用 Object.entries()Object.fromEntries() 為物件建立對映函式

如果你的專案允許你使用 ES2019 標準而不用擔心向後相容性,你可以減少建立對映函式所需的程式碼。

此方法的程式碼如下所示:

let testObject = { "first": 1, "second": 2, "third": 3};

let newObject = Object.fromEntries(Object.entries(testObject).map(([key, value]) => [key, value + 1]));

console.log(testObject);
console.log(newObject);

輸出:

{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }

由於這是一個單線,它可能很難維護,即使它更容易實現。

在 JavaScript 中使用 Object.entries()Object.fromEntries() 編寫函式以對映你的物件

假設你想讓上面的程式碼更易於管理和維護。在這種情況下,最簡單的解決方案是將 Object.entries()Object.fromEntries() 整合到自定義函式中。

因此,你可以通過以下方式重寫前面的程式碼:

let testObject = { "first": 1, "second": 2, "third": 3};

function customMap(object, func) {
  return Object.fromEntries(Object.entries(object).map(([key, value]) => [key, func(value)]));
}

let newObject = customMap(testObject, (x) => x + 1);

console.log(testObject);
console.log(newObject);

輸出:

{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }

相關文章 - JavaScript Map