JS面试题：公司真实JS面试题整理-51CTO.COM

一、说一下js单线程的理解？

js是单线程的，内部要处理的任务分同步任务、异步任务。

异步任务分微任务、宏任务

执行顺序：【又称事件循环机制】

先执行同步任务，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中。当所有同步任务执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。

微任务和宏任务有哪些：

宏任务一般是：script、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel。
微任务：Promise.then、Object.observe、MutationObserver。

示例：

setTimeout(function(){
      console.log(1);
  });
  new Promise(function(resolve){        
      console.log(2);
      resolve();
  }).then(function(){        
      console.log(3);
  }).then(function(){
      console.log(4)
  });
  console.log(5);
  // 2 5 3 4 1

遇到setTimout，异步宏任务，放入宏任务队列中。

遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出2。

Promise.then，异步微任务，将其放入微任务队列中。

遇到同步任务console.log(5);输出5；主线程中同步任务执行完。

从微任务队列中取出任务到主线程中，输出3、 4，微任务队列为空。

从宏任务队列中取出任务到主线程中，输出1，宏任务队列为空。

二、说一下defer和async的区别？

相同点：

都是script标签的属性。
都是异步加载js。
都是为了避免加载脚本的时候就会阻塞页面的渲染，出现空白的现象的问题。

不同点：

没有加defer 或 async，同步加载、立即执行、阻塞HTML解析。
加defer，异步加载、HTML解析完毕后执行、不阻塞HTML解析。
加async，异步加载、立即执行、可能阻塞也可能不阻塞HTML解析。

注意：

async和defer属性都仅适用于外部脚本，如果script标签没有src属性，尽管写了async、defer属性也会被忽略。

三、说一下浅拷贝和深拷贝的区别？

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

js中基本数据类型存放在栈中，引用数据类型存放在堆中。

浅拷贝是在堆中先创建一个新对象，拷贝原始对象的属性值。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址。

深拷贝是在堆中先创建一个新对象，采用递归方法实现深度克隆原理，将一个对象从内存中完整的拷贝一份出来。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，在堆中创建一个新对象再完整拷贝原对象。

区别：

浅拷贝基本类型之间互不影响，引用类型其中一个对象改变了地址，就会影响另一个对象。
深拷贝改变新对象不会影响原对象，他们之间互不影响。

实现：

浅拷贝：Object.assign()、展开运算符… 、concat()、slice()。
深拷贝：JSON.parse(JSON.stringify())、jQuery.extend()、递归。

四、说一下数组常用方法有哪些？

push(): 将元素添加到数组的结尾，添加多个用逗号隔开。
pop(): 删除数组的最后一项。
unshift(): 将元素添加到数组的开头，添加多个用逗号隔开。
shift(): 删除数组的第一项。
splice(): 删除指定元素，并在删除位置添加元素 --- 3个参数：起始索引删除数目新增内容。
slice() 截取区间内的元素 --- 2个参数：开始位置结束位置。
fill(): 填充数组 --- 3个参数：值开始位置结束位置。
String()、toString(): 将数组转成字符串。
join(): 把数组转换成字符串，然后给他规定一个连接字符，默认是逗号。
Array.from(): 方法用于将两类对象转为真正的数组：类似数组的对象和可遍历的对象（Set 和 Map）。
Array.of(): 用于将一组值，转换为数组。
map()：循环，并且返回新的数组。
forEach(): 循环，遍历。
filter(): 过滤，筛选出数组中的满足条件的，并且返回新的数组。
find(): 查找出第一个符合条件的数组元素。
findIndex(): 查找出第一个符合条件的数组元素，所在的索引位置。
indexOf()：查找数组中值第一次出现的索引。
includes(): 查看数组中是否存在此元素。
every(): 检测数组中元素是否都是符合条件。
some(): 检测数组中元素是否有满足条件的元素。
sort(): 对数组排序，正序。
reverse(): 对数组进行颠倒。
concat(): 合并数组，返回一个新数组。
copyWithin(): 指定位置的成员复制到其他位置。

