正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀。现在我总结了一些去重的方法,希望对大家有点帮助。
方法一:new Set()实现数组去重
ES6 提供了新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set 本身是一个构造函数,用来生成 Set 数据结构。Set函数可以接受一个数组,用于初始化。根据 Set的数据特性,我们可以实现数组去重。
let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined]; let list1 = Array.from(new Set(list)); // [ 1, "a", true, false, null, "", undefined ] let list2 = [...new Set(list)]; // [ 1, "a", true, false, null, "", undefined ]
方法二:some()+循环去重
some() 方法用于检测数组中的元素是否满足指定条件(函数提供) 。 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。 如果没有满足条件的元素,则返回false。 我们可以定义一个新数组来承接没有重复的数据,遍历原始数组的时候,用新数组来判断数据是否已经出现过。
function distinct(list) { let result = [list[0]];// 用于承接没有重复的数据,初始时将原始数组的第一个值赋给它。 for (let i = 1; i < list.length; i++) { // 判断结果数组中是否存在一样的值,若果没有的话则将数据存入结果数组中。 if (!(result.some(val => list[i] === val))) { result.push(list[i]); } } return result; } let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined]; distinct(arr); // [ 1, "a", true, false, null, "", undefined ]
方法三:双重for循环去重
双重for循环,第一层循环确保数组中的每一项都能被比较,第二层循环确保被比较项后的每一项都能跟被比较项比较。
function distinct2(list) { for (let i = 0; i < list.length; i++) { for (let j = i + 1; j < list.length; j++) { // 后面数据的若跟前一项数据相同,则重复,需要去除。 if (list[i] === list[j]) { list.splice(j, 1); // 去除后面的相同项 j--; } } } return list; } let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined]; distinct2(arr); // [ 1, "a", true, false, null, "", undefined ]
方法四:hasOwnProperty()方法去重
hasOwnProperty() 方法用来检测一个属性是否是对象的自有属性,而不是从原型链继承的。如果该属性是自有属性,那么返回 true,否则返回 false。
function unique(arr) { var obj = {}; // 用来记录数组中的数据 return arr.filter(function(item, index, arr){ // 如果记录对象中存在某个数据,则返回false过滤掉;否则obj进行记录并筛选出来 return obj.hasOwnProperty(typeof item + item) "true", true, 15, false, undefined, null, NaN, "NaN", 0, 'a', {}]
方法五:利用filter()+indexOf()方法去重
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
function unique(arr) { return arr.filter(function(item, index, arr) { // 从数组0位开始查,如果当前元素在原始数组中的第一个索引==当前索引值,说明它是第一次出现。 return arr.indexOf(item, 0) === index; }); } let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined]; unique(list); // [ 1, "a", true, false, null, "", undefined ]
此外,数组去重还可以利用filter()、includes()等方法实现,但是思路都跟上面几种方法类似,这里就不一一列举了。
以上就是JavaScript中数组去重的5种方法的详细内容,更多关于JavaScript中数组去重的资料请关注其它相关文章!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]