100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

js 实现数组去重的方法

js yekong 277℃

项目开发中，经常会需要进行数据处理，当数据很多的时候会出现重复，这时候需要进行去重操作。

Array.from(new Set)去重

Set是es6新增的数据结构，似于数组，但它的一大特性就是所有元素都是唯一的，没有重复的值，我们一般称为集合
Array.from()就是将一个类数组对象或者可遍历对象转换成一个真正的数组，也是ES6的新增方法

let list = ['测试', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4]
    let newList = Array.from(new Set(list))

利用includes去重

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

let list = ['wanjunshijie', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, 'wanjunshijie',]
let newList2 = []
list.forEach((item) => {
    // 空数组newList2 不包含item为false ,取反为true 执行数组添加操作
    // 如果数组包含了 item为true 取反为false 不执行数组添加操作
    if (!newList2.includes(item)) {
        newList2.push(item)
    }
})
console.log('newList2', newList2);=

map去重

map数据结构是es6中新出的语法，其本质也是键值对，只是其键不局限于普通对象的字符串

let list = ['wanjunshijie', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5 'wanjunshijie',]
let newList3 = [];
let map = new Map()
list.forEach((item) => {
 // 如果map.has指定的item不存在，那么就设置key和value 这个item就是当前map里面不存在的key,把这个item添加到新数组
 // 如果下次出现重复的item，那么map.has(item等于ture 取反 !map.has(item)  不执行
    if (!map.has(item)) {
        map.set(item,ture)
        newList3.push(item)
    }
})

indexOf去重

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1

let list = ['wanjunshijie', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, 'wanjunshijie',]
let newList4 = [];
list.forEach((item) => {
 // 空数组newList4第一次循环没有找到匹配的item 返回-1  执行数组添加操作
 // 如果数组在第n次循环中找到了newList4数组中item 例如：item等于6 而在newList4数组中已经有9 所以indexOf就不等于-1  不执行数组添加操作
    if (newList4.indexOf(item) === -1) {
        newList4.push(item)
    }
})

for循环去重

Array.splice() 方法用于添加或删除数组中的元素。会改变原数组

let list = ['wanjunshijie', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, 'wanjunshijie',]
let newlist5 = [];
for (let i = 0; i < list.sort().length; i++) {
    if (list[i] == list[i + 1]) {
        list.splice(i, 1)
        i--
    }
}

多层循环去重

let list = ['wanjunshijie', 8, 8, 1, 1, 2, 2, 3, 'wanjunshijie',]
for (let i = 0; i < list.sort().length; i++) {
    for (let j = i + 1; j < list.sort().length; j++) {
        if (list[i] == list[j]) {
            list.splice(i, 1)
            j--
        }
    }
}

递归去重

let list = ['wanjunshijie', 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, 'wanjunshijie',]
function callBack(index) {
  // 数组的长度不能等于0
    if (index >= 1) {
  // 第一次如果数组最后一个索引和最后第二个索引相等
        if (list[index] === list[index - 1]) {
  // 那么就删除这个索引的元素
            list.splice(index, 1)
        }
  // 继续调用这个函数 第一次传入的参数是数组末尾第一个 第二次传入的参数是数组末尾第二个 层层递减
        callBack(index - 1)
    }
}
  //传入排序好的数组的最大索引index
callBack(list.sort().length - 1)

Array.filter和map对象数组去重

let map = new Map()
let list3 = [{
    name: 'wanjunshijie1',
    id: 1
},
{
    name: 'wanjunshijie1',
    id: 2
},
{
    name: 'wanjunshijie2',
    id: 3
},
{
    name: 'wanjunshijie3',
    id: 3
}]
// 对象数组去重
function xxx(list3, key) {
    return list3.filter((item) => !map.has(item[key].toString()) && map.set(item[key].toString()))
}
console.log('newList8', xxx(list3, 'id'));

Array.filter和Array.includes 对象数组去重

let list4 = [{
    name: 'wanjunshijie1',
    id: 1
},
{
    name: 'wanjunshijie1',
    id: 2
},
{
    name: 'wanjunshijie2',
    id: 3
},
{
    name: 'wanjunshijie3',
    id: 3
}
]
function xxx(arr) {
    let list = [];
    return arr.filter((item) => !list.includes(item.name) && list.push(item.name))
}

计算指定字段的数量

当数组数据是对象的形式，我们需要对数组对象里指定的字段进行去重处理。我们可以先提取数组中指定的字段的数据，然后再去重。然后再进行数据计算。
数据去重

var list = []
提取数据
res.list.forEach((type) => {
  list.push(type.name)
});
console.log(list)
对数组进行去重
let newList = Array.from(new Set(list))
console.log('newList', newList);
var dataList = []
进行循环计算，当名称相同的时候进行加一操作
newList.forEach((type) => {
  var data = {
    name: type,
    num: 0,
  }
  res.list.forEach((type2) => {
    if (type2.name = type) {
      data.num = data.num + 1
    }
  });
  dataList.push(data)
});
喜欢 (0)