五、说一下字符串常用方法有哪些？

replace(): 在字符串中用一些字符替换另一些字符。
substr(): 从起始索引提取字符串中指定数目的字符。
substring(): 提取字符串中两个指定索引之间的字符。
slice() 截取区间内的元素 --- 2个参数：开始位置结束位置。
split(): 把字符串转换成数组，字符串以什么符号连接，就以什么符号分割。
charAt(): 返回在指定位置的字符。
indexOf(): 返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf(): 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
includes(): 查找字符串中是否包含指定的字符串。
search(): 检索字符串中指定的子字符串。
startsWith(): 查看字符串是否以指定的字符串开头。
toLowerCase(): 把字符串转为小写。
toUpperCase(): 把字符串转为大写。
trim(): 去掉字符串两边的空白。
concat(): 连接两个或多个字符串，返回新的字符串。

六、说一下数据类型有哪些？如何判断数据类型？

基本数据类型：Number、String、Boolean、Symbol、Null、Undefined。
引用数据类型：Object、Array、Function。
typeof：可判断基本数据类型、Function，不能将Object、Array和Null区分，都返回Object。
instanceof：可判断Array、Object、Function，不能判断基本数据类型原理：判断B是否在A的原型链上。
Object.prototype.toString.call()：可判断所有数据类型。

七、说一下数组去重的方法？

双重for循环 + splice。

for(var i=0;i<arr.length;i++){
  for(var j=i+1;j<arr.length;j++){
    if(arr[i]===arr[j]){
      arr.splice(j,1)
      j--
    }
  }
}

filter + indexOf，返回item第一次出现的位置等于当前的index的元素【常用】。

let newArr = arr.filter((item, index) => arr.indexOf(item) === index);

filter + Object.hasOwnProperty，利用对象的键名不可重复的特点

let obj = {}
arr.filter(item => obj.hasOwnProperty(typeof item + item) ? false : obj[typeof item])

new Set + 扩展运算符或 Array.from 【常用】。

let newArr = [...new Set(arr)];
let newArr = Array.from(new Set(arr));

八、说一下call、apply、bind区别？

ObjA.call(ObjB, argument) --- ObjB调用ObjA中的方法，并把argument作为参数传入。

作用：改变this的指向。

区别：

调用方式不同：

call、apply：立即调用，返回的的是一个值。
bind：手动调用，返回的是一个函数形式。

参数不同：

三者第一个参数都是调用的对象。

call、bind：第二个参数为一个值，多个参数间用逗号分开
apply：第二个参数为一个数组

九、说一下什么是原型、原型链？

原型：

每个构造函数都有一个prototype属性，即显式原型属性，它指向构造函数的原型对象。

每个实例对象都有一个__proto__属性，即隐式原型属性，它指向构造函数的原型对象。

通过显式原型属性向原型对象上设置值，通过隐式原型属性向原型对象上读取值，即实例对象的隐式原型属性值等于其构造函数的显式原型属性值。

原型链：

每个构造函数的原型对象，默认是一个空的Object构造函数的实例对象，也都有一个__proto__属性。

实例对象和原型对象的__proto__属性连接起来的一条链，即原型链，它的尽头是Object构造函数的原型对象的__proto__属性。

当在实例对象上读取值时，先在实例对象本身上找，当找不到，再通过__proto__属性，在其构造函数的原型对象上找，

如果还找不到，就继续沿着__proto__属性向上找，直到Object构造函数的原型对象的__proto__属性为止，此时值为null。

十、说一下什么是闭包？

定义在一个函数体内，且访问了外部函数变量的函数，即闭包函数(闭包)。

优点：

延长函数内局部变量的生命周期。
在函数外部可以操作到函数内部的私有变量【重点作用】。

