前端知识点

Bertha 。 2023-03-13 09:23 18阅读 0赞

## 1 . 原型链，构造函数，实例对象，原型之间的关系图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70]

## 2 . 箭头函数 和 普通函数之间的区别 ##

**箭头函数** : 箭头函数相当于匿名函数  
如果没有参数，就只写一个（）  
有参数直接写在（参数1，参数2）  
let f2 = () => console.log(“ddd”) ; // 如果函数里面只有一个表达式，可以省略 \{\} 和 return  
let f3 = () => \{  
// 如果有多个表达式则不能省略\{\}和return  
console.log(“我是箭头函数”);  
f1()  
\}  
**区别 1**. 箭头函数是匿名函数，所以不能作为构造函数，因此也不能使用new

let func = () =>{ 
            console.log("6666");      
        }
        let newfunc = new func()   //会报错; Uncaught TypeError: func is not a constructor

**区别2**. 箭头函数不绑定arguments，取而代之的是用 rest 参数解决  
\*\*arguments : \*\*  
arguments\[ i \] : 获得传入的下标为i的参数值  
arguments.length : 获得传入的参数个数！

**普通函数：**  
1、函数作为全局函数被调用时，this指向全局对象  
2、函数作为对象中的方法被调用时，this指向该对象  
3、函数作为构造函数的时候，this指向构造函数new出来的新对象  
4、还可以通过call，apply，bind 改变this的指向

**箭头函数：**  
1、箭头函数没有this，函数内部的this来自于父级最近的非箭头函数，并且不能改变this的指向。  
2、箭头函数没有super  
3、箭头函数没有arguments，但可以使用Rest 参数接受函数的多余参数，组成一个数组，放在形参的最后  
5、不能使用new，不能作为构造函数  
6、没有原型  
7、不支持重复的命名参数。

## 3 . for in 能否遍历出原型对象 ？ ##

答案是：会的，使用 for in 循环遍历对象的属性时，原型链上的所有属性都将被访问

Object.prototype.say="cgl";   // 修改Object.prototype 
        var person ={  age: 18 };
        for (var key in person) { 
            console.log(key, person[key]);
            //这里用person.key得不到对象key的值，用person[key] 或者 eval("person."+key);
        }   //结果： age 18 
            // say cgl

只遍历对象自身的属性，而不遍历继承于原型链上的属性，使用**hasOwnProperty** 方法过滤一下。

Object.prototype.say="gwl";
    	var person ={ 
    	age: 18
    	};
    	for (var key in person) { 
    	if(person.hasOwnProperty(key)){ 
    	console.log(key, eval("person."+key));
    	}
    	} //结果：age 18

## 4 . for…in， for…of，forEach() ##

**for…in** 语句用于遍历数组或者对象的**属性**，也就是所谓的 key 的值  
如果遍历的是对象，则为对象的 **key** 值  
如果遍历的是数组，则为数组的 下标值，也就是 **index** 的值

var obj = { 
                a:1,
                b:2,
                c:3,
                d:4
            }        
    var arr = [4,5,6,7]
    
            for(var i in obj){ 
                console.log(i);
                //输出 a ,b, c, d
            }
            for(var i in arr){ 
                console.log(i);
                //输出0 1 2 3
            }

**for…of** 循环可以使用的范围包括**数组**、Set 和 Map 结构、某些**类数组**的对象，但是不能遍历对象，会报错  
如果非要用 for…of 遍历对象，也可以用 Array.from 转成数组即可，但是 对象的 key 值必须是，从零开始的序号，类似数组的index ，且最后要加上 length 属性，十分麻烦

var obj = { 
                0:"a",
                1:"b",
                2:"c",
                3:"d",
                length:4
            }
            obj = Array.from(obj)
            for (var k of obj) { 
                    console.log(k)
                }
                //输出a b c d

**forEach()** 方法用于调用**数组**的每个元素，并将元素传递给回调函数。  
注意 : forEach() 对于空数组是不会执行回调函数的。  
语法：**array.forEach( function( currentValue , index , arr) , thisValue)**  
**function** 必需， 数组中每个元素需要调用的函数。  
**currentValue** 必需，当前元素  
**index** 可选。当前元素的索引值。  
**arr** 可选。当前元素所属的数组对象。

