JS面试题收录一些面试中常常会问到的js基础知识收录一些面试中常常会问到的js基础知识收录一些面试中常常会问到的js

JS的数据类型有哪些

基本数据类型
- null / undefined / number / string / boolean / symbol
引用数据类型
- object：包括对象，数组和函数

判断数据类型的几种方法

typeof：检测到数组，对象，null，函数都会返回object，所以不是很准确
变量 instanceof 类型：因为此方法的原理是判断其在原型链上能否找到该类型的原型，所以只能判断引用数据类型，不能用来判断基本数据类型
Object.prototype.toString.call()：比较准确，常用

讲一下对this指向的理解

简言之，this指向总是指向函数的直接调用者
全局函数：this指向window
对象内部的函数：this指向对象本身
构造函数：this指向生成的实例
箭头函数：箭头函数本身没有this，所以会捕获上下文中的this
匿名函数：this指向window

call() / apply() / bind的区别

首先，三者都是用来改变this指针的指向的,并且第一个参数都是新指向的变量
call()和apply()直接返回指针新指向的变量，而bind()返回的是一个函数，需要调用才会执行
第二个参数，call()和bind()是直接写入的，而apply是以数组的形式写入的

构造函数和普通函数的区别

构造函数函数名的首字母一般会大写，普通函数小写
调用函数时，构造函数要使用new 函数名()的方法，普通函数直接函数名()

箭头函数和普通函数的区别

普通函数可以是具名函数也可以是匿名函数(匿名函数的this指向window)，箭头函数都是匿名函数
箭头函数不能用于构造函数
- 原理：虽然箭头函数在原型链上，但他没有prototype属性，而constructer是写在prototype中的
箭头函数本身没有this, 也不能改变this的指向，其this指向上下文；普通函数有自己的this且可以通过call(), apply(), bind()改变this指向，其this指向调用他的对象
箭头函数不能绑定arguments，需要使用rest代替

什么是闭包

函数A里面包含了函数B，而函数B 中又使用了函数A 中的变量，那么函数B被称为闭包。
简言之，可以读取其他函数内部的变量的函数称之为闭包
闭包可以避免全局变量的污染，还可以实现常驻内存的效果

简单讲一下防抖和节流

防抖和节流都是为了防止短时间内频繁操作导致性能效率不高的问题
防抖：触发等待一定时间后才进行执行
- 常用场景：搜索框用户输入实时搜索
节流：一定时间内只执行一次，无论被触发了多少次
- 常用场景：防止用户频繁提交表单

let和var的区别

let可以形成块级作用域，var不行
var会有变量声明提升，let不会提升
在相同的作用域下，let不能被重复声明，var可以

let / const会出现暂存死区

    var arr = [2,5,7,3,6,1,9]
            function no(){
                console.log(arr);
                var arr = [1,2]
            }
           no()
           // 由于函数内部查询到有arr，所以不会再向外查找
           //但是let又没有变量提升，所以会出现暂存死区，导致程序报错

JS常见函数

数组相关函数
- push() / pop()：从尾部添加/删除一个元素
- unshift() / shift()：从头部添加 / 删除一个元素
- slice()：根据开始和结束的索引号提起数组元素
- splice()：增加/删除/替换数组元素
- indexOf()：根据元素查询其索引号
- reverse()：数组元素翻转
- forEach()：进行数组遍历
- map() / filter()：前一个对原数组所有的元素进行加工计算，后一个对原数组中的元素按照某一条件进行筛选
- some() / every()：前一个当数组元素有任意一个满足条件则返回true，后一个当数组元素全部满足条件才返回true
字符串相关函数
- indexOf() / charAt()：查询，前一个根据字符查询位置，后一个根据位置查询字符
- substr() / substring()：字符串提取，前一个是根据开始位置和截取长度来截取，后一个是根据开始位置和结束位置来截取
- concat()：字符串拼接
- split()：使用分隔符将字符串分割为数组
- replace()：替换一个字符
- trim()：删除字符串头部和尾部的空白符，空白符包括换行符，空格与制表符

怎么实现数组去重

搞一个新的数组，使用for循环结合indexOf判断
使用ES6中的Set()方法
使用双重for循环

forEach / for in 和for of的区别

forEach一般用来遍历数组，for in用来遍历对象
for of既可以遍历数组，也可以遍历对象
遍历对象时，for in遍历出来的是键名，for of遍历出来的是键值