缺点：会导致内存泄露，所以要谨慎使用。

应用场景：

将函数作为一个函数的返回值如：封装API模块，只对外暴漏内部的功能函数，不暴漏外部函数的私有变量 --- 类似于类的权限修饰。
将函数作为实参传递给一个函数内部的另一个函数调用如：函数内调用定时器函数，将闭包函数作为定时器的回调函数传递。

回调和闭包的区别：【是否定义在函数体内】。

回调函数：作为实参传递的函数，没有定义在一个函数体内。
闭包函数：定义在一个函数体内，且访问了外部函数变量的函数。

例：

function handle(msg, time) {
    setInterval(function callback() {
        console.log(msg);
    }, time)
}
handle("哈哈哈哈", 5000)

对于setInterval函数来说，callback函数是回调函数。

对于handle函数来说，callback函数是闭包函数。

十一、说一下this的指向？

普通函数：普通函数中this是动态的，在调用函数时确定，一般谁调用指向谁。

调用方式 this指向。

普通函数调用 window。

构造函数调用实例对象。

对象方法调用该方法所属对象。

事件绑定方法绑定事件的对象。

定时器函数 window。

立即执行函数 window。

箭头函数：

箭头函数没有自己的this、arguments。

箭头函数的this是静态的，在定义函数时确定，一般和箭头函数所在父作用域的this指向一致。

十二、说一下什么是防抖、节流？

作用：

都是可以限制函数的执行频次，避免函数触发频率过高导致响应速度跟不上触发频率，因而出现延迟、假死或卡顿的现象。

都使用定时器实现。

防抖(debounce)：【多次重新计时】。

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

典型的案例：输入框搜索，输入结束后n秒才进行搜索请求，n秒内又输入内容，则重新计时。

节流(throttle)：【多次只一次生效】。

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。

典型的案例：鼠标不断点击按钮触发事件，规定在n秒内多次点击只生效一次。

十三、说一下ES6新特性有哪些？

新的声明方式，let、const。
新的数组方法，如：for of、find()、findIndex()。
解构赋值。
扩展运算符。
箭头函数。
模板字符串。
symbol数据类型。
函数参数允许设置默认值，引入了rest参数（...变量名）。
链判断运算符（?.）
Set集合（伪数组）。
Map集合（对象）。
Promise。
模块化，import、export。
类。

十四、说一下var、let、const的区别？

var

var声明的变量在全局内有效。
可以重复声明。
var声明的变量存在变量提升。

let

遇到{}可开启块级作用域。
不能重复声明 --- 可以防止变量重复定义产生的冲突，会直接报错。
let声明的变量不存在变量提升。

const

const声明的常量是一个只读属性，必须初始化。
遇到{}可开启块级作用域。
不能重复声明。
不存在变量提升。
const定义的基本数据类型不可以修改，但复杂数据类型可以修改。

原因：const指针指向的地址是不可以改变的，但地址指向的内容是可以改变的。

十五、说一下for in 和 for of 区别？

for in

可以直接遍历对象，得到属性。
遍历数组，得到下标。
不能遍历map集合对象。

for of

不可以直接遍历对象，因为没有引入iterable，必须加上 Object.key(对象) 才能使用。
遍历数组，得到内容。
能遍历map集合对象，得到属性和值。

十六、说一下对Promise理解？

Promise对象:

描述:

用于封装异步操作并返回其结果的一个构造函数。
为了将异步操作变同步操作执行。

三种状态：

pending 待定状态。
fulfilled 成功状态。
rejected 失败状态。

九种方法：

对象上有resolve、reject、all、allSettled、race、any方法：

resolve()：异步操作成功回调，并将异步操作的结果作为参数传递出去。
reject()：异步操作失败回调，并将异步操作的结果作为参数传递出去。
all()：所有的Promise对象均成功后，才会执行all中的then回调，否则返回的是最先rejected状态的值。
allSettled()：所有的Promise对象均出现结果（无论成功或失败）后，才会执行allSettled中的then回调（只会进入then回调）。
any()：和all相反，所有的Promise对象均失败后，才会执行any中的失败回调，否则当任意一个Promise对象成功就会直接进入then回调。
race()：返回执行最快的一个Promise的结果。

