JavaScript數組常用操作多種方案彙總（扁平化，去重等）

記錄JS中數組常用操作的多種方案

文章目錄

• 寫在前面
• 數組去重
• • 問題描述
  • 方案
  • • 1. ES6 `Set`
    • 2. 雙層`for`循環
    • 3. `for` 循環 額外空間
    • 4. `Array.prototype.filter()`
    • 5. 排序 + 雙指針
• 數組扁平化
• • 問題描述
  • 方案
  • • 1. `Array.prototype.flat()`
    • 2. `Array.prototype.toString()`
    • 3. `for` 循環 `遞歸`
    • 4. `Array.prototype.reduce()`

寫在前面

定義一個空對象，後續的方法都添加到該對象上。

const _ = {

}
           

數組去重

問題描述

去除重複數字得到：

方案

1. ES6

Set

或者

2. 雙層

for

循環

周遊原始數組，發現重複的項則用

splice

移除。

_.uniqV4 = arr => {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}
           

3.

for

循環 額外空間

_.uniqV2 = arr => {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (res.indexOf(arr[i]) === -1) {
      res.push(arr[i]);
    }
  }
  return res;
}
           

4.

Array.prototype.filter()

用

filter

過濾數組，傳回目前元素在原始數組中的第一個索引和目前索引值相等的項即可。

_.uniqV3 = arr => arr.filter((item, index, arr) => {
  return arr.indexOf(item, 0) === index;
});
           

5. 排序 + 雙指針

起初快慢指針指向數組頭 arr[i] = arr[j] = arr[0]

當arr[i] !== arr[j] 時，i向前移動一位，同時把arr[j] 指派給 arr[i]

j 向前移動一位

_.uniqV5 = arr => {
  arr.sort();
  // i 慢指針 j 快指針
  let [i, j] = [0, 0];
  while (j < arr.length) {
    if (arr[j] !== arr[i]) {
      i++;
      arr[i] = arr[j];
    }
    j++;
  }
  return arr.slice(0, i + 1)
}
           

數組扁平化

問題描述

給出如下數組：

const arr = [
  [1, 2, 2],
  [3, 4, 5, 5],
  [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10
];
           

使其

扁平化

後得到：

[
   1,  2,  2, 3,  4,  5,  5,
   6,  7,  8, 9, 11, 12, 12,
  13, 14, 10
]
           

方案

1.

Array.prototype.flat()

用Array.prototype.flat()

參數

depth

可選

指定嵌套數組結構扁平化的深度。預設值為1

這裡我們指定深度為

Infinity

，表示無論嵌套多少層都要展平。

2.

Array.prototype.toString()

無論數組嵌套多深，調用

toString()

方法都會的到又逗号

,

拼接而成的字元串，例如：

3.

for

循環

遞歸

初始化一個空數組res

循環周遊原始數組arr

若目前項不是數組，将其放入數組res中

否則，遞歸目前項

_.flattenV3 = (arr, res = []) => {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      _.flattenV3(arr[i], res);
    } else {
      res.push(arr[i]);
    }
  }
  return res;
}
           

4.

Array.prototype.reduce()

這個版本其實是上面

For

循環的簡化版。

利用數組的

reduce

方法周遊數組 前一項pre，目前項cur

将pre初始化為空數組[]

若目前項cur不是數組

将其合并到pre中

否則，遞歸目前項