建站
咨詢
售后
建站咨詢
新聞中心
1. 通過鍵對對象數(shù)組進(jìn)行分組
我們定義了一個(gè)名為 groupBy 的函數(shù)，它以一個(gè)對象數(shù)組和一個(gè)鍵作為參數(shù)。該函數(shù)的目的是將數(shù)組中的對象按指定的鍵進(jìn)行分組。
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供天水網(wǎng)站建設(shè)、天水做網(wǎng)站、天水網(wǎng)站設(shè)計(jì)、天水網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、天水企業(yè)網(wǎng)站模板建站服務(wù)，十載天水做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
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ù)是累加分組對象的累加器。obj 參數(shù)表示數(shù)組中的每個(gè)對象。
在 reduce() 方法內(nèi)部，使用擴(kuò)展運(yùn)算符 (...acc) 返回一個(gè)新對象。這將創(chuàng)建 accumulator 對象的淺表副本，以便可以在不更改原始對象的情況下對其進(jìn)行修改。
新對象的屬性設(shè)置為與 key 參數(shù)的值相匹配的鍵。該屬性的值是一個(gè)包含被迭代對象的數(shù)組。
(acc[obj[key]] || []) 表達(dá)式檢查該屬性是否存在于累加器對象中。如果不存在，則返回一個(gè)空數(shù)組。展開運(yùn)算符用于將數(shù)組與正在迭代的當(dāng)前對象連接起來。
最后，groupBy() 函數(shù)返回包含分組對象的累加器對象。
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)) // 3
const 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è)長度為 n 的數(shù)組
使用擴(kuò)展運(yùn)算符和 Array.from() 創(chuàng)建一個(gè)長度為 n 的新數(shù)組。生成的數(shù)組包含從 0 到 n-1 的升序排列的數(shù)字。
const n = 5
const arr = [...Array.from({ length: n }, (_, index) => index)]
console.log(arr) // [ 0, 1, 2, 3, 4 ]
在此示例中，n 設(shè)置為 5，因此，生成的數(shù)組 arr 的長度為 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)部，展開運(yùn)算符 (...) 用于創(chuàng)建原始數(shù)組的副本。這是必需的，因?yàn)?pop() 方法會修改原始數(shù)組并返回刪除的元素。
然后，對數(shù)組的副本調(diào)用 pop() 方法，刪除并返回?cái)?shù)組的最后一個(gè)元素。由于在調(diào)用 pop() 方法之前復(fù)制了數(shù)組，因此不會修改原始數(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)) // false
console.log(isTruthy(0)) // false
console.log(isTruthy(-0)) // false
console.log(isTruthy(0n)) // false
console.log(isTruthy("")) // false
console.log(isTruthy(null)) // false
console.log(isTruthy(undefined)) // false
console.log(isTruthy(NaN)) // false
console.log(isTruthy(true)) // true
console.log(isTruthy({})) // true
console.log(isTruthy([])) // true
console.log(isTruthy(42)) // true
console.log(isTruthy("0")) // true
console.log(isTruthy("false")) // true
console.log(isTruthy(new Date())) // true
console.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ù)對 arr 參數(shù)調(diào)用 filter() 方法。這將返回一個(gè)新數(shù)組，其中僅包含原始數(shù)組的真值。
compact() 函數(shù)返回新數(shù)組。
當(dāng)執(zhí)行 console.log() 語句時(shí)，compact(falsyArr) 的輸出是一個(gè)空數(shù)組，因?yàn)?falsyArr 數(shù)組中的所有值都是假的。compact(mixArr) 的輸出是一個(gè)數(shù)組，它只包含 mixArr 數(shù)組的真實(shí)值，即 true、一個(gè)空對象 {}、一個(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ù)對 arr 參數(shù)調(diào)用 map() 方法。這將返回一個(gè)包含轉(zhuǎn)換值的新數(shù)組。
9. 返回一個(gè)鍵值翻轉(zhuǎn)的對象
此函數(shù)的目的是返回一個(gè)新對象，其中翻轉(zhuǎn)了原始對象的鍵和值。
Object.entries() 方法用于從原始對象創(chuàng)建鍵值對數(shù)組。然后使用 map() 方法迭代數(shù)組中的每個(gè)鍵值對，并返回一個(gè)新的翻轉(zhuǎn)鍵值對數(shù)組。最后，使用 Object.fromEntries() 方法從翻轉(zhuǎn)的鍵值對數(shù)組中創(chuàng)建一個(gè)新對象。
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)部，對 obj 參數(shù)調(diào)用 Object.entries() 方法以創(chuàng)建鍵值對數(shù)組。然后，在鍵值對數(shù)組上調(diào)用 map() 方法。對于每個(gè)鍵值對，map() 方法解構(gòu)鍵和值變量，并返回一個(gè)新數(shù)組，其中值作為第一個(gè)元素，鍵作為第二個(gè)元素。這將創(chuàng)建一個(gè)翻轉(zhuǎn)的鍵值對數(shù)組。
最后，在翻轉(zhuǎn)的鍵值對數(shù)組上調(diào)用 Object.fromEntries() 方法以使用翻轉(zhuǎn)的鍵值對創(chuàng)建一個(gè)新對象。
flip() 函數(shù)返回新對象。
執(zhí)行 console.log() 語句時(shí)，輸出是一個(gè)新對象，其中翻轉(zhuǎn)了原始 myDog 對象的鍵和值。firstName 鍵及其值“oscar”已翻轉(zhuǎn)為“oscar”鍵及其值“firstName”。lastName 鍵及其值“king”已翻轉(zhuǎn)為“king”鍵及其值“l(fā)astName”。age 鍵及其值 3 已翻轉(zhuǎn)為 3 鍵及其值“age”。
10. 返回一個(gè)只有特定鍵的對象
此函數(shù)的目的是返回一個(gè)新對象，該對象僅包含原始對象中指定的鍵及其對應(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)部，對 obj 參數(shù)調(diào)用 Object.entries() 方法以創(chuàng)建鍵值對數(shù)組。然后，在鍵值對數(shù)組上調(diào)用 filter() 方法。對于每個(gè)鍵值對，filter() 方法解構(gòu)鍵變量，如果鍵數(shù)組包含鍵則返回 true。這將創(chuàng)建一個(gè)過濾后的鍵值對數(shù)組。
最后，在過濾后的鍵值對數(shù)組上調(diào)用 Object.fromEntries() 方法來創(chuàng)建一個(gè)僅包含指定鍵及其對應(yīng)值的新對象。pick() 函數(shù)返回新對象。
11. 返回一個(gè)只有唯一值的對象
此函數(shù) uniqueValues 將一個(gè)對象作為參數(shù)并返回一個(gè)新對象，該對象僅包含來自輸入對象的唯一值。
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' }
它首先在輸入對象上調(diào)用 Object.entries() 方法以獲取鍵值對數(shù)組。然后，它使用 filter() 方法過濾條目數(shù)組，并僅返回值唯一的條目。
要檢查一個(gè)值是否唯一，它在原始條目數(shù)組上使用 findIndex() 方法。它查找與當(dāng)前過濾的條目具有相同值的第一個(gè)條目的索引。如果當(dāng)前條目的索引等于第一個(gè)匹配條目的索引，則意味著該值是唯一的，應(yīng)該包含在結(jié)果對象中。
最后，它使用 Object.fromEntries() 方法將過濾后的條目數(shù)組轉(zhuǎn)換回對象。
在示例代碼中，使用具有某些重復(fù)值的對象 myDog 調(diào)用 uniqueValues 函數(shù)。該函數(shù)返回一個(gè)僅包含唯一值并刪除重復(fù)值的新對象。生成的對象具有 id：3 和 firstName：'oscar'。
分享題目：JavaScript高級單行代碼詳解
當(dāng)前URL：http://fisionsoft.com.cn/article/coipejp.html
