(資料圖片僅供參考)

1. 通過(guò)鍵對(duì)對(duì)象數(shù)組進(jìn)行分組

我們定義了一個(gè)名為 groupBy 的函數(shù)，它以一個(gè)對(duì)象數(shù)組和一個(gè)鍵作為參數(shù)。該函數(shù)的目的是將數(shù)組中的對(duì)象按指定的鍵進(jìn)行分組。

const groupBy = (arr, key) => arr.reduce(  (acc, obj) => ({ ...acc, [obj[key]]: [...(acc[obj[key]] || []), obj] }),  {} )const people = [ { name: "Alice", age: 21 }, { name: "Bob", age: 22 }, { name: "Charlie", age: 21 }, { name: "David", age: 23 }, { name: "Eve", age: 22 }]console.log(groupBy(people, "age"))/* Output:{ 21: [  { name: "Alice", age: 21 },  { name: "Charlie", age: 21 } ], 22: [  { name: "Bob", age: 22 },  { name: "Eve", age: 22 } ], 23: [{ name: "David", age: 23 }]}*/

acc 參數(shù)是累加分組對(duì)象的累加器。obj 參數(shù)表示數(shù)組中的每個(gè)對(duì)象。

在 reduce() 方法內(nèi)部，使用擴(kuò)展運(yùn)算符 (...acc) 返回一個(gè)新對(duì)象。這將創(chuàng)建 accumulator 對(duì)象的淺表副本，以便可以在不更改原始對(duì)象的情況下對(duì)其進(jìn)行修改。

新對(duì)象的屬性設(shè)置為與 key 參數(shù)的值相匹配的鍵。該屬性的值是一個(gè)包含被迭代對(duì)象的數(shù)組。

(acc[obj[key]] || []) 表達(dá)式檢查該屬性是否存在于累加器對(duì)象中。如果不存在，則返回一個(gè)空數(shù)組。展開(kāi)運(yùn)算符用于將數(shù)組與正在迭代的當(dāng)前對(duì)象連接起來(lái)。

最后，groupBy() 函數(shù)返回包含分組對(duì)象的累加器對(duì)象。

2. 返回?cái)?shù)組的中位數(shù)

我們實(shí)現(xiàn)了一個(gè)名為 median 的函數(shù)，它將一個(gè)數(shù)字?jǐn)?shù)組作為輸入，按升序?qū)ζ溥M(jìn)行排序，并返回排序后的數(shù)組的中值。

當(dāng)數(shù)組的元素個(gè)數(shù)為奇數(shù)時(shí)，排序數(shù)組的中值就是中間的元素。當(dāng)數(shù)組元素個(gè)數(shù)為偶數(shù)時(shí)，中值取中間兩個(gè)元素的平均值。

const median = (arr) => { const sorted = arr.sort() const middle = Math.floor(sorted.length / 2) return sorted.length % 2 === 0  ? (sorted[middle - 1] + sorted[middle]) / 2  : sorted[middle]}const oddArr = [3, 1, 4, 2, 5]console.log(median(oddArr)) // 3const evenArr = [1, 2, 5, 6]console.log(median(evenArr)) // 3.5

第一個(gè)例子，輸入數(shù)組[3, 1, 4, 2, 5]被排序?yàn)閇1, 2, 3, 4, 5]，中間元素為3。因此，輸入數(shù)組的中值 是 3。

在第二個(gè)例子中，輸入數(shù)組[1,2,5,6]被排序?yàn)閇1,2,5,6]，中間兩個(gè)元素為2和5。因此，輸入數(shù)組的中值為 (2 + 5) / 2 = 3.5。

3.返回?cái)?shù)組的模式

數(shù)組的眾數(shù)是數(shù)組中出現(xiàn)頻率最高的值。如果有多個(gè)值具有相同的最高頻率，則所有這些值都被視為眾數(shù)。

const mode = (arr) => { const counts = arr.reduce(  (acc, curr) => ({ ...acc, [curr]: (acc[curr] || 0) + 1 }),  {}    ) const maxCount = Math.max(...Object.values(counts)) return Object.keys(counts)  .filter((key) => counts[key] === maxCount)  .map(Number)}const arr1 = [1, 2, 3, 2, 4, 2, 5]console.log(mode(arr1)) // [2]const arr2 = [1, 2, 3, 2, 4, 4, 5]console.log(mode(arr2)) // [2, 4]

