1. js的基本类型有哪些?引用类型有哪些?
基本数据类型:
undefined、null、boolean、number、string
引用数据类型:
function、object、array
2、null和Undefined的区别
Undefined:表示变量声明但未初始化时的值
null:表示准备用来保存对象,还没有真正保存对象的值。从逻辑角度看,null值表示一个空对象指针。
3、如何判断一个变量是Array类型?如何判断一个变量是Number类型? ( 都不止一种 )。
- typeof:识别所有值类型;识别函数;判断是否为引用类型。
- instanceof:[ ] instanceof Array 判断是否为实例(只有在原型链上有)
- constructor:[ ].constructor==object 判断其构造函数
- object.prototype.toString.call( ) :执行原型中的toString方法并改变this指向obj
- Array.isArray 判断是否为数组。
4、数组常用方法
- 遍历 forEach
- 所有 every
- 排序 sort
- 查找下标 findIndex
- 查找 find
- 累计 reduce
- 映射 map
- 过滤 filter
- 有一个: some
详细介绍请访问下面这个博客地址:
数组的常用方法详解
5.、解释一下事件冒泡和事件捕获?
事件冒泡: 当你使用事件捕获时,父级元素先触发,子级元素后触发。
e.stopPropogation() 阻止时间冒泡流
e.preventDefault() 阻止默认事件
事件捕获: 当你使用事件冒泡时,子级元素先触发,父级元素后触发。
element.addEventListener(callbacak,false)
6、简单说一下对闭包的了解
闭包就是函数嵌套函数的特殊形式:
- 函数作为参数被传入
- 函数作为返回值被返回
闭包其实也是自由变量的特殊表现形式:
- 自由变量:没有在当前作用域声明的变量
- 自由变量的值和作用域是在函数定义的时候去欸的那个,不是在函数执行的时候确定
优点:
- 可以变量私有化,避免变量的全局污染
- 自由变量值,存储在内存中不会被销毁
应用场景:
- 封装组件,插件库的时候避免变量全局污染
- 创造局部作用域变量,类似于let效果
7、如何实现继承
- 构造函数绑定:使用 call 或 apply 方法,将父对象的构造函数绑定在子对象上
functionA(name){this.name=name}
functionB(name,age){
A.call(this.age)
this.age = age;
}
B.prototype = Object.create(A.prototype)
B.prototype.constructor = B
- 实例继承:将子对象的 prototype 指向父对象的一个实例
- 拷贝继承:如果把父对象的所有属性和方法,拷贝进子对象
- 原型继承:将子对象的 prototype 指向父对象的 prototype
- ES6 语法糖 extends:class ColorPoint extends Point {}
8、原型与原型链应用场景
- 每一个对象都有一个隐式原型__proto__
- 每一个构造函数都有一个显示原型__prototype__
- 对象实例的隐式原型等同于,创建该对象的构造函数的显示原型prototype
- 原型链:
当查找一个对象的方法和属性,先在自身对象属性上查找,找不到,则沿着隐式原型__proto__向上查找,(proto.proto) - 应用场景:
1.实现继承
2.创建实例的公共方法:Vue.prototype.$http = axios
9、this指向问题
- 全局 window :script
setInterval.setTimeout - 对象 指对象本身
- 构造函数的实例
- class类的实例
- 箭头函数 指向上一层作用域this
- 函数 函数的直接调者
- call.apply.bind 指向第一个参数
10、浏览器的渲染过程
- 解析 HTML 构建 DOM(DOM 树)
- CSS 文件下载完成,开始构建 CSSOM(CSS 树)
- 合并dom和css树,生成 渲染树
- 渲染页面
11、在地址输入一个地址 按回车 :
- 查找IP
a. 浏览器缓存
b. host文件
c. 本地缓存
d. dns服务器向上查询 找到域名对应的 IP 为止 - 得到响应数据 : 三次握手 四次挥手 建立连接,下载html,根据 html 下载其他资源
12.前端性能优化
- 减少 http 请求和大小 (压缩与合并)+ base64 图片
- 优化首屏的渲染速度 (css放前面,js放后面,避免错误,只加载首屏的必要资源)
- 按需加载,懒加载,预加载 (js,css,图片,页面,按需 懒预加载)
- 让加载更快 启用 CDN ,开启gzip,缓存
13、promise
ES6 新增方法:解决异步操作,回调函数层级过深的问题(回调地狱)
详细介绍请进入以下链接
promise详解
14、跨域
- 跨域考虑到安全问题,有同源策略
- 所谓同源策略,就是“端口,域名,协议”三者一致,就算有两个相同的域名访问统一IP地址,也非同源
- 如果“端口,域名,协议”三者内有一者不相同,就称为跨域
跨域解决方案:
十种跨域方案详解
15、数组去重
- es6 中的set
- 遍历去重
1、fliter : 当前的index与indexOf(elem)的值不一致去重
2、对象key唯一 :用一个临时对象吧数组的值,当key存储在对象中,如果对象上已经有key值,说明数组的值是重的
16、事件循环机制
js是基于V8引擎的单线程运行机制:也就是在主线程中,代码的执行是顺序执行的
- 宏任务:setTimeout、setInterval, Ajax,DOM事件
- 微任务:Promise, async/await,process.nextTick
先执行微任务再执行宏任务
17、重绘(回流)和重排
回流不一定需要重排,重排必然会导致重绘
1、重排:当渲染树的一部分必须更新并且节点的尺寸发生了变化,重新构造渲染树。
- 添加、删除可见的dom
- 元素的位置改变
- 元素的尺寸改变(外边距、内边距、边框厚度、宽高等几何属性)
- 页面渲染初始化
- 浏览器窗口尺寸改变
2、重绘:一般都是修改元素样式,例如颜色,字体大小,背景
减少重绘重排
1、不要一条一条的修改DOM的样式,可以先定义好css的class,然后修改DOM的className。
2、不要把DOM结点的属性值放在一个循环里当成循环里的变量。
3、加动画的HTML元素适用fixed或absolute的position,那5这样修改他们的css是不会reflow