事件委托,数组去重

简介: 事件委托,数组去重

@[toc]

事件委托``

  1. 给"ul"标签添加点击事件
  2. 当点击某"li"标签时,该标签内容拼接"."符号。如:某"li"标签被点击时,该标签内容为".."
    注意:
  3. 必须使用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],[]);
目录
相关文章
|
6月前
事件代理和事件委托
事件代理和事件委托
52 6
|
6月前
什么是事件代理?什么事件委托?
什么是事件代理?什么事件委托?
45 0
|
3天前
|
JavaScript 前端开发
事件委托
【10月更文挑战第29天】事件委托是JavaScript中一种重要的事件处理机制,它能够有效地提高事件处理的效率,减少内存占用,尤其适用于处理大量具有相似行为的DOM元素的事件。
|
3天前
|
JavaScript 前端开发
|
3天前
|
JavaScript 前端开发 API
|
2月前
|
JavaScript 前端开发
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
|
2月前
|
存储 JavaScript 前端开发
js事件冒泡和事件委托
事件冒泡是指事件从最内层元素开始逐级向上传播至祖先元素的过程,默认情况下,点击子元素时会先触发自身的事件处理程序,再依次向上触发父元素的处理程序。事件委托则是在父元素上设置事件处理程序,利用事件冒泡机制处理子元素的事件,以此减少内存消耗和提高性能,特别适用于处理大量动态子元素的情况。其区别在于事件冒泡是事件传播机制的一部分,而事件委托是编程技巧,通过在父元素上绑定事件处理程序来简化子元素的事件处理。
23 0
|
5月前
|
索引
事件委托是什么
事件委托是什么
|
4月前
|
JavaScript 前端开发 C++
JavaScript 数组去重——普通数组去重 vs 对象数组去重
JavaScript 数组去重——普通数组去重 vs 对象数组去重
33 0
|
5月前
|
JavaScript 索引
这么多数组方法,你掌握了么?
这么多数组方法,你掌握了么?