js面试题总结

最新推荐文章于 2024-04-03 02:13:17 发布

素味平生

最新推荐文章于 2024-04-03 02:13:17 发布

阅读量578

点赞数 4

分类专栏：前端面试总结前端面试题文章标签： js 前端面试

本文链接：https://blog.csdn.net/qq_40701522/article/details/85267361

版权

前端面试题同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端面试总结

3 篇文章 0 订阅

订阅专栏

本文主要是总结一些前端js面试题，具有一定的参考借鉴价值，需要的朋友可以参考下

概念部分：

1.js 的数据类型有哪些

基本数据类型 string、number、boolean、null、undefined

引用数据类型 Object、Array、Function

2.一般用什么关键字来判别数据类型

typeof操作符

3.什么是变量提升（预解析），需要我们注意什么问题？

概述：所谓变量提升，就是只要我们进行变量或者函数声明，当js加载的时候，js引擎就会将变量声明提升到它所在作用域的最开始的部分。

需要注意的：当变量名和函数名同名的时候，以函数名优先

4.如何理解js中的面向对象

在其他语言中，面向对象都有类的概念，还有继承，但在js中是没有的，有的是object，从object出发，它的原型继承以及类式继承，也体现了继承的思想，同时js中的模块化思想也照应了其他面向对象中的“类”，以至于我们js也是另一种风格的面向对象语言，做到了“高内聚，低耦合”的表现。对于代码的扩展和未来的优化，也是逐步升级。

5.你对js中this指向的了解

（1）全局作用域或者普通函数中this指向全局对象window

（2）方法调用中谁调用this指向谁

（3）在构造函数或者构造函数原型对象中this指向构造函数的实例

6. 你对构造函数的认识（概念，作用）

概述：构造函数就是你用new关键字创建对象时调用的函数

作用：创建多个共享特定属性和行为的对象，主要是用于创建对象时初始化对象

7.普通函数和构造函数的区别

大体来说，就是有new和无new的区别

写法上，构造函数首字母大写，目的只是用于区分普通函数和构造函数，提醒你在创建实例化对象前加new操作符，提醒你在创建实例化对象前加new操作符

8.什么是跨域，如何解决跨域？

概念：协议、域名、端口都相同才同域，否则都是跨域

解决：jsonp，基于script标签实现跨域，动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，改函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据。

9.GET和POST的区别

get：一般用于信息获取，使用url传递参数，对发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符

post：一般用于修改服务器上的资源，对所发送的信息没有限制

10.递归和闭包的区别

递归：在程序中，函数直接或间接的调用自己，递归的调用，最终还是要转换为自己的函数

闭包：简单的理解是函数的嵌套形成闭包，闭包包括函数本身已经在它的外部作用域

11.new一个对象背后做了什么？

1.创建一个空对象

2.给对象设置_proto_，指向（等价于）构造函数对象的prototype属性值

3.指向构造函数体（给对象添加属性/方法）

12.如何编写高性能的Javascript？

使用DocumentFragment优化多次append，通过模板元素clone，替代createElement

使用一次innerHTML赋值代替构建dom元素，使用firstChild和nextSibling代替childNodes遍历dom元素

使用Array 作为 StringBuffer，代替字符串拼接的操作

将循环控制量保存到局部变量，顺序无关的遍历时，用while代替for

将条件分支，按可能性顺序从高到低排列

在用一条件子的多（>2）条件分支时，使用switch 优于 if

使用三目运算符替代条件分支，需要不断执行的时候，优先考虑使用 setInterval

13.浏览器输入url到渲染页面做了什么工作？

（1）浏览器先查看浏览器缓存-系统缓存-路由器缓存，若缓存中有，请略过中间步骤，直接跳到第9步~若没有，则按照下面的步骤进行操作。

（2）浏览器从url中解析出服务器的主机名，并将主机名转换成服务器的IP地址。PS：DNS查找域名的过程

（3）浏览器从url中解析出端口号，默认80

（4）浏览器建立一条与服务器的tcp连接（建立过程：三次握手）。
PS：一个完整的TCP连接

