JS数组扁平化、去重、排序操作实例详解
本文实例讲述了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程序设计有所帮助。
相关推荐
-
JavaScript之数组扁平化详解
扁平化 数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组. 举个例子,假设有个名为 flatten 的函数可以做到数组扁平化,效果就会如下: var arr = [1, [2, [3, 4]]]; console.log(flatten(arr)) // [1, 2, 3, 4] 知道了效果是什么样的了,我们可以去尝试着写这个 flatten 函数了 递归 我们最一开始能想到的莫过于循环数组元素,如果还是一个数组,就递归调用该方法: // 方法 1
-
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
数组的扁平化:将多维数组变成一维数组 对于一个像这样的嵌套数组:a=[1,[2,[3,4]],5,6]我们想要把它变成一个一维数组,有下面几种方法: 方法一:递归一 function parseArr(arr,res){ var i=0; for(i=0;i<arr.length;i++){ if(arr[i] instanceof Array){ parseArr(arr[i],res); }else{ res.push(arr[i]); } } } var a=[1,[2,[3,4]],5,
-
js中数组(Array)的排序(sort)注意事项说明
直接看代码吧,测试结果也贴在里面了 复制代码 代码如下: var arrDemo = new Array(); arrDemo[0] = 10; arrDemo[1] = 50; arrDemo[2] = 51; arrDemo[3] = 100; arrDemo.sort(); //调用sort方法后,数组本身会被改变,即影响原数组 alert(arrDemo);//10,100,50,51 默认情况下sort方法是按ascii字母顺序排序的,而非我们认为是按数字大小排序 arrDemo.so
-
js取两个数组的交集|差集|并集|补集|去重示例代码
复制代码 代码如下: /** * each是一个集合迭代函数,它接受一个函数作为参数和一组可选的参数 * 这个迭代函数依次将集合的每一个元素和可选参数用函数进行计算,并将计算得的结果集返回 {%example <script> var a = [1,2,3,4].each(function(x){return x > 2 ? x : null}); var b = [1,2,3,4].each(function(x){return x < 0 ? x : null}); alert
-
JS数组扁平化(flat)方法总结详解
需求:多维数组=>一维数组 let ary = [1, [2, [3, [4, 5]]], 6]; let str = JSON.stringify(ary); 第0种处理:直接的调用 arr_flat = arr.flat(Infinity); 第一种处理 ary = str.replace(/(\[\]))/g, '').split(','); 第二种处理 str = str.replace(/(\[\]))/g, ''); str = '[' + str + ']'; ary = JSON
-
js数组去重的三种常用方法总结
第一种是比较常规的方法 思路: 1.构建一个新的数组存放结果 2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比 3.若结果数组中没有该元素,则存到结果数组中 复制代码 代码如下: Array.prototype.unique1 = function(){ var res = [this[0]]; for(var i = 1; i < this.length; i++){ var repeat = false; for(var j = 0; j < res.lengt
-
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
本文实例总结了JS数组排序技巧.分享给大家供大家参考,具体如下: ① 冒泡排序 bubbleSort:function(array){ var i = 0, len = array.length, j, d; for(; i<len; i++){ for(j=0; j<len; j++){ if(array[i] < array[j]){ d = array[j]; array[j] = array[i]; array[i] = d; } } } return array; } ② js
-
史上最全JavaScript数组去重的十种方法（推荐）
一.前言: 我们在实际工作中,或者在面试找工作时,都会用到或者被问到一个问题,那就是"数组如何去重".是的,这个问题有很多种解决方案,看看下面的十种方式吧! 二.数组去重方式大汇总: Methods 1: 思路:定义一个新数组,并存放原数组的第一个元素,然后将元素组一一和新数组的元素对比,若不同则存放在新数组中. function unique(arr){ var res = [arr[0]]; for(var i=1; i<arr.length; i++){ var repea
-
js对数组中的数字从小到大排序实现代码
例子 1 In this example we will create an array and sort it alphabetically: var arr = new Array(6) arr[0] = "Jani" arr[1] = "Hege" arr[2] = "Stale" arr[3] = "Kai Jim" arr[4] = "Borge" arr[5] = "Tove"
-
js数组去重的5种算法实现
1.遍历数组法 最简单的去重方法,实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中:注意点:判断值是否在数组的方法"indexOf"是ECMAScript5 方法,IE8以下不支持,需多写一些兼容低版本浏览器代码,源码如下: // 最简单数组去重法 function unique1(array){ var n = []; //一个新的临时数组 //遍历当前数组 for(var i = 0; i < array.length; i++){ //如果当前数组的第i已
-
JS扁平化输出数组的2种方法解析
这篇文章主要介绍了JS扁平化输出数组的2种方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.使用数组的flat方法 [1,2,[3,[4,5]]].flat(Infinity) //[1, 2, 3, 4, 5] 2.实现方式二: var arr = [[1, 2, 23], [13, 4, 5, 5], [6, 7, 9, [11, 12, [12, 13, [14]]]], 10]; var result = []; functi