經典技巧之JavaScript陣列操作（整理分享）

本篇文章給大家帶來了關於JavaScript中陣列的相關操作，主要包括Array物件原型方法以及常用操作去重、扁平化、排序等，希望對大家有幫助。

JavasScript陣列操作, 主要包括Array物件原型方法以及常用操作去重、扁平化、排序等

Array.prototype

forEach

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

callback為陣列中每個元素執行的函數, 該函數接收一至三個引數
currentValue陣列中正在處理等當前元素的索引
array可選[表示正在操作的陣列]
thisArg可選[當執行回撥函數時, 用作this的值, 當使用箭頭函數時此引數將被忽略]

forEach()對陣列的每一個元素執行一次給定的函數

let arr = [1, 2, 3, 4, 5];
let obj = {a: 1};
arr.forEach(function(currentValue, index, array) {
  console.log("當前值：", currentValue);// 1
  console.log("當前值索引：", index);// 0
  console.log("當前處理陣列：", array); // (5)[1, 2, 3, 4, 5]
  console.log("當前this指向：", this);// {a: 1}
  console.log("結束一次回撥, 無需返回值");
  console.log("");
}, obj);
console.log(arr);// [1, 2, 3, 4, 5]不改變原陣列

map

arr.map(callback(currentValue [, index [, array]])[, thisArg])

callback為陣列每個元素執行的函數, 該函數接收一至三個引數
currentValue陣列中正在處理的當前元素
index可選[陣列中正在處理的當前元素的索引]
array可選[正在操作的陣列]
thisArg可選[當執行回撥函數時, 用作this的值, 當使用箭頭函數時此函數將被忽略]

map()建立一個新陣列, 其結果是該陣列中的每個元素都被呼叫一次提供的函數後的返回值

let arr = [1, 2, 3, 4, 5];
let obj = {a: 1};
let newArr = arr.map(function(currentValue, index, array) {
  console.log("當前值：", currentValue);// 1
  console.log("當前值索引：", index);// 0
  console.log("當前處理陣列：", array); // (5)[1, 2, 3, 4, 5]
  console.log("當前this指向: ", this); // {a: 1}
  console.log("");
  return crrentValue + 10;
}, obj);
console.log(newArr);// [11, 12, 13, 14, 15]
console.log(arr);// [1, 2, 3, 4, 5]不改變原陣列

push

arr.push(element1[,..., elementN])

elementN被新增到陣列末尾的元素

push()將一個或多個元素新增到陣列的末尾, 並返回該陣列的長度

let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.push('f', 'g'));// 7
console.log(arr);// ["a", "b", "c", "d", "e", "f", "g"] 改變原陣列

pop

pop()陣列中刪除最後一個元素, 並返回該元素的值, 當陣列為空時返回undefind, 此方法更改陣列的長度

let arr = [1, 2, 3, 4, 5];
console.log(arr.pop());// 5
console.log(arr);// [1, 2, 3, 4] 改變原陣列

shift

shift()從陣列中刪除第一個元素, 並返回該元素的值, 該方法會改變原陣列

let arr = [1, 2, 3, 4, 5]
console.log(arr.shift());// 1
console.log(arr);// [2, 3, 4, 5] 改變原陣列

unshift

arr.unshift(element1[, ..., elementN])

unshift()將一個或多個元素新增到陣列的開頭, 並返回該陣列的長度, 該方法修改原有陣列

let arr = [1, 2, 3, 4, 5]
console.log(arr.unshift(-1, 0));// 7
console.log(arr);// [-1, 0, 1, 2, 3, 4, 5] 改變原陣列

splice

arrar.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start指定修改的開始位置, 如果超出了陣列的長度, 則從陣列末尾開始新增內容; 如果是負值, 則表示從陣列末尾開始的第幾位(從-1計數, 這意味著-n是倒數第n個元素並且等價於array.length-1); 如果負數的絕對值大於陣列的長度, 則表示開始位置為第0位

deleteCount可選[整數], 表示要移除的陣列元素的個數. 如果deleteCount大於start之後元素的總數, 則從statr後面的元素都將被刪除(含第start位). 如果deleteCount被省略, 或者它的值大於等於array.length-start(也就是說, 如果它大於或者等於start之後的所有元素的數量), 那麼start之後陣列的所有元素都會被刪除

item1, item2, ...可選[要新增進陣列的元素, 從start位置開始. 如果不指定, 則splice()將只刪除陣列元素]

splice()通過刪除或替換現有元素或者原地新增新的元素來修改陣列, 並以陣列形式返回被修改的內容, 此方法會改變原陣列

let arr = [1, 2, 3, 4, 5]
console.log(arr.splice(1, 1));// [2]
console.log(arr);// [1, 3, 4, 5] 改變原陣列