（5）浏览器通过tcp连接向服务器发送http请求，请求数据包。

（6）服务器处理HTTP请求，返回响应。

（7）浏览器检查HTTP响应是否为一个重定向（3XX结果状态码）、一个验证请求（401）、错误（4XX、5XX）等等，这些都需要根据具体情况分类处理。PS：浏览器对于常见HTTP状态码的反应

（8）浏览器接收HTTP响应并且可能关掉TCP连接，或者是重新建立连接使用新情求，获得新响应。

（9）浏览器解码响应，如果响应可以缓存，则存入缓存。

（10）浏览器显示HTML页面。

（11）浏览器发送请求获取嵌入在HTML中的资源（html，css，javascript，图片，音乐······），对于未知类型，会弹出对话框。

（12）浏览器发送异步请求。

（13）页面全部渲染结束。

14.js对象的深拷贝和浅拷贝？

深拷贝：拷贝对象的所有属性作为一个全新的对象。拷贝前后的对象互不影响

浅拷贝：只拷贝对象的基础属性值，对属性值为对象或数组的属性则拷贝指针

浅拷贝仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么深拷贝出来的对象也会相应改变

深拷贝：（1）JSON.parse() 与 JSON.stringify() 深拷贝

通过JSON对象来进行对象的深拷贝。将原始对象拷贝到一个空对象，就得到原始对象的克隆，原对象和拷贝对象指向不同的内存地址，修改原对象和克隆对象，互不影响。

//纯数据json对象的深度克隆
    function deepClone(obj) {
        return JSON.parse(JSON.stringify(obj));
    }

实战部分：

1.如何清除一个定时器?

window.clearInterval();

window.clearTimeout();

2.js怎么清空数组？

var arrayList = ['a','b','c','d','e','f'];

方法一：直接改变arrayList所指向的对象，原对象并不改变。

arrayList = [];

方法二：通过设置length=0 使原数组清除元素

arrayList.length = 0;

方法三：splice() 方法可删除从 index 处开始的零个或多个元素

arrayList.splice(0, arrayList.length);

3.请用代码在控制台输出今天是星期几

var x = new Array("日", "一", "二", "三", "四", "五", "六");  
var week = new Date().getDay();  
var str = "今天是星期"+ x[week];  
alert(str);

4.下面这个ul，如何点击每一列的时候alert其index?

<ul id=”test”>
 <li>这是第一条</li>
 <li>这是第二条</li>
 <li>这是第三条</li>
</ul>

解决方法

var lis=document.getElementById('test').getElementsByTagName('li');//获取li元素对象
for(var i=0;i<3;i++)
{
    lis[i].index=i;
    lis[i].onclick=function(){
        alert(this.index);
    };
}

5.字符串反转的方法

split() 把一个字符串分割成字符串数组

reverse() 颠倒数组中元素的顺序。

join() 把数组的所有元素都放入一个字符串，然后通过指定的分隔符就行分隔

6.快速排序

思想：（1）在数据集之中找一个基准点

（2）建立两个数组，分别存储左边和右边的数组

（3）利用递归进行比较

 <script type="text/javascript">
        function quickSort(arr){
            if(arr.length<=1){
                return arr;//如果数组只有一个数，就直接返回；
            }
            var num = Math.floor(arr.length/2);
//找到中间数的索引值，如果是浮点数，则向下取整
            var numValue = arr.splice(num,1);//找到中间数的值
            var left = [];
            var right = [];

            for(var i=0;i<arr.length;i++){
                if(arr[i]<numValue){
                    left.push(arr[i]);//基准点的左边的数传到左边数组
                }
                else{
                   right.push(arr[i]);//基准点的右边的数传到右边数组
                }
            }
            return quickSort(left).concat([numValue],quickSort(right));//递归不断重复比较
        }
        alert(quickSort([32,45,37,16,2,87]));//弹出“2,16,32,37,45,87”

本文会不断持续更新，欢迎各位朋友留言补充或指点不足之处，该文为博主原创，未经允许禁止转载，转载请著名出处

https://blog.csdn.net/qq_40701522/article/details/85267361