玖叶教程网

前端编程开发入门

JavaScript全解析——数组去重(数组去重复的方法js)

数组去重


●就是把一个数组中重复出现的数据只留下一个,没有重复出现的就不用管了
●最后的数组里面只有不重复的数据

方案一
●我们可以利用sort()方法进行排序
●让一样的数据挨着,后面我们就可以判断前一个和后一个是不是一样,
●如果一样就删掉一个

//  定义一个数组
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
console.log('原始数组 : ', arr);
// 利用我们的sort()方法先进行排序
arr.sort()
// 循环遍历我们的数组
for (var i = 0; i < arr.length; i++) {
    // 判断我们数组中的前一个和后面的一个数据是不是相等
    if (arr[i] === arr[i + 1]) {
        // 如果相等就删除掉一个
        arr.splice(i, 1)
        // 为了防止数组塌陷,我们执行i--
        i--
    }
}

方案二
●准备一个新的数组,我们可以判断新数组中的数据有没有和原始数组中数据一样的
●如果有,咱们就不添加,如果没有就可以添加到新数组中

//  定义一个数组
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
console.log('原始数组 : ', arr);
var arr1 = []
// 遍历原始数组
for (var i = 0; i < arr.length; i++) {
    // 判断新数组中有没有原始数组中的数据
    if (arr1.indexOf(arr[i]) === -1) {
        // 把没有的添加到新数组中
        arr1.push(arr[i])
    }
}
console.log('新数组 : ', arr1);

方案三
●我们可以利用双重循环的方式,让前一个数据和后面的每一个数据进行比较
●如果有一样的,我们就删掉一个

//  定义一个数组
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
console.log('原始数组 : ', arr);
for (var i = 0; i < arr.length; i++) {
    // 外层循环执行一次,里面的循环是不是要比较一轮啊
    // 这里需要注意一下:内层循环还有必要从0开始吗
    // 如果还是从0开始一定是相等的
    for (var j = i + 1; j < arr.length; j++) {
        // 判断前面数据和后面的每一个是不是一样
        if (arr[i] === arr[j]) {
            arr.splice(j, 1)
            j--
        }
    }
}

方案四
●直接遍历数组,看看里面有没有重复的,有的话就直接删掉

//  定义一个数组
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
console.log('原始数组 : ', arr);
for (var i = 0; i < arr.length; i++) {
    // 判断有没有重复的
    var index = arr.indexOf(arr[i], i + 1)
    // 如果index的值不是-1 说明有重复的,我们就删除重复的
    if (index !== -1) {
        // 删掉重复的数据
        arr.splice(index, 1)
        // 阻止数组塌陷
        i--
    }
}

方案五
●我们知道对象里面的键名是不能重复的.如果有重复的就是相当于在修前一个的值
●所以我们可以利用这个点实现一下去重

// 定义一个数组
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
console.log('原始数组 : ', arr);
// 定义一个空对象
// var obj = {}
// 循环遍历我们的原始数组,把我们数组中的数据作为我们对象的命名
for (var i = 0; i < arr.length; i++) {
// 这里我们是不是可以拿到我们数组内的每一个数据
console.log(arr[i]);
obj[arr[i]] = '你好'
}
// 我们看到我们的键名已经是不重复的原数组中的数据了
console.log(obj);
// 现在我们要做的就是把对象中的键名取出来
// 遍历我们的对象
// 创建一个新数组
var arr1 = []
for (var k in obj) {
// 我们的k 是可以拿到的 但是要添加到哪里呢? 需要我们外面新建一
console.log(k);
// 把 k 添加到新数组中
arr1.push(k - 0)
}
// 这个时候我们看到我们的新数组里面值是对的,但是类型不对
// 因为k就是一个字符串类型 所以我们-0就可以了
console.log('新数组 : ', arr1);

方案六
●可以使用 Set 数据结构来进行数组去重

Set 数据结构
●Set() 数据结构是 ES6 中出现的一个构造函数, 用来生成 Set 数据结构
●Set数据机构是一个 类似于 数组的数据结构
●Set函数可以接受一个数组作为参数
●特点: 所有元素都是唯一的,没有重复
●语法: var s = new Set([ 数据1, 数据2, 数据3, ... ])

// 原始的数组
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
console.log('原始数组 : ', arr);
// 使用的时候我们需要使用 new Set()把我们去重的数组放进去
// 我们得到的返回值是一个 Set 数据结构
var mySet = new Set(arr)
console.log(mySet);

还原成数组
●Set 数据结构虽然可以去重, 但是去重完毕以后不再是数组了
●我们还需要把 Set 结构还原成数组
●方案1 :

// 准备一个 Set 数据结构
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
var mySet = new Set(arr)

var res = [ ...mySet ]
cosnole.log(res)

●方案2 :


// 准备一个 Set 数据结构
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 4, 5, 1, 2, 3,]
var mySet = new Set(arr)

var res = Array.from(mySet)
cosnole.log(res)



发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言