js 基础面试题
js 由哪三部分组成
ECMAScript js核心内容
DOM 文档对象模型
BOM 浏览器对象模型
一、数据类型
基本类型: string number boolean null undefined 【symbol bigint】
引用类型: Object(object array Function 内置对象： Date RegExp Map Set Promise)
数据类型检测
typeof 对基本类型没问题
对function正常检测
对引用类型无法区分
null因为历史原因为判断为 object
instanceof 通过查找构造函数的方式判断类型
Object.prototype.toString.call()
原型和原型链问题
原型： 构造函数（包括普通函数）都有一个属性 `prototype` 指向它的原型对象，通过 `new` 关键字创建的实例的 `__proto__` 也指向这个原型对象，原型对象的 `constructor` 指向该构造函数
函数拥有 prototype
对象有 __proto__
原型链：
末端是 Object.prototype 最顶端是 null
作用域问题
在 ES6 之前，JavaScript 只有函数作用域和全局作用域，`var`声明的变量会 “提升” 到函数顶部。
ES6 引入`let`和`const`后，变量在代码块（如`if`、`for`、`while`）内形成独立作用域，外部无 法访问
作用域链：内部可以访问外部的变量、外部不能访问内部，如果内部有，优先查找内部
注意未声明是 window
声明变量 > 声明普通函数 > 参数 > 变量提升
js 对象
对象是通过new操作符构建出来的，所以对象之间不相等
对象注意：引用类型
对象的 key 都是字符串
闭包问题
有权访问另一个函数内部作用域变量的函数，也就是嵌套函数，即使函数执行完毕变量也不会被销毁
防抖和节流都有使用闭包
闭包的优点：
闭包的缺点：
闭包问题引出防抖和截流
```function debounce(fun, delay) {
let timer = null
return function (...args) {
if (timer) {
clearTimeout(timer)
}
let timer = setTimeout(() => {
fun.apply(this, args)
timer = null
}, delay);
}
}
function throttle(fun, delay){
let timer = null
return function(...args){
if(!timer){
timer = setTimeout(() => {
fun.apply(this, args)
}, delay);
}
}
}
事件循环 eventLoop
js是单线程的，执行分为同步任务和异步任务
异步任务又分为
this指向问题
全局中this指向 windows
函数中，非严格模式this指向windows、严格模式this指向 undefined
对象方法调用 this 指向调用方
构造函数中this指向新创建的实例对象
箭头函数中 this 指向上外层作用域
通过bind/apply/call可以改变this的指向
new 关键字
- 创建一个空对象
- 将新对象的原型链指向构造函数的 prototype
- 将构造函数的this指向新对象并执行函数代码
- 返回这个对象(优先显示)
function New(Fun,...args){
const newObj = Object.create(Fun.prototype)
const result = Fun.call(newObj,...args)
return newObj
}
数组去重的方法
new set
使用对象记录遍历
遍历使用 include 或者 indexOf 重复的不添加新数组中
sort 通过排序 排序后遍历相邻不相等再添加新数组中
Promise 问题
js继承
原型链继承
构造函数继承
组合继承
class 继承
call\apply\bind
改变函数体内的this指向
apply 参数是 array 立即执行
call 参数是单独的 立即执行
bind 参数是单独的 bind只绑定不立即执行 返回一个永久绑定this的函数
sort 原理
默认排序是使用 Unicode 码点
可选参数函数 a-b 是升序 b-a是降序 对象的话也可以这样处理
负数 a排在b前边
正数 b排在a前边
深拷贝 浅拷贝
开发中深拷贝使用 loadsh 方法
浅拷贝复制的是引用
浅拷贝使用 扩展运算符或者 Object.create(obj) 或者 Object.assign({},obj)
深拷贝简单对象的话可以使用 JSON.parse(JSON.stringify) 【特别注意 undefined 和 null】
也可以使用递归遍历的形式自己创建拷贝函数
本地存储 localStorage sessionStorage cookie
两个Storage 的存储大小基本上都大于5M
sessionStorage 刷新页面或导航数据不会被清除
正常关闭标签会被清除
意外闪退或者重新打开关闭的标签根据浏览器的功能特性有可能被恢复
localStorage 只要不手动清除 永久保存 持久化存
cookie
es6+ 新增了哪些
let const
扩展运算符 ...
`` 模版语法
解构赋值 le [a, b] = [10,20]
=> 箭头函数
map some find findIndex 等方法
every filter
Vue相关
生命周期
Vue2 的生命周期
使用 Keep-alive 后还会增加两个 actived deactivated
created
actived keep-alive
mounted
updated
deactivated keep-alive
destory
Vue3 的生命周期
onMounted
onUpdated
onUnMounted 卸载
onActivated keep-alive
onDeactivated keep-alive
这三个新增的
onErrorCaptured,
onRenderTracked,
onRenderTriggered
vue2和vue3的区别
响应式从 Object.defineProperty 改成了 Proxy 支持深层次响应 性能更优
组合式API 解决选项api的碎片化问题
支持 数摇 Tree Shaking 按需引入api 减小打包体积
虚拟dom重写 diff算法优化
新组件 teleport 组件内容可以渲染到 dom 任意位置
新组建 suspense 处理异步组件加载
对 typescript 支持更加友好
可以使用多个根节点
移除 Vue.config.productionTip、
移除 Vue.filter() 管道符过滤器
移除 $on $off $once $set $delete
移除：beforeCreate、created（用 setup() 替代）
Vue3的虚拟DOM的diff算法做了哪些优化
静态提升
事件监听缓存
tree shaking 打包优化
Vue3 常用的响应式数据类型
ref 取值必须.value 主要用来 基本类型 还是使用的 Object.defineProperty 解构后响应丢失
reactive 直接取值 引用类型 复杂对象、数组、Map\Set等 可以深层次响应 解构后响应保持
toRef 解构保持响应式
toRefs 解构保持响应式
vue 传值
父传子(孙)
父组件绑定数据子组件通过props接收，子不能直接修改父的数据
父组件通过 $children 访问子组件实例 不推荐
父组件通过 $refs 访问子组件实例
$attrs 剩余数据
子传父
子组件通过 $emit 方法给父组件传值
子组件通过 $parent 方法访问父级实例 不推荐
其他
事件总线 eventBus(跨层级) Vue3不支持
provide/inject（跨层级）
其他工具类
vuex pinia mitt （跨层级）
vuex
state 状态
Getters 计算属性、修饰方法
Mutations 同步修改 唯一可以修改 state 的钩子
Actions 支持异步操作
Modules vuex同时支持模块儿化
slot 插槽
匿名插槽
具名插槽
作用域插槽 就是可以传值的
11
