本文實例講述了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)
排序方法還有很多，這里不進行一一總結，可以參考 前端面試必備——基本排序算法
<!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.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容還可查看本站專題：《JavaScript數組操作技巧總結》、《JavaScript字符與字符串操作技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
