前端面试题-自定义版

GO-zj

已于 2023-02-21 19:54:22 修改

阅读量237

点赞数

分类专栏：秋-面试题学习总结文章标签：前端

于 2022-11-14 21:01:47 首次发布

本文链接：https://blog.csdn.net/hzq_zzzjjj/article/details/127855245

版权

学习总结同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

秋-面试题

3 篇文章 1 订阅

订阅专栏

Get和Post的区别

get：一般用于信息获取，使用URL传递参数，对所发送信息的数量也大有限制，一般在2000个字符，有的浏览器是8000个字符

post：一般用于修改服务器上的资源，对于所发送的信息没有限制

在一下情况使用post请求：

1.无法使用缓存文件（更新服务器上的文件或者数据库）

2.想服务器发送大量数据（post没有数据量限制）

3.发送包含未知字符的用户输入时，post比get更稳定也更安全

Ajax请求的时候get和post方法的区别

get一般用来进行查询操作，url地址有长度限制，请求参数会暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。

post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内存在于http请求体重，数据不会暴露在url地址中。

ES6新特性

symbol 基本数据类型，与undefined、null、Number（数值）、String（字符串）、Boolean（布尔值）、Object（对象）并列，，共计七种。

模板字符串

<script>
      url="xxxxxx"
       // es6之前
       let html="<div>"+
                  " <a>"+url+"</a>"+
               "</div>";
		//es6
       let eshtml=`<div>
                   <a>${url}</a>
               </div>`
</script>

数组的新方法
        新增的方法有：
                Array.from()是内置对象Array的方法，实例数组不能调用
                includes() 参数：数值 -------- 返回值：true/false
                map()、filter() 参数：函数-------- 返回值：数组
                forEach() 参数：函数-------- 返回值：undefined
                find() 参数：函数-------- 返回值：数值
                some()、every() 参数：函数-------- 返回值：true/false

运算符 ....扩展运算符

<script>
	const obj1 = { a: 1 };
	const obj2 = { b: 2 };
	const obj3 = { a: 5, c: 3 };
	
    let newObj ={...obj1,...obj2,...obj3}
	console.log(newObj); // { a: 5, b: 2 , c:3}
</script>

？. 可选链？？空值合并：：函数绑定运算符

模块化 ES6使用关键字 import 导入模块（文件），有两种常用的方式

import ‘模块名称’  from  ‘路径’；
import  ‘路径’；

ES6 通过 export 和export default 导出模块。

let name = 'ren',age = 12;
export {name,age};
//注意：变量需要用大括号包裹，然后才能向外输出

改变this指向的方法（call、apply、bind）

call：使用this的时候，传入一个或者多个参数来调用同一个函数

aplly：应用于某个对象的一个方法，用另一个对象来替换当前对象

call和apply的区别：apply只能接收数组，而call可以接收连续的参数

bind：创建一个新的函数，与call和apply不同的是，bind想什么时候调用就什么时候调用

箭头函数的特性？

箭头函数：let func = () => {}

=> 箭头函数的this指向：永远指向外层函数的this

=> 箭头函数不能用new关键字来进行实例化，即不能做构造函数

=> 没有arguments参数

=> 箭头函数没有原型对象(prototype)

=> 写法简洁，若是此时箭头函数只有一个入参，那么()可以省略不写

=> 对于花括号{ }，如果省略不写，那么函数体就只能是一行代码或者一个表达式，而且会自动返回这行代码的值

函数的防抖和节流

节流函数不会立刻执行，而是在函数结束的时候执行【可以理解为技能冷却】

应用场景：

节流：多数在监听页面元素，滚动事件

防抖：最常见是用户注册验证，防止用户重复提交数据。并且要检查提交格式是否正确，不正确要弹出提示框

说说JS原型和原型链

原型：函数都有prototype(显示原型)属性，而prototype会自动初始化一个空对象，这个对象就是原型对象

原型对象中会有一个constructor属性,这个属性将指向了函数本身

实例化对象都有一个_proto_(隐式原型)属性，_proto_属性指向原型对象

原型链：从实例对象往上找构造这个实例的相关对象，然后这个关联的对象再往上找，找到创造它的上一级的原型对象，以此类推，一直到object.prototype原型对象终止,原型链结束

JS有几种判断类型？

1. typeof（根据二进制判断）,不能判断数据类型：null和object

