第二周考试题

Posted 2021-05-24 龖龖龖

总结

---

文章目录

• 总结
• 前言
• 一、this指向？
• 二、事件委托、代理？如何让事件先冒泡后捕获？
• • 1.事件委托
  • 2.让事件先冒泡后捕获
• 三、面向对象
• 四、for···in和for···of的区别
• 五、函数柯里化
• 六、iframe的优缺点有哪些？
• 七、查找数组重复项
• 八、数组扁平化
• 九、垃圾回收机制
• 十、window的onload事件和domcontentloaded

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、this指向？

1、在浏览器里，在全局范围内this指向window对象
2、在函数中，this永远指向最后调用它的那个对象
3、构造函数中，this指向new出来的那个新对象
4、箭头函数中，this指向父级上下文

二、事件委托、代理？如何让事件先冒泡后捕获？

1.事件委托

事件代理又称事件委托，‘事件代理’就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听。
事件代理的原理是：DOM元素的事件冒泡。

使用事件代理的好处：
1.减少事件数量，提高性能
2.预测未来元素，新添加的元素仍然可以触发该事件
3.避免内存外泄，在低版本的IE中，防止删除元素而没有移除事件而造成的内存溢出

作用：
①支持为同一个DOM元素注册多个同类型事件；
②可将事件分为事件捕获和事件冒泡。

html代码如下（示例）：

<ul>
    <li class="selected">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

css代码如下（示例）：

.selected{
	background-color: red;
}

js代码如下（示例）：

<script>
 let oUl = document.querySelector('ul');
    let oLi = document.querySelector('.selected');
    oUl.onclick = function (event) {
        event = event || window.event;//兼容所有浏览器
        oLi.className = '';
        let item = event.target;//event.target为当前点击的li
        item.className = 'selected';
        oLi = item;
    }
</script>

2.让事件先冒泡后捕获

事件冒泡：事件由内向外依次触发
事件捕获：事件由外向内依次触发

addEventListener(event,function,true/false)//true捕获，false冒泡

js代码如下（示例）：

//1、首先获取元素节点
let div1 = document.getElementById("div1")
//2、再声明两个函数
function fn1(){console.log("捕获")}

function fn2(){console.log("冒泡")}

//3、给元素节点绑定监听
div1.addEventListener("click",function(){fn2(),fn1()},false)
//输出结果为 冒泡-->捕获

三、面向对象

对象：
属性和方法的集合叫做对象（万物皆对象）。

创建对象的方式(4种)：
new Object、字面量、构造函数、原型。

面向对象：
js是一门面向对象的语言，面向对象是一种给编程思想（万物皆对象）与之对应的是面向过程(类)

封装(api或方法)、事件总线、promise都是一种面向对象的思维编程方式

面向对象(OOP)类

1.类 封装 继承 多态

封装：低耦合，高内聚

多态：重载和重写

重载：js中是没有重载概念的(后端:方法名相同，但是形参个数不同或者类型不一样，或者类型不一样，或者返回值不同(类型)，根据传参的不同，实现不同的效果）

重写：在类的继承中，子类可以重写父类的方法

四、for···in和for···of的区别

①从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)；

②从遍历字符串的角度来说，同数组一样。

③从遍历对象的角度来说，for···in会遍历出来的为对象的key，但for···of会直接报错。

④如果要使用for…of遍历普通对象，需要配合Object.keys()一起使用。

var person={
    name:'coco',
    age:22,
    locate:{
        country:'China',
        city:'beijing',
    }
}
for(var key of Object.keys(person)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+person[key]);//name: coco,age: 22,locate: [object Object]
}

五、函数柯里化

概念：
把接受多个参数的函数变成接受一个参数的函数，只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数

特点：
①接收单一参数，将更多的参数通过回调函数来搞定；
②返回一个新函数，用于处理所有的想要传入的参数；
④返回的这个函数正是用来处理收集起来的参数。

代码如下（示例）：

function add(x,y){  //普通函数
    console.log(x+y);
}
function curryingAdd(x){  //柯里化函数(闭包)
    return function(y){
        console.log(x+y);
    }
}
add(1,2)  //3
curryingAdd(1)(2)   //3  

六、iframe的优缺点有哪些？

iframe 是一个标签
优点：
①iframe能够原封不动的把嵌入的网页展现出来；
②如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面更改后的内容，方便快捷。
③用iframe来嵌套，可以增加代码的可重用。
④如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：
①会产生很多页面不易管理；
②iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，分散用户的注意力，用户体验度差。
④很多的移动设备、无法完全显示框架，设备兼容性差。

七、查找数组重复项

代码如下（示例）：

//方法一、
    let removeArr = [1,2,3,2,6,5,3,'a',3,'hello']
    //最简单的es6方法
    let x =  [...new Set(removeArr)]
        console.log(x)
   let z = Array.from(new Set(removeArr))
    console.log(z)

//方法二、
var arr = [1,2,45,44,45,2,89,1,1,2,1,2,44];
Array.prototype.unique = function(){
	var arr = this;
	var box = [];
	for(var str of arr){
		if(arr.indexOf(str) != arr.lastIndexOf(str) && box.indexOf(str) == -1){
			box.push(str);
		}
	}
	return box;
}
console.log(arr.unique());

八、数组扁平化

数组扁平化：就是将一个多维数组转换为一个一维数组
代码如下（示例）：

var arr = [1,2,[3,4,[5,6,[7,8,[9,10]]]]]; 
function flatten(arr){
	return arr.join(",").split(",").map(v => {
		return parseInt(v);
	})
}
console.log(flatten(arr)); 

//flatten实现原理
let arr = [1, [2, [3, 4]]];
 function flattern(arr) {
        let result = [];
        for(let i = 0; i < arr.length; i++) {
            if(Array.isArray(arr[i])) {
                flattern(arr[i])
            } else {
                result.push(arr[i])
            }
        }
        return result;
    }
console.log(flattern(arr));

 //es6中的flat函数也可以实现数组的扁平化
let arr1 = [1,2,['a','b',['中','文',[1,2,3,[11,21,31]]]],3];
 console.log( arr1.flat( Infinity ) ); 

九、垃圾回收机制

原理：JS具有垃圾自动回收的机制，周期性执行，会对数据进行循环遍历，找出那些不在继续使用的变量，会被标记，垃圾回收器会销毁那些带标记的值并回收他们所占用的内存空间。

十、window的onload事件和domcontentloaded

window.onload：当一个资源及其依赖资源已完成加载时，才被触发。

document.onDOMContentLoaded：
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架完成加载。

区别：
①onload事件是DOM事件，onDOMContentLoaded是HTML5事件。
②onload事件会被样式表、图像和子框架阻塞，而onDOMContentLoaded不会。
③当加载的脚本内容并不包含立即执行DOM操作时，使用onDOMContentLoaded会比onload事件执行时间更早。

---