大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以加我微信?ruochuan12?參與，目前近3000人參與，0-5年工作經驗的都可以參與學習。
1.chunk轉換二維數組
將數組（array）拆分成多個數組，并將這些拆分的多個數組組成一個新數組。
function?chunk(array,?count?=?1)?{let?pages?=?[]array.forEach((item,?index)?=>?{const?page?=?Math.floor(index?/?count)if?(!pages[page])?pages[page]?=?[]pages[page].push(item)})return?pages
}小栗子
chunk([1,?2,?3,?4,?5,?6,?7],?2)
=>?[[1,?2],?[3,?4],?[5,?6],?[7]]chunk(['a',?'b',?'c',?'d'],?3)
=>?[['a',?'b',?'c'],?['d']]2.cloneArray克隆數組
淺拷貝一份數組副本。
//?ES6?...
const?cloneArray?=?arr?=>?[...arr]//?ES6?Array.from
const?cloneArray?=?arr?=>?Array.from(arr)//?concat()
const?cloneArray?=?arr?=>?[].concat(arr)//?map()
const?cloneArray?=?arr?=>?arr.map(x?=>?x)cloneArray([1,?24])?//?[1,?24]小栗子
cloneArray([1,?24])
//?=>?[1,?24]3.compact去除數組中的無效值
創建一個新數組，包含原數組中所有的非假值元素。例如false, null,0, "", undefined, 和 NaN 都是被認為是“假值”。
const?compact?=?arr?=>?arr.filter(Boolean)小栗子
min([0,?1,?false,?2,?'',?3])
//?=>?[1,?2,?3]4.difference 數組差集
創建一個具有唯一array值的數組，每個值不包含在其他給定的數組中。
假設有 A 和 B 兩個數組，返回 A 數組中的集合不包含 B 數組中的集合。
const?difference?=?(a,?b)?=>?{const?s?=?new?Set(b)let?arr?=?a.filter(x?=>?!s.has(x))return?arr
}小栗子
difference([1,?2,?6,?7],?[1,?2,?9,?5])
//?=>?[?6,?7?]5.intersection數組集合
創建一個共有的array值的數組，每個值包含在其他給定的數組中。
const?intersection?=?(a,?b)?=>?{const?s?=?new?Set(b)return?a.filter(x?=>?s.has(x))
}
//?ES6?includes
const?intersection?=?(arr,?values)?=>?arr.filter(v?=>?values.includes(v))小栗子
intersection([1,?2,?6,?7],?[1,?2,?9,?5])
//?=>?[?1,?2?]6.flatten扁平化數組
將多層嵌套數組（array）拆分成一個數組。
//?扁平化??Map?方法
const?flatten?=?arr?=>?[].concat(...arr.map(v?=>?(Array.isArray(v)???flatten(v)?:?v)))//?扁平化??reduce?方法
const?flatten?=?arr?=>?arr.reduce((a,?c)?=>?a.concat(Array.isArray(c)???flatten(c)?:?c),?[])小栗子
flatten([1,?[2],?[3],?[4,?5]])=>?[1,?2,?3,?4,?5]7.flattenDeep指定層級扁平化數組
將多層嵌套數組（array）拆分成指定層級數組。
const?flattenDeep?=?(arr,?depth?=?1)?=>?arr.reduce((a,?v)?=>?a.concat(depth?>?1?&&?Array.isArray(v)???flatten(v,?depth?-?1)?:?v),?[])//?ES6方法?`flat(depth)`
[1,?[2,?[3,?[4]],?5]].flat(1)
//?=>?[1,?2,?[3,?[4]],?5]小栗子
flattenDeep([1,?[2,?[3,?[4]],?5]],?1)
//?=>?[1,?2,?[3,?[4]],?5]8.isArrayEqual檢查兩個數組各項相等
比較兩個數組內的各項值是否相等，返回一個Boolean值。
const?isArrayEqual?=?(a,?b,?has?=?true)?=>?{if?(a.length?!==?b.length)?return?(has?=?false)const?s?=?new?Set(b)if?(a.find(x?=>?!s.has(x)))?return?(has?=?false)return?has
}小栗子
isArrayEqual([6,?5,?2,?4,?1,?3],?[1,?2,?3,?4,?5,?6])
//?=>?trueisArrayEqual([6,?5,?2,?7,?1,?3],?[1,?2,?3,?4,?5,?6])
//?=>?false9.max數組中最大值
過濾原數組中所有的非假值元素，返回數組中的最大值。
const?max?=?arr?=>?Math.max(...arr.filter(v?=>?Boolean(v)?||?v?===?0))小栗子
max([0,?-1,?-2,?-3,?false])
//?=>?010.min數組中最小值
過濾原數組中所有的非假值元素，返回數組中的最小值
const?min?=?arr?=>?Math.min(...arr.filter(v?=>?Boolean(v)?||?v?===?0))小栗子
min([0,?-1,?-2,?-3,?false])
//?=>?-311.shuffle打亂數組
創建一個打亂的數組，使用Fisher-Yates算法打亂數組的元素。
const?shuffle?=?([...arr])?=>?{let?m?=?arr.lengthwhile?(m)?{const?i?=?Math.floor(Math.random()?*?m--);[arr[m],?arr[i]]?=?[arr[i],?arr[m]]}return?arr
}小栗子
shuffle([2,?3,?1])
//?=>?[3,?1,?2]12.sortAsc數組升序
返回升序后的新數組
sort()方法會改變原數組，默認按 unicode 碼順序排列
//?通過ES6?...展開運算符淺拷貝一份新數組
const?sortAsc?=?arr?=>?[...arr].sort((a,?b)?=>?a?-?b)小栗子
sortAsc([3,?2,?3,?4,?1])
//?=>?[?1,?2,?3,?3,?4?]13.sortDesc數組降序
返回降序后的新數組。
const?sortDesc?=?arr?=>?[...arr].sort((a,?b)?=>?b?-?a)小栗子
sortDesc([3,?2,?3,?4,?1])
//?=>?[?1,?2,?3,?3,?4?]14.take截取數組開始指定的元素
從 array 數組的最開始一個元素開始提取 n 個元素。
const?take?=?(arr,?n?=?1)?=>?arr.slice(0,?n)小栗子
take([2,?3,?1],?2)
//?=>?[2,?3]15.takeLast截取數組末尾元素
從 array 數組的最后一個元素開始提取 n 個元素
const?takeLast?=?(arr,?n?=?1)?=>?arr.slice(0,?-n)小栗子
take([2,?3,?1],?2)
//?=>?[3,?1]16.treeData生成樹結構數據
該函數傳入一個數組， 每項id對應其父級數據parent_id，返回一個樹結構數組
const?treeData?=?(arr,?id?=?null,?link?=?'parent_id')?=>?arr.filter(item?=>?item[link]?===?id).map(item?=>?({?...item,?children:?treeData(arr,?item.id)?}))參數
array要生成樹結構的數組id自定義屬性名parent_id父級自定義屬性名
小栗子
const?comments?=?[{?id:?1,?parent_id:?null?},{?id:?2,?parent_id:?1?},{?id:?3,?parent_id:?1?},{?id:?4,?parent_id:?2?},{?id:?5,?parent_id:?4?},
]treeData(comments)//?=>?[?{?id:?1,?parent_id:?null,?children:?[?[Object],?[Object]?]?}?]17.unique數組去重
創建一個去重后的 array 數組副本。
const?unique?=?(...arr)?=>?[...new?Set(arr)]//?const?unique?=?(...arr)?=>?Array.from(new?Set(arr))小栗子
unique([1,?2,?2,?3,?4,?4,?5])
//?=>?[?1,?2,?3,?4,?5?]18.uniqueBy數組對象去重
創建一個去重后的 array 數組對象副本。
const?uniqueBy?=?(arr,?key)?=>?{return?arr.reduce((acc,?cur)?=>?{const?ids?=?acc.map(item?=>?item[key])return?ids.includes(cur[key])???acc?:?[...acc,?cur]},?[])
}參數
array要去重的數組key要去重的對象屬性值
小栗子
const?responseList?=?[{?id:?1,?a:?1?},{?id:?2,?a:?2?},{?id:?3,?a:?3?},{?id:?1,?a:?4?},{?id:?2,?a:?2?},{?id:?3,?a:?3?},{?id:?1,?a:?4?},{?id:?2,?a:?2?},{?id:?3,?a:?3?},{?id:?1,?a:?4?},{?id:?2,?a:?2?},{?id:?3,?a:?3?},{?id:?1,?a:?4?},
]uniqueBy(responseList,?'id')//?=>?[?{?id:?1,?a:?1?},?{?id:?2,?a:?2?},?{?id:?3,?a:?3?}?]最近組建了一個湖南人的前端交流群，如果你是湖南人可以加我微信?ruochuan12?私信 湖南 拉你進群。
推薦閱讀
1個月，200+人，一起讀了4周源碼
我歷時3年才寫了10余篇源碼文章，但收獲了100w+閱讀
老姚淺談：怎么學JavaScript？
我在阿里招前端，該怎么幫你（可進面試群）
·················?若川簡介?·················
你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》10余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助1000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。
識別上方二維碼加我微信、拉你進源碼共讀群
今日話題
略。分享、收藏、點贊、在看我的文章就是對我最大的支持~
