js前端面试题大全

1、js中的宏任务和微任务

宏任务包括：setTimeout setInterval Ajax Dom事件
微任务: promise async/await
注意：微任务比宏任务的执行时间要早
宏任务
(macro)task，可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。
浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染，流程如下：

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

微任务
microtask,可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。
所以它的响应速度相比setTimeout（setTimeout是task）会更快，因为无需等渲染。也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）。

Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 环境)

2、JS的防抖与节流。 回流和重绘

js防抖与节流的区别与相同点：
都是为了防止一段时间内多次执行事件，消耗浏览器性能。
不同点：防抖是在同一时间段执行多次,但是只在最后一次有效（执行）；每次触发函数清除掉原来的定时器，重新开始计时。
如果在规定时间内不再触发函数，则执行，否则，清除掉之前的定时器，重新计时。
节流：在一段时间内，只能触发一次函数。
做法：触发函数时判断是否到达了指定时间，如果到达了指定时间，执行；否则不执行弹出警告
防抖与节流的常见应用：
1）按钮的点击提交；
2）在input输入框中执行输入搜索事件;

   // 防抖
   function debounce (callback,delay) {
        var t = null;
        return function () {
            clearTimeout(t);
            t = setTimeout(callback,delay);
        }
    }
    window.onscroll = debounce(function(){
        console.log("调用了一次");
    },500)
    
    // 节流;
    function throttle (callback,duration){
        var lastTime = new Date().getTime();
        return function () {
            var now = new Date().getTime();
            if(now - lastTime > 500){
                callback();
                lastTime = now;
            }
        }
    }
    window.onscroll = throttle(function(){
        console.log("调用了一次");
    },500)

回流和重绘
回流有时也叫做重排或者布局（layout）。通过构造渲染树，将可见DOM节点以及它对应的样式结合起来，可是还需要计算它们在页面内的确切位置和大小，这个计算的阶段就是回流。
或者说：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流(reflow)。
当页面布局或者元素的几何属性需要改变时会引起回流
通过构造渲染树和回流阶段，知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。
重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就会引起重绘。
回流必定会发生重绘，重绘不一定会引发回流。 回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。

（1）回流
当页面布局或者元素的几何属性（位置和大小）需要改变时会引起回流。比如以下情况：
页面首次渲染的时候
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化（文字大小、行高发生变化）或图片被另一个不同尺寸的图片所替代。
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

（2）重绘
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color，会引起重绘。

3、JavaScript中的数据类型，及基本数据类型和复杂数据类型的区别

一、基本数据类型
Number:数值型包含整型和浮点型，注意NaN也属于数值型，但不是一个数字。
String：字符串类型。
undefined：表示未定义，声明变量不赋值的情况下就是undefined。
Boolean：只有两个值，一个是false一个true
null：代表一个空对象
Symbol 类型（基本）
二，复杂数据类型
object：对象类型，我们看到的大多数类型都是对象的实例
Array：数组，注意：需要判断数组和对象的数据类型时候不能用typtof
function：函数
Set 类型（复杂）
Map 类型（复杂）
WeakSet 类型（复杂）
WeakMap 类型（复杂）
TypedArray 类型（复杂）

基本数据类型把数据名和值直接存储在栈当中
复杂数据类型在栈中存储数据名和一个堆的地址，在堆中存储属性和值，访问时先从栈中获取地址再到堆中取相应的值
首先是复杂数据类型保存在堆内存中，而基本数据类型保存在栈内存中，然后声明一个复杂数据类型变量中保存的是一个复杂数据类型的地址，基本数据类型保存的是一个具体的值
声明两个复杂数据类型指向同一个地址的时候，改变一个另一个也会跟着改变

var obj={name:"小明",age:13}
var obj2=obj
obj2.name="小亮"//这时obj一的值也会改变
console.log(obj)//{name:"小亮",age:13}
console.log(obj2)//{name:"小亮",age:13}

堆和栈
的概念存在于数据结构中和操作系统内存中。
在数据结构中，栈中数据的存取方式为先进后出。而堆是一个优先队列，是按优先级来进行排序的，优先级可以按照大小来规定。完全
二叉树是堆的一种实现方式。
在操作系统中，内存被分为栈区和堆区。
栈区内存由编译器自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。
堆区内存一般由程序员分配释放，若程序员不释放，程序结束时可能由垃圾回收机制回收。

4、JS原型与原型链

原型分为两种
prototype 每一个函数都会有prototype属性,被称为显式原型。
proto 每一个实例对象都会有__proto__属性,其被称为隐式原型。

获取对象时，如果这个对象身上本身没有这个属性时，它就会去他的原型__proto__上去找,如果还找不到,就去原型的原型上去找…一直找到最顶层(Object.prototype)为止，Object.prototype对象也有__proto__属性值为null。

这里需要注意的是，Object是原型链的最顶层，所有构造函数的prototype都指向Object.prototype

在 JavaScript 中，每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象，使用原型对象的好处是所有对象实例共享它所包含的属性和方法

5、js判断一个变量是不是数组

1.typeof 不能判断一个变量是不是数组, 因为无论变量Array还是Object, 使用typeof来检测都是返回object

let arr = [1, 2];
console.log(typeof arr); // object

2.instanceof 可以判断一个变量是否为数组

let obj = {'name': 'kankk'};
let arr = [1, 2];
console.log(obj instanceof Object); // true
console.log(obj instanceof Array); // false
console.log(arr instanceof Object); // true
console.log(arr instanceof Array); // true

3.Object.prototype.toString

let arr = [1, 2];
arr.toString() === '[object Array]'; // true
Object.prototype.toString.call(arr) === '[object Array]'; // true