18 JavaScript code snippets required for the project – array text

Interested students, welcome to join the front End Youdao Communication Group, although the front end road is not long, but I will try my best to answer your questions, let us work together, grow together.

1.chunkConverting a two-dimensional array

Divide an array into multiple arrays and form a new 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
}
Copy the code

chestnut

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']]
Copy the code

2.cloneArrayCloned array

Shallow copy a number of copies.

// 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]) / / [24] 1,
Copy the code

chestnut

cloneArray([1, 24])
// => [1, 24]
Copy the code

3.compactRemoves invalid values from arrays

Creates a new array containing all the non-false value elements in the original array. Examples of false, null,0, “”, undefined, and NaN are all considered “false values”.

const compact = arr= > arr.filter(Boolean)
Copy the code

chestnut

min([0.1.false.2.' '.3])
// => [1, 2, 3]
Copy the code

4.differenceAn array of difference set

Creates an array with unique array values that are not included in any other given array.

Given two arrays A and B, return the set in array A that does not contain the set in array B.

const difference = (a, b) = > {
  const s = new Set(b)
  let arr = a.filter(x= >! s.has(x))return arr
}
Copy the code

chestnut

difference([1.2.6.7], [1.2.9.5])
// => [6, 7]
Copy the code

5.intersectionThe array collection

Creates a common array of array values, each contained in the other given 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))
Copy the code

chestnut

intersection([1.2.6.7], [1.2.9.5])
// => [1, 2]
Copy the code

6.flattenFlattening an array

Split a nested array into an array.

// Flatten the Map method
const flatten = arr= >[].concat(... arr.map(v= > (Array.isArray(v) ? flatten(v) : v)))

// Flatten the Reduce method
const flatten = arr= > arr.reduce((a, c) = > a.concat(Array.isArray(c) ? flatten(c) : c), [])
Copy the code

chestnut

flatten([1[2], [3], [4.5= > []])1.2.3.4.5]
Copy the code

7.flattenDeepSpecifies a hierarchical flat array

Splits a multilevel nested array into a specified level array.

const flattenDeep = (arr, depth = 1) = > arr.reduce((a, v) = > a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), [])

// ES6 method 'flat(depth)'
[1[2[3[4]], 5]].flat(1)
// => [1, 2, [3, [4]], 5]
Copy the code

chestnut

flattenDeep([1[2[3[4]], 5]], 1)
// => [1, 2, [3, [4]], 5]
Copy the code

8.isArrayEqualCheck that the two array entries are equal

Returns a Boolean value that compares the values of the items in two arrays.

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
}
Copy the code

chestnut

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
Copy the code

9.maxMaximum value in array

Filter all non-false elements in the original array and return the maximum value in the array.

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

chestnut

max([0, -1, -2, -3.false])
/ / = > 0
Copy the code

10.minThe smallest value in the array

Filter all non-false elements in the original array and return the minimum value in the array

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

chestnut

min([0, -1, -2, -3.false])
/ / = > - 3
Copy the code

11.shuffleDisrupted array

Create a scrambled array, using the Fisher-Yates algorithm to scramble the elements of the array.

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
}
Copy the code

chestnut

shuffle([2.3.1])
// => [3, 1, 2]
Copy the code

12.sortAscAn array of ascending

Returns a new array in ascending order.

The sort() method changes the array to unicode code order by default

// Via ES6... Expand operator to shallow copy a new array
const sortAsc = arr= > [...arr].sort((a, b) = > a - b)
Copy the code

chestnut

sortAsc([3.2.3.4.1])
// => [1, 2, 3, 3, 4]
Copy the code

13.sortDescAn array in descending order

Returns a new array in descending order.

const sortDesc = arr= > [...arr].sort((a, b) = > b - a)
Copy the code

chestnut

sortDesc([3.2.3.4.1])
// => [1, 2, 3, 3, 4]
Copy the code

14.takeIntercepts the element specified at the beginning of the array

Extract n elements from array starting with the first element of the array.

const take = (arr, n = 1) = > arr.slice(0, n)
Copy the code

chestnut

take([2.3.1].2)
/ / = > [2, 3]
Copy the code

15.takeLastIntercepts the last element of the array

Extract n elements starting with the last element of array

const takeLast = (arr, n = 1) = > arr.slice(0, -n)
Copy the code

chestnut

take([2.3.1].2)
/ / = > [3, 1)
Copy the code

16.treeDataGenerate tree structured data

This function passes in an array, each id corresponding to its parent parent_id, and returns an array of tree structures

const treeData = (arr, id = null, link = 'parent_id') = > arr.filter(item= > item[link] === id).map(item= > ({ ...item, children: treeData(arr, item.id) }))
Copy the code

parameter

• arrayAn array to generate a tree structure
• idCustom attribute name
• parent_idParent custom attribute name

chestnut

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] ] } ]
Copy the code

17.uniqueArray to heavy

Create a deduplicated array copy.

const unique = (. arr) = > [...new Set(arr)]

// const unique = (... arr) => Array.from(new Set(arr))
Copy the code

chestnut

unique([1.2.2.3.4.4.5])
// => [1, 2, 3, 4, 5]
Copy the code

18.uniqueByArray objects are deduplicated

Creates a stripped copy of array array objects.

const uniqueBy = (arr, key) = > {
    return arr.reduce((acc, cur) = > {
        const ids = acc.map(item= > item[key])
        return ids.includes(cur[key]) ? acc : [...acc, cur]
    }, [])
}
Copy the code

parameter

• arrayThe array to deduplicate
• keyThe value of the object property to be repealed

chestnut

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 } ]
Copy the code