Js 经典面试题

Js 经典面试题

原型与原型链

原型是一个对象，用于实现对象的属性继承，可以理解为对象的父亲，一个函数的原型的原型A.prototype为constructor
每个对象都有一个_proto_指向他的原型
原型链是由原型对象组成，每个对象都_proto_属性，指向了创建该对象的构造函数的原型，_proto_将对象连接起来组成了原型链。是一个用来实现继承和共享属性的有限的对象链。
属性查找机制: 当查找对象的属性时，如果实例对象自身不存在该属性，则沿着原型链往上一级查找，找到时则输出，不存在时，则继续沿着原型链往上一级查找，直至最顶级的原型对象Object.prototype，如还是没找到，则输出 undefined；
属性修改机制: 只会修改实例对象本身的属性，如果不存在，则进行添加该属性，如果需要修改原型的属性时，则可以用: b.prototype.x = 2；但是这样会造成所有继承于该对象的实例的属性发生改变。

判断数组和对象Array.isArray()

扁平化把一个二维数组转变成一维数组

Flat()方法会移除数组的空项

let arr = [1,2,[3,4],[5,6]];
console.log(arr.flat());//方法会移除数组中的空项
//方式二
function Flat(arr){
	var str = arr.toString();//把arr变成一个字符串
	return JSON.parse("["+str+"]");//然后转换成对象
}
console.log(Flat(arr));

//方式三 es6打散
Let brr = [].concat(...arr);//es6打散在合并
console.log(brr);

深拷贝浅拷贝

浅拷贝只拷贝一层，拷贝的是引用，当原数据发生改变时，拷贝对象也会发生改变新旧对象还是共享同一块内存。
Es6浅拷贝 object.desing
深拷贝拷贝了多层，新对象跟原对象不共享内存，修改新对象不会改到原对象。
Es6深拷贝缺陷 Json.parse(json.stringify())
缺陷：如果obj里面有时间对象 时间将只是字符串的形式，而不是对象的形式

//递归方式 实现深拷贝
Function deepCody（obj）{
	If(Arrey.isArrey(obj)){
			Var newObj= []
	}else{
		Var newobj = {}
	}
 
For(var I in obj){
	If(typeof  obj[I] == 'object'){
			Newobj[i] ==deepCopy(obj[i])
		}else{
			Newobj[i] ==obj[i]
		}
	}
	Retrue newobj
}
       var obj1 = {
           a:[1],
           b:2
       }
 
       var obj2 = deepCopy(obj1);
       obj1.a.push(2);
       console.log(obj2.a[1]);

Ts 与 Js的区别

Ts是js的超级，interfaces 去定义数据的类型
Ts中泛型是一种任意类型，类型是安全的
泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，使用时再去指定类型的一种特性
Ts在开发时就能给出编译错误，而js错误需要运行时才会暴露。
作为强类型语言，你可以明确知道数据的类型。代码可读性极强，几乎每个人都能理解

JS 算法快排

Event Loop（事件循环）

eventLoop 是由JS的宿主环境（浏览器）来实现的；

