前端面试题库及答案-JS篇

 JavaScript

本题库总结于近年来各公司面试题及答案，若有错误，欢迎指正！

1 js的原型链和原型了解吗？

怎么理解js原型和原型链（戳本链接）

2  JS基本类型有哪些?

String，Number，Null，Undefined，Boolean

（补充：引用类型有Object）

3 this的指向问题？

js中的this指向问题（戳本链接）

4 会不会正则表达式？ 正则对象的创建方式是？

（1）正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。正则表达式通常缩写成“regex”。

下面先给出两个简单的示例：

^ 为匹配输入字符串的开始位置。

[0-9]+匹配多个数字， [0-9] 匹配单个数字，+ 匹配一个或者多个。

abc$匹配字母 abc 并以 abc 结尾，$ 为匹配输入字符串的结束位置。

又比如：                                                                             

runoo+b，可以匹配 runoob、runooob、runoooooob 等，+ 号代表前面的字符必须至少出现一次（1次或多次）。

runoo*b，可以匹配 runob、runoob、runoooooob 等，* 号代表字符可以不出现，也可以出现一次或者多次（0次、或1次、或多次）。

colou?r 可以匹配 color 或者 colour，? 号代表前面的字符最多只可以出现一次（0次、或1次）。

（2）正则对象的创建方式

a.隐式创建（即字面量方式）

var 正则对象 = /正则表达式/匹配模式;

b.直接实例化（构造函数方法）

var 正则对象 = new RegExp(‘正则表达式’,’匹配模式’);
（补充：在Javascript中的正则表达式中，匹配模式只有两个。小写字母g：global的缩写，全局匹配；小写字母i：ignore的缩写，忽略大小写）

5 如何全局匹配和多行匹配？

全局匹配：表达式加上参数g之后，表明可以进行全局匹配（var regx=/user\d/g）。

多行匹配：附加参数m，表明可以进行多行匹配，但是这个只有当使用^和$模式时才会起作用，在其他的模式中，加不加入m都可以进行多行匹配（var regx=/user\d/m）。

6 js数组创建的方式有哪些？

    a.采用字面量隐式创建

var arr = [];//创建一个空数组
var arr2 = [1,2,3];//创建一个有三个元素的数组

    b.采用构造函数创建（直接实例化）

var arr1 = new Array();//创建空数组
var arr2 = new Array(10)；//创建一个长度为10的数组
var arr3 =  new Array(5,4,3,2,1)；//创建数组并初始化

7 删除数组元素的方法?

js中一共有七种方法可删除数组元素。

（1）length属性 

 JavaScript中Array的length属性非常有特点一一它不是只读的。因此，通过设置这个属性可以从数组的末尾移除项或添加新项，请看下面例子：

1 var colors = ["red", "blue", "grey"];   //创建一个包含3个字符串的数组
2 colors.length = 2;
3 console.log(colors[2]);  //undefined

（2）delete关键字

要注意的是，使用delete删除元素之后数组长度不变，只是被删除元素被置为undefined了。

1 var arr = [1, 2, 3, 4];
2 delete arr[0];
3 console.log(arr);   //[undefined, 2, 3, 4]

（3）pop()栈方法

JavaScript中的Array对象提供了一个pop()栈方法用于弹出并返回数组中的最后一项，某种程度上可以当做删除用。

1 var colors = ["red", "blue", "grey"];
2 var item = colors.pop();
3 console.log(item);      //"grey"
4 console.log(colors.length);    //2

（4）shift()队列方法

JavaScript中的Array对象提供了一个shift()队列方法用于弹出并返回数组中的第一项，某种程度上也可以当做删除用。

1 var colors = ["red", "blue", "grey"];
2 var color = colors.shift();
3 console.log(color); // "red"
4 console.log(colors.length); // 2

（5）splice()操作方法 

在JavaScript的Array对象中提供了一个splice()方法用于对数组进行特定的操作。在删除数组元素的时候，它可以删除任意数量的项，只需要指定2个参数：要删除的第一项的索引和要删除的长度。

1 var colors = ["red", "blue", "grey"];
2 var color = colors.splice(0, 1); 
3 console.log(color); // "red"
4 console.log(colors); // ["blue", "grey"]

可以看出，在调用了splice(0, 1)方法时，数组从第一项开始，删除了一项。

（6）迭代方法

所谓的迭代方法就是用循环迭代数组元素，发现符合要删除的项则删除。用的最多的地方，可能是当数组中的元素为对象的时候，可以根据对象的某个属性（例如ID）来删除数组元素。

a.第一种用最常见的ForEach循环来对比元素找到之后将其删除

var colors = ["red", "blue", "grey"];
 
colors.forEach(function(item, index, arr) {
    if(item === "red") {
        arr.splice(index, 1);
    }
});

