您好,欢迎访问一九零五行业门户网

【归纳总结】JS数组的常见操作方法,助你提高开发效率!

在开发中,数组的使用场景非常多,平日中也涉及到很多数组相关操作。本篇文章就归纳总结了一些常见的操作方法分享给大家,要是在开发中能信手拈来,可大大提高开发效率。
随机排序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}// a 相对于 b 的)差集let difference = new set([...a].filter((x) => !b.has(x)))// set {1, 3}
数组求和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))
【相关推荐:javascript学习教程】
以上就是【归纳总结】js数组的常见操作方法,助你提高开发效率!的详细内容。
其它类似信息

推荐信息