在第一個(gè)示例中，輸入數(shù)組 [1, 2, 3, 2, 4, 2, 5] 的計(jì)數(shù)為 { 1: 1, 2: 3, 3: 1, 4: 1, 5: 1 }。最高計(jì)數(shù)為 3，出現(xiàn)值 2。因此，輸入數(shù)組的模式為 [2]。

在第二個(gè)示例中，輸入數(shù)組 [1, 2, 3, 2, 4, 4, 5] 的計(jì)數(shù)為 { 1: 1, 2: 2, 3: 1, 4: 2, 5: 1 }。最高計(jì)數(shù)為 2，出現(xiàn)在值 2 和 4 中。因此，輸入數(shù)組的模式為 [2, 4]。

4. 使用擴(kuò)展運(yùn)算符和 Array.from 創(chuàng)建一個(gè)長(zhǎng)度為 n 的數(shù)組

使用擴(kuò)展運(yùn)算符和 Array.from() 創(chuàng)建一個(gè)長(zhǎng)度為 n 的新數(shù)組。生成的數(shù)組包含從 0 到 n-1 的升序排列的數(shù)字。

const n = 5const arr = [...Array.from({ length: n }, (_, index) => index)]console.log(arr) // [ 0, 1, 2, 3, 4 ]

在此示例中，n 設(shè)置為 5，因此，生成的數(shù)組 arr 的長(zhǎng)度為 5。數(shù)組的值是使用函數(shù) (_, index) => index 生成的，該函數(shù)返回?cái)?shù)組的當(dāng)前索引。因此，結(jié)果數(shù)組將為 [0, 1, 2, 3, 4]。

5. 使用解構(gòu)獲取數(shù)組的最后一個(gè)元素

此函數(shù)的目的是使用解構(gòu)獲取數(shù)組的最后一個(gè)元素。

const last = (arr) => [...arr].pop()const people = [ { name: "Alice", age: 21 }, { name: "Bob", age: 22 }, { name: "Charlie", age: 21 }, { name: "David", age: 23 }, { name: "Eve", age: 22 }]console.log(last(people)) // { name: "Eve", age: 22 }

在 last() 函數(shù)內(nèi)部，展開(kāi)運(yùn)算符 (...) 用于創(chuàng)建原始數(shù)組的副本。這是必需的，因?yàn)?pop() 方法會(huì)修改原始數(shù)組并返回刪除的元素。

然后，對(duì)數(shù)組的副本調(diào)用 pop() 方法，刪除并返回?cái)?shù)組的最后一個(gè)元素。由于在調(diào)用 pop() 方法之前復(fù)制了數(shù)組，因此不會(huì)修改原始數(shù)組。

last() 函數(shù)返回?cái)?shù)組的最后一個(gè)元素。

6. 使用布爾構(gòu)造函數(shù)檢查變量是否為真

我們函數(shù)的目的是使用布爾構(gòu)造函數(shù)檢查變量是否為真。

布爾構(gòu)造函數(shù)是 JavaScript 中的一個(gè)內(nèi)置函數(shù)，可將值轉(zhuǎn)換為布爾值。如果該值為 truthy，則布爾構(gòu)造函數(shù)返回 true。如果該值為 falsy，則布爾構(gòu)造函數(shù)返回 false。

const isTruthy = (val) => Boolean(val)console.log(isTruthy(false)) // falseconsole.log(isTruthy(0)) // falseconsole.log(isTruthy(-0)) // falseconsole.log(isTruthy(0n)) // falseconsole.log(isTruthy("")) // falseconsole.log(isTruthy(null)) // falseconsole.log(isTruthy(undefined)) // falseconsole.log(isTruthy(NaN)) // falseconsole.log(isTruthy(true)) // trueconsole.log(isTruthy({})) // trueconsole.log(isTruthy([])) // trueconsole.log(isTruthy(42)) // trueconsole.log(isTruthy("0")) // trueconsole.log(isTruthy("false")) // trueconsole.log(isTruthy(new Date())) // trueconsole.log(isTruthy(Infinity)) // true