var arr = [4,5,6,7]
            arr.forEach(function(value,index, a){ 
                console.log(value+" "+index+" "+ a )
            })
    4 0 4,5,6,7 //第一项为数组的值value，第二项为数组的下标index，第三项为数组本身
    5 1 4,5,6,7
    6 2 4,5,6,7
    7 3 4,5,6,7

## 5 . 数组去重的方法有哪些？ ##

**1 . 使用 indexOf** （indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置）  
**注释：indexOf() 方法对大小写敏感！  
注释：如果要检索的字符串值没有出现，则该方法返回 -1。**  
利用没有出现的字符串返回 - 1 的特性，设置一个空数组，如果**空数组**和 **被去重数组** 比，**空数组**中没有**被去重数组**中的某一项的话，则把这一项加入空数组，有的返回的就是其下标index值，也就是重复值，所以不加入

var arr = [1,1,2,2,3,3,4,4,5,5];
            var NewArr = [];
            for(var i of arr){ 
                if(NewArr.indexOf(i) == -1){ 
                    NewArr.push(i)
                }
            }
            console.log(NewArr)

**2 . 使用ES6中的 new Set()**  
Set 它类似于数组，但是成员的值都是唯一的，没有重复的值。  
Set本身是一个构造函数（对象），需要实例化之后才能使用

var arr = [1,1,2,2,3,3,4,4,5,5];
            var NewArr = new Set(arr);
            console.log([...NewArr]);
            // 因为Set本身是类数组，所以解构赋值的时候要把它变成数组
            // (5) [1, 2, 3, 4, 5]

其实数组去重的方法还有很多，这里只列举两个最常见

## 6 . 怎么将多个对象合并成一个对象 ##

**assign()**  
**Object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对（target）  
Object.assign() 方法的第一个参数是目标对象**，后面的参数都是**源对象。**

const target = {  a: 1 };
    
    const source1 = {  b: 2 };
    const source2 = {  c: 3 };
    
    Object.assign(target, source1, source2);
    // target {a:1, b:2, c:3}

## 7 . 绑定事件的几种方法？ ##

在Javascript中，事件绑定一共有 **3种** 方式：

① 行内绑定

② 动态绑定

③ 事件监听

**① 行内绑定：**

<button onclick="alert('这是行内绑定')">这是行内绑定</button>

**② 动态绑定：**

<button id="btn">这是动态绑定</button>
    
        <script>
            var btn = document.getElementById('btn');
            btn.onclick = function(){ 
                alert('这是动态绑定')
            }
        </script>

此外，行内绑定和动态绑定是最原始的事件模型，也成为**DOM0级事件**，该模型中没有事件流的概念，也就是说**事件不能传播**  
**缺点：只能绑定一个事件**

**③ 事件监听：**  
事件监听可以给同一个DOM对象的同一事件添加**多个事件**处理程序，**DOM2级事件模型**，同时也引入了事件流的概念

<button id="btn">这是事件监听</button>
    
        <script>
            var btn = document.getElementById('btn');
            btn.addEventListener("click",function(){ 
                alert("这是事件监听的第一个事件")
            })
            btn.addEventListener("click",function(){ 
                alert("这是事件监听的第二个事件")
            })
        </script>

**removeEventListener()** 可以移除绑定的事件，但是要放在绑定事件的后面执行

<button id="btn">这是事件监听</button>
    
        <script>
            var btn = document.getElementById('btn');
            function Listener1(){ 
                alert("这是事件监听的第一个事件")
            }
            function Listener2(){ 
                alert("这是事件监听的第二个事件")
            }
    
            btn.addEventListener("click",Listener1)
            btn.addEventListener("click",Listener2)
            
            btn.removeEventListener("click",Listener2)        
        </script>

**老版本的IE浏览器事件监听为：**  
DOM 对象 . attachEvent ( type , callback )；  
DOM 对象 . detachEvent ( type , callback )；  
了解即可，不用深入研究，IE浏览器如果不做改变的话，早晚要被淘汰

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70]: /images/20230312/01a2dc636d9b4f5dbdf57be0351d502d.png