1. 函数入栈，当Stack中执行到异步任务的时候，就将他丢给WebAPIs,接着执行同步任务,直到Stack为空；
2. 此期间WebAPIs完成这个事件，把回调函数放入队列中等待执行（微任务放到微任务队列，宏任务放到宏任务队列）
3. 执行栈为空时，Event Loop把微任务队列执行清空；
4. 微任务队列清空后，进入宏任务队列，取队列的第一项任务放入Stack(栈）中执行，回到第1步。

微任务：then 、messageChannel 、mutationObersve
宏任务：setTimeout、setInterval、setTmmediate(只兼容ie)
Node 环境中微任务是插缝执行，（如果执行宏任务的时候发现了微任务， 不会像浏览器一样执行了，而是将为微任务放到微任务队列中，等待整个宏 任务队列执行完毕或者达到执行上线后，下一个阶段开始的时候先执行 完微任务队列中的任务

this指向问题：

1、普通模式 普通函数
谁调用这个方法，this就指向谁，没有调用对象时，this则指向window
2、严格模式 普通函数
谁调用这个方法，this就指向谁，没有调用对象时，结果为undefined
3、普通模式 箭头函数
箭头函数中this指向箭头函数所在环境的this
构造函数的this指向实例
改变this指向的三个方法：call apply bind
## call、apply和bind的区别：
apply、call用法一样，只是接收参数的方式不一样
call 需要把参数按顺序传递进去，而 apply 则是把参数放到数组里。
bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，
绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，
传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。　
实现继承是通过原型链
只有函数对象有原型属性，这个属性值又是一个对象，
目的：实例共享属性或者方法
真正实现继承通过什么？propo是指针
每个对象都有一个__proto__指向他的原型对象
instanceof原理
能在实例的 原型对象链 中找到该构造函数的prototype属性所指向的 原型对象，就返回true。

setTimeout Promise async/await的区别

setTimeout
是异步执行函数 , 当js主线程运行到此函数时,不会等待settimeout中的回调函数 ,会直接进行settimeout下面的语句(尽管setTimeout的延迟时间为0时) 当执行完当前事件循环的时候,settimeout中的回调会在下次(或者某一个)事件循环中被执行
Promise
本身是同步的立即执行函数,当在执行体中执行resolve()或者reject的时候,此时是异步操作
会先执行then/catch(异步执行)等,等主栈完成后,才会去执行resolve()/reject中的方法,
async await
async函数返回一个promise对象,当函数执行的时候,一旦遇到await就会先返回,等到触发的异步操作完成(await的函数),在执行函数体后面的语句,可以理解为,async让出了线程,跳出了async函数体,因此await函数后的语句相当于在then回调中执行.
await的含义为等待，也就是 async 函数需要等待await后的函数执行完成并且有了返回结（Promise对象）之后，才能继续执行下面的代码。await通过返回一个Promise对象来实现同步的效果。
function（） yeild 异步请求*

跨域问题

jsonP：通过动态创建script，再请求一个带参网址实现跨域通信。//json补白
缺点：只能用get请求，不能用post请求
不能很容易的确定知否请求失败，因为不能注册success、error等事件监听
安全性较低，是因为他是从其他域中加载代码执行，容易受到跨站请求伪造的攻击
跨域资源共享 cors
服务器代理 axios

闭包

特点：函数外部可以访问函数内部变量的函数
缺点：内存泄漏

//释放一个简单的闭包
	function Bibao(){
		return function (){
			console.log("Hello");
		}
	}
	var a = Bibao();//通过一个变量

暂时性死区

Let a = 5；
if（true）{
console.lon(a)//报错
Let a = 20；
}

原生请求 get与post

提交参数不一样，get请求在网址后面拼接参数 (?id=2&name=‘jack’)
Post:要写在send里面post请求必须在send之前，设置请求头xhr.send(‘username=周林林’)

防抖与节流

防抖：当你不停的触发一个事件，等到你完全停止后在才会执行
应用场景：比如搜索框，当用户不停的输入内容，此时不发送Ajax请求，等用户停止后(300ms)才发送
节流：当持续触发事件时，在一定时间内，该事件会执行一次
应用场景：计算鼠标移动的距离

Js的本地对象，内置对象和宿主对象

本地对象：object、function 、 Array
内置对象：Global Math
宿主对象：Bom Dom

封装一个promise 请求ajax

pending(进行中)、resolved(完成（成功）)、rejected(失败)

function ajax(url, data, type = "GET") {
 return newPromise((resolve, reject) => {
   let promise;
    if (type == "GET") {
      promise = axios.get(url, { params: data });
    } else {
     promise = axios.post(url, data);
    }
  promise.then((res) => {
     resolve(res.data);
  }).catch((err) => {
     message.error(err);
  })
});
}

ajax封装

function ajax(url,fn){
    var xhr=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject('Microsoft.XMLHTTP')
    xhr.open('get',url)
    xhr.send()
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4) { //4表示反应就绪
           if(xhr.status==200){
               var data=xhr.responseText
                fn(data)
           }
        }
    }
}

Es6新增：

**indexof()**去某个元素在数组中的索引，没有返回-1
**map()**遍历，有返回值，改变原始数组，返回新数组
**forEach()**遍历数组，无返回值，不改变原数组，仅仅只是遍历，
filter(),过滤出满足条件的数组元素,返回一个新数组,不改变原数组
**some()**遍历数组每一项,只要有一个元素满足条件就返回true，做删除用，不改变原数组。
**every()**遍历数组每一项，每一项返回true,最终结果为true.有一项返回false,停止遍历,结果返回为false。不改变原数组。
对象/数组的结构赋值
var 声明一个变量，有function才有作用域，有声明提升
let 有块级作用域，{}是作用域
不存在声明提升
不允许重复声明，会报错
用let声明，不能看作window的属性
const 声明常量，常量的值不允许被改变

设计模式

//单例模式:保证一个类只有一个实例，并且提供一个访问它的全局访问接口

 (function () {//无名函数
 
        var _instance = null;//表示实例，默认为空
 
        function Foo() {//构造函数
            this.prop1 = "实例属性1";
            this.prop2 = "实例属性2";
        }
 
        return {//返回一个对象，在对象里写一个方法活得不实例
            getInstance: function () {
                //为了保证只有有个实例，如果有就用原来的，如果没有就new一个新的实例
                if (!_instance) {
                    _instance = new Foo();
                }`在这里插入代码片`
                return _instance();
            }
        }
    })();

工厂模式
解决集中实例化代码的问题，减少代码冗余
缺点：认不清是那一种对象，它会把所有的都当成Object对象
构造函数
即解决了重复实例化代码问题，又能分清谁是谁的对象

ajax请求时，如何解析json数据

答案：使用JSON.parse

Javascript的事件流模型都有什么?

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

MCM模式

MVVM模式