每日总结10

╰+攻爆jí腚メ 2022-10-15 04:55 187阅读 0赞

# 第二周考试 #

## 1.this关键字（指向问题） ##

> 不管是什么场合，`this`：它总是返回一个对象。

### JS（ES5）里面有三种函数调用形式： ###

1.  **作为对象方法的调用：**函数还可以作为某个对象的方法调用，这时this就指这个上级对象。这是函数的最通常的用法，属于**全局调用**，因此this就代表全局对象
2.  **作为对象方法的调用：**函数还可以作为某个对象的方法调用，这时this就指这个上级对象。
3.  **作为构造函数调用：**所谓构造函数，就是通过这个函数，可以生成一个新对象。这时this就指这个新对象。

### JS（ES6）里面有一种函数调用形式： ###

*正常调用其形式，其他两种都是语法糖*

**apply的调用：**apply( )是函数的一个方法，作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。

因此这时this指的就是这第一个参数。

--------------------

## 2. 对象和面向对象 ##

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

> ### **面向对象：** ###
> 
> 首先就是**找对象，找不到就添加**，如果该对象不具备所需要的方法或属性，那就给它添加。面向对象是一种编程思维的改变。通过原型的方式来实现面向对象编程。

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

--------------------

## 3.事件模型：事件委托、代理？如何让事件先冒泡后捕获？ ##

> ### 事件委托： ###
> 
> 又叫事件代理，利用事件冒泡，**只指定一个事件处理程序管理某一类型的所有事件**。

> ### 原理： ###
> 
> 事件冒泡机制，从最深的节点开始，然后**从下至上传播事件**。

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

>     代码：
>     
>     addEventListener(event，function，useCapture布尔值)
>     
>     默认为false冒泡，true为捕获
>     
>     
>     
>     attachEvent()
>     
>     //IE8及IE更早版本
>     
>     
>     
>      detachEvent()
>     
>     //移除事件监听
>     
>     
>     
>     //不使用事件捕获
>     
>     window.onload = function(){
>          let oBox = document.getElementById("box");
>     
>          oBox.onclick = function(){
>          alert(1);   //不触发
>     
>         }
>     
>          oBox.onclick = function(){
>          alert(2);   //触发
>     
>          }
>     
>     }
>     
>     //使用事件捕获
>     
>     window.onload = function(){
>         oBox.addEventListener("click",function(){
>          alert(1);   //触发
>     
>         })
>     
>     oBox.addEventListener("click",function(){
>     alert(2);   //触发
>     
>     })
>     
>     }

> ### 事件捕获： ###
> 
> 当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件。
> 
> 当为事件捕获(useCapture:true)时,先执行body的事件,再执行div的事件

> ### 事件冒泡： ###
> 
> 当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件。
> 
> 当为事件冒泡(useCapture:false)时,先执行div的事件,再执行body的事件

> ### 先冒泡后捕获： ###
> 
> 根据w3c标准，应先捕获再冒泡。若要实现先冒泡后捕获，给一个元素绑定两个addEventListener，其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为true（即捕获），调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。

## 4.for···in和for···of的区别：(for···in取key，for··of取value) ##

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

var arr = [99,88,66,77];
    
    for(let i in arr){
        console.log(i);   //0,1,2,3
    
    }
    
    for(let i of arr){
        consoel.log(i);   //99,88,66,77
    
    }

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

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

var obj = {name:"Bob",age:25};
    
    for(var i in obj){
    console.log(i)  // name age
    
    }
    
    for(var i of obj){
    console.log(i)   //报错
    
    }

## 5.函数柯里化（卡瑞化、加里化）？ ##

> ### 概念： ###
> 
> 把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

> ### 特点：  ###
> 
> ①接收单一参数，将更多的参数通过回调函数来搞定；
> 
> ②返回一个新函数，用于处理所有的想要传入的参数；
> 
> ③需要利用call/apply与arguments对象收集参数；
> 
> ④返回的这个函数正是用来处理收集起来的参数。

> ### 作用： ###
> 
> 能进行部分传值，而传统函数调用则需要预先确定所有实参。如果你在代码某一处只获取了部分实参，然后在另一处确定另一部分实参，这个时候柯里化和偏应用就能派上用场。

> ### 用途： ###
> 
> *我认为函数柯里化是对闭包的一种应用形式，延迟计算、参数复用、动态生成函数(都是闭包的用途)。*
> 
>     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  
> 
>

## 6.iframe的优缺点有哪些？ ##

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

> ### 缺点： ###
> 
> ①会产生很多页面不易管理；
> 
> ②iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
> 
> ③代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
> 
> ④很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
> 
> ⑤iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

## 7. 查找数组重复项 ##

*查找该元素首次出现的位置和最后出现的位置下标是否相同，同时判断新数组中是否不存在该元素，如果都满足则添加进新数组中去。*

## 8.垃圾回收机制 ##

> ### 什么是垃圾： ###
> 
> 一般来说没有被引用的对象就是垃圾，就是要被清除， 有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。

> ### 方法： ###
> 
> ①JS具有垃圾自动回收的机制：
> 
> 周期性执行，找出那些不在继续使用的变量，然后释放其内存。
> 
> ②标记清除(常见)：
> 
> 当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。

> ### ③引用计数： ###
> 
>      原理：跟踪记录每个值被引用的次数。
> 
>      工作流程：当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾回收器下次再运行时，它就会释放那些引用次数为0的值所占用的内存。

## 9.数组扁平化 ##

*var arr = \[1,2,\[3,4,\[5,6,\[7,8,\[9,10\]\]\]\]\]; *

第一种：
    
    function flatten(arr){
    var box = [];
    
    arr.map(v => {
    if(Array.isArray(v)){
    box = box.concat(flatten(v))
    
    }else{
    box.push(v);
    
    }
    
    })
    
    return box;
    
    }
    
    console.log(flatten(arr)); 
    
    第二种(不推荐)：
    
    function flatten(arr){
    return arr.toString().split(",").map(v => {
    return Number(v);
    
    })
    
    }
    
    console.log(flatten(arr)); 
    
    第三种：
    
    function flatten(arr){
    console.log(arr.join(","))
    
    return arr.join(",").split(",").map(v => {
    return parseInt(v);
    
    })
    
    }
    
    console.log(flatten(arr)); 
    
    第四种：
    
    var arr = [1,2,[3,4,[5,6,[7,8,[9,10]]]]];
    
    function flatten(arr){
    return arr.reduce((result,item) => {
    console.log(result,item)
    
    return result.concat(Array.isArray(item) ? flatten(item) : item);
    
    },[]);
    
    }
    
    console.log(flatten(arr));
    
    第五种：
    
    console.log([].concat(...arr));
    
    function flatten(arr){
    while(arr.some(item => Array.isArray(item))){
    arr = [].concat(...arr);
    
    }
    
    return arr;
    
    }
    
    console.log(flatten(arr));

10.