2. 程式人生 > 實用技巧 >js 陣列操作

js 陣列操作

阿新 • • 發佈：2020-09-09

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、生成新陣列

  1. 申明一個新的空陣列,利用 while 迴圈，如果陣列長度大於 0，就繼續迴圈；
  2. 每次迴圈都隨機一個在陣列長度範圍內的數，將隨機數位置上的元素 push 到新數組裡，
  3. 並利用 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

  1. 如果 compareFunction(a, b)的返回值 小於 0 ，那麼 a 會被排列到 b 之前；
  2. 如果 compareFunction(a, b)的返回值 等於 0 ，那麼 a 和 b 的相對位置不變；
  3. 如果 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)
}

廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com

陣列轉化為樹形結構

將如下資料轉化為樹狀結構

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)

相關推薦

js 陣列操作

js陣列操作 在開發中，陣列的使用場景非常多，平日中也涉及到很多陣列相關操作，對一些常見的操作方法進行總結和收藏，在開發中就能信手拈來，大大提高開發效率。

JS陣列操作方法大全

一、flat 　　flat()方法會按照一個可指定的深度遞迴遍歷陣列，並將所有元素與遍歷到的子陣列中的元素合併為一個新陣列返回，flat()方法會移除陣列中的空項。

js陣列操作方法

1. join()：將陣列中所有元素都轉化為字串並連線在一起。 2. reverse()：將陣列中的元素顛倒順序。

js陣列操作集合

1. join() 功能：將陣列中所有元素都轉化為字串並連線在一起。 2. reverse() 功能：將陣列中的元素顛倒順序。

JS陣列操作函式forEach，map，filter，find，some，every，reduce的使用

一.JS值傳遞方式 1.JS中的基本型別按值傳遞((call by value))，物件型別按共享傳遞(call by sharing，也叫按物件傳遞、按物件共享傳遞)。2.在共享傳遞中對函式形參的賦值，不會影響實參的值。

JS陣列扁平化、去重、排序操作例項詳解

本文例項講述了JS陣列扁平化、去重、排序操作。分享給大家供大家參考，具體如下：

JS 陣列和物件的深拷貝操作示例

本文例項講述了JS 陣列和物件的深拷貝操作。分享給大家供大家參考，具體如下：

JS陣列splice操作例項分析

本文例項講述了JS陣列splice操作。分享給大家供大家參考，具體如下： node2:/var/www/html/js#cat h23.js

js 陣列常用操作

目錄遍歷forfor-in迭代forEach-遍歷filter-過濾map-對映some-部分符合every-全部符合屬性和方法lengthArray.isArray-型別判斷indexOf-按元素值查詢lastIndexOf-按元素值查詢push-尾部新增元素unshift-頭部新增元素po

js對陣列操作的方法

js對陣列操作的方法 const arr = [ { id: 1, name: \'zhangsan\' }, { id: 2, name: \'lisi\' } ] push 往陣列的末尾新增一條資料

js常規陣列操作，es6 filter() 陣列過濾方法總結

1 Array.every(x=>x)是每一個都要滿足 2 3 Array.some(x=>x)是有一個滿足。 4 5 Array.find（findIndex)，返回符合條件的第一個值。

js 陣列物件操作 (filter，finde、findIndex、map)

1 <!DOCTYPE html> 2 <html lang=\"en\"> 3 4 <head> 5<meta charset=\"UTF-8\">

JS陣列屬性去重並校驗重複資料

這篇文章主要介紹了JS陣列屬性去重並校驗重複資料,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

JS 陣列基本用法入門示例解析

本文例項講述了JS 陣列基本用法。分享給大家供大家參考，具體如下： 講道理和Java差不多。

JS陣列進階示例【陣列的幾種函式用法】

本文例項講述了JS陣列的幾種函式用法。分享給大家供大家參考，具體如下：

JS陣列方法push()、pop()用法例項分析

本文例項講述了JS陣列方法push()、pop()用法。分享給大家供大家參考，具體如下：

JS陣列方法reverse()用法例項分析

本文例項講述了JS陣列方法reverse()用法。分享給大家供大家參考，具體如下：

JS陣列方法join()用法例項分析

本文例項講述了JS陣列方法join()用法。分享給大家供大家參考，具體如下： join()方法

JS陣列方法shift()、unshift()用法例項分析

本文例項講述了JS陣列方法shift()、unshift()用法。分享給大家供大家參考，具體如下：

JS陣列方法concat()用法例項分析

本文例項講述了JS陣列方法concat()用法。分享給大家供大家參考，具體如下： 陣列方法concat()