数组扁平化

Myth丶恋晨 2023-10-06 16:03 6阅读 0赞

**概念**：用于将嵌套多层的数组“拉平”，变成一维的数组

#### **方法一：通过concat将二维数组转化为一维数组** ####

原理：通过将扩展运算符，将数组内部展开，并通过concat连接两个字符串的方式返回一个新的数组

let a = [12, 3, 45, [6, 7, 8]]
     console.log(a)   // [12, 3, 45, Array(3)]
     console.log([].concat(...a))  // [12, 3, 45, 6, 7, 8]

![60bba63be38d101d342914185bba0b78.png][]

#### **方法二：使用数组方法join和字符串方法split进行数组扁平化** ####

原理：通过join方法将数组转化为以点隔开的字符串，在使用split把转化的字符串转化成字符串数组，通过。map方法将内部字符串转化数字类型的

let a = [4, 1, 2, 3, 6, [7, 8, [3, 9, 10, [4, 6, 11]]]];
    let b = a.join(',').split(',').map(Number)
    console.log(b) // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

![7fb9bbe1e451c5d30554fdf919883bbc.png][]

#### **方法三：通过正则方法和JSON.stringify方法和数组方法** ####

原理：首先将数组转化为字符串 使用字符串匹配正则规则 替换所有的 '\[' '\]' 和方法二类似 split 主要是讲字符串转化为数组，map将字符串数组转化为数字

let a = [4, 1, 2, 3, 6, [7, 8, [3, 9, 10, [4, 6, 11]]]];
    let c = JSON.stringify(a).replace(/\[|\]/g, '').split(',').map(Number);
    console.log(c) // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

![f46aa463493629b4542564685ebef573.png][]

**方法四：函数递归**

原理：判断获取的当前值是不是数组，是数组就递归调用

![ca9220279f1b583605ca96fa336d2722.png][]

#### **方法五：通过reduce方法进行数组扁平化** ####

原理：主要是通过reduce的依次执行，判断当前拿到的对象是不是数组， 是数组就进行一次函数递归将内部所有数组扁平化（与方法四类似）

let a = [4, 1, 2, 3, 6, [7, 8, [3, 9, 10, [4, 6, 11]]]]; 
    function flatten(arr) {
          return arr.reduce((result, item) => {
              console.log(result, item); // 查看结果你会发现，把每个数组进行拆分并取出
              return result.concat(Array.isArray(item) ? flatten(item) : item); 
            }, []);
         };
    console.log(flatten(a)) // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

![3a598f883ced674e474d1dee488591ee.png][]

#### **方法六：ES6新增方法flat()** ####

let a = [4, 1, 2, 3, 6, [7, 8, [3, 9, 10, [4, 6, 11]]]]; 
    let e = a.flat()   // 不传参的时候 表示将二维数组转一维数组
    console.log(e)     // [4, 1, 2, 3, 6, 7, 8, Array(4)]
    let f = a.flat(2)  // 传入2 表示将两层嵌套数组 转化为一维数组
    console.log(f)     // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, Array(3)]
    let g = a.flat(Infinity) // Infinity 使用这个关键字可以将所包含的所谓数组转化为一维数组
    console.log(g)     // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

![3984cdf54c245a4241efa72a0b4a47af.png][]

### **数组去重** ###

概念：去除数组中重复重新的值

#### **方法一：循环遍历截取** ####

原理:通过每次循环遍历比较当前值在不在数组中，在就删除当前值并且索引减一，弊端，会改变原数组

![3f26a9d5b9b447f1727497ab160fa9b4.png][]

#### **方法二：借助indexOf()方法** ####

原理：判断此元素在该数组中首次出现的位置下标与循环的下标是否相等 与方法一类似

![dfb8e26950981b64995379dfb2d6472e.png][]

#### **方法三：借助新数组和indexOf()方法** ####

原理：通过indexOf方判断当前元素在数组中的索引如果与循环的下标相等则添加到新数组中 原数组不变

![fddfce67193c75405c9902f3cfa86e1d.png][]

#### **方法四：借助空对象** ####

