@[toc]
事件委托``
- 给"ul"标签添加点击事件
- 当点击某"li"标签时,该标签内容拼接"."符号。如:某"li"标签被点击时,该标签内容为".."
注意: - 必须使用DOM0级标准事件(onclick)
<ul>
<li>.</li>
<li>.</li>
<li>.</li>
</ul>
<!-- 填写标签 -->
<script type="text/javascript">
// 填写JavaScript
document.querySelector('ul').onclick = event => {
event.target.innerText +='.'
}
关于target
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
作用:可以不使用for()循环或者数组forEach()去判断我点击或者我需要找的是哪个元素,直接使用target点击就可获取
currentTarget
currentTarget 事件属性返回其事件侦听器触发了该事件的元素。
这在捕获和冒泡期间特别有用。
currentTarget 属性总是引用其事件侦听器触发事件的元素,与 target 属性相反,它返回触发事件的元素。
总之,
target表示当前触发事件的元素
currentTarget是绑定处理函数的元素
只有当事件处理函数绑定在自身的时候,target才会和currentTarget一样
数组去重的十一种方法
var arr = [1,1,2,3,4,4,6]
es6方法
return Array.from(new Set(arr))
es6简洁
return (new Set(...arr))
for循环嵌套,splice
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){
//第一个等同于第二个,splice方法删除第二个
arr.splice(j,1);
j--;
}
}
indexOf 去重
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
return array;
1.创建一个空数组 array,用于存储唯一的元素。
2.使用 for 循环遍历数组 arr。
3.对于每个数组元素 arr[i],使用 indexOf 方法检查它在 array 中的索引。indexOf 方法返回元素在数组中的索引,如果元素不存在,则返回 -1。
4.如果 indexOf 方法返回 -1,表示当前元素在 array 中不存在,那么将它添加到 array 中,使用 push 方法。
5.循环结束后,array 将包含 arr 中的唯一元素。
利用sort
arr = arr.sort()
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
arrry.push(arr[i]);
}
}
return arrry;
1.arr = arr.sort():sort() 方法用于对数组进行排序,默认按照 Unicode 字符顺序进行排序。在这里,我们将数组 arr 进行排序,并将排序后的结果重新赋值给 arr。
2.var arrry = [arr[0]]:创建一个新数组 arrry,并将排序后的数组 arr 的第一个元素作为初始元素添加到 arrry 中。
3.for (var i = 1; i < arr.length; i++):使用 for 循环遍历排序后的数组 arr,从索引 1 开始。
4.if (arr[i] !== arr[i-1]):使用条件语句 if 来判断当前元素 arr[i] 是否与前一个元素 arr[i-1] 不相等。如果不相等,则表示当前元素是一个新的唯一元素。
5.arrry.push(arr[i]):如果上述条件判断为真,即当前元素是一个新的唯一元素,那么将其添加到数组 arrry 的末尾。
includes
var array =[];
for(var i = 0; i < arr.length; i++) {
if( !array.includes( arr[i]) ) {
//includes 检测数组是否有某个值
array.push(arr[i]);
}
}
return array
利用 hasOwnProperty
var obj = {
};
return arr.filter(function(item, index, arr){
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
1.var obj = {};:创建一个空对象 obj,用于存储已经出现过的元素。
2.arr.filter(function(item, index, arr) { ... }):使用 filter() 方法遍历数组 arr,对每个元素执行回调函数。
3.typeof item + item:将当前元素的类型和值拼接为一个字符串,用于唯一标识元素。
4.obj.hasOwnProperty(typeof item + item):使用 hasOwnProperty() 方法检查 obj 对象是否已经包含了以当前元素为键名的属性。
5.如果 obj.hasOwnProperty(typeof item + item) 返回 true,表示 obj 对象已经包含了当前元素,说明当前元素是重复的,那么在 filter() 方法中返回 false,表示过滤掉当前元素。
6.如果 obj.hasOwnProperty(typeof item + item) 返回 false,表示 obj 对象不包含当前元素,说明当前元素是新的,那么将其添加到 obj 对象中,并在 filter() 方法中返回 true,表示保留当前元素。
7.filter() 方法将根据回调函数的返回值,构建一个新的数组,其中仅包含不重复的元素。
8.最终,函数返回这个新的数组。
filter
return arr.filter(function(item, index, arr) {
//当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
return arr.indexOf(item, 0) === index;
});
利用递归去重
if(index >= 1){
if(array[index] === array[index-1]){
array.splice(index,1);
}
loop(index - 1); //递归loop,然后数组去重
}
Map 数据结构去重
let map = new Map();
let array = new Array(); // 数组用于返回结果
for (let i = 0; i < arr.length; i++) {
if(map .has(arr[i])) {
// 如果有该key值
map .set(arr[i], true);
} else {
map .set(arr[i], false); // 如果没有该key值
array .push(arr[i]);
}
}
reduce+includes
return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);