今天看到了个去重的方法: 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处理的时候,它并不知道你是为了好看呀。