常见面试问题——JavaScript

不厉害的粟壳
106 阅读4分钟

基础及数据类型相关

  • js有哪些数据类型？
  • 数据类型检测的方式有哪些？typeof 和 instanceof 区别？
  • 类型转换机制？== ===有什么区别？
  • count++和++count的区别?
  • 字符串常用方法
  • 数组常用方法
  • 数组如何进⾏降维（扁平化）
  • 数组中的forEach和map的区别？
  • 数组去重，能⽤⼏种⽅法实现？
  • for in和for of的区别?
  • 浅拷贝和深拷贝的区别？如何实现深拷贝？
  • 逻辑与&&和逻辑或||的本质和区别？

es6

  • promise
  • async await
  • 项目中用过哪些 es6 新特性

高级

  • 说说你对严格模式的理解？
  • 组合函数以及组合函数的作⽤？
  • 什么是函数柯⾥化？柯⾥化有什么作⽤？
  • 什么是纯函数？如何编写纯函数？
  • 说说你对GO/AO/VO的理解？
  • 说说什么是函数回调？什么匿名函数？
  • new 操作符具体做了什么
  • 原型、原型链
  • 作用域、作用域链
  • 什么是变量提升、函数提升？
  • 执行上下文、执行栈
  • 谈谈对this 对象的理解
  • this的绑定规则有⼏种？
  • bind、apply、call区别？如何实现一个 bind？
  • 闭包的理解和使用场景
  • 如何实现函数缓存？有什么应用场景？
  • 说说你对⾯向对象多态的理解 事件
  • 说说js的事件模型
  • 什么是事件代理/事件委托？有什么应用场景？
  • 对事件循环的理解
  • 本地存储方式有哪些？区别及应用场景？
  • 函数式编程是什么？
  • ajax原理及实现
  • js 如何实现继承？
  • 尾递归？

DOM、BOM

  • prefetch 与 preload 的区别是什么?应⽤场景？
  • 说出对DOM和document对象的理解，DOM操作
  • DOM 中 Element 与 Node 有何区别
  • 说说常⻅的节点（Node）属性
  • 说说attribute和Property的区别和关系
  • 说说load和DOMContentLoaded的区别
  • BOM

浏览器原理

  • 浏览器内核是什么？有哪些常⻅的浏览器内核？
  • 说出浏览器输⼊⼀个URL到⻚⾯显示的过程?
  • 说说你对 JS 引擎的理解
  • 说说V8引擎的内存管理
  • 说说V8引擎的垃圾回收器
  • 说说线程和进程的区别以及关系
  • JavaScript为什么是单线程？
  • 浏览器是多进程的?
  • 什么是重排重绘，如何减少重排重绘

应用场景题：

  • 点击 a 标签下载⽂件如何做？
  • 如何实现⻚⾯⽂本不可复制
  • 如何实现大文件断点续传
  • 防抖节流
  • 如何判断元素是否在可视区域里
  • 什么是单点登录？如何实现？
  • 如何实现上拉加载下拉刷新？
  • web常见的攻击方式？
  • 内存泄漏问题
  • 数字精读丢失问题

有哪些数据类型？

  • 栈：原始数据类型（Undefined、Null、Boolean、Number、String、Symbol、BigInt）
  • 堆：引用数据类型（Object、Array、Function）（在栈中存放指针）

数据类型检测的方式有哪些？

  • typeof Array、Object、Null都会被判断为object
  • instanceof 原理是判断在其原型链中能否找到该类型的原型
  • constructor 对象实例通过 constrcutor 对象访问它的构造函数
  • Object.prototype.toString.call()使用 Object 对象的原型方法 toString 来判断数据类型
console.log(typeof []); // object
console.log(function(){} instanceof Function); // true
console.log(({}).constructor === Object); // true

function Fn(){}; 
Fn.prototype = new Array(); 
var f = new Fn(); 
console.log(f.constructor===Fn); // false 
console.log(f.constructor===Array); // true

console.log(Object.prototype.toString.call(2)); // [object Number]
console.log(Object.prototype.toString.call([]).slice(8, -1)); // Array

怎么理解原型和原型链？

  • 每个对象被创建出来时都有一个对应的原型，使对象共享原型的属性与方法。
  • 当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到属性或到达原型链的末尾。

prototype 和__proto__ 的关系？

  • 所有构造函数都有prototype 显式原型属性，定义函数时被自动赋值。
  • 所有实例对象都有__proto__ 隐式原型属性，创建实例对象时被自动添加, 并赋值为构造函数的prototype值。
function Person(name,age){
    this.name = name
    this.age = age
}

let person1 = new Person('alex',12)
  • person1.__proto__ = Person.prototype
  • Person.prototype.__proto__ = Object.prototype
  • Object.__proto__ = Function.prototype
  • Function.__proto__ = Function.prototype
  • Object.prototype.__proto__ = null
  • Function.prototype.__proto__.__proto__ === null
  • Function.prototype.__proto__ = Object.prototype

原型.png

作用域、执行上下文

  • 作用域: 静态的, 编码时就确定了(不是在运行时), 一旦确定就不会变化了
  • 执行上下文: 动态的, 执行代码时动态创建, 当执行结束消失
  • 联系: 执行上下文环境是在对应的作用域中的

DOM 文档对象模型

  • 节点操作
//创建节点
const divEl = document.createElement("div");
const textEl = document.createTextNode("content");
const fragment = document.createDocumentFragment();

//获取节点
document.querySelector('.element')
document.querySelectorAll("p")
document.getElementById('id')
document.getElementsByClassName('class')
document.getElementsByTagName('tag')
document.getElementsByName('name属性值')
document.documentElement //html
document.body //body
document.all['']
//或者通过节点的亲缘关系获取

//获取属性
div.getAttribute('id')
//设置属性
div.setAttribute('id','111')

//修改节点
var p = document.getElementById('p');
p.innerText = 'Hi';
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
p.style.fontSize = '20px'

// 添加节点
parentElement.appendChild(newElement);
parentElement.insertBefore(newElement, referenceElement)
element.setAttribute('className', 'value')

// 删除节点
parentElement.removeChild(childElement);

BOM 浏览器对象模型

  • window 对象
    • global作用域
    • 窗口：位置、移动、获取大小、调整大小、窗口加载事件window.onload = function(){}
    • 视口：滚动页面
    • 打开新窗口：window.open()
    • 定时器：setTimeout() setInterval()
    • 系统对话框：alert() confirm() prompt()
  • location 对象（url）
    • window.location === document.location`
    • 查询URL解析后的属性值：port、 pathname 、search ……
    • 操作地址：location.assign() location.reload()
  • history 对象
    • 导航：go() back() forward()
    • 历史状态管理：history.state history.pushState()
  • navigator 对象 （浏览器）
  • screen 对象
avatar
文章
阅读
粉丝