2. intanceof(根据原型链判断),原生数据类型不能判断

3. constructor.name(根据构造器判断)，不能判断null数据类型

4. Object.prototype.toString.call()（用Object的toString方法判断）所有类型数据都能判断,记住判断结果打印为：'[object Xxx]'

promise存在的理由？

在实际项目中，通常这一次的异步请求的结果会作为下一次的异步请求的参数，那么就会通过回调函数的嵌套来处理，这样容易造成回调地狱的问题。而promise正是为了解决这个问题而存在。

优化promise => async+await

=> async+await是将promise进行优化，将异步代码优化成了同步代码，这样书写更加清晰简洁且方便阅读

=> 对于await promise ，只能接收到成功resolve()的结果，对于reject()的结果是会报错的

=> 解决报错：① 用try catch去捕获异常 ② 通过返回一个处于pending(即将发生)状态时的结果，以此来中断promise链

promise的三种状态

等待（pending）、已完成（fulfilled）、已拒绝（rejected）

promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致

var let const的区别

var 声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的

let是更完美的var，不是全局变量，具有块级函数作用域，大多数情况不会发生变量提升。

const定义的常量值，不能够重新赋值，如果值是一个对象，可以改变对象里边的属性值。

//使用ES6方法并且在不适用第三个参数的时候。调换a和b的值
let a=1;
let b=2;
//使用结果相关
[a,b]=[b,a]

//如何使用ES6方法快速去重
let arr=[1,2,3,4,5,2,4,3]
let item=[...new Set(arr)]
console.log(item)

//promise标杆性面试题    =>构造函数同步执行
const promise=new Prmoise((resolve,reject)=>{
    console.log(1)
    resolve();
    console.log(2)
})
prmoise.then(()=>{    // .then方法是异步执行
    console.log(3)
})
    console.log(4)

//答案是1243

null和undefind的区别

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在对象

undefined主要指定义了变量，但是并未赋值

NAN （not a Number）不是一个明确数值的数字类型

ECMAScript认为undefined是从null派生出来的，他们的值是一样的，但是类型却不一样。

所以

null == undefined //true

null === undefined //false

forEach和map的区别

首先这两个函数都会遍历数组，而forEach没有返回值，map有返回值。

如果是复合型类型时，如果只改变复合类型的其中某个value时，将可以正常使用

//递归求1-100的和
        function add(num1,num2){
            let num=num1+num2
            if(num2+1>100){
                return
            }else{
                return add(num,num2+1)
            }
        }
        let sum=add(1,2)
        console.log(sum)

什么是闭包？

闭包形成的条件：

1.函数嵌套外层函数

2.外部引用返回内部函数

3.内层使用外层变量

闭包的作用：

1.形成不被销毁的执行空间，延长变量声明周期，容易引起内存泄露

2.外部可以访问内部函数的变量，变量作用域扩展，内部函数访问外部函数

3.形成块作用域定义私有变量

什么是内存泄露：内存泄漏也称作"存储渗漏"，用动态存储分配函数动态开辟的空间，在使用完毕后未释放，结果导致一直占据该内存单元。直到程序结束。(其实说白了就是该内存空间使用完毕之后未回收)即所谓内存泄漏。

什么是生命周期：从诞生到消亡的一个过程叫生命周期，在程序中表示从程序被初始化到销毁的过程。

如何解决内存泄露问题：

方法一：引用计数法（reference counting）

语言引擎有一张"引用表"，保存了内存里面所有的资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放（被回收）。

const arr = [1, 2, 3, 4]
// 数组[1, 2, 3, 4]是一个值，会占用内存。变量arr是仅有的对这个值的引用，因此引用次数为 1
// 尽管后面的代码没有用到arr，它还是会持续占用内存
arr = null
// arr重置为null，就解除了对[1, 2, 3, 4]的引用，引用次数变成了0，内存就可以释放出来了

方法二：标记清除法(mark-and-sweep)

1.垃圾回收器生成一个根列表。根通常是将引用保存在代码中的全局变量。在JavaScript中，window对象是一个可以作为根的全局变量。
2.所有的根都被检查和标记成活跃的（不是垃圾），所有的子变量也被递归检查。所有可能从根元素到达的都不被认为是垃圾。
3.所有没有被标记成活跃的内存都被认为是垃圾。垃圾回收器就可以释放内存并且把内存还给操作系统。