原型上有then、catch、finally方法：

then()：获取成功回调结果，进行逻辑处理。
catch(): 获取失败回调结果，抛出异常并处理。
finally()：无论成功或者失败都会执行。

async与await：

出现目的：

await的出现是为了简化多个then链的传参问题。

async：

是Promise对象的语法糖，async function A 相当于Promise.resolve(function A)。

await：

必须放在async定义的函数内部去使用。

作用：

等待当前函数执行完毕。
获取promise中的resolve回调的结果 --- 此处作用同then。

异步变同步的解决，经历了四个阶段：

回调函数

描述:

回调里面嵌入回调，导致层次很深，代码维护起来特别复杂，产生回调地狱问题。

示例代码：

getData(){
    //获取分类列表id
    uni.request({
        url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
        success:res=>{
            let id=res.data[0].id
            // 根据分类id获取该分类下的所有文章
            uni.request({
                url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
                data:{
                cid:id
                },
                success:res2=>{
                    //获取到一篇文章的id，根据文章id找到该文章下的评论
                    let id=res2.data[0].id;
                    uni.request({
                        url:"https://ku.qingnian8.com/dataApi/news/comment.php",
                        data:{
                        aid:id
                        },
                        success:res3=>{
                        //找到该文章下所有的评论
                        console.log(res3)
                        }
                    })
                    }
            })

            }
    })
}

回调函数封装

描述：

把每一个request请求封装出一个函数，将结果进行返回。
代码条理清晰了，但还是回调里面嵌套回调，并没有解决回调地狱的问题。

示例代码：

//在onload初始化后调用相应的函数
onLoad() {
    //调用导航函数，并拿到函数的返回值
    this.getNav(res=>{
        let id=res.data[0].id;
        //拿到分类id作为参数
            this.getArticle(id,res2=>{
            //拿到文章id作为参数
            let id=res2.data[0].id;
            this.getComment(id,res3=>{
                //最终获取到第一个分类下，第一篇文章下，所有评论
                console.log(res3)
            })
        })
    });
}
methods: {
    //先获取导航分类接口，将结果进行返回，到调用函数的地方获取
    getNav(callback){
    uni.request({
        url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
        success:res=>{
            callback(res)
        }
    })
    },
    //获取文章数据，将文章列表进行返回
    getArticle(id,callback){
        uni.request({
            url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
            data:{
            cid:id
            },
            success:res=>{
                callback(res)
            }
        })
    },

    //获取文章下的所有评论
    getComment(id,callback){
        uni.request({
        url:"https://ku.qingnian8.com/dataApi/news/comment.php",
        data:{
            aid:id
        },
        success:res=>{
            callback(res)
        }
        })
    }
}

promise then

示例代码：

//promise链式调用
this.getNav()
.then(res=>{
let id=res.data[0].id;
return this.getArticle(id);
})
.then(res=>{
let id=res.data[0].id;
return this.getComment(id)
})
.then(res=>{
console.log(res)
}) 
methods: {
    //先获取导航分类接口，将结果进行返回，到调用函数的地方获取
    getNav(callback){
    return new Promise((resolve,reject)=>{
        uni.request({
        url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
        success:res=>{
            resolve(res)
        },
        fail:err=>{
            reject(err)
        }
        })
    })
    },
    //获取文章数据，将文章列表进行返回
    getArticle(id){
    return new Promise((resolve,reject)=>{
        uni.request({
        url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
        data:{
            cid:id
        },
        success:res=>{
            resolve(res)
        },
        fail:err=>{
            reject(err)
        }
        })
    })
    },
    //获取文章下的所有评论
    getComment(id){
        return new Promise((resolve,reject)=>{
        uni.request({
            url:"https://ku.qingnian8.com/dataApi/news/comment.php",
            data:{
            aid:id
            },
            success:res=>{
            resolve(res)
            },
            fail:err=>{
            reject(err)
            }
        })
        })
    } 
}