7. 從數(shù)組中刪除虛假值

布爾構(gòu)造函數(shù)用作 filter() 方法的回調(diào)函數(shù)。如果值為真，則布爾構(gòu)造函數(shù)返回真，如果值為假，則返回假。因此，filter() 方法從原始數(shù)組中刪除所有虛假值。

const compact = (arr) => arr.filter(Boolean)const falsyArr = [false, 0, -0, 0n, "", null, undefined, NaN]const mixArr = [true, false, {}, 0, [], "", "0", null, "false", undefined, 42]console.log(compact(falsyArr)) // []console.log(compact(mixArr)) // [ true, {}, [], "0", "false", 42 ]

在 compact() 函數(shù)內(nèi)部，使用布爾構(gòu)造函數(shù)作為回調(diào)函數(shù)對(duì) arr 參數(shù)調(diào)用 filter() 方法。這將返回一個(gè)新數(shù)組，其中僅包含原始數(shù)組的真值。

compact() 函數(shù)返回新數(shù)組。

當(dāng)執(zhí)行 console.log() 語(yǔ)句時(shí)，compact(falsyArr) 的輸出是一個(gè)空數(shù)組，因?yàn)?falsyArr 數(shù)組中的所有值都是假的。compact(mixArr) 的輸出是一個(gè)數(shù)組，它只包含 mixArr 數(shù)組的真實(shí)值，即 true、一個(gè)空對(duì)象 {}、一個(gè)空數(shù)組 []、字符串“0”、字符串“false”，以及 數(shù)字 42。所有虛假值（false、0、""、null、undefined 和 NaN）都已從 mixArr 數(shù)組中刪除。

8. 將字符串?dāng)?shù)組轉(zhuǎn)換為數(shù)字

函數(shù)的目的是將字符串?dāng)?shù)組轉(zhuǎn)換為數(shù)字?jǐn)?shù)組。Number 構(gòu)造函數(shù)用作 map() 方法的回調(diào)函數(shù)。Number 構(gòu)造函數(shù)將字符串轉(zhuǎn)換為數(shù)字。

const toNumbers = (arr) => arr.map(Number)const strArr = ["1", "2", "3", "4", "5"]console.log(toNumbers(strArr)) // [ 1, 2, 3, 4, 5 ]

在 toNumbers() 函數(shù)內(nèi)部，使用 Number 構(gòu)造函數(shù)作為回調(diào)函數(shù)對(duì) arr 參數(shù)調(diào)用 map() 方法。這將返回一個(gè)包含轉(zhuǎn)換值的新數(shù)組。

9. 返回一個(gè)鍵值翻轉(zhuǎn)的對(duì)象

此函數(shù)的目的是返回一個(gè)新對(duì)象，其中翻轉(zhuǎn)了原始對(duì)象的鍵和值。

Object.entries() 方法用于從原始對(duì)象創(chuàng)建鍵值對(duì)數(shù)組。然后使用 map() 方法迭代數(shù)組中的每個(gè)鍵值對(duì)，并返回一個(gè)新的翻轉(zhuǎn)鍵值對(duì)數(shù)組。最后，使用 Object.fromEntries() 方法從翻轉(zhuǎn)的鍵值對(duì)數(shù)組中創(chuàng)建一個(gè)新對(duì)象。

const flip = (obj) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [value, key]))const myDog = { firstName: "oscar", lastName: "king", age: 3}console.log(flip(myDog)) // { 3: "age", oscar: "firstName", king: "lastName" }

在 flip() 函數(shù)內(nèi)部，對(duì) obj 參數(shù)調(diào)用 Object.entries() 方法以創(chuàng)建鍵值對(duì)數(shù)組。然后，在鍵值對(duì)數(shù)組上調(diào)用 map() 方法。對(duì)于每個(gè)鍵值對(duì)，map() 方法解構(gòu)鍵和值變量，并返回一個(gè)新數(shù)組，其中值作為第一個(gè)元素，鍵作為第二個(gè)元素。這將創(chuàng)建一個(gè)翻轉(zhuǎn)的鍵值對(duì)數(shù)組。

