JavaScript 數組排序/去重/亂序/扁平化

數組API

靜態方法

Array.from()

參數: Array.from(arrayLike[, mapFn[, thisArg]])

• arrayLike

  • 想要轉換成數組的僞數組對象或可迭代對象。

• mapFn 可選

  • 若是指定了該參數，新數組中的每一個元素會執行該回調函數。

• thisArg 可選

  • 可選參數，執行回調函數 mapFn 時 this 對象。

返回值: 一個新的數組實例

Array.isArray()

Array.of()

參數: Array.of(element0[, element1[, ...[, elementN]]])

返回值: 一個新的數組實例

成員方法

concat()

參數: 數組或參數列表

const NewArray = Array1.concat(array2)
const NewArray = Array.concat(1,2,3,4)
複製代碼

返回值: 一個新的數組實例

功能: 合併數組 也可用於淺拷貝

// 淺拷貝 只拷貝最外層
const NewArray = Array1.concat()
複製代碼

every()

參數: arr.every(callback(element[, index[, array]])[, thisArg])

• callback

  用來測試每一個元素的函數，它能夠接收三個參數：

  • element

    用於測試的當前值。

  • index可選

    用於測試的當前值的索引。

  • array可選

    調用 every 的當前數組。

返回值: 若是回調函數的每一次返回都爲 truthy 值，返回 true ，不然返回 false。

[1,2,3,4,5].every(x => x > 0) // true
[1,2,3,4,5].every(x => x > 1) // false
複製代碼

some()

同every

返回值: 有一個經過就返回true

fill()

參數: arr.fill(value[, start[, end]])

• value

  用來填充數組元素的值。

• start 可選

  起始索引，默認值爲0。

• end 可選

  終止索引，默認值爲 this.length。

返回值: 修改後的數組

// 可用於初始化數組
Array(3).fill(0);   // [0, 0, 0]
複製代碼

filter()

參數: var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

返回值: 一個新的、由經過測試的元素組成的數組，若是沒有任何數組元素經過測試，則返回空數組。

[1,2,3,4,5].filter(x => x > 1) // [2, 3, 4, 5]
[1,2,3,4,5].filter(x => x > 6) // []
複製代碼

find()

參數: arr.find(callback[, thisArg])

返回值: 數組中第一個知足所提供測試函數的元素的值，不然返回 undefined。

[1,2,3,4,5].find(x => x > 6) //undefined
[1,2,3,4,5].find(x => x > 2) //3
複製代碼

findIndex()

同find 區別在於返回值

數組中經過提供測試函數的第一個元素的索引。不然，返回-1。

flat()

參數: var newArray = arr.flat([depth])

• depth: 深度 默認爲1

返回值: 一個新的數組實例。

flatMap()

flatMap() = map() + flat(1)

forEach()

對數組的每一個元素執行一次給定的函數

參數: arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

返回值: 沒有返回值 undefined

map()

效果同forEach() 區別在於map()有返回值

返回值: 原數組每一個元素執行回調函數的結果組成的新數組

includes()

返回值: boolean

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
複製代碼

indexOf()

參數: arr.indexOf(searchElement[, fromIndex])

• fromIndex(可選)

  • 指定開始查找的位置

返回值: 查找元素的索引下標 若找不到則爲-1

var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
複製代碼

join()

var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值變爲"Wind,Rain,Fire"
var myVar2 = a.join(', ');  // myVar2的值變爲"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值變爲"Wind + Rain + Fire"
var myVar4 = a.join('');    // myVar4的值變爲"WindRainFire"
複製代碼

reduce()

參數: arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

• initialValue: 初始值

返回值: 函數累計處理的結果

[0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr ) // 10
[0, 1, 2, 3, 4].reduce(((prev, curr),10) => prev + curr , 10); // 20 初始值爲10
複製代碼

reverse()

返回值: 顛倒後的數組(會直接修改原數組)

slice()

