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中

否则，递归当前项