前端面试题之js篇

一、js基本类型

1. 基本数据类型：string, number, boolean, null, undefined, symbol（唯一字符）和bigint

存放： 栈内存

2. 复杂数据类型: Object（普通对象，object, Function, Array, RegExp和Math)

存放： 堆内存，存储的是地址，引用数据类型，多个数据指向同一个地址；栈内存中存储的是堆内存中对象的引用

如果引用类型作为函数参数传入的话，传入的是引用类型的内存地址

 3.数据的类型检测

1） typeof 可以判断基础类型，除了null之外的，而引用类型除了function都会显示object

2)  instanceof 可以判断引用类型，内部机制是数据能否找到类型的prototype

3)  constructor可以判断，但是constructor可以任意更改

4）Object.prototype.toString.call()可以很好的判断引用类型

4. null和undefined的区别

1）数据类型不一样 null是空对象，undefined是未定义

2）两者相等，但是全等比较不相等

3）转化成数字 null是0，undefined是NaN(Not a number)

null == undefined

4. NaN与任何值都不相等

二、js方法

1. 字符串方法

charAt(): 找到指定位置的字符串

concat(): 拼接两个字符串

indexOf(): 找到字符对应的位置

includes(): 判断字符串是否包含指定的字符串

match(): 检索指定的值

repeat()：复制字符串并指定次数

search()：找到子字符串并返回该子字符串位置

字符串是不能被更改的

2. 数组方法

改变原数组的方法

pop()

push()

shift() 不接受参数，如果有参数不产生任何影响,只是去除第一个元素

unshift()

splice(indexA,  num, value)从索引 indexA 删除一个元素，然后添加num个元素，元素值为 value

reverse()

fill()

sort()

不改变原数组的方法

concat() 返回新数组

join() 把数组里的元素通过指定的字符串拼接

toString() 数组转换成字符串

filter()

find()

map() 将数组里的每一项进行更改

3. 对象方法

Object.assign(target, ...sources)可以实现数组的复制以及合并

三、 JS 的加载方式

1.浏览器的渲染机制

• 解析 HTML，生成 DOM 树； 解析 CSS，生成 CSSDOM 树
• 将 DOM 和 CSSDOM 结合，生成 Render 树
• 回流：根据渲染树以及回流得到几何信息，得到节点的绝对像素
• 展示：将像素发给 GPU，展示在页面上

2.回流和重绘

回流：render树部分或全部因为大小边距等问题而需要重新计算 DOM 树的情况；1.初次渲染、窗口大小改变、尺寸、位置、内容发生改变、字体大小改变、添加或删除可见的 dom、激活 CSS 伪类； 重绘：颜色、阴影、文本方向

3.如何减少回流和重绘

• 设定元素要用 className类名
• 避免设置多项内联样式
• 应用元素的动画，使用 position 的 fixed 或 absolute
• 避免使用 table 布局
• 对于操作复杂的操作，用 display: none先隐藏，结束后再显示

四、 this

1.不同环境下的 this 指向

1）全局作用域下的 this

指向 window

2）函数内的 this

严格模式下，指向调用的对象；

非严格模式下，指向全局

3）对象中的 this

对象内部方法：谁调用就指向谁；在二层对象中指向离被调用函数最近的对象

4）箭头函数中的 this

箭头函数没有自己的 this，会捕获自己定义所处的外层执行环境，并且继承这个 this 值；

5）构造函数中的 this

构造函数的 this 指向构造函数下创建的实例

6）原型链中的 this

this 在这之中找到它原本属于的对象

2.改变 this指向的方式

call、 apply、 bind的区别

- call、 apply 、 bind 都是改变 this 指向的，bind 是创建一个新的函数，call 和 apply 是用来调用函数的， call和 apply 作用一样，call 是一个个罗列出来，apply 为函数提供参数是一个数组

五、内存泄露

内存泄露是指对象不会再被程序用到了，又没有给操作系统空闲值

• 全局变量引起的
• 恶性循环造成泄露
• 未及时清楚定时器
• DOM 创建造成
• 元素引用没有清除
• console.log没有清除
• 循环引起泄露
• 闭包造成的泄露

六、箭头函数

• 没有自己的 this，会捕获上下文的 this
• 箭头函数 this 在定义时确定
• 箭头函数不能作为构造函数
• 没有自己的 arguments
• 没有原型
• 不能作 Generater函数

七、 Promise

2. 解构

function side(arr) {
    arr[0] = arr[2];
}

function func2(a, b, c) {
    c = 10;
    side(arguments);
    console.log(a + b + c);
}
func2(1, 1, 1);

八、原型和原型链

原型分为显示原型：构造函数的 prototype； 隐式原型：实例对象的__proto__,每次实例对象查找某个属性的时候，自己和原型对象上都没有，就会沿着 proto属性去找如果原型上没有，会去原型的原型上找，用来实现继承和共享属性，这个链路就叫原型链

九、宏任务和微任务

十、垃圾回收

• 标记清除法
• 引用计数法

每执行一个宏任务，要执行剩下所有的微任务

十一、浏览器的自适应的实现方式

十二、 import和 require 的区别是什么

1）遵循的规范不同，require 是 AMD，import是 ES6，但是在 node 中要通过 babel 转换成 ES5 供浏览器编译

2）引入的时机不同，require 是运行时引入，import 是编译时引入

3）值引用方式不同，require 是值的拷贝（深拷贝），import是值的引用（浅拷贝）