数组扁平化和去重

最新推荐文章于 2023-11-16 16:11:14 发布
最新推荐文章于 2023-11-16 16:11:14 发布
阅读量7.3k 收藏 19
点赞数 3
分类专栏： JavaScript 文章标签： js数组去重 js数组扁平化 去重 扁平化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ganyingxie123456/article/details/77947704
版权
数组扁平化和去重

**引入题目：**已知有数组 [[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]

一、数组扁平化
	// 方法一
	function Flat1(arr){
        return [].concat.apply([],arr);
    }

	var arr1 = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
	console.log(Flat1(arr1)); // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

	// 方法二
	function Flat2(arr){
        var newArr = arr.reduce(function(pre, cur){
            return pre.concat(cur)
        });
        return newArr;
    }
	var arr1 = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
	console.log(Flat2(arr1)); // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

	// 方法三
    function Flat3(arr){
        var newArr =[];
        for(var i= 0; i < arr.length; i++){
            for(var j=0; j < arr[i].length; j++){
                newArr.push(arr[i][j]);
            }
        }
        return newArr;
    }
	var arr1 = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
	console.log(Flat3(arr1)); // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
    
	// 方法四
    function Flat4(arr){ // es6
        return [].concat(...arr);
    }
	var arr1 = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
	console.log(Flat4(arr1)); // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

但是经过测试发现，上述的方法，只能实现两层[]数组的嵌套，如果有多层[]嵌套，就不能正常扁平化了。
例如：

 	var arr2 = [[1,2,2],[3, 4, 5, 5],[6, 7, 8, 9,[11,12,[12,13,[14]]]],10];
	console.log(Flat1(arr2)); 
    console.log(Flat2(arr2));
    console.log(Flat3(arr2));
    console.log(Flat4(arr2));

得到的结果如下：
这里写图片描述

扁平化数组（扁平化多层[]嵌套的数组）

	// 方法五
 	function Flat5(arr){
        var newArr =[];
        for(var i= 0; i < arr.length; i++){
            if(arr[i] instanceof Array){
                newArr = newArr.concat(Flat5(arr[i]));
                // newArr.push.apply(newArr, Flat5(arr[i]));
            }else{
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }

	var arr1 = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
	console.log(Flat5(arr1)); // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

	var arr2 = [[1,2,2],[3, 4, 5, 5],[6, 7, 8, 9,[11,12,[12,13,[14]]]],10];
	console.log(Flat5(arr2)); // (17) [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]


    // 方法六：es6
    const Flat6 = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? Flat6(b) : b), []); 

	var arr1 = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
	console.log(Flat6(arr1)); // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

	var arr2 = [[1,2,2],[3, 4, 5, 5],[6, 7, 8, 9,[11,12,[12,13,[14]]]],10];
	console.log(Flat6(arr2)); // (17) [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]


    //对应的 es5 代码
    var Flat7 = function (arr){
        return arr.reduce(function(a,b){
            return a.concat(Array.isArray(b)? Flat7(b):b)
        },[]);
    }
	var arr1 = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
	console.log(Flat7(arr1)); // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

	var arr2 = [[1,2,2],[3, 4, 5, 5],[6, 7, 8, 9,[11,12,[12,13,[14]]]],10];
	console.log(Flat7(arr2)); // (17) [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]

上述代码测试，正确得到了扁平化的数组。

二、数组去重
  	/* 方法一：新建一个数组用来存放结果，遍历原数组，每次从其中取出一个元素和结果数组进行比较，
       如果原数组中元素没有在结果数组中出现过，就将这个元素保存到结果数组中。
     */

    function unique1_origin(arr){
        var uniqueArr = []; // 保存结果的数组
        for(var i=0; i<arr.length; i++){ // 遍历原数组
            for(var j=0; j<uniqueArr.length; j++){
                if(uniqueArr[j] === arr[i]){ // 在结果数组中，遍历的将从原数组取出的元素比较结果数组中的元素比较
                    break;
                }
            }
            if( j === uniqueArr.length){ 
                uniqueArr.push(arr[i]); // 不同，则保存到结果数组中
            }
        }
        return uniqueArr;
    }

    // 改进一：由于上面的方法，很明显时间复杂度是：O(n^2),所以可以进行改进
    function unique1(arr){ 
        var uniqueArr = []; 
        for(var i=0; i<arr.length; i++){ 
            if(uniqueArr.indexOf(arr[i]) == -1){ 
                uniqueArr.push(arr[i]); 
            }
        }
        return uniqueArr;
    }

    // 改进二：继续简化写法
    function unique1_simple(arr){
        var uniqueArr = arr.filter(function(item, index, array){
            return array.indexOf(item) === index;
        });
        return uniqueArr;
    }

	// 测试
 	var arr1 = [1, 2, '13', 1, '5', '9', 1, 12, 12, 2, '5', 13, 'e', 'e', 'a', 'a', 'b', 'd',13];
    console.log("原数组：")
    console.log(arr1);
    console.log("去重后的数组应该是：")
    console.log([1, 2, '13', '5', '9', 12, 13, 'e', 'a', 'b', 'd']);
    console.log("方法一：")
    console.log(unique1_origin(arr1));
    console.log(unique1(arr1));
    console.log(unique1_simple(arr1));

得到的结果如下：
这里写图片描述

 	 /* 方法二：利用对象字面量的key和value关联性,新建一个对象和数组,遍历传入数组时,
 	          判断值是否为js对象的键,不是的话给对象新增该键并放入新数组。
       特点：速度快，但是需要占用内存相对大一点。
       注意：判断是否为js对象键时，会自动对传入的键执行“toString()”，不同的键可能会被误认为一样。
     */

    function unique2_origin(arr){
        var obj = {};
        var uniqueArr = []; // 结果数组
        var type; // 记录元素的数据类型
        for(var i=0; i<arr.length; i++){
            type = typeof arr[i];
            if( !obj[arr[i]]){
                obj[arr[i]] = [type];
                uniqueArr.push(arr[i]);
            }else if(obj[arr[i]].indexOf(type) < 0){
                obj[arr[i]].push(type);
                 uniqueArr.push(arr[i]);
            }
        }
        return uniqueArr;
    }

    function unique2(arr){
         var uniqueArr = [];
         var obj = {};
         for(var i=0; i<arr.length; i++){
             var key = typeof(arr[i]) + arr[i];
             if( obj[key] !== 1){
                 uniqueArr.push(arr[i]);
                 obj[key] = 1;
             }
         }
         return uniqueArr;
    }

	// 测试
 	var arr1 = [1, 2, '13', 1, '5', '9', 1, 12, 12, 2, '5', 13, 'e', 'e', 'a', 'a', 'b', 'd',13];
    console.log("原数组：")
    console.log(arr1);
    console.log("去重后的数组应该是：")
    console.log([1, 2, '13', '5', '9', 12, 13, 'e', 'a', 'b', 'd']);

    console.log("方法二：")
    console.log(unique2_origin(arr1));
    console.log(unique2(arr1));

结果如下：

这里写图片描述

    /**
     方法三: 先将原数组排序，然后依次比较前后两个元素是否相等，
            不相等就将元素存入到结果数组中
     */

    function unique3(arr){
        arr.sort();  // 先排序
        var uniqueArr = [arr[0]]; // 结果数组
        for(var i=1; i<arr.length; i++){
            if(arr[i] !== uniqueArr[uniqueArr.length -1] ){
                uniqueArr.push(arr[i]);
            }
        }
        return uniqueArr;
    }

	// 测试
	 var arr1 = [1, 2, '13', 1, '5', '9', 1, 12, 12, 2, '5', 13, 'e', 'e', 'a', 'a', 'b', 'd',13];
    console.log("原数组：")
    console.log(arr1);
    console.log("去重后的数组应该是：")
    console.log([1, 2, '13', '5', '9', 12, 13, 'e', 'a', 'b', 'd']);

    console.log("方法三：")
    console.log(unique3(arr1));

结果如下：
这里写图片描述

    /*
     方法四: 利用数组下标判断，遍历原数组，如果当前数组的第i项在当前数
            组中第一次出现的位置不是i，那么表示第i项是重复的，
            忽略掉，否则存入结果数组。
     */

    function unique4(arr){
        var uniqueArr = [arr[0]]; //结果数组
         //从第二项开始遍历原数组
         //如果当前数组的第i项在当前数组中第一次出现的位置不是i，
         // 那么表示第i项是重复的，忽略掉。否则存入结果数组
        for(var i=1; i<arr.length; i++){
            if(arr.indexOf(arr[i]) == i){ 
                uniqueArr.push(arr[i]);
            }
        }
        return uniqueArr;
    }
	// 测试
 	var arr1 = [1, 2, '13', 1, '5', '9', 1, 12, 12, 2, '5', 13, 'e', 'e', 'a', 'a', 'b', 'd',13];
    console.log("原数组：")
    console.log(arr1);
    console.log("去重后的数组应该是：")
    console.log([1, 2, '13', '5', '9', 12, 13, 'e', 'a', 'b', 'd']);
   
    console.log("方法四：")
    console.log(unique4(arr1));

结果如下：
这里写图片描述

	// 方法五： 利用数组的filter方法
	function unique5(arr) {
		let result = arr && arr.filter(element, index, self) {
			return self.indexOf(element) === index;
		}
		return result;
	}
	
	// 方法六: es6 非常简单的方法
    function unique6(arr){
        return Array.from(new Set(arr));
    }

以上5种方法都可以实现数组的去重操作，将这前4种方式直接添加到Array原型上，实现如下：

	// 方法一
    Array.prototype.p_unique1 = function(){
        var res = [];
        for(var i = 1; i < this.length; i++){
           if(res.indexOf(this[i]) == -1){ 
                res.push(this[i]); 
            }
        }
        return res;
    }

    // 方法二
    Array.prototype.p_unique2 = function(){
        var res = [];
        var obj = {};
        for(var i = 0; i < this.length; i++){
            var key = typeof(this[i]) + this[i];
            if(!obj[key]){
                res.push(this[i]);
                obj[key] = 1;
            }
        }
        return res;
    } 

    // 方法三
    Array.prototype.p_unique3 = function(){
        this.sort();	
        var res = [this[0]];
        for(var i = 1; i < this.length; i++){
            if(this[i] !== res[res.length - 1]){
                res.push(this[i]);
            }
        }
        return res;
    }

    // 方法四
    Array.prototype.p_unique4 = function(){
        var res = [this[0]];
        for(var i=1; i<this.length; i++){
            if(this.indexOf(this[i]) == i){
                res.push(this[i]);
            }
        }
        return res;
    }
    
    var arr1 = [1, 2, '13', 1, '5', '9', 1, 12, 12, 2, '5', 13, 'e', 'e', 'a', 'a', 'b', 'd',13];
    console.log("原数组：")
    console.log(arr1);
    console.log("去重后的数组应该是：")
    console.log([1, 2, '13', '5', '9', 12, 13, 'e', 'a', 'b', 'd']);
    console.log("在Array原型上将方法实现: ")
    console.log(arr1.p_unique1());
    console.log(arr1.p_unique2());
    console.log(arr1.p_unique3());
    console.log(arr1.p_unique4());

结果如下：
这里写图片描述

至此，数组的扁平化和去重就完全实现啦~~

英子的搬砖日志
关注
专栏目录
数组扁平化以及数组去重
qq_45970651的博客
08-03 401
最近在复习的时候看到的这样一个题目 console.log(sum(2,3)); //打印 5 console.log(sum(2)(3)); // 打印 5 就是说想要实现这样的效果，那么 我们应该怎么实现呢 复制代码 function add(x){ var fir = arguments[0]; if (arguments.length ==2) { }else{ return function(sec){ return fir + sec; } } } add(2)(3); add(2,3); 复
数组扁平化，去重，排序一套全搞定
qq_45814762的博客
10-22 691
文章目录数组扁平化1.使用数组的reduce()方法2.先转换成字符串，在通过字符串转换为数组完成3.普通递归实现4.使用扩展运算符实现总结 数组扁平化 数组扁平化，就是把多维数组变成一维数组。 arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10] newArr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10] 比如将arr变
数组扁平化并且去重排序
海阔天空
04-05 1051
数组扁平化 var arr = [[1, 3, 2, 1],[5, 3, 4, 8, 5, 6, 5],[6, 2, 8, 9, [4, 11, 15, 8, 9, 12, [12, 13, [10], 14]]], 16] 扁平化方法一（toString） 注意：如果arr数组中有空数组，不使用此方法，用下面的方法；同时得到数组的值是字符串，不是数字 var newArr = arr.toString().split(’,’) 扁平化方法二(正则表达式) var newArr1 = JSON.parse(
数组扁平化、数组去重
ss15363380815的博客
11-03 287
数组扁平化 1、 es6中有提供了一个将数组进行扁平化的方法,第一个参数是指扁平深度，（Infinity是指无限次） let res = arr.flat(Infinity) 2、 也可先转换为字符串，然后用split转换为数组，然后把数组中的每一个字符串转换为数字类型 let res = arr.toString().split(',').map(item => Number(item)) 3、JSON.stringify也可以扁平化数组,但是还...
数组扁平化处理与去重
aflylong的博客
08-03 586
数组扁平化 数组扁平化是指将一个多维数组变为一维数组 数组扁平化处理的最核心方法就是递归，判断每一项是否是数组，以此做处理 1.用循环去判断每一项再做处理 let arr = [1, [2, [3, [4, [5, [6, [7, [8, [9]]]]]]]]] let newarr = [] function flatten(arr) { for (let i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) {
6种数组扁平化+数组去重+判断为数组的方法
cxz
04-20 272
普通递归 /* ES6 */ const flatten = (arr) => { let result = []; arr.forEach((item, i, arr) => { if (Array.isArray(item)) { result = result.concat(flatten(item)); // result.push(...flatten(ele)) } else { result.push(arr[i]) }
JS数组扁平化、去重、排序操作实例详解
11-20
总结以上内容，JavaScript中的数组扁平化、去重和排序操作提供了多种实现方式，开发者可以根据实际需求和性能考虑选择合适的方法。在处理复杂嵌套数组或大量数据时，应关注算法的效率和内存占用，以优化代码性能。
js代码-数组扁平化及去重方法
07-15
在JavaScript中，数组扁平化和去重是两种常见的数据处理操作，对于处理嵌套数组或确保数组元素的独特性非常有用。在这个主题中，我们将深入探讨这两种方法，并提供相关的实现代码。 **一、数组扁平化** 数组扁平化...
js 数组扁平化去重
weixin_45000975的博客
09-27 375
引用数据类型：Object function 基本数据类型：null undefined Number String symbol Boolean 堆：存储引用类型的空间 栈：存储基本类型和指定代码的环境 对象和数组区别？ null 和 undefined 的区别 对象属性名不能重复 object.prototype.toString symbol 创建值是唯一的 ...
数组去重&数组扁平化
weixin_43156201的博客
03-28 243
一、数组去重的方法 1.for 循环，利用 splice function unique(arr){ for(var i=0; i<arr.length; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i]==arr[j]){ ...
js编写数组扁平化去重并升序
蜗牛~~
12-11 480
数组扁平化去重并升序 // 数组扁平化去重并升序 var arr = [1,22,[13,4,[15,[26,37]]],18]; function flat(arr){//some() 方法用于检测数组中的元素是否满足指定条件（函数提供） while(arr.some(item=>Array.isArray(item))){//这里主要用some方法去判断数组arr中的每一项是否是数组，如果是返回true，然后继续向下执行while的函数体 ..
数组的去重和扁平化
鸭绒的博客
04-15 310
数组的去重和扁平化的方法有很多，但实现相同的功能，某些方法有人实现的就很复杂，下面我们来说几个简单的方法。 1.数组去重 1.1 ES5语法 function unique(arr){ var res = arr.filter((item,index,array)=>{ return array.indexOf(item) === index }) return res } console.log(un.
数组扁平化、去重、排序
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-12 357
看一道面试题： 已知如下数组：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; 编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组 答案： var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11,...
数组扁平化 去重 升序
m0_49471668的博客
03-13 973
目录 扁平化三种方式 1.flat函数 2.reduce方式+递归调用 3.数组转成字符串，字符串再转成数组 去重 升序 扁平化三种方式 1.flat函数 参数为深度 Infinity是代表深度的属性 let arr = [1, 2, [3, [4, [5, 6]]]] console.log(arr.flat(Infinity), "方式1")//[1, 2, 3, 4, 5, 6] 2.reduce方式+递归调用 res和item是reduce函数的参数 f
数组扁平化并去重排序
u010080803的博客
08-09 384
题目 var arr=[ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; 1 . Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b}) 2 . function flatten(arr) ...
数组扁平化与数组去重
云中自有锦书
08-04 627
1.数组扁平化 数组扁平化是指将一个多维数组变为一维数组 [1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5] 核心：遍历数组arr,若arr[i]为数组则递归遍历，直至arr[i]不为数组并与之前的结果concat。 扁平化嵌套数组: var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2,...
编写一个程序将数组扁平化去并除其中重复部分数据
HLY53_的博客
06-19 325
1、split和toString共同处理 <script> var arr=[ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; // 1、将多维数组直接转换成逗号连接的字符串 let flatArr=arr.toString(); // 2、然后再重新分隔成数组 let disArr=flatArr.split(",
如何将数组扁平化、去重，得到升序不重复的数组？
Dark_programmer的博客
01-27 557
先来定义一组数据，深度为6层 let arr = [1,2,9,[3,1,4,[5,3,6,[7,8,[9,[10]]]]]] 关于 数组扁平化并去除其中重复数据，且得到一个升序且不重复的数组，可先将思路理清晰，步骤肯分解如下： 扁平化。将多层次数组的数据整合到一个数组内 去重。得到不重复的数据 排序。按照既定规则排序 既然步骤划分好，就可一步步实现了。 1.数组扁平化 知识点：flat() flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
实现数组去重和数组扁平化的多种方法
最新发布
l12345666777的博客
11-16 516
思路：创建一个新的数组 判断重复数组元素是否存在新数组中 不存在直接添加到新数组。思路：检测数组元素是否存在数组中 存在返回true 不存在返回false。思路：对比前一项和后一项是否相等 相等删除后一项，修正下标。思路：展开数组 n Infinity。思路：set成员是唯一的。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

英子的搬砖日志

您的鼓励是我创作的动力～

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值