promise await

描述：

await / async 这两个命令是成对出现的，如果使用await没有在函数中使用async命令，那就会报错，如果直接使用async没有使用await不会报错，只是返回的函数是个promise

示例代码：

async onLoad() {
    let id,res;
    res=await this.getNav();
    id=res.data[0].id;
    res=await this.getArticle(id);
    id=res.data[0].id;
    res=await this.getComment(id);
    console.log(res)
} 
methods: {
    //先获取导航分类接口，将结果进行返回，到调用函数的地方获取
    getNav(callback){
    return new Promise((resolve,reject)=>{
        uni.request({
        url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
        success:res=>{
            resolve(res)
        },
        fail:err=>{
            reject(err)
        }
        })
    })
    },
    //获取文章数据，将文章列表进行返回
    getArticle(id){
    return new Promise((resolve,reject)=>{
        uni.request({
        url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
        data:{
            cid:id
        },
        success:res=>{
            resolve(res)
        },
        fail:err=>{
            reject(err)
        }
        })
    })
    },
    //获取文章下的所有评论
    getComment(id){
        return new Promise((resolve,reject)=>{
        uni.request({
            url:"https://ku.qingnian8.com/dataApi/news/comment.php",
            data:{
            aid:id
            },
            success:res=>{
            resolve(res)
            },
            fail:err=>{
            reject(err)
            }
        })
        })
    } 
}

十七、说一下伪数组转为真数组的方法？

Array.prototype.slice.call(伪数组)。
Array.from(伪数组)。
剩余运算符...

十八、说一下三种缓存方式的区别？

cookie：用来保存登录信息，大小限制为4KB左右。
localStorage：用于本地数据存储，保存的数据没有过期时间，一般浏览器大小限制在5MB。
sessionStorage：接口方法和localStorage类似，但保存的数据的只会在当前会话中保存下来，页面关闭后会被清空。

十九、说一下创建Ajax的基本步骤？

创建XMLHttpRequest对象。
创建http请求。
发送http请求。
设置http请求状态变化的函数。
获取服务器返回的数据。

示例代码：

// 1
const xhr = new XMLHttpRequest();
// 2
xhr.open('POST', "http://localhost:xxx");
// 3
xhr.send("a=100&b=200");
// 4
xhr.onreadystatechange = function(){
    if(xhr.readyState==4){
        // 5
        if(xhr.status >= 200 && xhr.status < 300){
            result.innerHTML = xhr.response;
        }
    }
}

二十、说一下HTTP与HTTPS的区别？

HTTP是超文本传输协议，信息是明文传输，HTTPS是由SSL协议 + HTTP协议，信息是加密传输。
HTTPS协议需要花钱申请证书，免费证书少。
HTTP和HTTPS默认使用的端口不同，前者是80，后者是443。

二十一、说一下请求方式post和get的区别？

安全性

get请求参数会被拼接到地址栏上，信息会暴露。
post请求参数不可见。

数据传输量

get有长度限制。
post不会。

缓存

get数据会被缓存。
post不会。

后端的习惯

查用用get，因为要分页，有长度限制
增删改用post

二十二、说一下常见的http状态码？

4xx表示客户端错误。
401表示请求格式错误。
402表示请求未授权。
403表示禁止访问。
404表示请求的资源不存在，一般是路径写错了。
5xx表示服务器错误。
500表示最常见的服务器错误，一般是前端参数传错了、或后端代码写错了。
503表示服务器构建。

二十三、说一下js的模块化？

作用：

一个模块就是实现某个特定功能的文件，在文件中定义的变量、函数、类都是私有的，对其他文件不可见。