原理：通过对象来记录新数组中已存储过的元素 不改变原数组 与方法三类似

![d53c6a0ddd22074d3031c8dd4b552185.png][]

#### **方法五：filter方法** ####

原理：查找当前元素索引出现的位置是否与当前元素索引值相等，是表示true返回 ，如果当前元素索引不等与当前索引，说明已经出现过，出现过就不返回。 原数组不变

let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];
    let arr2 = arr.filter(function (element, index, array) {
                return array.indexOf(element) === index;
            });
    console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    console.log(arr2); // [1, 23, 3, 5, 6, 7, 9, 8]

![505d376d80401cd84429378d23d4f8b5.png][]

#### **方法六：使用include方法** ####

原理：与indexOf类似，判断当前元素是否存在，不存在就添加 不改变原数组

let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];
    function rep() {
          let res = [];
          for (let i = 0; i < arr.length; i++) {
             if (!res.includes(arr[i])) res.push(arr[i]);
             }
            return res;
        }
    console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    console.log(rep()); // [1, 23, 3, 5, 6, 7, 9, 8]

![337a3cebeb8bec14853f33e13f24807a.png][]

#### **方法七：es6 新增数据结构 new Set()方法** ####

原理：new Set() 的成员具有唯一性，不能重复

let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];
    let arr2 = new Set(arr)
    console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    console.log(arr2)  // {1, 23, 3, 5, 6, …}
    console.log(rep()); // [1, 23, 3, 5, 6, 7, 9, 8]

![3785887357ec2fe19dc333f1fd071f2a.png][]

做一个合格的代码搬运工，遇事不决先百度 ，百度测试，测试再百度。

![19440d65f1f26c398890ec161b196b60.png][]

[60bba63be38d101d342914185bba0b78.png]: https://img-blog.csdnimg.cn/img_convert/60bba63be38d101d342914185bba0b78.png
[7fb9bbe1e451c5d30554fdf919883bbc.png]: https://img-blog.csdnimg.cn/img_convert/7fb9bbe1e451c5d30554fdf919883bbc.png
[f46aa463493629b4542564685ebef573.png]: https://img-blog.csdnimg.cn/img_convert/f46aa463493629b4542564685ebef573.png
[ca9220279f1b583605ca96fa336d2722.png]: https://img-blog.csdnimg.cn/img_convert/ca9220279f1b583605ca96fa336d2722.png
[3a598f883ced674e474d1dee488591ee.png]: https://img-blog.csdnimg.cn/img_convert/3a598f883ced674e474d1dee488591ee.png
[3984cdf54c245a4241efa72a0b4a47af.png]: https://img-blog.csdnimg.cn/img_convert/3984cdf54c245a4241efa72a0b4a47af.png
[3f26a9d5b9b447f1727497ab160fa9b4.png]: https://img-blog.csdnimg.cn/img_convert/3f26a9d5b9b447f1727497ab160fa9b4.png
[dfb8e26950981b64995379dfb2d6472e.png]: https://img-blog.csdnimg.cn/img_convert/dfb8e26950981b64995379dfb2d6472e.png
[fddfce67193c75405c9902f3cfa86e1d.png]: https://img-blog.csdnimg.cn/img_convert/fddfce67193c75405c9902f3cfa86e1d.png
[d53c6a0ddd22074d3031c8dd4b552185.png]: https://img-blog.csdnimg.cn/img_convert/d53c6a0ddd22074d3031c8dd4b552185.png
[505d376d80401cd84429378d23d4f8b5.png]: https://img-blog.csdnimg.cn/img_convert/505d376d80401cd84429378d23d4f8b5.png
[337a3cebeb8bec14853f33e13f24807a.png]: https://img-blog.csdnimg.cn/img_convert/337a3cebeb8bec14853f33e13f24807a.png
[3785887357ec2fe19dc333f1fd071f2a.png]: https://img-blog.csdnimg.cn/img_convert/3785887357ec2fe19dc333f1fd071f2a.png
[19440d65f1f26c398890ec161b196b60.png]: https://img-blog.csdnimg.cn/img_convert/19440d65f1f26c398890ec161b196b60.png