怎么判断对象中是否存在某个属性

使用in
使用方法hasOwnProperty()
使用obj[a]直接判断

ES6中Set()和Map()的区别

Set()要求元素不能重复，且以类似于数组的形式保存
Map()可以重复，以类似于对象的形式保存

谈谈对深拷贝和浅拷贝的理解

简而言之，浅拷贝拷贝到的只是一个存放数据的地址，更改拷贝后的数据会导致原数据也发生变化，而深拷贝拷贝到的是具体的数据或属性

mouseover和moouseenter有什么区别

mouseenter和mouseleave相对应，这两个事件都不会冒泡
mouseover和mouseout相对应，会触发事件冒泡

简述AJAX

ajax可以实现在页面不刷新的情况下向服务端发送请求

原生ajax实现步骤

创建一个XMLHttpRequest对象
使用open()方法来与服务器建立连接
使用send()方法来向服务器发送请求
1. 如果是post请求，可以在send括号内写入参数，同时需要设置请求头
监听服务器的响应，根据状态信息和状态码来进行下一步操作

//get方式发送请求
function ajax(url){
   //1. 创建XMLHttpRequest对象
   var xhr = new XMLHttpRequest();
   //2. 连接服务器
   //参数：请求的方式，文件的路径，是否异步
   xhr.open('GET',url,true)
   //3. 发送请求
   xhr.send()
   //4. 监听状态的改变，当readystate发生改变时调用
   xhr.onreadystatechange = function(){
       //存储XMLHttpRequest的状态信息
       if(xhr.readystate == 4){
           //响应的状态码
           if(xhr.status == 200){
               //获得字符串形式的响应数据
               var data = xhr.responseTEXT
               //获得xml形式的响应数据
               var data = xhr.responseXML
               return data
           }
       }
   }
}

//post方式发送请求
   //3.设置请求头信息
  ajax.setRequestHeader('content-type','application/x-www-form-urlencoded');
  //4.发送请求
  ajax.send('name='+uname+"&contents="+contents);

常见的状态信息
- 0：请求未初始化
- 1：服务器已建立连接
- 2：请求已接收
- 3：正在处理请求
- 4：请求已完成
常见的状态码
- 2XX：请求成功
  - 200：服务器响应正常
  - 201：请求成功并在服务器创建了新的资源
  - 202：服务器已接受请求，但并未处理
- 3XX：重定向问题
  - 301：永久重定向
  - 304：资源在首次请求后没有任何修改（容易在get方式下发生）
- 4XX：请求错误，客户端问题
  - 400：未找到请求的资源
  - 401：无法理解请求的格式
  - 403：没有权限
  - 404：资源不存在
  - 405：不允许使用该方法访问资源
  - 407：需要代理服务器身份验证
  - 414：请求的URL太长
  - 415：content-Type格式不正确，服务器无法处理
- 5XX：服务器问题
  - 500：服务器内部错误
  - 503：服务器崩了/服务器没了
ajax的缺点
- 对搜索引擎的支持性很差
- 与服务器交互的环节暴露在外，安全性较差

JS实现异步的方法有哪些

回调函数：将需要异步执行的函数作为回调函数，可能会造成回调地狱
事件监听：当事件发生时触发函数
promise

简述promise

为了防止异步代码嵌套调用回调函数产生回调地狱的问题，ES6提出使用promise来解决异步编程，promise是一个对象，可以将异步操作以同步的方式来表示
promise的两个参数
- resolve：请求成功时调用
- reject：请求失败时调用
promise的回调函数
- then：当检测到转换为fulfilled状态就执行该回调
- catch：当检测到转换为rejected状态就执行该回调
promise的三种状态
- pending：默认状态
- fulfilled：成功状态，一旦调用resolve函数立刻到这个状态
- rejected：失败状态，一旦调用reject函数立刻到这个状态
- 状态一旦发生改变不可逆转
promise的all
- 接受一个数组，可以同时封装多个promise，当每个异步事件均为成功状态才执行下一步
promise的race
- 接受一个数组，可以同时封装多个promise，哪个先返回状态就以哪个promise的状态来决定下一步
promise的缺点
- 一旦执行无法中途取消
- 处于pending状态时无法知道发展到了什么阶段

Cookie,sessionStorage和localStorage的区别

