1、js的数据类型
基础数据类型、值类型
数据类型 | typeof 值 | 举例 |
---|---|---|
String字符串 | string | “abc”undefined'abc'undefineddef |
Number数字 | number | 123,-12.5 |
Boolean布尔 | boolean | trueundefinedfalse |
undefined未定义 | undefined | undefined |
Symbol符号 | symbol | symbol |
null 空 | object | null |
复数据类型,引用类
数据类型 | typeof | 举例 |
---|---|---|
Array数组 | object | [] |
Object对象 | object | {} |
function函数class类 | function | function(){} |
Map图 | object | new Map([[]]) |
Set集合 | object | new Set([]) |
weakMap,weakSet | object | |
DateundefinedMathundefined | object |
2、值类型与引用类型的区别
值类型 key和value都存储在栈中。
引用类型栈中存放内存地址,真正值存储在堆中
// 值类型 var a = 15; var b = a; b = 20; // b与a相互不影响 // 引用类型 var a = {age:15} var b = a; // 把a的内存地址赋给b,a与b的值都指向同一堆中的内存地址 b.age= 18; // 这个时候a.age 的值也是18
一个引用类型堆中的值可以被多个变量引用,修改其中一个会影响到其它。
3、什么是闭包,闭包的应用场景,闭包的缺点
闭包就是函数嵌套函数,函数作为参数被传入,作为返回值被返回。
闭包作用:
-
形成局部作用域,
-
在函数外部可以访问函数内部的局部变量
闭包的缺点
被闭包引用的变量不会被 销毁,会常驻内存,使用不当容易造成内存崩溃
4、什么是原型,什么是原型链
每个构造函数(class)都有一个显示的原型prototype
每个实例对象都有个隐示原型proto
实例的隐式原型proto等于其构造函数的显示原型prototype
当查找一个对象的属性或方法时先在实例上查找,找不到沿着proto向上逐级查找
我们把proto的proto形成的链条关系成为原型链
作用:1 原型链实现了js继承,2.原型可以给构造函数创建的实例添加公用方法
5、JS如何实现继承
-
class使用extends关键字实现继承
-
通过原型链实现继承,
function B(){ A.call(this) //实现构造函继承 } B.protoytpe = Object.create(A.prototype) //实现原型继承 B.prototype.constructor= B //修正构造函数
6、Call,apply的区别
call与apply都是执行一个函数,用第一个参数冒充函数的this
apply参数用的是数组形式
7、new关键字做了什么?
-
创建空对象
-
call执行构造函数并传入空对象作为this
-
指定空对象的构造函数
8、深拷贝&浅拷贝
深拷贝的方法
1、转字符串
var obj2 = JSON.parse(JSON.stringify(obj1))
2、 递归
function deeCopy(obj){ if(typeof obj==="object"&&obj!==null){ var result; if(obj.instanceof Array){ result = []; for(var i=0;i<obj.length;i++){ result[i] = deepCopy(obj[i]) } }else{ result = {}; for(var k in obj){ result[k] = deepCopy(obj[k]) } } return result; }else { return obj; } }
浅拷贝的方法
1、Object.assign(AundefinedB)
2、for in遍历拷1遍
3、{...A}对象扩展
9、js检测对象类型
typeof :引用类型除function都返回 object
instance :是某个函数的实例,在原型链有该构造函返回true
最准确:Object.prototype.toString.call(obj).slice(undefined-1)
10、事件流
冒泡流:事件由最具体的元素响应然后组件冒泡到最不具体的元素(html)
捕获流:从最不具体的元素捕获事件
开启捕获 addEventListenter第三个参数 true
阻止事件冒泡:e.stopPropagation()
11、事件代理
$(父元素).on(事件名,子选择器,响应函数)
把事件注册到多个元素共有的父元素上,通过事件的冒泡机制 响应事件
作用:动态添加的元素也可以响应事件
12、数组去重
set去重
filter过滤
var arr2 = arr1.filter((item,index)=>arr1.indexOf(item)===index)
13、异步和同步
同步是按顺序执行,会阻塞代码
异步非阻塞式执行代码
异步方法:回调函数,Promise,订阅发布模式,事件响应,async和await
14、手写ajax
ajax核心是通过XMLHttpRequest(xhr)与服务器异步交换数据,实现前端刷新更新视图
var xhr = new XMLHttpRequest(); // 创建一个xhr对象 xhr.open("get","url地址") //打开连接get方式 xhr.send(data) // 发送数据到服务器 xhr.onreadystatechange = function(){ // 监听xhr的变化 if(xhr.readystate===4){ //状态4成功 if(xhr.status ===200){ //响应码200 // xhr.responseText 获取的数据 } } }
15、Promise
Promise 实现异步操作,解决回调函数层级过多形成的回调地狱问题
Promise resolve与reject状态发送改变不能更改
var p = new Promise((resolve,reject)=>{ var num = Math.random(); if(num>0.5){ setTimeout(()=>resolve(num),2000) }else{· reject(num) } }) p.then(res=>{ // 成功 得到resolve的值 }) .catch(err=>{ // 拒绝 得到reject的信息 })
Promise.reject()
Promise.all() 多个promise多完成才返回结果
Promise.race() 多个promise执行返回最快的一个
你在哪些地方用到promise
-
定义api请求接口
-
自定义jsonp用到
-
弹框插件等待用户确定则resolve
-
封装actions 用sync装饰 await实现异步
(等待,网络,等待用户确定的)(异步操作都会用到promise)
16、get与post区别
get 获取数据
post 新增,修改,删除
put 修改
delete 删除
get 有缓存的,可以收藏书签,方向,数据量2k
post 没有缓存,理论上没有大小限制
17、如何实现跨域
-
jsonp
-
后端响应头允许
-
代理
无论哪种跨越都需要后端支持
18、什么是MVVM(前后端分离)
M:model 模式存储数据
V:view 显示内容(html)
VM viewModel视图模块 连接视图与model模型 (
)
当model数据发生变化时候通过VM可以监听变化更新视图
当view视图发变化时候通过VM可以监听变化自动更新model数据
19、Vue2 响应式原理,(双向绑定的原理)
通过Object.defineProperty劫持对象的getter与setter
通过订阅与发布者模式结合
er观察者来连接视图与数据
当数据发生变化时候通知说要订阅该数据的订阅者更新
20、v-if与v-show的区别
都可以隐藏节点
v-show通过css方式隐藏
v-if 直接移除dom节点
频繁切换显示与隐藏用v-show反之用v-if