前端——周总结系列三

1 数组对象使用变量作为key加中括号

2 遍历数组异同

主要针对for…in， for…of ，map遍历方法

1. for…in和for…of都可以遍历数组，其中for…of可以获取数组的每一项，for…in不仅可以获取每一项，也可以获取索引值
   
2. for…of不可以遍历对象，for…in可以遍历对象
   
3. map可以获取数组的某一项组成新数组返回，不会改变原数组，一般针对数组对象
   
4. 是否终止循环

• 不支持return：for...in forEach
• 支持return：for for...of map

5. 是否改变原数组

• 不改变原数组：filter map some every forEach join concat slice
• 改变原数组：pop push reverse shift unshift sort splice

3 Object

1. Object.assign()合并多个对象

• 语法：Object.assign(target, …source)可接受多个参数，一个目标对象，多个源对象
• 举例
  

2. Object.keys(obj)

• 语法：获取对象所有的key组成数组返回
• 举例
  

3. Object.values(obj)

• 语法：获取对象所有的values组成数组返回
• 举例
  

4. Object.is(value1, value2)

• 语法：比较两个变量是否相等
• 举例
  
  

4 JS事件代理

1. 引入：在日常工作生活中，我们经常会委托别人办事，或者代替本人完成某件事；就像在疫情大环境下，各个学校严抓严管，防护疫情，每个宿舍委托一个同学去给整个宿舍同学买饭菜，这就是一个代理的过程，委派的同学就类似父元素，其他同学类似子元素。
2. 概述：利用JS事件冒泡原理动态为元素绑定事件称为事件代理。
3. 使用：比如点击的当前li要素颜色变绿，可以直接给li要素绑定事件然后改变颜色，但是这样需要循环遍历所有的li要素，代码复杂，同时也影响性能，可以找到li要素最近的父元素给他绑定事件，利用冒泡原理，改变li要素的颜色，当添加或移除要素也不用做其他处理，动态绑定事件。

   liList.forEach((item) =>{
   	item.onClick = function(e) {
   		e.target.style.background = 'green';
   	}
   })
   ul.onClick = function(e) {
   	e.target.style.background = 'green';
   }
   

4. 优点

• 代码简洁易读
• 提高页面性能
• 动态绑定事件