slice

arr.slice([begin[, end]])

begin可選[提取起始處的索引] 從該索引開始提取原陣列元素. 如果該引數為負數, 則表示從原陣列中的倒數第幾個元素開始提取, 如果省略begin, 則slice從索引0開始; 如果begin大於原陣列的長度, 則會返回空陣列

end可選[提取終止處的索引], 在該索引處結束提取原陣列元素. slice會提取原陣列中索引從begin到end到所有元素, 包含begin, 但不包含end. 如果end 被省略, 則slice會一直提取到原陣列末尾, 如果end大於陣列的長度, slice也會一直提取到陣列末尾

slice()返回一個新的陣列物件, 這一物件是一個由begin和end決定到原陣列的淺拷貝, 包括begin, 不包括end, 原始陣列不會被改變

let arr = [1, 2, 3, 4, 5];
console.log(arr.sclice(1, 3));// [2, 3]
console.log(arr);// [1, 2, 3, 4, 5] 不改變原陣列

concat

let new_array = old_array.concat(value[, value2[, ...[, valueN]]])

valueN可選[], 將陣列或值連線成新陣列, 如果省略了valueN引數, 則concat會返回一個它所呼叫的已存在的陣列的淺拷貝

concat()用於合併兩個或多個陣列, 此方法不會更改現有陣列, 而是返回一個新陣列

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3);// [1, 2, 3, 4, 5, 6]
console.log(arr1);// [1, 2, 3] 不改變原陣列

join

arr.join([separator])

separator可選指定一個字串來分隔陣列的每個元素

join()將一個陣列(或一個類陣列物件)的所有元素連線成一個字串並返回這個字串. 如果陣列只有一個專案, 那麼將返回該專案而不使用分隔符

let arr = ['a', 'b', 'c'];
console.log(arr.join("&"));// a&b&c
console.log(arr);// ["a", "b", "c"] 不改變陣列

sort

arr.sort([compareFunction])

compareFunction可選用來指定按某種順序進行排列的函數. 如果省略, 元素按照轉換為第字串的各個字元的Unicode進行排序

firstEl第一個用於比較的元素

secondEl第二個用於比較的元素

sort()用原地演演算法對陣列的元素進行排序, 並返回陣列. 預設排序順序是在將元素轉換為字串, 然後比較它們的UTF-16程式碼單元值序列時構建的

let arr = [1, 2, 3, 4, 5];
console.log(arr.sort((a, b) => b - a));// [5, 4, 3, 2, 1]
console.log(arr);// [5, 4, 3, 2, 1] 改變原陣列

reverse

reverse()將陣列中元素的位置顛倒, 並返回該陣列, 該方法會改變原陣列

let arr = [1, 2, 3, 4, 5];
console.log(arr.reverse());// [5, 4, 3, 2, 1]
console.log(arr);// [5, 4, 3, 2, 1] 改變原陣列

every

every()測試一個陣列內的所有元素是否都能通過某個指定函數的測試, 返回一個布林值

let arr = [1, 2, 3, 4, 5];
console.log(arr.every(currentValue => currentValue > 1));// false
console.log(arr);// 不改變原陣列

some

some()測試陣列中是不是至少有1個元素通過了提供的測試函數, 返回一個Boolean型別的值

let arr = [1, 2, 3 ,4 ,5];
console.log(arr.some(currentValue => currentValue > 1));// true
console.log(arr);// [1, 2, 3, 4, 5] 不改變原陣列

filter

filter()建立一個新陣列, 其包含通過所提供的測試函數的所有元素

let arr = [1, 2, 3, 4, 5];
console.log(arr.filter(currentValue => currentValue > 2));// [3, 4, 5]
console.log(arr);// [1, 2, 3, 4, 5] 不改變原陣列

find

find()返回陣列中滿足提供的測試函數的第一個元素的值, 否則返回undefined

let arr = [1, 2, 3, 4, 5];
console.log(arr.find(currentValue => currentValue > 2));// 3
console.log(arr);// [1, 2, 3, 4, 5] 不改變原陣列

findIndex

findIndex()返回陣列中滿足提供的測試函數的第一個元素的索引, 否則返回-1

let arr = [1, 2, 3, 4, 5];
console.log(arr.findIndex(currentValue => currentValue > 2));// 2
console.log(arr);// [1, 2, 3, 4, 5] 不改變原陣列

includes

includes()用來判斷一個陣列是否包含一個指定的值, 如果包含則返回true, 否則返回false

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2));// true
console.log(arr);// [1, 2, 3, 4, 5] 不改變原陣列

indexOf

indexof()返回指定元素在陣列中的第一個索引, 否則返回-1

let arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(2));// 1
console.log(arr);// [1, 2, 3, 4, 5] 不改變原陣列

