2. 程式人生 > 程式設計 >JS陣列扁平化、去重、排序操作例項詳解

JS陣列扁平化、去重、排序操作例項詳解

阿新 • • 發佈：2020-02-26

本文例項講述了JS陣列扁平化、去重、排序操作。分享給大家供大家參考，具體如下：

在網上看到一個校招題目，已知一個數組var arr = [[1,3,2,1],[5,4,8,5,6,5],[6,9,[4,11,15,12,[12,13,[10],14]]],16]，用js編寫一個程式將這個陣列扁平化，並得到一個升序且無重複值的陣列。得到最終結果為：[1,10,14,16]。下面對陣列扁平化、去重和排序就行總結。

一、陣列扁平化

var arr = [[1,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,1,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,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)

排序方法還有很多，這裡不進行一一總結，可以參考 前端面試必備——基本排序演算法

四、陣列扁平化、去重、排序例項演示

這裡寫圖片描述

<!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,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,16
      ]
      text +='*****************扁平**********************' + '<br>'
      /*
       * 扁平化
       */
      // 扁平化方法一（注意：如果arr陣列中有空陣列，不使用此方法，用下面的方法;同時陣列的值是字串，不是數字）
      var newArr = arr.toString().split(',')
      text += '扁平化方法一(toString)：' + newArr + '<br>'

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

      // 扁平化方法三(reduce)
      function flatten(arr) {
        return arr.reduce((a,[])
      }
      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,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.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容還可檢視本站專題：《JavaScript陣列操作技巧總結》、《JavaScript字元與字串操作技巧總結》、《JavaScript遍歷演算法與技巧總結》、《JavaScript數學運算用法總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript查詢演算法技巧總結》及《JavaScript錯誤與除錯技巧總結》

希望本文所述對大家JavaScript程式設計有所幫助。

相關推薦

JS陣列扁平化、去重、排序操作例項詳解

本文例項講述了JS陣列扁平化、去重、排序操作。分享給大家供大家參考，具體如下：

陣列方法、去重、冒泡、選擇、反轉、扁平化陣列

some陣列中是否有滿足條件的返回布林值,如果遇到一個滿足條件的，就會直接跳出

Js陣列扁平化實現方法程式碼總彙

題目： 請寫出一個數組拍平函式。效果如下： var arr=[\'a\',[\'b\',\'c\'],2,[\'d\',\'e\',\'f\'],\'g\',3,4];

Java8對list集合進行排序、過濾、分組、去重、轉map、遍歷賦值等操作

轉載自: https://www.e-learn.cn/topic/2522732 import lombok.Data; import java.util.*; import java.util.stream.Collectors;

mysql查重、去重、更改狀態

1.查重： select * from file a where (a.name) in (select name from file WHERE isDelete = 0 and status = 1 GROUP BY phone HAVING count(*)>1);

JS陣列扁平化(flat)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat#reduce_concat_isarray_recursivity

【SQL基礎】基礎查詢：所有列、指定列、去重、限制行數、改名

〇、建表資料 drop table if exists user_profile; CREATE TABLE `user_profile` ( `id` int NOT NULL, `device_id` int NOT NULL,

JavaScript陣列常用方法解析和深層次js陣列扁平化

前言 陣列作為在開發中常用的集合，除了for迴圈遍歷以外，還有很多內建物件的方法，包括map，以及陣列篩選元素filter等。

Javascript陣列去重的幾種方法詳解

目錄陣列去重1 雙層for迴圈（類似氣泡排序的雙層迴圈寫法）2 迴圈和indexof、迴圈和includes3 利用物件屬性不能重複去重4 ES6 Set5 ES6 Array. prototype.filter()6 ES6 Array. prototype.uDpPEBreduce()總結陣列去重

MySQL單表查詢操作例項詳解【語法、約束、分組、聚合、過濾、排序等】

本文例項講述了MySQL單表查詢操作。分享給大家供大家參考，具體如下： 語法

MongoDB資料庫安裝配置、基本操作例項詳解

本文例項講述了MongoDB資料庫安裝配置、基本操作。分享給大家供大家參考，具體如下：

Django框架靜態檔案處理、中介軟體、上傳檔案操作例項詳解

本文例項講述了Django框架靜態檔案處理、中介軟體、上傳檔案操作。分享給大家供大家參考，具體如下：

Laravel框架中佇列和工作(Queues、Jobs)操作例項詳解

在我們的web應用中，經常會遇到這樣的情況： 使用者在進行了某項操作後，我們需要在後臺完成一個耗時且耗費資源的任務，以對應使用者的操作。

mysql連線查詢、聯合查詢、子查詢原理與用法例項詳解

本文例項講述了mysql連線查詢、聯合查詢、子查詢原理與用法。分享給大家供大家參考，具體如下：

flask框架url與重定向操作例項詳解

本文例項講述了flask框架url與重定向操作。分享給大家供大家參考，具體如下：

JS面向物件程式設計基礎篇（二） 封裝操作例項詳解

本文例項講述了JS面向物件程式設計封裝操作。分享給大家供大家參考，具體如下：

JS面向物件程式設計基礎篇（三） 繼承操作例項詳解

本文例項講述了JS面向物件程式設計繼承操作。分享給大家供大家參考，具體如下：

JS瀏覽器BOM常見操作例項詳解

本文例項講述了JS瀏覽器BOM常見操作。分享給大家供大家參考，具體如下： window尺寸

node.js express框架實現檔案上傳與下載功能例項詳解

本文例項講述了node.js express框架實現檔案上傳與下載功能。分享給大家供大家參考，具體如下：

JavaScript陣列扁平化、陣列去重常見方法

陣列扁平化 1.使用arr.flat() const arr = [1,[2,[3,[4,5]]], 6] const res = arr.flat(Infinity) 2.使用正則