[Summary] Common operation methods of JS arrays to help you improve development efficiency!

In development, there are many usage scenarios for arrays, and many array-related operations are also involved in daily life. This article summarizes some common operation methods and shares them with you. If you can use them at your fingertips during development, you can greatly improve development efficiency.

Random sorting

---

1. Generate random numbers

Traverse the array, each Each cycle randomly selects a number within the array length range, and exchanges the position of this cycle with the elements at the random number position

function randomSort1(arr) {
  for (let i = 0, l = arr.length; i <p><strong>2. Generate a new array</strong></p>

• Declare a new empty array, use a while loop, if the array length is greater than 0, continue to loop;

• Each loop will randomize one within the array length range The number inside, push the element at the random number position into the new array,

• and use splice (students who don’t understand splice can read here) to intercept the random number position elements, and also modifies the length of the original array;

function randomSort2(arr) {
  var mixedArr = []
  while (arr.length > 0) {
    let rc = parseInt(Math.random() * arr.length)
    mixedArr.push(arr[rc])
    arr.splice(rc, 1)
  }
  return mixedArr
}
// 例子
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(randomSort2(arr1))

3, arr.sort

• If compareFunction If the return value of (a, b) is less than 0, then a will be arranged before b;

• If the return value of compareFunction(a, b) is equal to 0, then a and b The relative position remains unchanged;

• If the return value of compareFunction(a, b) is greater than 0, then b will be arranged before a;

function randomSort3(arr) {
  arr.sort(function (a, b) {
    return Math.random() - 0.5
  })
  return arr
}
// 例子
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(randomSort3(arr1))

Array object sorting

---

1. Sorting of a single attribute

function compare(property) {
  return function (a, b) {
    let value1 = a[property]
    let value2 = b[property]
    return value1 - value2
  }
}

let arr = [
  { name: 'zopp', age: 10 },
  { name: 'gpp', age: 18 },
  { name: 'yjj', age: 8 },
]

console.log(arr.sort(compare('age')))

2. Sorting of multiple attributes

function by(name, minor) {
  return function(o, p) {
    let a, b
    if (o && p && typeof o === 'object' && typeof p === 'object') {
      a = o[name]
      b = p[name]
      if (a === b) {
        return typeof minor === 'function' ? minor(o, p) : 0
      }
      if (typeof a === typeof b) {
        return a <h2 id="strong-Array-flattening-strong"><strong>Array flattening</strong></h2><hr><p><strong>1. Call the flat method in ES6</strong><br></p><pre class="brush:php;toolbar:false">ary = arr.flat(Infinity)

console.log([1, [2, 3, [4, 5, [6, 7]]]].flat(Infinity))

2. Ordinary recursion

let result = []
let flatten = function (arr) {
  for (let i = 0; i <p><strong>3. Iteration using reduce function</strong></p><pre class="brush:php;toolbar:false">function flatten(arr) {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
  }, [])
}

let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))

4.Extension operator

function flatten(arr) {
  while (arr.some((item) => Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
}

let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))

Array deduplication

---

1. Use the indexOf subscript attribute of the array to query

function unique(arr) {
  var newArr = []
  for (var i = 0; i <p><strong>2. Sort the original array first, then compare it with the adjacent ones. If they are different, store them in the new array. </strong></p><pre class="brush:php;toolbar:false">function unique(arr) {
  var formArr = arr.sort()
  var newArr = [formArr[0]]
  for (let i = 1; i <p><strong>3. Use the existing characteristics of the object's attributes. If there is no such attribute, store it in a new array. </strong></p><pre class="brush:php;toolbar:false">function unique(arr) {
  var obj = {}
  var newArr = []
  for (let i = 0; i <p><strong>4. Use the includes method on the array prototype object. </strong></p><pre class="brush:php;toolbar:false">function unique(arr) {
  var newArr = []
  for (var i = 0; i <p><strong>5. Use the filter and includes methods on the array prototype object. </strong></p><pre class="brush:php;toolbar:false">function unique(arr) {
  var newArr = []
  newArr = arr.filter(function (item) {
    return newArr.includes(item) ? '' : newArr.push(item)
  })
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

6. Use the set method of ES6.

function unique(arr) {
  return Array.from(new Set(arr)) // 利用Array.from将Set结构转换成数组
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

Deduplication based on attributes

---

Method 1

function unique(arr) {
  const res = new Map()
  return arr.filter((item) => !res.has(item.productName) && res.set(item.productName, 1))
}

Method 2

function unique(arr) {
  let result = {}
  let obj = {}
  for (var i = 0; i <h2 id="strong-Intersection-Union-Difference-strong"><strong>Intersection/Union/Difference</strong></h2><hr><p><strong>1. Includes method combined with filter method</strong><br> </p><pre class="brush:php;toolbar:false">let a = [1, 2, 3]
let b = [2, 4, 5]

// 并集
let union = a.concat(b.filter((v) => !a.includes(v)))
// [1,2,3,4,5]

// 交集
let intersection = a.filter((v) => b.includes(v))
// [2]

// 差集
let difference = a.concat(b).filter((v) => !a.includes(v) || !b.includes(v))
// [1,3,4,5]

2. ES6 Set data structure

let a = new Set([1, 2, 3])
let b = new Set([2, 4, 5])

// 并集
let union = new Set([...a, ...b])
// Set {1, 2, 3, 4,5}

// 交集
let intersect = new Set([...a].filter((x) => b.has(x)))
// set {2}

// a 相对于 b 的）差集
let difference = new Set([...a].filter((x) => !b.has(x)))
// Set {1, 3}

Array summation

---

1. Universal for loop

function sum(arr) {
  var s = 0
  for (var i = arr.length - 1; i >= 0; i--) {
    s += arr[i]
  }
  return s
}

sum([1, 2, 3, 4, 5]) // 15

2. Recursive method

function sum(arr) {
  var len = arr.length
  if (len == 0) {
    return 0
  } else if (len == 1) {
    return arr[0]
  } else {
    return arr[0] + sum(arr.slice(1))
  }
}

sum([1, 2, 3, 4, 5]) // 15

3. ES6 reduce method

function sum(arr) {
  return arr.reduce(function (prev, curr) {
    return prev + curr
  }, 0)
}

sum([1, 2, 3, 4, 5]) // 15

Array-like conversion

---

1. Array’s slice method

let arr = Array.prototype.slice.call(arguments)

2. ES6’s Array.from()

let arr = Array.from(arguments)

3. Extension operator...

let arr = [...arguments]

Move array up and down

---

function swapItems(arr, index1, index2) {
  arr[index1] = arr.splice(index2, 1, arr[index1])[0]
  return arr
}

function up(arr, index) {
  if (index === 0) {
    return
  }
  this.swapItems(arr, index, index - 1)
}

function down(arr, index) {
  if (index === this.list.length - 1) {
    return
  }
  this.swapItems(arr, index, index + 1)
}

Convert the array into a tree structure

---

Convert the following data into a tree structure

let arr = [
  {
    id: 1,
    name: '1',
    pid: 0,
  },
  {
    id: 2,
    name: '1-1',
    pid: 1,
  },
  {
    id: 3,
    name: '1-1-1',
    pid: 2,
  },
  {
    id: 4,
    name: '1-2',
    pid: 1,
  },
  {
    id: 5,
    name: '1-2-2',
    pid: 4,
  },
  {
    id: 6,
    name: '1-1-1-1',
    pid: 3,
  },
  {
    id: 7,
    name: '2',
  },
]

Implementation method

function toTree(data, parentId = 0) {
  var itemArr = []
  for (var i = 0; i <p> [Related recommendations: <a href="https://www.php.cn/course/list/17.html" target="_blank">javascript learning tutorial</a><strong>]</strong></p>

The above is the detailed content of [Summary] Common operation methods of JS arrays to help you improve development efficiency!. For more information, please follow other related articles on the PHP Chinese website!