首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS数组扁平化、去重、排序操作实例详解

Posted in Javascript onFebruary 24, 2020

本文实例讲述了JS数组扁平化、去重、排序操作。分享给大家供大家参考，具体如下：

在网上看到一个校招题目，已知一个数组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]，用js编写一个程序将这个数组扁平化，并得到一个升序且无重复值的数组。得到最终结果为：[1,2,3,4,5,6,8,9,10,11,12,13,14,15,16]。下面对数组扁平化、去重和排序就行总结。

一、数组扁平化 

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]

1、扁平化方法一（toString）

注意：如果arr数组中有空数组，不使用此方法，用下面的方法；同时得到数组的值是字符串，不是数字

var newArr = arr.toString().split(',')

2、扁平化方法二(正则表达式)

var newArr1 = JSON.parse("[" +JSON.stringify(arr).replace(/(\[\]\,)|[\[\]]*/g, "") + "]");

3、扁平化方法三(reduce)

reduce() 方法对累加器和数组中的每个元素 (从左到右)应用一个函数，将其减少为单个值，reduce详细介绍

function flatten(arr) {
 return arr.reduce((a, b) => [].concat(Array.isArray(a) && a ? flatten(a) : a, Array.isArray(b) && b ? flatten(b) : b), [])
 }
var newArr2 = flatten(arr)

4、扁平化方法四(遍历数组)

var newArr3 = []
function flat(arr) {
  for(var i = 0; i < arr.length; i++) {
    if(arr[i] instanceof Array) {
      flat(arr[i])
    } else {
      newArr3.push(arr[i])
    }
  }
}
flat(arr)

二、数组去重 

var newArr1 =[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]

1、去重方法一(Set)

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。
  ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值；Set详细介绍

var duplicate = Array.from(new Set(newArr1))

2、去重方法二(reduce)

通过数组reduce方法，利用indexOf判断上一次回调返回数组a中是否包含当前元素b的索引，如果不存在，则把b元素加入a数组，否则直接返回a。

var duplicate1 = newArr1.reduce((a, b) => {
  if(a.indexOf(b) === -1) {
    a.push(b)
  }
  return a
}, [])

3、去重方法三(数组下标去重法)

通过数组的过滤filter方法，利用indexOf获取当前元素ele在被过滤数组farr中的第一个索引值，如果值与当前索引值index相等则返回，如果不相等则过滤。

var duplicate2 = newArr1.filter((ele, index, farr) => {
  return farr.indexOf(ele) === index
})

4、去重方法四(遍历数组)

遍历数组，建立新duplicate3 数组，利用indexOf判断元素是否存在于duplicate3 新数组中，不存在则push到duplicate3 新数组。

var duplicate3 = []
for(var i = 0; i < newArr1.length; i++) {
  if(duplicate3.indexOf(newArr1[i]) === -1) {
    duplicate3.push(newArr1[i])
  }
}

5、去重方法五(排序后相邻去重法)

给传入数组排序，排序后相同值相邻，然后遍历时新数组只加入不与前一值重复的值。

