js

js基本数据类型

undefined、null、number、boolean、string、symbol

---

js中数组去重的方法

• ES6 Set去重；Array.from(new Set(array))
• indexOf循环去重
• include
• Object 键值对去重；把数组的值存成 Object 的 key 值，比如 Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。

---

js遍历数组的方式

1、for循环
2、forEach（）
3、map（）映射方法
4、for…in

for(let item in arr){
   
    
            console.log(arr[item])
        }

5、for…of 方法 （es6支持）

for(let item of arr){
   
    
            console.log(item)
        }

注意：forEach（）和map（）区别：

1、forEach：用来遍历数组中的每一项，这个方法执行没有返回值，不影响原数组

2、map：支持return，相当与原数组克隆了一份，把克隆的每项改变了，也不影响原数组

---

es6的新特性

promise，await/async，let、const、块级作用域、箭头函数

• 手写闭包实例：每间隔1s输入一个数组元素。
• promise
• promise.all()
• setTimeout 定时器函数

---

“==” 与 三等号的区别

• “==” ：自动转换类型
• “===”：直接比较

---

js的继承方式

1. 原型链继承
2. 构造继承，使用父类的构造函数来增强子类实例，即复制父类的实例属性给子类
3. 实例继承
4. 拷贝继承
5. 组合继承
6. 寄生组合继承

---

js的原型链

---

原型链继承的缺点是什么？

• 原型属性上的引用类型值会被所有实例共享，所以多个实例对引用类型的操作会被篡改；
• 在创建 Child 的子类的时候,无法向继承元素传递参数

---

闭包

概念： 闭包（closure）是指有权访问另一个函数作用域中变量的函数。也就是说，一个作用域可以访问另外一个函数内部的局部变量。

作用： 延伸了变量的作用范围

• 一个是可以读取函数内部的变量
• 另一个就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。

闭包的缺点：

• 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题。在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
• 闭包会在父函数外部，改变父函数内部变量的值。不合理

---

this指向问题

---

call、apply、bind

改变函数内this指向，js提供了三种方法 call() apply() bind()

1、call()
作用：1.可以调用函数； 2. 可以改变函数内的this指向
call()的主要作用是可以实现继承。
2、apply()
作用：1.可以调用函数； 2. 可以改变函数内的this指向
区别：参数不一样，参数必须是数组（伪数组）
3、bind()
作用：不会调用函数，但是也可以改变函数内的this指向
区别：返回的是原函数改变this之后的新函数

---

call、apply、bind区别

---

浅拷贝和深拷贝

---

let const var的区别

---

箭头函数和普通函数区别

1. this指向问题：箭头函数的this指向的是父级作用域的this，是通过查找作用域链来确定 this 的值也就是说，看的是上下文的this，指向的是定义它的对象，而不是使用时所在的对象；普通函数指向的是它的直接调用者。
2. 不可以被当作构造函数，通过new命令来作为构造函数会报错，这里没有构建原型的说法
3. 不可以使用argumnets对象，该对象在函数体内不存在，如果要用就用rest参数替代
4. 不可以使用yield命令，因此箭头函数不能用作Generator函数

---

js的垃圾回收机制

一般来说没有被引用的对象就是垃圾，就是要被清除。有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。
基本的垃圾回收算法称为 “标记-清除”，定期执行以下“垃圾回收”步骤:

• 垃圾回收器获取根并 “标记”(记住)它们；
• 然后它访问并“标记”所有来自它们的引用；
• 然后它访问标记的对象并标记它们的引用。所有被访问的对象都被记住，以便以后不再访问同一个对象两次；
• 以此类推，直到有未访问的引用(可以从根访问)为止。
  除标记的对象外，所有对象都被删除。

转载：js垃圾处理机制

---

一个正常函数本身逻辑已经执行完，按照js垃圾处理机制来说应该会被清除，因为没有引用了。

---

JS防抖和节流

如果有一个输入框，每次做模块搜索时都会触发一个请求，那如果一直输入就会一直做请求，如何优化？

用户输入的时候不去做请求，在最后停下的一刻再去做请求。

js防抖的基本思路：
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

JS节流的基本思路：
规定一个期限时间，在该时间内，触发事件的回调函数只能执行一次，如果期限时间内回调函数被多次触发，则只有一次能生效。

---

跨域是什么？如何解决？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。所谓“同源”是指域名、协议、端口均相同。

解决办法：
1、JSONP 只支持GET请求，不支持POST请求。适合加载不同域名的js、css，img等静态资源；
2、CORS（支持所有类型的HTTP请求，但浏览器IE10以下不支持）适合做ajax各种跨域请求。跨域的cors 同源策略，全称为“跨域资源共享”，即它允许浏览器向跨源服务器发送XML HttpRequest请求，从而克服AJAX只能同源使用的限制。
3、Nginx代理跨域和nodejs中间件跨域原理都相似，都是搭建一个服务器，直接在服务器端请求HTTP接口，这适合前后端分离的前端项目调后端接口。
4、document.domain+iframe适合主域名相同，子域名不同的跨域请求。
5、postMessage、websocket都是HTML5新特性，兼容性不是很好，只适用于主流浏览器和IE10+。
6、PHP端修改header（XHR2方式）

---

Axios

---

html

标签的语义化

HTML5标签语义化即表示标签用来做什么。
HTML5新增的语义化标签主要有：<header> <aside> <nav> <footer> <article> <section> <time>

这些标签和div的区别：

• 比<div>标签有更加丰富的含义，方便开发与维护
• 在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构

---

html5的新增特性

1. 新增语义标签（header，footer，aside，dialog…）
2. 新增了表单元素、表单类型（date，datetime，month，url…）
3. 新增视频、音频标签（audio，video）
4. svg绘图（项目用到）
5. canvas绘图，配合js实现画图
6. 地理定位
7. 拖放API
8. WebWorker：Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。
9. WebStorage：WebStorage是HTML新增的本地存储解决方案之一，但并不是取代cookie而指定的标准。
10. WebSocket协议：为web应用程序客户端和服务端之间提供了一种全双工通信机制。

---

输入网址之后页面会发生什么？

1. 输入网址，发送至DNS服务器，进行DNS域名解析，将url解析为ip地址，