Js面试题整理

一.Ajax和axios的header配置有哪些

axios 的post

request
  .post("https://passport.artron.net/getpasswd/verify", formdata, {
    headers: { "X-Requested-With": "XMLHttpRequest" },
  })

axios 的get

 axios.get(this.getUrl(url), {params:data,headers: {userId,token}})

我们现在来说说post请求常见的数据格式（content-type）

Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端
Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

如果接受的数据类型是Content-Type: application/json时

这种是axios默认的请求数据类型，我们只需将参数序列化json字符串进行传递即可，无需多余的配置
let params = {'title':'test', 'sub' : [1,2,3]}
axios({
    method: 'post',
    url: '/api/lockServer/search',
    params
})

最终发送的请求是 
{"title":"test","sub":[1,2,3]}

如果接受的数据类型是Content-Type:：application/x-www-form-urlencoded时有两种传递方式
1.【用 URLSearchParams 传递参数】代码简单，省事，不需要配置请求头

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
    method: 'post',
    url: '/api/lockServer/search',
    data: param
})

2.需要先配置axios请求头中的content-type为指定类型

配置axios请求头中的content-type为指定类型
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
或者 
{headers:{'Content-Type':'application/x-www-form-urlencoded'}

再将参数转换为query参数, 利用qs,引入 qs ，这个库是 axios 里面包含的，不需要再下载了。

import Qs from 'qs'
let data = {
    "username": "cc",
    "psd": "123456"
}

axios({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    url: '/api/lockServer/search',
    data: Qs.stringify(data)
})

如果接受的数据类型是 Content-Type:Content-Type: multipart/form-data

   let params = new FormData()
        params.append('file', this.file)
        params.append('id', localStorage.getItem('userID'))
        params.append('userName', this.name)
        params.append('sex', this.sex)
        params.append('mobile', this.phone)
        params.append('email', this.email)
        params.append('qq', this.qq)
        params.append('weChat', this.WeChat)

        axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
          if (res.data.code === 0) {
            this.$router.go(-1)
          }
        }).catch(error => {
          alert('更新用户数据失败' + error)
        })

二、for in 和for of 的区别

两者区别：
1.for-in只是获取数组的索引；而for-of会获取数组的值
2.for-in会遍历对象的整个原型链，性能差；而for-of只遍历当前对象，不会遍历原型链
3.对于数组的遍历，for-in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)；for-of只返回数组的下标对应的属性值
4.for-of适用遍历数组／字符串/map/set等有迭代器对象的集合，但是不能遍历普通对象（obj is not iterable）
补充说明for-of只遍历当前有迭代器对象的集合，不会遍历原型链
for in 实例

let arr = [1, 2, 3, 4, 5]
Array.prototype.id = 123
arr.name = 'Jessica'
for (let index in arr) {
    if (index == 2) {
    // break;//0,1
    // continue;//0,1,3,4
    // return;//0,1
    }
    console.log(index, arr[index]);//遍历[1,2,3,4,5,Jessica,123]

for of 实例

let arr = [1, 2, 3, 4, 5]
Array.prototype.id = 321
arr.name = 'Mars'
for (let value of arr) {
    console.log(value);//只能拿到[1,2,3,4,5]
}

三、浅拷贝和深拷贝

1.浅拷贝
浅拷贝只复制某个对象的引用，而不复制对象本身，新旧对象还是共享同一块内存
Object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。Object.assign()拷贝的是对象的属性的引用，而不是对象本身
2.深拷贝
a、JSON转换
缺点：
1 如果对象有函数，函数无法被拷贝下来
2无法拷贝对象原型链上的属性和方法
3当数据的层次很深，会栈溢出
b、递归函数

四、es6新增语法

https://blog.csdn.net/weixin_47295135/article/details/109602321

五、防抖和节流

防抖能不断延时，直到到达时间发送请求，节流是在规定的时间间隔内只能触发一次

基本思路：定义一个定时器，假设延时1000ms，如果你正在输入内容，定时器不断刷新，不断延时1000ms，不触发请求，当停止输入时，定时器生效，发送请求

// 定义防抖函数
function debounce(fn, delay=500) { // （操作函数，延时时间）
    let timer = null;
    return function() {
        if (timer) {
            clearTimeout(timer); // timer存在则清除
        }
        
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
        }, delay);
    }
}
const input = document.getElementById("input1");
input.addEventListener('keyup', debounce(function(){
    console.log(input.value);
}, 1000));

节流还是使用定时器，每固定一个时间段触发一次请求

// 定义节流函数
function throttle(fn, delay=500) { // 操作函数，延时时间
    let timer = null;
 
    return function() {
        if (timer) {
            return;
        }
 
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
        }, delay)
    }
}
 
const drag1 = document.getElementById('drag');
 
drag1.addEventListener('drag', throttle(function(e) { // 监听拖拽事件
    console.log(e.offsetX, e.offsetY); // 打印当前位置
}, 1000))

防抖的应用场景：

1.监听浏览器窗口的resize事件（不管窗口怎么变化，只执行最后一次，所以每次触发浏览器的resize事件时，应该重新触发回调函数，即响应事件）
2.在带有Ajax请求的input上输入实时搜索事件（不管输入什么，只在用户停止输入时才发送请求）

节流的应用场景：

1.下拉加载更多（无限滚动）事件

Js面试题整理