在 JavaScript 中拆分陣列條目以形成物件


題目要求我們找到一個給定陣列的解決方案,並將其拆分成一個帶有鍵值對的 JavaScript 物件。

理解問題

簡單來說,我們要將給定的陣列轉換為物件。JavaScript 中有多種方法可以將陣列轉換為物件。我們將逐一使用和編寫每種方法的程式碼。

使用 reduce() 和 split() 方法

在這種方法中,我們將使用 JavaScript 的 reduce 和 split 函式。

演算法

此演算法討論了針對陣列本身中存在的任意數量陣列的待解決問題陳述。

步驟 1:宣告一個名為 data 的陣列並在其中新增一些值。

步驟 2:宣告一個名為 result 的變數來儲存結果。

步驟 3:為了拆分陣列條目,我們將使用 reduce() 方法迭代陣列。

步驟 4:現在使用“-”分隔符將每個條目拆分為兩部分。因此,我們可以按拆分條目的第一部分對條目進行分組,並計算每對公司和型號的出現次數。

步驟 5:如果存在重複條目,則在此步驟中將計數加 1。

步驟 6:將其轉換為物件後返回結果並列印。

示例

// Define data in the form of array 
const data = [
   "Honda−Amaze",
   "Honda−Jazz",
   "Honda−Jazz",
   "Honda−SUV",
   "Volkswagen−Voyage",
   "Volkswagen−Atlas",
   "Volkswagen−Atlas",
   "Volkswagen−Voyage",
   "Fiat−Punto",
   "Fiat−Panda",
   "Fiat−Strada",
   "Fiat−Punto",
   "Fiat−Uno",
   "Ford−Fiesta",
   "Fiat−Uno",
];

//split data using reduce and split functions
const result = data.reduce((a, b) => {
  const [Company, model] = b.split("−");
  const key = Company + "−" + model;
  a[key] = a[key] || { Company, model, count: 0 };

  // Increment the count
  a[key].count++;

  return a; //
}, {});

const output = Object.values(result);
console.log("The data in Key - Value pair with count")
console.log(output);

輸出

The data in Key - Value pair with count
[
  { Company: 'Honda', model: 'Amaze', count: 1 },
  { Company: 'Honda', model: 'Jazz', count: 2 },
  { Company: 'Honda', model: 'SUV', count: 1 },
  { Company: 'Volkswagen', model: 'Voyage', count: 2 },
  { Company: 'Volkswagen', model: 'Atlas', count: 2 },
  { Company: 'Fiat', model: 'Punto', count: 2 },
  { Company: 'Fiat', model: 'Panda', count: 1 },
  { Company: 'Fiat', model: 'Strada', count: 1 },
  { Company: 'Fiat', model: 'Uno', count: 2 },
  { Company: 'Ford', model: 'Fiesta', count: 1 }
]

使用 Object.assign() 方法

Object.assign() 方法在 JavaScript ES6 中引入。此函式的工作機制是從一個或多個輸入物件複製所有可列舉的自有元素的值到輸出物件。輸出物件是第一個引數,也用作返回值。在下面的程式碼示例中,我們可以演示使用 Object.assign() 方法將陣列轉換為物件。

Object.assign() 演算法

步驟 1:宣告一個名為 cars 的陣列。

步驟 2:建立另一個名為 objOutput 的變數,並在其中使用 Object.assign 方法並傳遞陣列 cars。

步驟 3:以物件形式返回輸出。

Object.assign() 程式碼

示例

const cars = ["Honda", "Volkswagen","Fiat", "Suzuki"];

//using Object.assign to convert in object
const objOutput = Object.assign({}, cars)

console.log("Output using Object.assign() method")
console.log(objOutput)

輸出

Output using Object.assign() method
{ '0': 'Honda', '1': 'Volkswagen', '2': 'Fiat', '3': 'Suzuki' }

使用展開語法 (...)

要將陣列轉換為物件,我們可以使用展開運算子。它將轉換並從索引 0 開始。

展開運算子演算法

步驟 1:定義一個名為 cars 的陣列。

步驟 2:建立另一個名為 objOutput 的變數,並在其中使用展開 (...) 運算子並傳遞陣列 cars。

步驟 3:以物件形式返回輸出。

展開運算子程式碼

示例

const cars = ["Honda", "Volkswagen","Fiat", "Suzuki"];

//using spread operator to convert in object
const objOutput = {...cars} 

console.log("Output using spread operator")
console.log(objOutput)

輸出

Output using spread operator
{ '0': 'Honda', '1': 'Volkswagen', '2': 'Fiat', '3': 'Suzuki' }

使用 Array.forEach()

藉助 forEach 方法,我們可以將陣列更改為具有第 0 個索引的物件。

forEach() 方法演算法

步驟 1:透過指定名稱 cars 來初始化陣列。

步驟 2:建立一個名為 objOutput 的空物件,並在其中使用 forEach() 方法並傳遞陣列 cars。

步驟 3:以物件形式返回輸出。

forEach() 方法程式碼

示例

// define an array
const cars = ["Honda", "Volkswagen","Fiat", "Suzuki"];

//using forEach method to convert in object
const objOutput = {}

cars.forEach((element, i) => {
  objOutput[i] = element
})

console.log("Output using forEach method")
console.log(objOutput)

輸出

Output using forEach method
{ '0': 'Honda', '1': 'Volkswagen', '2': 'Fiat', '3': 'Suzuki' }

時間和空間複雜度

由於我們使用 JavaScript 的 reduce、Object、split、展開運算子、Object.assign 和 forEach 方法(強大的概念)優化了演算法。它使演算法的時間複雜度為 O(n),其中 n 是稱為 data 的陣列中的元素數量。因為我們只使用 reduce() 函式迭代了一次陣列。空間複雜度也是 O(n),因為我們為每對唯一的公司和型號建立一個新物件,並且此物件的大小取決於輸入陣列中唯一對的數量。

結論

這就是我們在編碼上下文中透過邏輯和高效的思考來解決所述問題的方法。由於我們擁有 reduce、split 和 Object(JavaScript 的強大方法)的實踐經驗。我們的結論是,此演算法將花費 O(n) 時間來完成執行,並花費 O(n) 空間來儲存到記憶體中。

更新於:2023 年 8 月 18 日

瀏覽量 342 次

啟動你的 職業生涯

完成課程獲得認證

開始
廣告
© . All rights reserved.