关于javascript:解锁各种js数组骚操作总有你想要的

在开发中，数组的应用场景十分多，素日中也波及到很多数组相干操作，对一些常见的操作方法进行总结和珍藏，在开发中就能信手拈来，大大提高开发效率。

本文在 gitthub 做了收录 github.com/Michael-lzg…

1、生成随机数

遍历数组，每次循环都随机一个在数组长度范畴内的数，并替换本次循环的地位和随机数地位上的元素

function randomSort1(arr) {for (let i = 0, l = arr.length; i < l; i++) {let rc = parseInt(Math.random() * l)
    // 让以后循环的数组元素和随机进去的数组元素替换地位
    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、生成新数组

申明一个新的空数组, 利用 while 循环，如果数组长度大于 0，就持续循环；
每次循环都随机一个在数组长度范畴内的数，将随机数地位上的元素 push 到新数组里，
并利用 splice（对 splice 不太了解的同学能够看这里）截取出随机数地位上的元素，同时也批改了原始数组的长度；

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

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

1、调用 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 函数迭代

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

1、利用数组的 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、先将原数组排序，在与相邻的进行比拟，如果不同则存入新数组。

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、利用对象属性存在的个性，如果没有该属性则存入新数组。

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、利用数组原型对象上的 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、利用数组原型对象上的 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 构造转换成数组
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

办法一

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 数据结构

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}

// 差集
let difference = new Set([...a].filter((x) => !b.has(x)))
// Set {1, 3, 4, 5}

1、万能的 for 循环

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

1、Array 的 slice 办法

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

2、ES6 的 Array.from()

let arr = Array.from(arguments)

3、扩大运算符 …

let arr = [...arguments]

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

将如下数据转化为树状构造

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

实现办法

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

总结 18 个 webpack 插件，总会有你想要的！
搭建一个 vue-cli4+webpack 挪动端框架（开箱即用）
从零构建到优化一个相似 vue-cli 的脚手架
封装一个 toast 和 dialog 组件并公布到 npm
从零开始构建一个 webpack 我的项目
总结几个 webpack 打包优化的办法
总结 vue 常识体系之高级利用篇
总结 vue 常识体系之实用技巧
总结 vue 常识体系之根底入门篇
总结挪动端 H5 开发罕用技巧（干货满满哦！）

关于javascript:解锁各种js数组骚操作总有你想要的

随机排序

数组对象排序

数组扁平化

数组去重

依据属性去重

交加 / 并集 / 差集

数组求和

类数组转化

数组高低挪动

数组转化为树形构造

举荐文章

Just My Socks（注册教程内含优惠码）

关于javascript:解锁各种js数组骚操作总有你想要的

随机排序

数组对象排序

数组扁平化

数组去重

依据属性去重

交加 / 并集 / 差集

数组求和

类数组转化

数组高低挪动

数组转化为树形构造

举荐文章

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）