网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > javascript

json数组去重的最优方式方法

2023/1/26 14:01:24

json数组去重有很多种方法,比如:双重for循环去重、利用对象属性名不冲突去重,今天我们介绍一个json数组去重的最优方法。使用set 使用set去重是利用了set不可重复的特性来实现,这个方法相对传统方式来说计算效率要高,所以如果浏览器支持,用set比较合适。例1:…

       JavaScriptjson数组去重有很多种方法,比如:双重for循环去重、利用对象属性名不冲突去重,今天我们介绍一个json数组去重的最优方法。

  • 使用set

        使用set去重是利用了set不可重复的特性来实现,这个方法相对传统方式来说计算效率要高,所以如果浏览器支持,用set比较合适。

例1:

    function unique(arr) {    
      // set本身是具有无序,不能重复的特性
      const set = new Set(arr);
      return [...set];
    }

例2:

    var arr = [5,6,7,3,25,6]    
    var arr1 = Array.from(new Set(arr))
    console.log(arr1)//完成去重

        json格式就是数组的对象和互相嵌套构成的一种复杂数据结构,json本身可以是数组也可以是对象。

        补充:对象的属性名引号是可加可不加的,但json数据很多时候会用于前后端交互。

        如果json数据运用于前后端交互的时候,对象的属性名必须要加双引号。

        我们再来看一个例子,用除Set之外的方法json数组去除重复。

例:

var arr = [ {
      ‘name’ : ‘小明’
      “age” : 17},
      {name : ‘xiao’ ,
      age :10}]
          var preson = {“name” : ‘cxk’
      “likes” : [“唱”,“跳”,“rap”]
         }
  • 双重for循环,只留下不重复的

   for(var i = 0; i < arr.length-1; i++){
        for(var j = i+1; j < arr.length; j++){
            if(arr[i] === arr[j]){
                arr.splice(j,1)  
                 j- -   //删完之后j-1抵消for里面的j++确保不跳过重复的值
             }
           }
        }
  • 利用对象属性名不冲突

        可以把数字作为对象的属性名

        例:  var obj = {4:‘lisi’}

        遍历数组,判断当前数组元素作为对象属性名是否能取到值

        如果取不到,说明这是第一次遍历到当前值,就把当前元素作为对象属性名赋值。

        如果取到了,说明之前已经赋值过了,也就是说当前值不是第一次出现。

     例:

var arr = [4,2,4,5,6,6,74,1]
    var obj = {}
           var arr1 = []
          arr.forEach(function (item){
    //把item作为属性名到对象里去取值看能否取到
    if(obj[item]){
    //取到值了,说明item不是第一次出现,说明item是一个无效值,就不用push到arr1里面
    }else{
      //取不到值,说明item是第一次出现,就给他赋值,赋个有意义的值。
      //item是第一次出现,他是我们要保留的值
      obj[item] = ‘a’
      arr.push(item)}
      }

        通过以上内容我们知道了JavaScript中json数组去重的最优方式方法?感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

  • vue兄弟平级组件如何传递参数值?

    vue组件传值不外乎三种,父传子、子传父、平级,今天我们就来着重说说vue平级组件如何传递参数值? 假设你有两个Vue组件需要通信: A 和 B ,A组件按钮上面绑定了点击事件,发送一则消息,B组件接收。初始化,全局创建$bus 直接在项目中的 main.js 初始化 …

    2023/1/7 13:08:32
  • js如何遍历数组保存需要的

    我们如何通过遍历数组删除不需要的,保留需要的内容呢?我们来看看下面的代码是如何实现的。<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>js如何遍历数组保存需要的</title> <meta http-…

    2021/5/16 21:43:10
  • js写的urldecode函数及作用

    本函数对字符串进行URL解码。例如通过urlencode编码后的字符串,可通过UrlDecode进行解码。对Url路径加码的函数是UrlEncode 用法相反,和UrlDecode是一致对应的URLEncode是这样编码的 1、数字和字母不变。 2、空格变为"+"号。 3、其他被编码成&…

    2021/5/16 16:25:41
  • js getelementbyid后获取下一级的ID的方法

    根据id获取父对象,然后使用childNodes获取所有子对象数组,关键代码:document.getElementById(div_id).childNodes; // 子对象数组实现代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh…

    2021/5/9 13:28:27
  • javascript使用settimeout闭包实现倒计时

    闭包知识1、闭包的概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数。2、闭包的作用:访问函数内部变量、保持函数在环境中一直存在,不会被垃圾回收机制处理因为函数内部声明 的变量是局部的,只能在函数内部访问到,但是函数外…

    2021/4/24 19:56:28
  • js定时器setInterval清除之后还会执行

    今天在博客上看到有人问js定时器setInterval清除之后还会执行,他是js定时器控制一个盒子做旋转动画,离开页面后js定时器还在执行,但是盒子这个dom却被浏览器消除了,以至于再次进入该页面时动画会加速执行。解决方法 离开页面时清除定时器 进入时重新开启定时器d…

    2021/4/24 16:06:27
  • js添加删除表格table行列-附源码

    <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-…

    2021/3/26 21:48:19
  • js如何判断页面某个元素是否已经绑定某个事件?

    我们有时防止页面元素重复绑定事件,需要判断一下页面对应的元素是否已经绑定了事件,下面就是我写了一个javascript函数用来判断页面某个元素是否已经绑定某个事件:javascript代码var div = document.getElementById(div);logEvent(click , div , false , false , funct…

    2021/3/24 21:20:27
  • A域名js访问B域名对象如何实现?JavaScript跨域解决办法

    什么是跨域JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无…

    2021/3/11 22:44:58
  • js如何模拟手机平板移动设备--触摸、点击、滑屏(附源码)

    前一阵子公司做项目,手机上的网页需要js来模拟手机平板等移动设备的触摸、点击、滑屏效果,直接上代码,供大家参考(function(doc, win, undefined) { "use strict"; var start = { //记录开始的触点 x: 0, y: 0 }, …

    2021/2/28 22:08:08