0311网站建设,网站备案转入,小程序开发平台需要多少钱,广西建设厅网站专家申请表大家好#xff0c;我是若川。最近组织了源码共读活动#xff0c;感兴趣的可以加我微信 ruochuan12 参与#xff0c;目前近3000人参与#xff0c;0-5年工作经验的都可以参与学习。1.chunk转换二维数组将数组#xff08;array#xff09;拆分成多个数组#xff0c;并将这些… 大家好我是若川。最近组织了源码共读活动感兴趣的可以加我微信 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年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。分享、收藏、点赞、在看我的文章就是对我最大的支持~