function unique3(arr) {
  arr.sort();
  var newArr = [arr[0]];
  for(var i = 1, len = arr.length; i < len; i++) {
    if(arr[i] !== newArr[newArr.length - 1]) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}
var duplicate4 = unique3(newArr1)

三、数组排序 

var duplicate=[1, 3, 2, 5, 4, 8, 6, 9, 11, 15, 12, 13, 10, 14, 16]

1、 排序方法一：(sort方法)

function systemSort(arr) {
  return arr.sort(function(a, b) {
    return a - b
  })
}
var sort = systemSort(duplicate)

2、排序方法二：(冒泡排序)

function bubbleSort(arr) {
  var len=arr.length
    for(var i = len-1; i > 0; i--) {
     for(var j = 0; j < i; j++) {
       if(arr[j] > arr[j+1]) {
       var tmp = arr[j]
       arr[j] = arr[j + 1]
       arr[j + 1]= tmp
       } 
     }
    }
    return arr
  }
  var sort1 = bubbleSort(duplicate)

3、排序方法三：(插入排序)

function insertSort(arr){
  var tmp
  for(var i = 1; i < arr.length; i++) {
   tmp = arr[i]
   for(var j = i; j >= 0; j--) {
    if(arr[j - 1] > tmp) {
     arr[j] = arr[j - 1];
    } else {
     arr[j] = tmp;
     break;
    }
   }
  }
  return arr
}
var sort2 = insertSort(duplicate)

排序方法还有很多，这里不进行一一总结，可以参考 前端面试必备——基本排序算法

四、数组扁平化、去重、排序实例演示

JS数组扁平化、去重、排序操作实例详解

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>数组扁平化、去重、排序</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #contain {
      margin: 20px 70px;
    }

    fieldset span {
      font-size: 15px;
      font-weight: bold;
      color: blue;
      display: inline-block;
      width: 100%;
      text-align: center;
    }

    #result {
      border: solid blueviolet 2px;
      height: 100%;
      margin: 10px;
      padding: 10px;
      text-align: center;
      box-shadow: 5px 3px darkgray;
      border-radius: 10px;
    }
  </style>

  <body>
    <div id="contain">
      <fieldset>
        <legend>数组扁平化、去重、排序结果：</legend>
        <span>原始数组：[[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]</span>
        <div id="result"></div>
      </fieldset>
    </div>
    <script>
      var result = document.getElementById('result')
      var offsetWidth = result.offsetWidth 
      var margin = (offsetWidth - 530) / 2
      var div = document.createElement('div')
      div.style.width = '530px'
      div.style.textAlign = 'left'
      div.style.margin = '10px ' + margin + 'px'
      var text = ''
      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
      ]
      text +='*****************扁平**********************' + '<br>'
      /*
       * 扁平化
       */
      // 扁平化方法一（注意：如果arr数组中有空数组，不使用此方法，用下面的方法;同时数组的值是字符串，不是数字）
      var newArr = arr.toString().split(',')
      text += '扁平化方法一(toString)：' + newArr + '<br>'

      // 扁平化方法二(正则表达式)
      var newArr1 = JSON.parse("[" + JSON.stringify(arr).replace(/(\[\]\,)|[\[\]]*/g, "") + "]");
      text += '扁平化方法二(正则表达式)：' + newArr1 + '<br>'

      // 扁平化方法三(reduce)
      function flatten(arr) {
        return arr.reduce((a, b) => [].concat(Array.isArray(a) && a ? flatten(a) : a, Array.isArray(b) && b ? flatten(b) : b), [])
      }
      var newArr2 = flatten(arr)
      text += '扁平化方法三(reduce)：' + newArr2 + '<br>'

      // 扁平化方法四(遍历数组)
      var newArr3 = []

      function flat(arr) {
        for(var i = 0; i < arr.length; i++) {
          if(arr[i] instanceof Array) {
            flat(arr[i])
          } else {
            newArr3.push(arr[i])
          }
        }
      }
      flat(arr)
      text += '扁平化方法四(遍历数组)：' + newArr3 + '<br><br>'

      text +='*****************去重**********************' + '<br>'
      /*
       * 去重
       */
      // 去重方法一(Set)
      var duplicate = Array.from(new Set(newArr1))
      text += '去重方法一(Set)：' + duplicate + '<br>'

      // 去重方法二(reduce)
      var duplicate1 = newArr1.reduce((a, b) => {
        if(a.indexOf(b) === -1) {
          a.push(b)
        }
        return a
      }, [])
      text += '去重方法二(reduce)：' + duplicate1 + '<br>'

      // 去重方法三(数组下标去重法)
      var duplicate2 = newArr1.filter((ele, index, farr) => {
        return farr.indexOf(ele) === index
      })
      text += '去重方法三(数组下标去重法)：' + duplicate2 + '<br>'

      // 去重方法四(遍历数组)
      var duplicate3 = []
      for(var i = 0; i < newArr1.length; i++) {
        if(duplicate3.indexOf(newArr1[i]) === -1) {
          duplicate3.push(newArr1[i])
        }
      }
      text += '去重方法四(遍历数组)：' + duplicate3 + '<br>'

      // 去重方法五(排序后相邻去重法)
      function unique3(arr) {
        arr.sort();
        var newArr = [arr[0]];
        for(var i = 1, len = arr.length; i < len; i++) {
          if(arr[i] !== newArr[newArr.length - 1]) {
            newArr.push(arr[i]);
          }
        }
        return newArr;
      }
      var duplicate4 = unique3(newArr1)
      text += '去重方法五(排序后相邻去重法)：' + duplicate4 + '<br><br>'

   text += '*****************排序**********************' + '<br>'
      /*
       * 排序
       */
      // 排序方法一：(sort方法)
    function systemSort(arr) {
    return arr.sort(function(a, b) {
      return a - b
    })
    }
    var sort = systemSort(duplicate)
      text += '排序方法一：(sort方法)：' + sort + '<br>'

      // 排序方法二：(冒泡排序)
      function bubbleSort(arr) {
        var len=arr.length
      for(var i = len-1; i > 0; i--) {
      for(var j = 0; j < i; j++) {
      if(arr[j] > arr[j+1]) {
      var tmp = arr[j]
      arr[j] = arr[j + 1]
      arr[j + 1]= tmp
      } 
      }
      }
      return arr
      }
      var sort1 = bubbleSort(duplicate)
      text += '排序方法二：(冒泡排序)：' + sort1 + '<br>'

      // 排序方法三：(插入排序)
      function insertSort(arr){
      var tmp
      for(var i = 1; i < arr.length; i++) {
      tmp = arr[i]
      for(var j = i; j >= 0; j--) {
       if(arr[j - 1] > tmp) {
        arr[j] = arr[j - 1];
       } else {
        arr[j] = tmp;
        break;
       }
      }
      }
      return arr
      }
      var sort2 = insertSort(duplicate)
      text += '排序方法三：(插入排序)：' + sort2 + '<br>'

      div.innerHTML = text
      result.appendChild(div)
    </script>
  </body>

