在開發(fā)中，數(shù)組的使用場景非常多，平日中也涉及到很多數(shù)組相關操作。本篇文章就歸納總結了一些常見的操作方法分享給大家，要是在開發(fā)中能信手拈來，可大大提高開發(fā)效率。

隨機排序

1、生成隨機數(shù)

遍歷數(shù)組，每次循環(huán)都隨機一個在數(shù)組長度范圍內(nèi)的數(shù)，并交換本次循環(huán)的位置和隨機數(shù)位置上的元素

function randomSort1(arr) {   for (let i = 0, l = arr.length; i < l; i++) {     let rc = parseInt(Math.random() * l)     // 讓當前循環(huán)的數(shù)組元素和隨機出來的數(shù)組元素交換位置     const empty = arr[i]     arr[i] = arr[rc]     arr[rc] = empty   }   return arr }  var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9] // 下面兩次的結果肯定是不一樣的； console.log(randomSort1(arr1)) console.log(randomSort1(arr1))

2、生成新數(shù)組

• 申明一個新的空數(shù)組,利用 while 循環(huán)，如果數(shù)組長度大于 0，就繼續(xù)循環(huán)；

• 每次循環(huán)都隨機一個在數(shù)組長度范圍內(nèi)的數(shù)，將隨機數(shù)位置上的元素 push 到新數(shù)組里，

• 并利用 splice（對 splice 不太理解的同學可以看這里）截取出隨機數(shù)位置上的元素，同時也修改了原始數(shù)組的長度；

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

• 如果 compareFunction(a, b)的返回值 小于 0 ，那么 a 會被排列到 b 之前；

• 如果 compareFunction(a, b)的返回值 等于 0 ，那么 a 和 b 的相對位置不變；

• 如果 compareFunction(a, b)的返回值 大于 0 ，那么 b 會被排列到 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))

數(shù)組對象排序

1、單個屬性排序

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、多個屬性排序

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 < b ? -1 : 1       }       return typeof a < typeof b ? -1 : 1     } else {       thro('error')     }   } },

數(shù)組扁平化

1、調(diào)用 ES6 中的 flat 方法

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

2、普通遞歸

let result = [] let flatten = function (arr) {   for (let i = 0; i < arr.length; i++) {     let item = arr[i]     if (Array.isArray(arr[i])) {       flatten(item)     } else {       result.push(item)     }   }   return result }  let arr = [1, 2, [3, 4], [5, [6, 7]]] console.log(flatten(arr))

3、利用 reduce 函數(shù)迭代

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、擴展運算符

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))

數(shù)組去重

1、利用數(shù)組的 indexOf 下標屬性來查詢

function unique(arr) {   var newArr = []   for (var i = 0; i < arr.length; i++) {     if (newArr.indexOf(arr[i]) === -1) {       newArr.push(arr[i])     }   }   return newArr } console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

2、先將原數(shù)組排序，在與相鄰的進行比較，如果不同則存入新數(shù)組。

function unique(arr) {   var formArr = arr.sort()   var newArr = [formArr[0]]   for (let i = 1; i < formArr.length; i++) {     if (formArr[i] !== formArr[i - 1]) {       newArr.push(formArr[i])     }   }   return newArr } console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

3、利用對象屬性存在的特性，如果沒有該屬性則存入新數(shù)組。

function unique(arr) {   var obj = {}   var newArr = []   for (let i = 0; i < arr.length; i++) {     if (!obj[arr[i]]) {       obj[arr[i]] = 1       newArr.push(arr[i])     }   }   return newArr } console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

4、利用數(shù)組原型對象上的 includes 方法。

function unique(arr) {   var newArr = []   for (var i = 0; i < arr.length; i++) {     if (!newArr.includes(arr[i])) {       newArr.push(arr[i])     }   }   return newArr } console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

5、利用數(shù)組原型對象上的 filter 和 includes 方法。

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、利用 ES6 的 set 方法。

function unique(arr) {   return Array.from(new Set(arr)) // 利用Array.from將Set結構轉(zhuǎn)換成數(shù)組 } console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

根據(jù)屬性去重

方法一

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

方法二

function unique(arr) {   let result = {}   let obj = {}   for (var i = 0; i < arr.length; i++) {     if (!obj[arr[i].key]) {       result.push(arr[i])       obj[arr[i].key] = true     }   } }

交集/并集/差集

1、includes 方法結合 filter 方法

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 數(shù)據(jù)結構

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}

數(shù)組求和

1、萬能的 for 循環(huán)

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、遞歸方法

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 方法

function sum(arr) {   return arr.reduce(function (prev, curr) {     return prev + curr   }, 0) }  sum([1, 2, 3, 4, 5]) // 15

類數(shù)組轉(zhuǎn)化

1、Array 的 slice 方法

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

2、ES6 的 Array.from()

let arr = Array.from(arguments)

3、擴展運算符...

let arr = [...arguments]

數(shù)組上下移動

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

數(shù)組轉(zhuǎn)化為樹形結構

將如下數(shù)據(jù)轉(zhuǎn)化為樹狀結構

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

實現(xiàn)方法

function toTree(data, parentId = 0) {   var itemArr = []   for (var i = 0; i < data.length; i++) {     var node = data[i]     if (node.pid === parentId) {       var newNode = {         ...node,         name: node.name,         id: node.id,         children: toTree(data, node.id),       }       itemArr.push(newNode)     }   }   return itemArr }  console.log(toTree(arr))

【