可以看到这里还要配合splice()方法去实现删除，循环只是为了找到特定的元素。另外一种思路是循环将不需要删除的元素推入到新的数组中，也能达到假性删除特定元素的目的。

b.第二种用循环中的filter方法

var colors = ["red", "blue", "grey"]; 
colors = colors.filter(function(item) {
    return item != "red"
});
 
console.log(colors); // ["blue", "grey"]

找出元素不是red的项数返回给colors（其实是得到了一个新的数组，并不是在原数组上进行删除操作），一定程度上也算是达到了删除特定元素的目的。

（7）prototype原型方法

Array.prototype.remove = function(dx) {
　　if(isNaN(dx) || dx > this.length){
　　　　return false;
　　}
 
　　for(var i = 0, n = 0; i < this.length; i++) {
　　　　if(this[i] != this[dx]) {
　　　　　　this[n++] = this[i];
　　　　}
　　}
　　this.length -= 1;
};
 
var colors = ["red", "blue", "grey"];
colors.remove(1);
 
console.log(colors); // ["red", "grey"]

这种方法其实就是自己实现一个删除的逻辑，然后把删除方法添加给了Array的原型对象，则在此环境中的所有Array对象都可以使用该方法。尽管可以这么做，但是不推荐在产品化的程序中修改原生对象的原型。道理很简单，如果只是某个实现中缺少某个方法，就在原生对象的原型中添加这个方法，那么当在另一个支持该方法的实现中运行代码时，就可能导致命名冲突。而且这样做可能会意外地导致原生方法被重写。

8 js中长度为10的数组，在其索引为15的位置上添加元素会报错吗？ 为什么？

会报undefined错误，因为数组越界，超出范围了。

9 DOM的增删查有哪些方法？

a.查

getElementById(id) - 获取带有指定 id 的节点（元素）

document.getElementsByTagName(tagname)-获取带有指定标签名 的节点

 document.getElementsByName(name)-获取带有指定name的节点

小结：document.getElementById返回一个对象。document.getElementsByName和document.getElementsByClasName返回一个对象数组

b.增

appendChild(node) - 插入新的子节点（元素）

createElement("div")-通过传入指定的一个标签名来创建一个元素

（使用createElement要注意：通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档树中）

c.删

 removeChild(node) - 删除子节点（元素）

d.改

• appendChild(追加为子元素)
• insertBefore(插入前面)
• removeChild(删除子元素)
• replaceChild(替换子元素)

10 JS的事件绑定和事件委托

a.事件委托：是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。用document元素来处理按钮的点击行为就是事件委托的一个例子，另一种常见情况是，用ul元素来处理其子元素li的事件。这是一种让父元素上的事件监听器也影响子元素的技巧。 可以减少dom的访问次数提高性能。通常，事件传播（捕获和冒泡）允许我们实现事件委托。 冒泡意味着当触发子元素（目标）时，也可以逐层触发该子元素的父元素，直到它碰到DOM绑定的原始监听器（当前目标）。 捕获属性将事件阶段转换为捕获阶段，让事件下移到元素; 因此，触发方向与冒泡阶段相反。

b.事件绑定：在Javascript中，事件绑定一共有3种方式。① 行内绑定；② 动态绑定；③ 事件监听

11 动态页面中一个后添加的按钮怎么绑定事件？

12  json格式的数据传到前端是怎么解析的？

13  js的类型判断有几种，区别、原理、使用场景都说一下？

https://blog.csdn.net/weixin_44427784/article/details/105370103（戳本链接）

14 JS事件模型

https://blog.csdn.net/weixin_44427784/article/details/105471597(戳链接)

15 怎么在事件捕获阶段触发事件

16  JS的函数防抖和函数节流的区别？

17 flash和js通过什么类如何交互?

ExternalInterface

Flash提供了ExternalInterface接口与JavaScript通信。

两个方法:

a.ExternalInterface.addCallback("在js里可调用的flash方法名",flash内方法)       //在js里调用flash里的方法

b.ExternalInterface.call("js方法",传给js的参数)                                                     //在flash里调用js里的方法

18 js语句可以定义几种类型的值？

2种。混合值和变量值

混合值即字面量

19 说说js垃圾回收机制

https://blog.csdn.net/weixin_44427784/article/details/105500546（戳链接）

20 let，const，var的区别

const定义的变量不可以修改，而且必须初始化。

var定义通常定义全局变量且可以修改，可以不初始化，会报undefined，但不会报错，存在变量提升。

let是块级作用域，函数内部使用let定义后，对函数外部无影响，不存在变量提升。

21 变量提升是什么？

https://blog.csdn.net/weixin_44427784/article/details/105790169（戳链接）

22 js的多线程

用js的worker类创建实例

var worker=new Worker(参数)     //参数填js文件路径

worker.onmessage 接收主线程数据

worker.postMessage 向主线程发送数据