面试准备第一天

龙王在逃狱友

已于 2022-08-03 22:39:35 修改

阅读量138

点赞数

文章标签： javascript vue.js 开发语言

于 2022-07-31 17:47:56 首次发布

本文链接：https://blog.csdn.net/Hhl010608/article/details/126086192

版权

1.数组去重

一共有四种方法:

1.两次for循环遍历判断

//定义一个有重复数据的数组
let arr = [1,2,1,'j',5,'1',true,2,5,'h',true];
//去重方法
function duplicateRemoval(arr) {
    for(let i = 0;i<arr.length;i++){
        for (let j = i+1; j < arr.length; j++) {
            if (arr[i]===arr[j]) {
            	//删除满足条件的元素
                arr.splice(j,1);
                //因为当前索引值的元素被删除，且后面元素往前移  我们需要将下一次遍历索引从但当前索引开始，即j--
                j--;
            }
        }
    }
}
//方法调用
duplicateRemoval(arr);
//结果验证
console.log(arr);

2.通过数组API indexOf()进行筛选

//定义一个有重复数据的数组
let arr = [1,2,1,'j',5,'1',true,2,5,'h',true];
//去重方法
function duplicateRemoval(arr) {
	//定义接收去重后结果的新数组
    let newArr = [];
    for(let i = 0;i<arr.length;i++){
    	//判断新数组中是否存在当前索引为i的原数组元素
        if (newArr.indexOf(arr[i])===-1) {
        	//如果不存在，则将其放到新数组的最后位置
            newArr.push(arr[i]);
        }
    }
    //返回去重后的新数组
    return newArr;
}
//打印方法执行返回结果
console.log(duplicateRemoval(arr));

3.通过数组API includes()进行筛选

//定义一个有重复数据的数组
let arr = [1,2,1,'j',5,'1',true,2,5,'h',true];
//去重方法
function duplicateRemoval(arr) {
	//定义接收去重后结果的新数组
    let newArr = [];
    for(let i = 0;i<arr.length;i++){
    	//判断新数组中是否存在当前索引为i的原数组元素
        if (!newArr.includes(arr[i])) {
        	//如果不存在，则将其放到新数组的最后位置
            newArr.push(arr[i]);
        }
    }
    //返回去重后的新数组
    return newArr;
}
//打印方法执行返回结果
console.log(duplicateRemoval(arr));

4.通过Set对象进行过滤

//定义一个有重复数据的数组
let arr = [1,2,1,'j',5,'1',true,2,5,'h',true];
//定义set对象，并用数组arr对其进行初始化
let set = new Set(arr);
//通过Array.from()方法将 set 转化为数组 并赋给新数组
let newArr = Array.from(set);
//打印结果
console.log(newArr);

2..call apply bind 的使用区分

共同点:三者都能改变this指向

不同点:

call和apply会调用函数,然后改变函数内部的this指向

bind的不会调用函数,但是也可以改变函数内部的this指向

call 和 apply 传递的参数不一样,call传递参数要使用逗号隔开,apply传递参数则要用数组传递

三者一般都用于多重继承

3.js的继承方式

一般有六种

1.原型链继承

2.借用构造函数继承

3.组合式继承

4.寄生式继承

5.寄生组合式继承

6.原型式继承

4.new所做的事情

首先创建了一个js的空对象,然后将空对象指向prototype,并将空对象作为构造函数的上下文(就是改变this指向),最后对构造函数所有的返回值进行判断

5.如何清除浮动

清除的浮动的5中方法:

1.为父盒子设置宽高

2.双伪元素标签法

3.单伪元素标签法

4.给父元素加上overflow:hidden

5.额外标签法

6.如何实现本地持久化

本地持久话说的方式有三种:

cookie

localStorage

sessionStorage

三种方式的区别:

1.储存的时间有效期不同:

cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效

sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效

localStorage的有效期是在不进行手动删除的情况下是一直有效的

2.储存的大小不同

cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息

localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)

3.与服务端通信的区别

cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。

localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信

4.读写的便捷程度不同:

cookie的相关操作比较繁琐,并且部分数据不能进行读取操作而localStorage和sessionStorage的相关操作就十分简单便捷,而且不会遇到部分数据不能进行读取操作

5.对于浏览器的支持有所区别

cookie对于现在常见的浏览器都支持,而localStorage和sessionStorage对于版本较低的浏览器不支持(列如IE8版本以下的浏览器基本都不支持)

7.跨域问题

1.跨域问题的产生

当前端和后端的当协议 http||https、域名和 port端口 都相同则同源,不会产生跨域问题,但是三者之中但凡一个不同就会产生跨域问题

2.如何解决跨域问题8种方法:

1、iframe + document.domain/location.hash/window.name等三种
2、postMessage
3、proxyTable
4、nodejs 中间件
5、Cors
前端设置:
前端Vue设置axios允许跨域携带cookie (默认是不带cookie)
axios.defaults.withCredentials = true;
6、Websocket
7、Jsonp
原理:动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。步骤
1.1)去创建─个script标签
1.2) script的src属性设置接口地址
1.3)接口参数,必须要带一个自定义函数名要不然后台无法返回数据。
1.4)通过定义函数名去接收后台返回数据

8.ningx反向代理