数组去重--new Set()

最新推荐文章于 2024-05-10 09:23:03 发布

开心每一天！

最新推荐文章于 2024-05-10 09:23:03 发布

阅读量7.1k

点赞数 1

分类专栏：随记备忘文章标签： js 数组合并去重

本文链接：https://blog.csdn.net/sdaulee/article/details/89280185

版权

随记备忘专栏收录该内容

49 篇文章 1 订阅

订阅专栏

今天看到了个去重的方法： new Set()。

Set是一种类似于数组的结构，本身成员都是唯一的，具体内容介绍，可以查看阮一峰大牛的es6教程，放下链接：

http://es6.ruanyifeng.com/#docs/set-map。

很简单的一个操作，就是在输入框中输入数组，紧接着显示出来，点击合并按钮可以看到合并去重后的数组。

代码简单贴一下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>数组去重</title>
</head>
<body>
   <div id="main">
       <p class="tip">数组各个元素请用空格分开</p>
       数组a: <input type="text" id="arr1"> <p id="text1"></p><br>
       数组b: <input type="text" id="arr2"> <p id="text2"></p><br>
       <input type="button" value='合并' id="combine">
       合并后的数组是： <b id='result'></b>
   </div>
   <script>
   function combine(){
       let arr = [].concat.apply([],arguments);
       return Array.from(new Set(arr))
   }

   let arr1 = document.getElementById('arr1');
   let arr2 = document.getElementById('arr2');
   let result = document.getElementById('result');
   let text1 = document.getElementById('text1');
   Array.from(document.getElementsByTagName('input')).filter(input=>input.type=='text').forEach(function(item,index,array){
       item.addEventListener('keyup', function(){
           //规则：数组元素中间的空格无论多少都不计
           let a = item.value.replace(/^\s+|\s+$/,'').split(' ');
           if(a.length){
               item.nextSibling.innerHTML = '['+a+']';
           }
       })
   });
   document.getElementById('combine').οnclick=function(){
       let a1 = arr1.value.split(' ');
       let a2 = arr2.value.split(' ');
       result.innerHTML = combine(a1,a2);
   }

   </script>
</body>
</html>

结果就是不出来，什么原因？？？

排查到给每一个input添加的事件之前没问题，继续进入事件中，发现原来又是自己粗心大意造成的。

item.addEventListener('keyup', function(){
           //规则：数组元素中间的空格无论多少都不计
           let a = item.value.replace(/^\s+|\s+$/,'').split(' ');
           if(a.length){
               item.nextSibling.nextSibling.innerHTML = '['+a+']';
           }
       })

原来item.nextSibling并没有拿到相邻的p标签，而是空格所在的textNode节点，故而需要item.nextSibling.nextSibling才能拿到p标签。

平时HTML代码中为了看起来整齐没少加个空格换行这种符号，可是js处理的时候，它并不知道你是为了好看呀。

开心每一天！

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
数组去重--new Set()

今天看到了个去重的方法： new Set()。Set是一种类似于数组的结构，本身成员都是唯一的，具体内容介绍，可以查看阮一峰大牛的es6教程，放下链接：http://es6.ruanyifeng.com/#docs/set-map。很简单的一个操作，就是在输入框中输入数组，紧接着显示出来，点击合并按钮可以看到合并去重后的数组。代码简单贴一下：<!DOCTYPE ht...
复制链接

扫一扫