十大经典思维面试题_JS面试题大全

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

年轻人你不讲武德，耗子尾汁~~~

总结就是为了形成自己的js知识网，提升自己，加油！

开始干

1、介绍js的基本数据类型　　
答： Undefined、Null、Boolean、Number、String

2、js有哪些内置对象？　
答：数据封装类对象：Object、Array、Boolean、Number 和 String
　　其他对象：Function、Arguments、Math、Date、RegExp、Error
　　
3、this对象的理解　
答：this总是指向函数的直接调用者（而非间接调用者）；
　　如果有new关键字，this指向new出来的那个对象；
　　在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。
　　可以看看我前面的文章 this在不同情况下的指向
　　
4、eval是做什么的？　
答：它的功能是把对应的字符串解析成JS代码并运行；
　　应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
　　由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(’(’+ str +’)’)。

5、DOM怎样添加、移除、移动、复制、创建和查找节点
答：// 创建新节点
　　createDocumentFragment() //创建一个DOM片段
　　createElement() //创建一个具体的元素
　　createTextNode() //创建一个文本节点
　　// 添加、移除、替换、插入
　　appendChild()
　　removeChild()
　　replaceChild()
　　insertBefore() //在已有的子节点前插入一个新的子节点
　　// 查找
　　getElementsByTagName() //通过标签名称
　　getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
　　getElementById() //通过元素Id，唯一性

6、null和undefined的区别？
答：null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。
　　undefined：
　　（1）变量被声明了，但没有赋值时，就等于undefined。
　　（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
　　（3）对象没有赋值的属性，该属性的值为undefined。
　　（4）函数没有返回值时，默认返回undefined。
　　null：
　　（1） 作为函数的参数，表示该函数的参数不是对象。
　　（2） 作为对象原型链的终点。
　　
7、new操作符具体干了什么呢?
答：
　　（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
　　（2）属性和方法被加入到 this 引用的对象中。
　　（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。

8、JSON 的了解？
答：
　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
　　格式：采用键值对，例如：{“age”:“12”, “name”:“back”}

9、call() 和 apply() 的区别和作用？
答：
　　apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。
　　如：function.apply(this,[1,2,3]);
　　call()的第一个参数是上下文，后续是实例传入的参数序列。
　　如：function.call(this,1,2,3);

10、如何获取UA？
答：
　　function whatBrowser() {

　　document.Browser.Name.value=navigator.appName;
　　document.Browser.Version.value=navigator.appVersion;
　　document.Browser.Code.value=navigator.appCodeName;
　　document.Browser.Agent.value=navigator.userAgent;
　　}
　　
11、哪些常见操作会造成内存泄漏？
答：
　　内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
　　垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
　　setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
　　闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。
　　
12、线程与进程的区别
答：
　　一个程序至少有一个进程,一个进程至少有一个线程。
　　线程的划分尺度小于进程，使得多线程程序的并发性高。
　　另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
　　线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
　　从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

13、如何解决跨域问题
JSONP：
原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。
JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里

<script>
    function createJs(sUrl){ 
   
        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }
    createJs('jsonp.js');

    box({ 
   
       'name': 'test'
    });

    function box(json){ 
   
        alert(json.name);
    }
</script>

14、javascript垃圾回收方法

• 标记清除（mark and sweep）
  这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
  垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了
• 引用计数(reference counting)
  在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
  在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用问题。

15、快速 排序的思想并实现一个快排？
“快速排序”的思想很简单，整个排序过程只需要三步：
　　（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”
    </script>

16、ES6的了解
新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。ES6将promise对象纳入规范，提供了原生的Promise对象。增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。还有就是引入module模块的概念。

17、用过哪些设计模式？
（1）工厂模式：
主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。
（2）工厂模式解决了重复实例化的问题 ，但还有一个问题,那就是识别问题，因为根本无法 搞清楚他们到底是哪个对象的实例。

function createObject(name,age,profession){ 
   //集中实例化的函数var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.profession = profession;
    obj.move = function () { 
   
        return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
    };
    return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一个实例var test2 = createObject('mike',25,'engineer');//第二个实例

（3）构造函数模式
使用构造函数的方法 ，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：
构造函数方法没有显示的创建对象 (new Object());
直接将属性和方法赋值给 this 对象;
没有 renturn 语句。
（4）原型链模式
（5）构造和原型链的组合模式

18、说说你对闭包的理解
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念
闭包有三个特性：
（1）函数嵌套函数
（2）函数内部可以引用外部的参数和变量
（3）参数和变量不会被垃圾回收机制回收

19、请你谈谈Cookie的弊端
cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。
第一：每个特定的域名下最多生成20个cookie
（1）IE6或更低版本最多20个cookie
（2）IE7和之后的版本最后可以有50个cookie。
（3）Firefox最多50个cookie
（4）chrome和Safari没有做硬性限制
IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。
IE 提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。
优点：极高的扩展性和可用性
通过良好的编程，控制保存在cookie中的session对象的大小。
通过加密和安全传输技术（SSL），减少cookie被激活成功教程的可能性。
只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点：
Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉.
安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

20、浏览器本地存储
在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

21、cookie 和session 的区别：
（1）cookie数据存放在客户的浏览器上，session数据放在服务器上。
（2）cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
（3）session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
（4）单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
（5）所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中

22、如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式

23、js延迟加载的方式有哪些？
defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js。

24、列举IE 与其他浏览器不一样的特性？
（1）IE支持currentStyle，FIrefox使用getComputStyle
（2）IE 使用innerText，Firefox使用textContent
（3）滤镜方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num
（4）事件方面：IE：attachEvent：火狐是addEventListener
（5）鼠标位置：IE是event.clientX；火狐是event.pageX
（6）IE使用event.srcElement；Firefox使用event.target
（7）IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置margin:0;padding:0以及list-style:none
（8）CSS圆角：ie7以下不支持圆角

25、javascript对象的几种创建方式
（1）工厂模式
（2）构造函数模式
（3）原型模式
（4）混合构造函数和原型模式
（5）动态原型模式
（6）寄生构造函数模式
（7）稳妥构造函数模式

后续还在陆续更新~~~