參數: arr.slice([begin[, end]])

若省略 則默認從0開始

返回值: 一個新的數組實例(不會修改原數組)

功能: 切割數組/淺拷貝/轉化爲真正的數組

Array.prototype.slice.call(arguments)
複製代碼

sort()

參數: arr.sort([compareFunction])

var numbers = [4, 2, 5, 1, 3]; 
numbers.sort((a, b) => a - b); // 升序 
numbers.sort((a, b) => b - a); // 降序 
複製代碼

返回值: 排序後的數組(修改原數組)

splice()

參數: array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• deleteCount(可選)

  整數，表示要移除的數組元素的個數。

  • >0 刪除元素

  • <0 添加元素

增長/刪除

• pop() 刪除最後一個元素 返回值爲被刪除元素

• push() 在數組最後添加一個元素 返回值爲新數組的長度

• shift() 刪除第一個元素 返回值爲被刪除的元素

• unshift() 在數組開頭添加一個元素 返回值爲新數組的長度

---

數組排序

// 升序
arr.sort((x,y) => x-y)
// 降序
arr.sort((x,y) => y-x)
複製代碼

數組去重

實現一

用 ES6 Set 的特性 沒有重複的元素

實現二

先將數組排序 而後比較相鄰元素 若是相同 就移到下一個元素

實現三

雙重for循環

比較

具體代碼以下

function getArr(arr) {
  const timer = 10000
  for (let i = 0; i < timer; i++) {
    arr[i] = Math.floor(Math.random() * 100)
  }
  return arr
}

let arr1 = []
let arr2 = []
let arr3 = []

// 生成了 3個 數組長度爲timer的數組
arr1 = getArr(arr1)
arr2 = getArr(arr2)
arr3 = getArr(arr3)


// case 1
console.time('case1')
arr = [...new Set(arr1)]
console.timeEnd('case1')

// case 2
console.time('case2')
arr2 = arr2.sort((x, y) => x - y)
const res2 = []
for (let i = 0; i < arr2.length; i++) {
  if (arr2[i] !== arr2[i + 1]) {
    res2.push(arr2[i])
  }
}
console.timeEnd('case2')

// case3
console.time('case3')
const res3 = []
for (let i = 0; i < arr3.length; i++) {
  for (let j = i + 1; j < arr3.length; j++) {
    if (arr3[i] == arr3[j]) {
      break
    }
    if (j == arr3.length - 1) {
      res3.push(arr3[i])
    }
  }
}
console.timeEnd('case3')

// output
// case1: 0.467ms
// case2: 5.254ms
// case3: 11.034ms
複製代碼

可見 利用ES6的Set是效率最高的一種方法

數組亂序

實現

取兩個數組長度範圍內的下標 交換位置

var arr = [1, 2, 3, 4, 5, 6, 7, 8]

function random(arr) {
  const timer = 1000
  var x, y, temp
  for (let i = 0; i < timer; i++) {
    x = Math.floor(Math.random() * arr.length)
    y = Math.floor(Math.random() * arr.length)
    temp = arr[x]
    arr[x] = arr[y]
    arr[y] = temp
    // ES6 寫法
    // ;[arr[x], arr[y]] = [arr[y], arr[x]]
  }
  return arr
}
複製代碼

數組扁平化

實現一

調用 Array.prototype.flat

實現二

若是都是數字 能夠用 toString 方法 轉化爲字符串 再用 split 切割

實現三

遞歸調用

var arr = [1, [1, 2, 3], 4, 5]
var res = []
function flat(arr) {
  // case 1
  // return arr.flat()

  // case 2
  // return arr
  // .toString()
  // .split(',')
  // .map((item) => +item)

  // case 3
  // for (var i = 0; i < arr.length; i++) {
  // if (arr[i] instanceof Array) {
  // flat(arr[i])
  // } else {
  // res.push(arr[i])
  // }
  // }

  // return res
}
複製代碼