小胖墩er 小胖墩er
首页
  • 前端文章

    • JavaScript
    • Vue
    • ES6
    • Git
  • Vue
  • React
  • HTML
  • CSS
  • 工具类
  • GitHub技巧
  • 博客搭建
  • 友情链接
💖关于
💻收藏
  • 分类
  • 标签
  • 归档
📭主页 (opens new window)
GitHub (opens new window)

小胖墩er

Better later than never.
首页
  • 前端文章

    • JavaScript
    • Vue
    • ES6
    • Git
  • Vue
  • React
  • HTML
  • CSS
  • 工具类
  • GitHub技巧
  • 博客搭建
  • 友情链接
💖关于
💻收藏
  • 分类
  • 标签
  • 归档
📭主页 (opens new window)
GitHub (opens new window)
  • JavaScript文章

    • JSON详解
    • 总结的17个JavaScript开发技巧
    • 今天我们聊聊JavaScript的组成
    • js判断一个参数是否为对象
    • 一个对象的某个值变成另一个对象的键
    • js数组对象去重
      • 方法一:es5冒泡排序法,去重arr
      • 方法二:es5新建数据双重循环,去重arr2
      • 方法三:es6的Map(),去重arr3
      • 方法四:es5,对象法(reduce),去重arr4
  • Vue文章

  • ES6文章

  • Git

  • axios

  • Webpack

  • 语言框架
  • JavaScript文章
小胖墩er
2021-11-10

js数组对象去重

# 方法一:es5冒泡排序法,去重arr

var arr = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4},
      {name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];

function deWeight() {
  for (var i = 0; i < arr.length - 1; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i].name == arr[j].name) {
        arr.splice(j, 1);
        //因为数组长度减小1,所以直接 j++ 会漏掉一个元素,所以要 j--
        j--;
      }
    }
  }
  return arr;
}

var newArr = deWeight();
console.log('%c%s', 'color:red;', '方法一:es5,newArr', newArr);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 方法二:es5新建数据双重循环,去重arr2

var arr2 = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4},
      {name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];
var temp = [];

function deWeightTwo() {
  arr2.forEach(function(a) {
    var check = temp.every(function(b) {
      return a.name !== b.name;
    })
    check ? temp.push(a) : ''
  })
  return temp;
}

var newArr2 = deWeightTwo();
console.log('%c%s', 'color:red;', '方法二:es5,newArr2', newArr2);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 方法三:es6的Map(),去重arr3

// 
var arr3 = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4},
            {name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];

let deWeightThree = () => {
  let map = new Map();
  for (let item of arr3) {
    if (!map.has(item.name)) {
      map.set(item.name, item);
    }
  }
  return [...map.values()];
}

let newArr3 = deWeightThree();
console.log('%c%s', 'color:red;', '方法三:es6,newArr3', newArr3);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 方法四:es5,对象法(reduce),去重arr4

var arr4 = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4},
      {name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];
// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
// (function(必选初始值或计算结束返回值, 必选当前元素, 可选索引, 可选原数组),可选函数初始值)

var obj = {};
function deWeightFour() {
  arr4 = arr4.reduce(function(a, b) {
    obj[b.name] ? '' : obj[b.name] = true && a.push(b);
    return a;
  }, [])
  return arr4;
}

var newArr4 = deWeightFour();
console.log('%c%s', 'color:red;', '方法四:es5,newArr4', newArr4);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

reduce数组对象去重

在线编辑 (opens new window)
#JavaScript
上次更新: 2021/11/15, 10:19:01
一个对象的某个值变成另一个对象的键
反向传值

← 一个对象的某个值变成另一个对象的键 反向传值→

最近更新
01
毛玻璃效果
11-23
02
svg基本绘制
11-23
03
滑动登录界面
11-23
更多文章>
🖥️

© 2021 小胖墩er 💌 粤ICP备2021158933号 🛀 Theme by 💝 Vdoing

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×