</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JS数组扁平化、去重、排序操作实例详解

- Author -

A_山水子农

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 选择器理解
Mar 16 Javascript
Javascript 面向对象之重载
May 04 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 #Javascript
Vue快速实现通用表单验证的方法
Feb 24 #Javascript
微信小程序后端实现授权登录
Feb 24 #Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 #Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 #Javascript
Vue 技巧之控制父类的 slot
Feb 24 #Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 #Javascript
offset(1) 性能优化(3) 计时器(1) limit(1) 绘图(1) mysql.user(1) MYSQL函数(1) 定时任务(2) Mysql报错(1) 逻辑架构(1)
You might like
这部番真是良心，画质好到像风景区，剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP7 echo和print语句实例用法
2019/02/15 PHP
JS 拼图游戏 面向对象，注释完整。
2009/06/18 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
JavaScript高级程序设计（第3版）学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
jQuery 实现自动填充邮箱功能（带下拉提示）
2014/10/14 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
js中unicode转码方法详解
2015/10/09 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
python实现SOM算法
2018/02/23 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
python从Oracle读取数据生成图表
2020/10/14 Python
什么是用户模式(User Mode)与内核模式(Kernel Mode) ？
2014/07/21 面试题
Exception类的常用方法
2012/06/16 面试题
代理班主任的自我评价
2014/02/04 职场文书
主管会计岗位责任制
2014/02/10 职场文书
春节联欢会主持词
2014/03/24 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
民事辩护词范文
2015/05/21 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python