Cookie可存放4k左右，很小，其他两个可存放5M左右，比较大
Cookie会与服务器端进行通信，每次通信都会被放在请求头中，其他两个不参与服务器通信
Cookie和sessionStorage在关闭浏览器后会被清除(刷新不会被清除)，localStorage需要手动清除
Cookie可以通过后台代码手动设置过期时间

get/post的区别

get传参可以在url中看见，而且长度有限制，post看不见，也没有限制
get在页面刷新和回退时没有影响，post会重新提交
get可以被缓存，post不会被缓存
get会保留在历史记录中，post不会
get更适合向服务器请求数据，post更适合向服务器发送数据

移动端：什么是点击延迟，什么是点击穿透

由于移动端在除了有点击操作外，还有双击的操作，用户在进行了依次点击后，浏览器不确定是要执行点击还是等待双击，所以会先等300ms，造成300ms的延迟
而由于点击延迟，但页面中有两个元素是上下层关系的时候，我们想要关闭上层元素，在上层被隐藏后，点击函数才执行到快要结束，这时候发现上层元素没了，所以会触发下层的点击事件，造成点击穿透

JS中运算符的运算规则

算数运算符
- '+'：
  - 与非数字型计算时，会进行拼接
  - 与数字型计算时，会进行加法
- '-' '*' '/'：
  - 与字符型计算时，会有隐式转换
运算符的优先级
- 小括号>一元运算符>算数运算符>比较运算符>逻辑运算符（先与后或）>赋值运算符

继承与原型

概念：
- 与其他语言一样，js也是有继承的，只是叫法不同，其他语言中子继承父，js中即子的原型是父。当我们创建一个对象时，对象会有一个_proto_的属性，该属性就代表该对象的父级
- 当我们访问一个对象的属性或方法时，会顺着原型链一步一步地向上查找，直到找到这个属性（方法）或者查到头了（null代表到头了）才停止
函数：
- 函数也是一个对象，但同时还有一种函数叫做构造函数，构造函数有自己的实例对象
- 因此函数有两个代表原型的参数（prototype和_proto_），prototype是构造函数的原型，_proto_是构造函数所对应的实例对象的原型
- 当构造函数自己被当作对象调用时，他的原型就是prototype，当使用构造函数的实例对象进行调用时，他的原型就是_proto_
- 构造函数.prototype === 实例对象.proto
```
function User() {
    console.warn('一个函数')
} // 首先，函数也是一个对象，那他一定也有原型

let a = new User() //将User当作构造函数来使用，a是User()的实例对象

console.dir(User)
console.dir(a)

// 打印结果可以看出：
//user有一个prototype和一个[[Prototype]](与_proto_一个意思)，而a只有[[Prototype]], 而且User.prototype === a._proto_
```

常用的原型方法

instanceof --- 判断变量的类型

原理：通过查找原型链上是否有对象的原型来进行判断

因为对象才有原型链，所以此方法不能用来检测基本数据类型

let a = 1 //此方法a就是基本数据类型Number
let b = new Number(1) // 此方法b是通过构造函数创建的，所以b instanceof Number为true
let arr = [] // 字面量创建数组等同于new Array()，所以arr instanceof Array为true

isPrototypeOf --- 检测一个对象是否在另一个对象的原型链上

 let arr = []
 let obj = {}
 console.log(Object.prototype.isPrototypeOf(obj)) // true；Object.prototype在obj的原型链上
 console.log(b.isPrototypeOf(obj)) // false；arr与obj之间没有关系

 Object.setPrototypeOf(arr, obj) // 将obj设置为arr的原型
 console.log(obj.isPrototypeOf(arr)) //true
 ```

call和apply --- 改变this指针，借用原型方法

第一个参数都是this，第二个参数apply只能传一个，call可以传多个

let a = { a: 1, b: 2, c: 3 }
let b = { d: 4, e: 5, f: 6 }

a.__proto__.sum = function(a, b, c) {
    return a + b + c 
} // 给a的原型上加一个方法

//通过call或者apply改写原型的指向，让b也能使用a原型上的方法
a.sum(a.a, a.b, a.c) 
a.sum.apply(b, Object.values(b)) // apply第二个只接受一个参数，不能展开传
a.sum.call(b, ...Object.values(b)) // call可接受多个参数，需要展开传参

判断对象中是否含有某个属性
- a in obj
- obj.hasOwnProperty(a)
- 区别：in同时会检测该对象的原型链上是否有相关属性，hasOwnProperty只检测自己有没有，不检测原型链