lastIndexOf

lastIndexOf()返回指定元素在陣列中的的最後一個索引, 如果不存在則返回-1

let arr = [1, 2, 3, 2, 1];
console.log(arr.lastIndexOf(2));// 3
console.log(arr);// [1, 2, 3, 2, 1] 不改變原陣列

fill

fill()用一個固定值填充一個陣列從起始索引到終止索引到全部元素, 不包括終止索引

let arr = [1, 2, 3, 4, 5];
console.log(arr.fill(0, 0, 5));// [0, 0, 0, 0, 0]
console.log(arr);// [0, 0, 0, 0 ,0] 改變陣列

flat

flat()會按照一個可指定的深度遞迴遍歷陣列, 並將所有元素與遍歷到的子陣列中的元素合併為一個新陣列返回

let arr = [1, 2, [3, 4, [5]]];
console.log(arr.flat(2));// [1, 2, 3, 4, 5]
console.log(arr);// [1, 2, [3, 4, [5]]] 不改變原陣列

keys

keys()返回一個包含陣列中每個索引鍵的Array Iterator物件

let arr = [1, 2, 3, 4, 5];
let iterator = arr.keys();
for (const key of iterator) {
  console.log(key);
  // 0
  // 1
  // 2
}
console.log(arr);// [1, 2, 3, 4, 5] 不改變原陣列

常用操作

陣列去重

使用物件

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let obj = {};
let newArr = [];
arr.forEach(v => {
  if(!ogj[v]) {
    ogj[v] = 1;
    newArr.push(v);
  }
})
console.log(newArr);// [1, 2, 3, 5]

使用Set

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let newArr = Array.from(new Set(arr));
// let newArr = [...(new Set(arr))];// 使用ES6解構賦值
console.log(newArr);// [1, 2, 3, 5]

扁平化陣列

使用flat

let arr = [1, 2, [3, 4, [5]]];
let newArr = arr.flat(2);
console.log(newArr);// [1, 2, 3, 4, 5]

遞迴實現flat

function _flat(arr, maxN = 1, curN = 0) {
  let newArr = [];
  if (curN >= maxN) return arr;
  arr.forEach((v, i, array) => {
    if (Array.isArray(v)) {
      newArr.push(..._flat(v, maxN, curN + 1));
    } else newArr.push(v);
  })
  return newArr;
}
let arr = [1, 2, [3, 4, [5]]];
let newArr = _flat(arr, 1);// 扁平化一層
console.log(newArr);// [1, 2, 3, 4, [5]]

統計一個字串中出現最多的字元

使用陣列將字元的ASCII碼作為key製作桶

let s = "ASASRKIADAA";
let arr = [];
let base = 65;// A-Z 65-90 a-z 97-122
Array.prototype.forEach.call(s, (v) => {
  let ascii = v.charCodeAt(0) - base;
  if (arr[ascii]) {
    ++arr[ascii];
  } else arr[ascii] = 1;
})
let max = 0;
let maxIndex = 0;
arr.forEach((v, i) => {
  if (v > max) {
    max = v;
    maxIndex = i;
  }
})
console.log(String.fromCharCode(maxIndex + base), arr[maxIndex]);// A 5

找出陣列中的最大值

遍歷陣列

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let max = -Infinity;
arr.forEach(v => {
  if (v > max) max = v;
})
console.log(max);// 5

使用Math

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let max = Math.max(...arr);
console.log(max);// 5

使用reduce

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let max = arr.reduce((a, v) => {
  return a > v ? a : v;
})
console.log(max);// 5

拷貝陣列

遍歷陣列使用push

let arr = [1, 2, 3, 4, 5];
let newArr = [];
arr.forEach(v => newArr.push(v));
console.log(newArr);// [1, 2, 3, 4, 5]

使用concat

let arr = [1, 2, 3, 4, 5];
let newArr = [].concat(arr);
console.log(newArr);// [1, 2, 3, 4, 5]

使用slice

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(0);
console.log(newArr);// [1, 2, 3, 4, 5];

隨機打亂一個陣列

隨機交換N次

function randomInt(a, b) {
  return Number.parseInt(Math.random() * (b-a) + a);
}
let arr = [1, 2, 3, 4, 5];
let N = arr.length;
arr.forEach((v, i, arr) => {
  let ran = randomInt(0, N);
  [arr[i], arr[ran]] = [arr[ran], arr[i]];
})
console.log(arr);

隨機排序

let arr = [1, 2, 3, 4, 5];
arr.sort((v1, v2) => {
  return Math.random() >= 0.5 ? 1 : -1;
})
console.log(arr);

【相關推薦：】

以上就是經典技巧之JavaScript陣列操作（整理分享）的詳細內容，更多請關注TW511.COM其它相關文章！