为了解决引入多个js文件时，出现命名冲突、污染作用域等问题。

AMD：

浏览器端模块解决方案。

AMD即是“异步模块定义”。

在AMD规范中，我们使用define定义模块，使用require加载模块。

提前执行：它采用异步方式加载模块，一边加载一边执行。

依赖前置：依赖必须在定义时引入。

CMD：

浏览器端模块解决方案。

CMD即是“通用模块定义”。

在CMD规范中，我们使用define定义模块，使用require加载模块。

延迟执行：它采用异步方式加载模块，先加载完毕再按需执行。

依赖就近：依赖可以在代码的任意一行引入。

CommonJS：

服务器端模块解决方案。

在CommonJS规范中，我们使用module.exports导出模块，使用require加载模块。

立即执行：它采用同步方式加载模块，先加载后执行，执行完毕会被缓存。

依赖就近：依赖可以在代码的任意一行引入。

ESModule：

浏览器端和服务器端通用的模块解决方案。

在ESModule规范中，我们使用export导出模块，使用import加载模块。

延迟执行：它采用异步方式加载模块，先加载完毕再按需执行。

依赖就近：依赖可以在代码的任意一行引入。

二十四、说一下DOM的操作有哪些？

查：

document.querySelector('选择器') --- 获取单个节点。
document.querySelectorAll('选择器') --- 获取多个节点，伪数组。
parentNode：获取父节点。
children: 获取子节点 --- 伪数组。
nextElementSibling：获取下一个兄弟。
previousElementSibling：获取上一个兄弟。

增：

appendChild：添加节点到最后。
insertBefore：在某个元素前面插入。
cloneNode：克隆节点。

删：

removeChild：删除子节点。
remove：删除节点。

改：

replaceChild：修改子节点

属性操作：

getAttribute：获取属性。
setAttribute：设置属性。

内容操作：

innerHTML：获取/设置代码内容。
innerText：获取/设置文本内容。

二十五、说一下对象创建模式有哪些？

对象字面量（花括号）。

工厂模式（对象字面量 + return新对象）。

Object构造函数（new Object）。

构造函数模式（new function + 属性、方法都在构造函数上）。

原型模式（new function + 属性、方法都在原型上）。

组合模式（属性在构造函数上 + 方法在原型上）。

类（底层就是对组合模式进行了封装）。

二十六、说一下对象继承模式有哪些？

原型链继承（子类原型指向父类实例）。

构造函数继承（借助 call）。

组合继承（原型链继承 + 构造函数继承）。

原型式继承（借助 Object.create）。

寄生式继承（原型式继承 + 添加子类方法）。

寄生组合继承（寄生式继承 + 组合继承）

extends（底层就是对寄生组合继承进行了封装）

二十七、说一下执行上下文的理解？

在代码执行前产生。

产生变量提升、函数提升的原因。

定义：

全局执行上下文对象：在执行全局代码前，创建对应的全局执行上下文对象，即window对象，进行预处理
函数执行上下文对象：在调用函数后、准备执行函数体之前，创建对应的函数执行上下文对象，进行预处理
块级私有执行上下文对象：在执行块级代码前，创建对应的块级私有执行上下文对象，进行预处理

执行上下文栈：

存放执行上下文对象的栈。

按照上下文对象创建的次序进栈，然后从栈顶依次执行出栈。

二十八、说一下什么是作用域、作用域链？

在代码编写时产生。

定义：

全局作用域：全局执行上下文对象的有效作用范围。
函数作用域：函数执行上下文对象的有效作用范围。
块作用域：块级私有执行上下文对象的有效作用范围。

作用域链：

在某一作用域内找某一变量时，先在自身作用域内的执行上下文对象中找，找不到再去父作用域内的执行上下文对象中找，依次向上找，直到全局作用域内的执行上下文对象为止。这个过程称为作用域链。