js数组去重的六种方法

数组方法的详细介绍可以看这里:https://blog.csdn.net/LQ313131/article/details/126315166

第一种:双层for循环

思路:将数组元素两两进行比较,如果相等,则删除其中一个,并修正数组下标

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
function unique(arr){
  for(var i = 0; i < arr.length; i++){
    for(var j = i + 1; j < arr.length; j++){
      if(arr[i] === arr[j]){
        //删除第j个元素
        arr.splice(j, 1)
        //修正数组下标
        j--
      }
    }
  }
}
unique(arr)
console.log(arr); //[ 1, 'yezi', 2, 3, 4 ]

第二种:使用indexOf() 或者 lastIndexOf()

思路:indexOf()lastIndexOf()用于查找数组元素,找到了返回元素下标,找不到返回-1,因此我们可以定义一个新的空数组用来存放数组去重后的值,然后利用indexOf()判断数组元素的值是否存在新数组中,如果不存在,则将它添加到新数组中;如果存在,说明是重复的值,不需要理会。

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
function unique(arr){
  //定义一个空的新数组,用来存放不重复的值
  var newArr = []
  for(var i = 0; i < arr.length; i++){
    //判断数组元素的值是否已经存在新数组中
    if(newArr.indexOf(arr[i]) === -1){
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique(arr)); //[ 1, 'yezi', 2, 3, 4 ]

将indexOf() 改成 lastIndexOf() 也是一样的。

当然,我们还可以把for循环改成forEach,这样显得更加高级一点:

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
function unique(arr){
 var newArr = []
 arr.forEach(function(item){
  //判断数组元素的值是否已经存在新数组中
    if(!newArr.includes(item)){
      newArr.push(item)
    }
 })
 return newArr
}
console.log(unique(arr)); //[ 1, 'yezi', 2, 3, 4 ]

第三种:使用includes()

思路:includes()方法也是用来查找数组元素的,找到了返回true,没找到返回false,因此思路也是和第二种一样的。

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
function unique(arr){
  //定义一个空的新数组,用来存放不重复的值
  var newArr = []
  arr.forEach(function(item){
    //判断数组元素的值是否已经存在新数组中
    if(!newArr.includes(item)){
      newArr.push(item)
    }
  })
  return newArr
}
console.log(unique(arr)); //[ 1, 'yezi', 2, 3, 4 ]

第四种:使用filter+indexOf() / lastIndexOf() / includes()

思路:filter方法对数组元素进行筛选,找出符合条件的数组元素,并返回一个新数组。思路也是和第二种一样的。

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
function unique(arr) {
  var newArr = []
  return arr.filter(function (item) {
    return newArr.indexOf(item) === -1 ? newArr.push(item) : false
  })
}
console.log(unique(arr)); //[ 1, 'yezi', 2, 3, 4 ]

使用 includes()

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
function unique(arr) {
  var newArr = []
  return arr.filter(function (item) {
    return newArr.includes(item) ? false : newArr.push(item)
  })
}
console.log(unique(arr)); //[ 1, 'yezi', 2, 3, 4 ]

第五种:使用Set去重

Set是一个构造函数,Set会自动筛掉重复的值,因此使用Set可以很轻松实现数组去重。

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
var set=new Set(arr);
console.log(set); //{ 1, 'yezi', 2, 3, 4 }
//将返回值转成数组
console.log(Array.from(set)); //[ 1, 'yezi', 2, 3, 4 ]
//或者使用 console.log([...set]);

第六种:使用js工具库lodash中的方法

关于lodash介绍可以看这里:https://blog.csdn.net/LQ313131/article/details/126392596

使用lodash中的_.uniq(array) 方法可以实现数组去重:

var _ = require('lodash');
console.log(_.uniq([2, 1, 2, 3, 4, 4])); //[ 2, 1, 3, 4 ]
  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值