事件委托,数组去重

事件委托

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],[]);