JavaScript 高級單行代碼詳解
1. 通過鍵對對象數(shù)組進行分組
我們定義了一個名為 groupBy 的函數(shù),它以一個對象數(shù)組和一個鍵作為參數(shù)。該函數(shù)的目的是將數(shù)組中的對象按指定的鍵進行分組。
acc 參數(shù)是累加分組對象的累加器。obj 參數(shù)表示數(shù)組中的每個對象。
在 reduce() 方法內部,使用擴展運算符 (...acc) 返回一個新對象。這將創(chuàng)建 accumulator 對象的淺表副本,以便可以在不更改原始對象的情況下對其進行修改。
新對象的屬性設置為與 key 參數(shù)的值相匹配的鍵。該屬性的值是一個包含被迭代對象的數(shù)組。
(acc[obj[key]] || []) 表達式檢查該屬性是否存在于累加器對象中。如果不存在,則返回一個空數(shù)組。展開運算符用于將數(shù)組與正在迭代的當前對象連接起來。
最后,groupBy() 函數(shù)返回包含分組對象的累加器對象。
2. 返回數(shù)組的中位數(shù)
我們實現(xiàn)了一個名為 median 的函數(shù),它將一個數(shù)字數(shù)組作為輸入,按升序對其進行排序,并返回排序后的數(shù)組的中值。
當數(shù)組的元素個數(shù)為奇數(shù)時,排序數(shù)組的中值就是中間的元素。當數(shù)組元素個數(shù)為偶數(shù)時,中值取中間兩個元素的平均值。
第一個例子,輸入數(shù)組[3, 1, 4, 2, 5]被排序為[1, 2, 3, 4, 5],中間元素為3。因此,輸入數(shù)組的中值 是 3。
在第二個例子中,輸入數(shù)組[1,2,5,6]被排序為[1,2,5,6],中間兩個元素為2和5。因此,輸入數(shù)組的中值為 (2 + 5) / 2 = 3.5。
3.返回數(shù)組的模式
數(shù)組的眾數(shù)是數(shù)組中出現(xiàn)頻率最高的值。如果有多個值具有相同的最高頻率,則所有這些值都被視為眾數(shù)。
在第一個示例中,輸入數(shù)組 [1, 2, 3, 2, 4, 2, 5] 的計數(shù)為 { 1: 1, 2: 3, 3: 1, 4: 1, 5: 1 }。最高計數(shù)為 3,出現(xiàn)值 2。因此,輸入數(shù)組的模式為 [2]。
在第二個示例中,輸入數(shù)組 [1, 2, 3, 2, 4, 4, 5] 的計數(shù)為 { 1: 1, 2: 2, 3: 1, 4: 2, 5: 1 }。最高計數(shù)為 2,出現(xiàn)在值 2 和 4 中。因此,輸入數(shù)組的模式為 [2, 4]。
4. 使用擴展運算符和 Array.from 創(chuàng)建一個長度為 n 的數(shù)組
使用擴展運算符和 Array.from() 創(chuàng)建一個長度為 n 的新數(shù)組。生成的數(shù)組包含從 0 到 n-1 的升序排列的數(shù)字。
在此示例中,n 設置為 5,因此,生成的數(shù)組 arr 的長度為 5。數(shù)組的值是使用函數(shù) (_, index) => index 生成的,該函數(shù)返回數(shù)組的當前索引。因此,結果數(shù)組將為 [0, 1, 2, 3, 4]。
5. 使用解構獲取數(shù)組的最后一個元素
此函數(shù)的目的是使用解構獲取數(shù)組的最后一個元素。
在 last() 函數(shù)內部,展開運算符 (...) 用于創(chuàng)建原始數(shù)組的副本。這是必需的,因為 pop() 方法會修改原始數(shù)組并返回刪除的元素。
然后,對數(shù)組的副本調用 pop() 方法,刪除并返回數(shù)組的最后一個元素。由于在調用 pop() 方法之前復制了數(shù)組,因此不會修改原始數(shù)組。
last() 函數(shù)返回數(shù)組的最后一個元素。
6. 使用布爾構造函數(shù)檢查變量是否為真
我們函數(shù)的目的是使用布爾構造函數(shù)檢查變量是否為真。
布爾構造函數(shù)是 JavaScript 中的一個內置函數(shù),可將值轉換為布爾值。如果該值為 truthy,則布爾構造函數(shù)返回 true。如果該值為 falsy,則布爾構造函數(shù)返回 false。
7. 從數(shù)組中刪除虛假值
布爾構造函數(shù)用作 filter() 方法的回調函數(shù)。如果值為真,則布爾構造函數(shù)返回真,如果值為假,則返回假。因此,filter() 方法從原始數(shù)組中刪除所有虛假值。
在 compact() 函數(shù)內部,使用布爾構造函數(shù)作為回調函數(shù)對 arr 參數(shù)調用 filter() 方法。這將返回一個新數(shù)組,其中僅包含原始數(shù)組的真值。
compact() 函數(shù)返回新數(shù)組。
當執(zhí)行 console.log() 語句時,compact(falsyArr) 的輸出是一個空數(shù)組,因為 falsyArr 數(shù)組中的所有值都是假的。compact(mixArr) 的輸出是一個數(shù)組,它只包含 mixArr 數(shù)組的真實值,即 true、一個空對象 {}、一個空數(shù)組 []、字符串“0”、字符串“false”,以及 數(shù)字 42。所有虛假值(false、0、""、null、undefined 和 NaN)都已從 mixArr 數(shù)組中刪除。
8. 將字符串數(shù)組轉換為數(shù)字
函數(shù)的目的是將字符串數(shù)組轉換為數(shù)字數(shù)組。Number 構造函數(shù)用作 map() 方法的回調函數(shù)。Number 構造函數(shù)將字符串轉換為數(shù)字。
在 toNumbers() 函數(shù)內部,使用 Number 構造函數(shù)作為回調函數(shù)對 arr 參數(shù)調用 map() 方法。這將返回一個包含轉換值的新數(shù)組。
9. 返回一個鍵值翻轉的對象
此函數(shù)的目的是返回一個新對象,其中翻轉了原始對象的鍵和值。
Object.entries() 方法用于從原始對象創(chuàng)建鍵值對數(shù)組。然后使用 map() 方法迭代數(shù)組中的每個鍵值對,并返回一個新的翻轉鍵值對數(shù)組。最后,使用 Object.fromEntries() 方法從翻轉的鍵值對數(shù)組中創(chuàng)建一個新對象。
在 flip() 函數(shù)內部,對 obj 參數(shù)調用 Object.entries() 方法以創(chuàng)建鍵值對數(shù)組。然后,在鍵值對數(shù)組上調用 map() 方法。對于每個鍵值對,map() 方法解構鍵和值變量,并返回一個新數(shù)組,其中值作為第一個元素,鍵作為第二個元素。這將創(chuàng)建一個翻轉的鍵值對數(shù)組。
最后,在翻轉的鍵值對數(shù)組上調用 Object.fromEntries() 方法以使用翻轉的鍵值對創(chuàng)建一個新對象。
flip() 函數(shù)返回新對象。
執(zhí)行 console.log() 語句時,輸出是一個新對象,其中翻轉了原始 myDog 對象的鍵和值。firstName 鍵及其值“oscar”已翻轉為“oscar”鍵及其值“firstName”。lastName 鍵及其值“king”已翻轉為“king”鍵及其值“l(fā)astName”。age 鍵及其值 3 已翻轉為 3 鍵及其值“age”。
10. 返回一個只有特定鍵的對象
此函數(shù)的目的是返回一個新對象,該對象僅包含原始對象中指定的鍵及其對應的值。
在 pick() 函數(shù)內部,對 obj 參數(shù)調用 Object.entries() 方法以創(chuàng)建鍵值對數(shù)組。然后,在鍵值對數(shù)組上調用 filter() 方法。對于每個鍵值對,filter() 方法解構鍵變量,如果鍵數(shù)組包含鍵則返回 true。這將創(chuàng)建一個過濾后的鍵值對數(shù)組。
最后,在過濾后的鍵值對數(shù)組上調用 Object.fromEntries() 方法來創(chuàng)建一個僅包含指定鍵及其對應值的新對象。pick() 函數(shù)返回新對象。
11. 返回一個只有唯一值的對象
此函數(shù) uniqueValues 將一個對象作為參數(shù)并返回一個新對象,該對象僅包含來自輸入對象的唯一值。
它首先在輸入對象上調用 Object.entries() 方法以獲取鍵值對數(shù)組。然后,它使用 filter() 方法過濾條目數(shù)組,并僅返回值唯一的條目。
要檢查一個值是否唯一,它在原始條目數(shù)組上使用 findIndex() 方法。它查找與當前過濾的條目具有相同值的第一個條目的索引。如果當前條目的索引等于第一個匹配條目的索引,則意味著該值是唯一的,應該包含在結果對象中。
最后,它使用 Object.fromEntries() 方法將過濾后的條目數(shù)組轉換回對象。
在示例代碼中,使用具有某些重復值的對象 myDog 調用 uniqueValues 函數(shù)。該函數(shù)返回一個僅包含唯一值并刪除重復值的新對象。生成的對象具有 id:3 和 firstName:'oscar'。