JavaScript 中操作物件陣列


給定的問題陳述要求我們藉助 JavaScript 功能來操作物件陣列。在 JavaScript 中,我們有一些內建函式,例如 map()、reduce()、forEach() 和 filter(),可以用來運算元組中的物件。我們可以藉助這些函式來解決這個問題。

什麼是陣列中的物件操作?

讓我們瞭解一下陣列中物件的操縱。

操作意味著更新陣列物件、刪除陣列物件或向陣列中新增物件。在 JavaScript 中,存在幾種方法可以進行這些操作。這些方法如下:slice()、filter()、find()、sort()、map()、reduce()、reverse()、some()、every()、concat() 和 includes()。

我們將在本文中瞭解一些最常用的函式的用法。

上述問題的邏輯

使用 JavaScript 的預定義函式操作給定字串的最簡單方法。

因此,讓我們瞭解給定問題的邏輯。在操作輸入字串的問題中,我們將更新、刪除、操作和替換字串的某些物件。這取決於具體的用例,可能還有其他更合適的方法或技術。

下面是一些非常有用的運算元組物件的重要技術

使用 map() 函式

map 方法用於建立一個新陣列,該陣列填充了對呼叫陣列中每個專案呼叫函式的結果。

演算法

步驟 1:宣告一個名為 users 的陣列,其中包含兩個物件“name”和“age”。

步驟 2:按照第一步,宣告並初始化一個名為 updatedUsers 的附加陣列。map 函式將儲存結果陣列。

步驟 3:完成第二步後,我們將顯示更新後的物件陣列的結果。

示例

//define users array with two properties given
const users = [
  { name: 'Neha', age: 32 },
  { name: 'Ankit', age: 24 },
  { name: 'Babita', age: 41 },
];

//updating the users array
const updatedUsers = users.map(user => ({ ...user, isUser: false }));
console.log("Updated array is as follows")
console.log(updatedUsers);

輸出

Updated array is as follows
[
  { name: 'Neha', age: 32, isUser: false },
  { name: 'Ankit', age: 24, isUser: false },
  { name: 'Babita', age: 41, isUser: false }
]

使用 filter() 函式

filter 方法將建立一個新陣列,其中包含透過回撥函式測試的所有專案。

演算法

步驟 1:宣告一個名為 users 的陣列,其中包含兩個物件“name”和“age”。

步驟 2:按照第一步,宣告並初始化一個名為 youngUsers 的附加陣列。

步驟 3:現在進入步驟 2,我們將使用 filter 函式根據回撥函式中給定的條件過濾 users 陣列。

步驟 4:完成上述步驟後,顯示過濾後的物件陣列的結果。

示例

//define users array with two properties- name and age
const users = [
  { name: 'Neha', age: 32 },
  { name: 'Ankit', age: 24 },
  { name: 'Babita', age: 41 },
];

//create array for filtered array
const youngUsers = users.filter(user => user.age < 30);
console.log("Make a filter and show the data if age is less than 30:")
console.log(youngUsers);

輸出

Make a filter and show the data if age is less than 30:
[ { name: 'Ankit', age: 24 } ]

使用 find() 函式

演算法

步驟 1:宣告一個名為 users 的陣列,其中包含兩個物件“name”和“age”。

步驟 2:按照第一步,宣告並初始化一個名為 updatedUsers 的附加陣列。find 函式將在這裡用於更新 age 的值,因為它滿足回撥函式中給定的條件。

步驟 3:現在顯示更新後的物件陣列的結果。

示例

//define users array with name and age
const users = [
  { name: 'Neha', age: 32 },
  { name: 'Ankit', age: 24 },
  { name: 'Babita', age: 41 },
];

//updating a property value
const updatedUser = users.find(user => user.name === 'Neha');

if (updatedUser) {
  updatedUser.age = 35;
}
console.log("After updating age property:")
console.log(users);

輸出

After updating age property:
[
  { name: 'Neha', age: 35 },
  { name: 'Ankit', age: 24 },
  { name: 'Babita', age: 41 }
]

使用 slice() 函式

slice() 方法將把陣列的一部分複製到一個新建立的陣列物件中,其中包含起始和結束索引。它不會更改原始陣列。

演算法

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

步驟 2:現在,藉助 slice 方法,我們將看到一個在 slice 方法中給出不同索引值的不同的陣列。

步驟 3:現在顯示更新後的物件陣列的結果。

示例

//define users array with names
const users = ['Neha', 'Ankit', 'Babita', 'Anmol'];

//show output with starting and ending index
console.log('Show output with starting and ending index');
console.log(users.slice(2));

console.log(users.slice(0, 2));

console.log(users.slice(1, 2));

輸出

Show output with starting and ending index
[ 'Babita', 'Anmol' ]
[ 'Neha', 'Ankit' ]
[ 'Ankit' ]

複雜度

正如我們已經看到的,可以使用不同的操作技術來操作名為 users 的給定陣列。所有方法和技術都需要 O(n) 時間才能完成執行併產生所需的結果。需要注意的是,這種時間複雜度假設輸入陣列中的物件數量與輸入大小相比較小。如果輸入陣列大小較大,則需要最佳化程式碼以獲得更好的效能。

結論

在本程式碼中,我們使用 JavaScript 的陣列操作函式實現了不同的操作技術。我們還看到,這些方法在處理較大的陣列物件方面效率不高。最後計算所有方法的時間複雜度為 O(n),其中 n 是輸入物件的規模。

更新於:2023年8月23日

3K+ 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告