18个项目必备的JavaScript代码片段——数组篇

感兴趣的同学，欢迎加入前端有道 交流群，虽然前端之路走的并不长，但我会竭尽全力为大家答疑解惑，让我们共同努力，一同成长。

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])
// => true

isArrayEqual([6, 5, 2, 7, 1, 3], [1, 2, 3, 4, 5, 6])
// => false

9.max数组中最大值

过滤原数组中所有的非假值元素，返回数组中的最大值。

const max = arr => Math.max(...arr.filter(v => Boolean(v) || v === 0))

小栗子

max([0, -1, -2, -3, false])
// => 0

10.min数组中最小值

过滤原数组中所有的非假值元素，返回数组中的最小值

const min = arr => Math.min(...arr.filter(v => Boolean(v) || v === 0))

小栗子

min([0, -1, -2, -3, false])
// => -3

11.shuffle打乱数组

创建一个打乱的数组，使用Fisher-Yates算法打乱数组的元素。

const shuffle = ([...arr]) => {
    let m = arr.length
    while (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])
// => [ 4, 3, 3, 2, 1 ]

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 } ]