最后，在翻轉(zhuǎn)的鍵值對(duì)數(shù)組上調(diào)用 Object.fromEntries() 方法以使用翻轉(zhuǎn)的鍵值對(duì)創(chuàng)建一個(gè)新對(duì)象。

flip() 函數(shù)返回新對(duì)象。

執(zhí)行 console.log() 語(yǔ)句時(shí)，輸出是一個(gè)新對(duì)象，其中翻轉(zhuǎn)了原始 myDog 對(duì)象的鍵和值。firstName 鍵及其值“oscar”已翻轉(zhuǎn)為“oscar”鍵及其值“firstName”。lastName 鍵及其值“king”已翻轉(zhuǎn)為“king”鍵及其值“l(fā)astName”。age 鍵及其值 3 已翻轉(zhuǎn)為 3 鍵及其值“age”。

10. 返回一個(gè)只有特定鍵的對(duì)象

此函數(shù)的目的是返回一個(gè)新對(duì)象，該對(duì)象僅包含原始對(duì)象中指定的鍵及其對(duì)應(yīng)的值。

const pick = (obj, keys) => Object.fromEntries(  Object.entries(obj).filter(([key]) => keys.includes(key)) )const myDog = { firstName: "oscar", lastName: "king", age: 3}console.log(pick(myDog, [])) // {}console.log(pick(myDog, ["firstName"])) // { firstName: "oscar" }console.log(pick(myDog, ["firstName", "lastName"])) // { firstName: "oscar", lastName: "king" }

在 pick() 函數(shù)內(nèi)部，對(duì) obj 參數(shù)調(diào)用 Object.entries() 方法以創(chuàng)建鍵值對(duì)數(shù)組。然后，在鍵值對(duì)數(shù)組上調(diào)用 filter() 方法。對(duì)于每個(gè)鍵值對(duì)，filter() 方法解構(gòu)鍵變量，如果鍵數(shù)組包含鍵則返回 true。這將創(chuàng)建一個(gè)過(guò)濾后的鍵值對(duì)數(shù)組。

最后，在過(guò)濾后的鍵值對(duì)數(shù)組上調(diào)用 Object.fromEntries() 方法來(lái)創(chuàng)建一個(gè)僅包含指定鍵及其對(duì)應(yīng)值的新對(duì)象。pick() 函數(shù)返回新對(duì)象。

11. 返回一個(gè)只有唯一值的對(duì)象

此函數(shù) uniqueValues 將一個(gè)對(duì)象作為參數(shù)并返回一個(gè)新對(duì)象，該對(duì)象僅包含來(lái)自輸入對(duì)象的唯一值。

const uniqueValues = (obj) => Object.fromEntries(  Object.entries(obj).filter(   ([key, value], index, entries) =>    entries.findIndex(([k, v]) => v === value) === index  ) )const myDog = { id: 3, firstName: "oscar", lastName: "oscar", age: 3}console.log(uniqueValues(myDog)) // { id: 3, firstName: "oscar" }

它首先在輸入對(duì)象上調(diào)用 Object.entries() 方法以獲取鍵值對(duì)數(shù)組。然后，它使用 filter() 方法過(guò)濾條目數(shù)組，并僅返回值唯一的條目。

要檢查一個(gè)值是否唯一，它在原始條目數(shù)組上使用 findIndex() 方法。它查找與當(dāng)前過(guò)濾的條目具有相同值的第一個(gè)條目的索引。如果當(dāng)前條目的索引等于第一個(gè)匹配條目的索引，則意味著該值是唯一的，應(yīng)該包含在結(jié)果對(duì)象中。

最后，它使用 Object.fromEntries() 方法將過(guò)濾后的條目數(shù)組轉(zhuǎn)換回對(duì)象。

在示例代碼中，使用具有某些重復(fù)值的對(duì)象 myDog 調(diào)用 uniqueValues 函數(shù)。該函數(shù)返回一個(gè)僅包含唯一值并刪除重復(fù)值的新對(duì)象。生成的對(duì)象具有 id：3 和 firstName："oscar"。

關(guān)鍵詞：