js方法和事件

数组方法

静态方法

• pop 删除最后一个

• push 从后面添加一个元素

• unshift 在首端添加一个元素

• shift 删除数组首端的一个元素

• splice 删除数组某一位置的元素

• sort 排序方法,默认按照字符编码进行排序

• join 将字符串转换为数组

• concat 连接多个数组

• split 将字符串分割为数组

• resever 对数组进行翻转

• Array.isArray()

• slice 数组切割方法

  遍历方法

  • map() 对数组进行遍历,进行某个操作,然后返回一个新数组

  • filter() 对数组进行过滤;筛选出符合条件元素,组成一个新数组

  • some every reduce 将前一项和后一项的值进行运算,返回累计的结果

  • find findIndex 找到某一个元素 forEach() 改变原来的数组

  原型链,作用域也是一样

  当一个对象查找一个属性时,如果在自身没有找到,那么就会查找自身的原型,如果原型还没有找到,那么会继续查找到原型的原型,直到找到object.prototype 的原型是,此时原型为null,查找停止.

  这种通过原型连接逐级向上查找被称为原型链;

  原型链继承

  原型链继承：一个对象可以使用另外一个对象的属性或者方法，就称之为继承。具体是通过将这个对象的原型设置为另外一个对象，这样根据原型链的规则，如果查找一个对象属性且在自身不存在时，就会查找另外一个对象，相当于一个对象可以使用另外一个对象的属性和方法了

  原型

  原型具有可继承性(它的属性可以被继承使用)

  (函数/对象/数组)原型 - object._proto_

  (构造函数)原型 function.prototype

  搞清楚这张图关系就行了

  构造函数的原型指向person.prototype(构造函数的原型对象)

  构造函数原型对象的constructor属性指向构造函数本身

  构造函数new出来的实例对象的proto属性指向构造函数的原型对象

  new一个函数作用

  • 创建一个对象

  • 使新对象的prototype指向构造函数的prototype

  • 改变创建对象的this指向(将this指向构造函数本身)

  • 返回该对象

  • 如果构造函数返回一个对象,则返回该对选哪个,否则返回新创建的对象

  • (就是上面那张图片)

  构造函数

  用于创建对象的函数,为构造函数

  构造函数可以自己定义属性,

this指向

一般情况下,通过谁调用,this就指向谁,在js全局作用域,this指向window

在对象中,this指向这个对象本身,通常就是window

构造函数中,this指向new 实例的对象,

在事件函数中,this指向事件目标

箭头函数与普通函数区别

• 箭头函数不能作为构造函数,不能使用new

• 箭头函数没有自己的this

• 箭头函数没有原型对象

• 箭头函数没有arguments对象

数据基本类型

String number boolean null undefined es6新增symbol(标识唯一的值)

undefined 表示声明但没有赋值

JSON

浅拷贝和深拷贝

• 深拷贝层层拷贝，浅拷贝只拷贝第一层，深层只是引用

• 在深拷贝中，新对象中的更改不会影响原始对象，而在浅拷贝中，新对象中的更改，原始对象中也会跟着改。

• 在深拷贝中，原始对象不与新对象共享相同的属性，而在浅拷贝中，它们具有相同的属性。

克隆

防抖,节流

防抖 :就是频繁去触发一个事件 , 但是支出法最后一次 , 但是只按最后一次实行

回城

场景:电脑息屏 , input框发生变化 , 频繁点击表单提交按钮

节流就是每隔一段时间就只触发一次

(秒杀)点击事件

场景: 游戏里面长按鼠标,但是动作都是每隔一段时间做一次

数组去重

9个

双重for循环

reduce

...[new Set()]

先在外面设置为true; 双重for循环,如果相等则设置为false,然后break; 没有则push进去

获取dom

即使通过标签名,类名,然后id获取dom节点

判断数据基本方式

• typeof() 不能区分null,array 数据类型

• instanceof() 左边写类型右边写判断类型 var ni=arr1 instance Function; (但是注意里面数组和对象判断都是对象)

• 原型判断,最准确方法 Object.prototype.toString.call(要判断的数据)

判断是否是数组

上面2个,这里面3个

Array.isArray()

对象构造函数的constructor判断 arr1.constructor==Array

闭包

垃圾回收机制

• 不会回收全局变量,在函数执行完毕之后 回收函数内部的局部变量

  定义:一个函数中可以调用另一个函数的局部变量

• 如果该函数中的局部变量被另一个作用域应用,那么局部变量不会回收而是常驻内存

  优点

• 可以延长变量的生命周期,避免全局变量的污染

  缺点

• 可能会造成内存的泄露问题,造成电脑卡顿

堆和栈区别

• 栈会自动分配内存空间,会自动释放

• 堆动态分配的内存,大小不定也不会自动释放

  基本类型和引用数据类型

• 基本类型 : 存放在栈中,占据固定大小空间

• 引用数据类型 : 保存在堆中

介绍一下原型,原型链,作用域,作用域链含义和使用场景

函数传参

​ // 当对函数传参的时候 如果传递的使基础类型数据

​ // number boolean string null undefined symbol

​ // 函数中的参数实际使该传递实参的副本 对形参修改不会影响到实参本身

​ // 当传递的参数是引用类型数据 Object Array...

​ // 形参实际是实参内存地址的引用 如果再函数内部对传入的数据修改 会影响到数据本身

打开浏览器到页面展示过程

• 输入网址

• DNS解析,获取域名对应IP的服务器地址

• 与web服务器建立TCP连接

• 向web服务器发送TCP连接请求

• web服务器响应请求,返回指定的url地址

• 浏览器下载web服务器返回数据解析html源文件

• 生成DOM树,解析css和js,渲染页面

浏览器本地存储和不同点(cookie)

1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。

2. 存储大小限制也不同，

• cookie数据不能超过4K，sessionStorage和localStorage可以达到5M

• sessionStorage：仅在当前浏览器窗口关闭之前有效；

• localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；

• cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭

1. 作用域不同

• sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；

• cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在

跨域通信的方式

1. 解决方案：

   1. jsonp(利用script标签没有跨域限制的漏洞实现。缺点：只支持GET请求)

   2. CORS(设置Access-Control-Allow-Origin：指定可访问资源的域名)

   3. Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。

   4. Node中间件代理

   5. Nginx反向代理

   6. 各种嵌套iframe的方式，不常用。

   7. 日常工作中用的最对的跨域方案是CORS和Nginx反向代理

   Ajax和axios区别

   • Ajax：是对XMLHttpRequest对象（XHR）的封装

   • Axios：是基于Promise对XHR对象的封装

   eventloop

   js单线程,有执行顺序和消息队列

   宏任务:setTimtout,ajax, 微任务:特指Promise

   主线程先执行宏任务,如果遇到微任务,放在线程最后,遇到宏任务里面的延迟事件,放在下一轮消息队列当中执行