JS基础
2020-11-28 本文已影响0人
阿羡吖
A、判断类型的方式
1.typeof
可以判断出'string','boolean','undefined','symbol','number'
但判断 typeof(null) 时值为 'object'; 判断数组和对象时值均为 'object'
2.instanceof
原理是 构造函数的prototype属性是否出现在对象的原型链中任何位置
3、Object.prototype.toString.call()
常用于判断浏览器内置对象 对于所有基本的数据类型都能进行判断 即使是null 和 undefined
4、Array.isArray()
用于判断是否为数组。
B、闭包
闭包的概念：闭包就是能读取其他函数内部边变量的函数
优点：
避免全局变量污染
希望一个变量长期存储在内存中(缓存变量)
缺点：
内存泄露 (消耗)
常驻内存 增加内存使用量
C、深浅拷贝
1、
a、浅拷贝 object.assign()
b、 扩展运算符
2、深拷贝
a、JSON.parse(JSON.stringify());
b、递归
c、jq 的 extend $.extend(true,{},obj);
D、数组去重的方法
1、ES6的 Set
let arr = [1,1,2,3,4,5,5,6]
let arr2 = [...new Set(arr)]
2、reduce()
let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.reduce(function(ar,cur) {
if(!ar.includes(cur)) {
ar.push(cur)
}
return ar
},[])
3、filter()
let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.filter(function(item,index) {
// indexOf() 方法可返回某个指定的 字符串值 在字符串中首次出现的位置
return arr.indexOf(item) === index
})
E、DOM事件有哪些阶段？谈谈对事件代理的理解
分为三大阶段：捕获阶段 --> 目标阶段 --> 冒泡阶段
事件代理简单来说：事件不能直接绑定在某元素上 而是绑定到该元素的父亲元素上 进行触发事件操作时 通过条件判断 执行事件触发后的语句（例：alert(e.target.innerHTML)）
好处：使代码更简洁 节省内存开销
F、js执行机制 事件循环
Js语言一大特点就是单线程 同一个时间只做一件事情 所有的任务都得排队。前一个结束 后一个才开始执行 为了解决这个问题。将所有任务分为两种
同步任务和异步任务 在所有的同步任务执行完之前 异步任务不会执行
同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入 Event Table 并注册函数。当指定的事情完成时，
Event Table 会将这个函数移入 Event Queue。主线程内的任务执行完毕为空，会去 Event Queue 读取对应的函数，进入主线程执行。上述过程会不断重复，
也就是常说的 Event Loop(事件循环)。
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为 Event Loop（事件循环）。
只要主线程空了，就会去读取"任务队列"，这就是 JavaScript 的运行机制。
G、js的垃圾回收机制
指的是 一块被分配的内存既不能使用 又不回收 直到浏览器进程结束
4种常见的内存泄漏：全局变量、未清除的定时器、闭包、以及DOM的引用
1、全局变量 不用var 声明的变量 相当于挂载到window对象上 如：b =1; 解决：使用严格模式
2、被遗忘的定时器和回调函数
3、闭包
4、没有清理的DOM元素引用
H、前端性能优化的7大手段
1、减少请求数量
2、减小资源大小
3、优化网络链接
4、优化资源加载
5、减少重绘回流
6、性能更好的API
7、webpack优化
I、箭头函数 与 普通函数的区别
1、箭头函数是匿名函数 不能作为构造函数 不能使用new
2、箭头函数不能绑定arguments 取而代之用 rest参数 解决
3、箭头函数没有原型属性
4、箭头函数的this永远指向其上下文的this 没有办法改变其指向 普通函数的this指向调用它的对象
5、箭头函数不能绑定this 会捕获其所在的上下文的this值 作为自己的this值
J、如何实现js中的继承
1、原型继承第一种
function Cat(name){
this.name = name;
}
//原型继承
Cat.prototype.say = function(){
alert("你好，我是一只猫，我叫："+this.name);
}
2、原型继承第二种：
function Cat(name){
this.name = name;
}
function Animal(){}
Animal.prototype.run = function(){
alert("动物跑");
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
3、借用构造函数继承
function Cat(name,age){
Animal.call(this,name,age);
}
function Animal(name,age){
this.name = name;
this.age = age;
}
4、经典继承
function create(obj){
if(Object.create){
return Object.create(obj);
}else{
function F(){};
F.prototype = obj;
return new F();
}
}
K、JavaScript的事件流模型
"事件冒泡":事件开始由最具体的元素接收，然后逐渐向上传播
"事件捕捉"：事件由最不具体的节点接收，然后逐级向下，一直到最具体的
"DOM事件流":三个阶段：事件捕获，目标阶段、事件冒泡
L、js延迟加载的方式
```defer```、```async```、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callback）、按需异步载入js
M、promise、generator、async/await 怎么使用 有什么区别。
N、简述cookie、localStorage、seeionStorage
| 名称 | 大小 | 网络请求 | 生命周期 |
|---|---|---|---|
| cookie | 4kb左右 | 每次都会携带HTTP头中，如果使用cookie保存过多的数据会带来性能问题 | 默认是关闭浏览器后失效，但是也可以设置过期时间 |
| localStorage | 5M | 仅在浏览器中保存，不参与和服务器的通信 | 除非手动被清除，否则永久保存 |
| sessionStorage | 5M | 仅在浏览器中保存，不参与和浏览器的通信 | 仅在当前会话（窗口）下有效，关闭窗口或浏览器后被清除，不能设置过期时间 |
