我是靠谱客的博主 活泼自行车,最近开发中收集的这篇文章主要介绍js数组去重与去扁平化,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

数组去重

var arr = [1, 43, 4, 3, 2, 4, 3];
// 去重后
arr = [1, 43, 4, 3, 2]

传统方法,for循环实现

function dedupe(arr) {
var rets = [];
for (var i = 0; i < arr.length; i ++) {
if (!rets.includes(arr[i])) {
rets.push(arr[i]);
}
}
return rets;
}
// 方法二: forEach方法实现
function dedupe(arr) {
var rets = [];
arr && arr.forEach(function(item){
if (!rets.includes(item)){
rets.push(item);
}
});
return rets;
}

ES6方法实现

// es6提供的新的数据结构Set,类似数组,但是成员的值都是唯一的,没有重复的值。
function dedupe(arr) {
var newSet = new Set(arr);
// arr变成了set的数据结构,并去除了其中重复的元素
return Array.from(newSet);
// Array.from方法将set数据结构转为数组数据结构
}

复杂数据结构的数组去重

[1,2,{a:1},3,2,{a:1},[1,2],[1,2]]
数组中的元素包含对象和数组

function unique(arr) {
const hash = {};
const res = [];
for (let i = 0; i < arr.length; i++) {
if (hash[arr[i]] == null) {
res.push(arr[i]);
hash[arr[i]] = true;
}
}
return res;
}
unique([1,2,{a:1},3,2,{a:1},[1,2],[1,2]]);
// 1, 2, {a: 1}, 3, [1, 2]

数组去扁平化
数组的扁平化,就是将一个嵌套多层的数组array(嵌套可以是任何层数)转换为只有一层的数组

var arr = [1, 2, 3, [4, 3, [2, 7], 2], 5, [5, 9, 10], 7];
// 去扁平化后
arr = [1, 2, 3, 4, 3, 2, 7, 2, 5, 5, 9, 10, 7];

(1)循环递归实现

// for循环,如果子元素还是数组,则递归调用该方法
function flatten(arr) {
var rets = [];
for(var i = 0; i < arr.length; i ++) {
if (Array.isArray(arr[i])) {
rets = rets.concat(flatten(arr[i]));
} else {
rets.push(arr[i]);
}
}
return rets;
}
// 使用forEach
function flatten(arr) {
var rets = [];
arr && arr.forEach(function(item) => {
if (Array.isArray(item)) {
rets = rets.concat(flatten(item));
} else {
rets.push(item);
}
});
return rets;
}

(2)使用reduce简化代码

function flatten(arr) {
return arr.reduce(function(pre, item){
return pre.concat(Array.isArray(item) ? flatten(item) : item);
}, [])
}

(3)如果数组元素都为数字,则可以使用toString方法

function flatten(arr) {
var newArr = arr.toString().split(',');
return newArr.map(function(item){
return +item;
// 将字符串转为数字
});
}

最后

以上就是活泼自行车为你收集整理的js数组去重与去扁平化的全部内容,希望文章能够帮你解决js数组去重与去扁平化所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(34)

评论列表共有 0 条评论

立即
投稿
返回
顶部