前端开发:JS中关于去重操作的使用

简介: 前端开发里面,在JS中关于数据去重操作的使用是非常常用,也是非常重要的点,一般情况下关于对数组去重点操作是最常用的,其次是具体的关于某一数据类型的去重操作,如字符串去重、数字去重等。那么本篇博文就来分享一下去重操作的使用,方便后期查阅使用。

前言

前端开发里面,在JS中关于数据去重操作的使用是非常常用,也是非常重要的点,一般情况下关于对数组去重点操作是最常用的,其次是具体的关于某一数据类型的去重操作,如字符串去重、数字去重等。那么本篇博文就来分享一下去重操作的使用,方便后期查阅使用。

核心的基本算法

遍历拿到的数据数组,然后把该数组中的元素存放到新的数组中,在存放到新数组之前要检查数组的元素是否已经存在,如果存在(相同元素,即重复元素)就不再放入新的数组中。

数据去重的基本用法

在JS中关于去重操作的使用一般是关于数组去重、字符串去重、数字去重,具体的使用示例如下所示。

1、数组去重

数组去重有三种方法:

方法一:indexOf循环去重;
方法二:ES6的Set去重;Array.from(new Set(arr));
方法三:Object 键值对去重;把数组的值存成 Object 的 key 值,比如 Object[valuea] = true, 在判断另一个值的时候,如果 Object[valueb]存在的话,就说明该值是重复的。
这里只拿indexOf 循环去重来做示例,其他关于JS中数组去重的方法请看博主另外的一篇单独介绍JavaScript中数组去重的方法汇总的文章。

示例数组:

var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];

处理方法:

            function repeat(array){
                   var array1 = [];       // 新建数组用来存array的值
                   for(var i=0,leng=array.length;i<leng;i++){
                       if(array1.indexOf(array[i]) === -1){
                           array1.push(array[i]);
                       }
                   }
                   return array1;
                }
                console.log(unique(array));    // 数组输出结果: [ 1, 2, 3, 4, 5]

注意:indexOf是ES5新增加的函数,用来获取数组中元素的位置(下标),兼容性IE8+。

2、字符串去重

**示例字符串:**
var str = "12345678987654321”;
  处理方法:
function repeat(str){
          var str1 = ""; //用来接收去重后的字符串
          for(var i in str){
                if(str1.indexOf(str.charAt(i)) == -1){
                       str1+=str.charAt(i);
                }
            }
          return str1; // 返回去重后的字符串
      }
       // 输出结果repeat("123456789");

    // 字符串转换成数组
    function repeat1(str){
          var array = str.slice("");
          var str1 = uniqueArray(array);
          return str1.join("");
    }
     console.log(repeat1(str));  //输出结果repeat1("123456789");

3、数字去重

接着上面字符串去重的思路就比较简单许多,首先把数字转换成字符串,然后再做处理。12345678987654321去重之后结果为123456789。
**示例字符串:**
var str = "12345678987654321”;
  处理方法:
      function repeat(num){
          var str = num + "";
          var num1 = repeat(str); 
          return parseInt(num1);
    } 
     console.log(repeat(num));  // 输出结果repeat(123456789);

最后

通过上面介绍的JS中关于去重操作的使用汇总,常用的去重算法通过本文内容就可涵盖,在Vue.js开发中的使用就游刃有余了,这也是在开发过程中必用的功能,尤其是对于初中级开发者来说,更应该掌握这些情况的使用,这里不再赘述。以上就是本章的全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
3月前
|
前端开发 JavaScript 算法
使用 JavaScript 数组方法实现排序与去重
【10月更文挑战第21天】通过灵活运用 `sort()` 方法和 `filter()` 方法,我们可以方便地实现数组的排序和去重。同时,深入理解排序和去重的原理,以及根据实际需求进行适当的优化,能够更好地应对不同的情况。可以通过实际的项目实践来进一步掌握这些技巧,并探索更多的应用可能性。
118 59
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
58 5
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
84 1
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
57 4
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
187 1
|
2月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
64 1
|
2月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
56 1
|
2月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
48 1