首页
所有分类
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 div层的放大与缩小简单实现代码
Mar 28 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 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
线程(1) jenkins(1) 连接数(1) UV(1) 访问日志(2) 字符串(2) yolo3(1) 逆序(1) 进程假死(1) PV(1)
You might like
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
js获取页面description的方法
2015/05/21 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
js模糊查询实例分享
2016/12/26 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
基于JavaScript实现选项卡效果
2017/07/21 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Django重设Admin密码过程解析
2020/02/10 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
中国海淘族值得信赖的海淘返利网站：55海淘
2017/01/16 全球购物
Myprotein丹麦官网：欧洲第一运动营养品牌
2019/04/15 全球购物
幼儿园家长寄语
2014/04/02 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
伦敦奥运会口号
2014/06/13 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
综合办公室岗位职责
2015/04/11 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python