小白前端的面试题

prophet
274 阅读35分钟

1.JS数据类型

1.1js如何判断一个变量是数组？

// ES6中增加的数组方法
Array.isArray()
​
​
// 使用constructor判断
function isArray(arr) {
    return arr.constructor.toString().indexOf("Array") > -1;
}
​
​
function isArray(arr) {
    return arr.constructor === Array;
}
​
​
// 用instanceof判断
function isArray(arr){ 
    return arr instanceof Array; 
}

1.2js数据类型

数据类型Number,String,Boolean,Undefined,Null,symbol,bigInt 复杂数据类型Object

1.3==和===区别

===如果类型不同返回false，如果类型相同则比较值是否相同，注意引用类型对象之和自身相等。

== 转换规则： 如果是类型相同，直接进行===比较，如果类型不同，要进行转换再比较。

1.4讲一下js中的包装类型

基础类型的数据在使用时候，js引擎会先将之包装为对象，语句执行完对象被销毁。这个过程也被称为“装箱拆箱”。

1.5讲一下js类型的隐式转换

在一些场景中，不同类型的变量会放在一起处理，这时候js引擎会做隐式转换转，转换为相同的类型后再处理。还有些情况下对变量的类型有要求，而变量如果不符合要求就会进行隐式转换（如if语句要求是bool值，如果是非bool值，会先转换为bool再处理）。

1.6为什么3.tostring()会报错？

因为会解析成小数点

1.7代码执行结果

null == 0
null > 0
null < 0
null >= 0
null <= 0

null == 0是false，因为null只和自己或者undefined相等，其他都是false

null和0进行大小比较时候，因为0是数值类型，因此将null也转为数值进行比较，所以

null > 0和null < 0为false，而null >= 0和null <= 0为true。

1.8代码执行结果

let num = 10;
function ch(num) {
    num = 12;
}
ch(num);
console.log(num);
​
​
​
let obj = {};
function ch1(obj) {
    obj.a = 'a';
}
ch1(obj);
console.log(obj.a);

num打印结果是10，因为num是值类型，在ch函数作用域内是临时变量，不会影响传入的实参。

obj1.a打印结果是'a'，因为obj是引用类型，传入ch1中obj指向外部的obj数据，因此函数内的代码直接改变了obj的属性。

1.9typeof判断哪个类型会出错？Object.prototype.toString.call()判断哪个类型会出错？

typeof判断null和数组会出错

Object.prototype.toString.call()判断自定义对象只能得到"[object Object]"的结果，所以如果需要判断构造函数可以结合instanceof或者constructor来使用

1.10如何判断一个对象为空

// 方法1  注意该方法性能较差
function isEmptyObject(obj) {
    return JSON.stringify(obj) === '{}';
}
​
// 方法2  判断是否含有私有属性
function isEmptyObject(obj) {
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      return false;
    }
  }
    return true;
}
​
// 方法3 Object.keys也是只能获取自身属性，不能获取原型属性
function isEmptyObject(obj) {
    return Object.keys(obj).length === 0;
}

1.11typeof和instanceof的区别

typeof和instanceof都是js中用来判断数据类型的方法

typeof适用于判断数据基本类型的场景，instanceof用来判断对象（包括内置对象和自定义对象）所对应的类的场景

1.12null和undefined的区别

应用场景不同

null：

作为对象原型链的终点

undefined：

定义了变量，没有初始化，默认是undefined

函数不return，或者return后面没有值，则函数默认返回undefined

函数参数如果不传，默认是undefined

1.13 0.1 + 0.2 != 0.3原因是什么？

JavaScript对于小数数据使用双精度存储，10进制的小数转为二进制时候会损失一部分精度，因此再进行运算的话结果会不准确。

10进制的小数转二进制的方法是按位乘2并保留整数部分，由于双精度是按53存储，如果超过这个长度会四舍五入。

浮点数值计算会产生误差是基于IEEE754数值的浮点计算的通病

1.14number类型最大值是多少？如果后台发的数据超过这个值怎么办？

大多数浏览器最大值是2^53，最小是-2^53。最大值和最小值可以通过Number.MAX_VALUE和Number.MIN_VALUE查看。

后台发送数据超过这个值可以用字符串类型代替。

1.15防抖和节流

防抖：在固定的时间内事件只允许发生一次

比如点击按钮，2秒后调用函数，结果在1.5秒的时候又点了，则会重新计算2秒后在调用函数。

应用场景：下拉触底加载下一页。

let input=document.querySelector("input")
        input.addEventListener("input",anti(demo,2000))
        //防抖的封装
        function anti(fn,wait) {
            let timeOut=null
            return args=>{
                if(timeOut) clearTimeout(timeOut)
                timeOut=setTimeout(fn,wait);
            }
        }
        function demo(){
            console.log("发起请求");
        }

节流：一定时间内的多个事件变成一个事件

应用场景比较多的是：提交表单，高频监听事件

let div=document.querySelector("div")
        console.log(div);
        div.addEventListener("mousemove",throttle(()=>{
            console.log("发送请求");
        },2000))
​
        function throttle(event,time){
            let timer=null
            return function(){
                if(!timer){
                    timer=setTimeout(()=>{
                    event();
                    timer=null
                    },time)
                }
            }
        }

1.16js闭包

什么是闭包：闭包就是能够读取其他函数内部变量的函数

function a() {

    let a1 = 1;
​
    return function() {
​
            return a1
​
    }

}

闭包存在意义：

可以延长变量的生命周期可以创建私有的环境

闭包好处：

可以读取其他函数的内部变量

将变量始终保存在内存中

可以封装对象的私有属性和方法

坏处：消耗内存、使用不当会造成内存溢出问题

2.Vue

2.1vue-router中的路由守卫有哪些

全局守卫，路由独享守卫和组件内守卫

2.2mutation和action的区别？

mutations和actions有区别，mutations不应该用于异步修改状态，因为这样做的话，Vuex是无法知道修改state.count的时机的，因为它是在异步回调里面指定的，因此Vuex无法在调试工具中打印出我们实际改变state的操作。

而actions中可以异步更新状态。

2.3vue常用指令有哪些？

v-show

v-if、v-else-if、v-else

v-for

v-bind

v-model

v-on

2.4vue3.0有哪些变化？Vue3.0和Vue2.0的区别？

新增组合式API，更好地聚合功能代码。

全局Vue API更改为使用应用程序实例，createApp创建一个应用实例。例如Vue.use()改为createApp().use()。

同一元素上的v-if和v-for的优先级发生改变，v-if无法访问v-for的变量。

2.5vue父子组件挂载顺序是什么？

加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created ->子 beforeMount -> 子 mounted -> 父 mounted

更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

2.6computed和watch的区别

computed特点

  • 支持缓存，只有依赖数据发生改变，才会重新进行计算；
  • 不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化；
  • computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的。也就是基 于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的值；
  • 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性 是一个多对一或者一对一，一般用computed；
  • 如果 computed 属性值是函数，那么默认会走 get 方法，函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个 set 方法，当数据变化时，调用 set 方法；

侦听属性 watch

  • 不支持缓存，数据变化，直接会触发相应的操作；
  • watch 支持异步操作；
  • 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值； 当一个属性发生变化时，需要执行对应的操作，一对多；
  • deep无法到数组的变动的对象的新增

当需要在数据变化时执行异步或开销较大的操作时，watch方式是最有用的，这是和 computed 最大的区别。

2.7vue组件data为什么是函数

防止多个组件实例对象之间共用一个data，产生数据污染。如果data不是一个函数，或者函数中不是返回一个对象字面量，那么实例化多个组件的话，不同组件间会共享同一个data，data的改变会影响到每个实例。

2.8 vue-router原理以及两种模式区别

前端路由有两种模式，HTML5和hash，这两种模式本质是不同的底层浏览器技术，但是上层Vue Router做了统一化的封装，因此在我们开发组件和配置路由时候使用这两种模式的区别并不大。默认是hash模式。

2.9 v-if和v-show的区别

行为不同：v-if指令在满足条件时候才会渲染DOM，v-show一开始就渲染DOM，满足条件时候才设置CSS的display属性让元素显示出来。

应用场景不同：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

2.10v-for和v-if放在一起用好吗

v-for的优先级会更高。v-if和v-for不要同时使用，因为会在每次渲染时候都要遍历列表并判断是否需要渲染，这个遍历操作其实是有一部分冗余或者完全不必要的。

应该用以下方式替换v-if和v-for同时使用的方案：

  1. 如果是为了过滤一个列表中的项目（v-for循环，v-if过滤条件），可以将列表作为计算属性，在computed中过滤出需要渲染的列表，再进行渲染。这样避免了每次渲染都计算（只在computed依赖的属性变化时候才计算），同时渲染列表是过滤了的，那么循环的次数也可能减少。
  2. 如果是为了控制整个列表的展示和隐藏（v-for循环，v-if判断整个列表是否需要展示），可以将判断条件放到父元素（ul、ol）上。这样展示和隐藏的判断只需要执行一次（在列表最开始）。

Vue3修改了v-if和v-for的优先级，v-if没有权限访问v-for的变量，这个需要注意。

2.11如何避免vue组件的样式污染？

在style标签中添加“scoped”属性，可以避免当前组件的CSS污染全局。

添加了这个属性后，vue-loader会给组件的每个元素添加一个data属性，并且将CSS代码编译，添加这个data属性的选择器。

2.12Vue如何给一个对象添加新的属性

使用Vue.set(object, propertyName, value)或者vm.$set((object, propertyName, value)。这两个方法相同。

2.13vue2和vue3的数据响应原理

vue2：

是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调从而达到数据和视图同步。

vue3：

通过Proxy（代理）： 拦截对象中任意属性的变化，包括：属性值的读写，属性的增加，属性的删除等。

通过Reffect（反射）： 对源对象的属性进行操作

2.14MVVM模式

MVVM：M（model数据）、V（view视图）、VM（viewModel控制数据的改变和控制视图） html部分相当于View层，可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素，当ViewModel对Model进行更新时，通过数据绑定更新到View。 Vue实例中的data相当于Model层，而ViewModel层的核心是Vue中的双向数据绑定，即Model变化时VIew可以实时更新，View变化也能让Model发生变化

2.15 v-for中为什么要有key

key 可以提高虚拟DOM的更新效率。

在vue中，默认“就地复用”的策略，在DOM操作的时候，如果没有key 就会造成选项错乱

key 只能是字符串或者number，其他类型不可以

2.16reactive和ref的区别

1.从数据定义上：

ref定义基本数据类型（也能定义对象）

reactive定义对象或者数组

2.从原理上：

ref使用的是Object.defineProperty（）的get和set方法，来实现数据劫持

reactive使用的是Proxy代理实现响应，通过Reflect作为源对象。

3.使用上

ref操作数据需要.value,读取数据不需要.value

reactive均不需要.value

2.17 虚拟DOM

虚拟DOM的概念是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分

2.18 diff 算法

diff 算法就是对虚拟 dom 进行对比，并返回一个 patch 对象，这个对象的作用是存储两个节点不同的地方，最后用 patch 里记录的信息去局部更新真实的 dom

3.CSS

3.1display：none与visibility:hidden区别

display: none不占据空间，即不在文档流中，而visibility:hidden还在文档流中。

display: none子元素不可见。visibility:hidden的子元素如果设置visibility:visible则还可以看到。

3.2有哪些隐藏元素的方法？

display: none;

visibility: hidden;

opacity: 0;

也可以用left: -9999px或者transform: translateX(-9999px);将元素移出视口外部。

3.3盒子模型

有两种盒模型：IE盒模型（也称怪异盒模型）（border-box）、W3C标准盒模型（content-box）

IE盒模型和W3C标准盒模型的区别：

W3C标准盒模型：属性width，height只包含内容content，不包含border和padding。

IE盒模型：属性width，height包含content、border和padding和margin，指的是content +padding+border。

3.4盒模型盒子的宽度计算

盒子宽度 = width + padding + border + marign。

3.5有哪些CSS选择器

1、id选择器（#myid）

2、类选择器（.my-classname）

3、标签选择器（div,h1,p）

4、后代选择器（h1 p）后代选择器的祖先和后代之间用空格分割

5、相邻后代选择器（子）选择器（ul>li）

6、兄弟选择器（li~a）

7、相邻兄弟选择器（li+a）

8、属性选择器（a[rel="external"]）

9、伪类选择器（a:hover,li:nth-child）

10、伪元素选择器（::before、 ::after）

11、通配符选择器（*）

3.6css居中

方法1：使用父相子绝 + transform：translate（-50%，-50%），left：50%,top:50%

方法2：父元素使用flex布局 +子项添加 margin:auto

方法3：使用绝对定位 ，设置固定高度，top，left、bottom、right全0+ margin: auto

方法4：父元素使用flex布局，justify-content和align-items为center

3.7block、inline和inline-block的元素有什么差别

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。

inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。

3.8display属性

● block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。

● none 元素不显示，并从文档流中移除。

● inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

● inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。

inline元素可以设置水平的padding、margin，但不能设置垂直的padding和margin，也不能设置width和height。

3.9CSS优先级比较

行内样式（style="…"）>ID 选择器(#box{…})>类选择器(.con{…})>标签选择器(dic{…})>通用选择器(*{…})

4.常见面试题

4.1apply、bind、call

call、apply、bind都是用来改变this指向的，

call和apply调用时候立即执行，bind调用返回新的函数。

当需要传递参数时候，call直接写多个参数，apply将多个参数写成数组。

bind在绑定时候需要固定参数时候，也是直接写多个参数。

4.2如何判断数组

// ES6中增加的数组方法
Array.isArray()
​
​
// 使用constructor判断
function isArray(arr) {
    return arr.constructor.toString().indexOf("Array") > -1;
}
​
​
function isArray(arr) {
    return arr.constructor === Array;
}
​
​
// 用instanceof判断
function isArray(arr){ 
    return arr instanceof Array; 
}

4.3如何理解闭包

  1. 什么是闭包？函数和函数内部能访问到的变量的总和，就是一个闭包。
  2. 如何生成闭包? 函数嵌套 + 内部函数被引用。
  3. 闭包作用？隐藏变量，避免放在全局有被篡改的风险。
  4. 使用闭包的注意事项？不用的时候解除引用，避免不必要的内存占用。

可以读取其他函数的内部变量

将变量始终保存在内存中

可以封装对象的私有属性和方法

坏处：消耗内存、使用不当会造成内存溢出问题

4.4如何理解原型与原型链

构造函数有个prototype对象（原型），该对象有个“constructor”属性，指向构造函数。

每个对象都有一个“proto”属性，指向它的构造函数的“prototype”属性。

构造函数的prototype对象，也有一个“proto”对象，它指向Object的prototype对象。

当我们访问对象中的属性时候，会先访问该对象中的本身的属性（私有属性），如果访问不到，会查找对象的“proto”指向的构造函数的prototype对象，如果其中有要访问的属性，就使用该值，否则继续访问prototype的“proto”，在其中查找要访问属性。这样一直上溯到Object对象。这个就是“原型链”。

4.5js有哪些继承方法？

  1. 原型继承
  2. 借用构造函数继承
  3. 组合继承
  4. 寄生组合式继承

4.6从输入url到看到界面的过程

  1. 检查缓存
  2. DNS解析
  3. 发送HTTP请求
  4. 将响应数据提交给渲染进程处理
  5. 构建DOM
  6. 样式计算
  7. 布局
  8. 分层
  9. 绘制
  10. 分块
  11. 栅格化
  12. 合成

4.7vue的keep-alive组件

keep-alive是一个内置组件，它所包裹的组件会在不同的渲染中缓存状态。用在需要让自定义组件在不同的渲染中保持状态不变的场景。例如一些表单组件，如果已经填写好一些内容，然后切到其他组件，再切换回表单时候，应该保持已经填写好的内容，这时候可以选择使用keep-alive。

4.8 vue父子组件通信，兄弟组件通信

父子组件通信有3种方式：

1、props

2、事件

3、ref

兄弟组件通信有2种常用方式：

1、eventBus

2、vuex

4.9重绘一定导致重排吗？

重绘不一定导致重排，重排一定导致重绘。

4.10解决跨域的问题

1.webpack 里的proxy

2.jsonp，前后端约定一个字符串形式通信

3.COR，设置请求头，指定端口通信。

res.header("Access-Control-Allow-Origin", "*")

4.11cookie、localStorage、sessionStorage的区别

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。

存储大小限制也不同：

cookie数据不能超过4K，sessionStorage和localStorage可以达到5M

sessionStorage：仅在当前浏览器窗口关闭之前有效；

localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；

cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭

作用域不同

sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；

localstorage：在所有同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在

cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在

4.12async 和 await 的区别

async是来定义函数的，定义异步函数，打印函数名可以得到一个promise对象，言外之意可以通过这个 函数名称.then 这个方法

await 后面跟的是任意表达式，一般使用promise的表达式

async 内部实现，又返回值 成功返回promise.resolve() ,出错返回promise.reject() 返回值用catch捕获

await 等待后面的promise对象执行完毕，拿到了promise.resolve（）的值之后，执行后面的代码。await后面的表达式，能是promise.reject（），所以建议await放在try....catch语句中

4.13this指向

this总是指向函数的直接调用者。

如果有new关键字，this指向new出来的对象

在事件中，this指向触发这个事件的对象

4.14map和forEach的区别

forEach方法，是最基本的方法，遍历和循环。默认有3个参数：分别是遍历的每一个元素item，遍历的索引index，遍历的数组array

map方法，和foreach一致，不同的是会返回一个新的数组，所以callback需要有return返回值，如果没有会返回undefined

4.15数组方法汇总

map 循环遍历数组、返回一个新的数组

forEach 循环遍历数组，不改变原数组

push/pop 在数组的末尾添加/删除元素 改变原数组

unshift/ shift 在数组的头部添加/删除元素，改变原数组

join 把数组转化为字符串

some 有一项返回为true，则整体为true

every 有一项返回为false，则整体为false

filter 数组过滤

slice(start, end) 数组截取，包括开头，不包括截取，返回一个新的数组

splice(start, number, value) 删除数组元素，改变原数组

indexof/lastindexof： 查找数组项，返回对应的下标

concat：数组的拼接，不影响原数组，浅拷贝

sort：数组排序 改变原数组

reverse： 数组反转，改变原数组

4.16深拷贝和浅拷贝

浅拷贝：如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象

4.17HTTP与HTTPS有什么联系？它们的端口号是多少？

HTTP通常承载于TCP之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。HTTP默认的端口号为80，Https默认的端口号为443。

4.18完整的HTTP事务流程是怎样的？

（1）DNS域名解析。

（2）发起TCP的3次握手。

（3）建立TCP连接后发起HTTP请求。

（4）服务器端响应HTTP请求，浏览器得到HTML代码。

（5）浏览器解析HTML代码，并请求HTML代码中的资源。

（6）浏览器对页面进行渲染并呈现给用户。

4.19说说TCP和UDP的区别。

  • TCP 面向连接提供可靠的服务，UDP 是无连接的，即发送数据之前不需要建立连接，UDP 尽最大努力交付，即不保证可靠交付。
  • UDP 具有较好的实时性，工作效率比 TCP 高，适用于对高速传输和实时性有较高的通信或广播通信。
  • 每一条 TCP 连接只能是一对一的，UDP 支持一对一，一对多，多对一和多对多的交互通信。
  • UDP 分组首部开销小，TCP 首部开销 20 字节，UDP 的首部开销小，只有 8 个字节。
  • TCP 面向字节流，实际上是 TCP 把数据看成一连串无结构的字节流，UDP 是面向报文的一次交付一个完整的报文，报文不可分割，报文是 UDP 数据报处理的最小单位。

4.20类型加减转换

4.21状态码

1xx（临时响应） 表示临时响应并需要请求者继续执行操作的状态代码。 代码 说明 100 （继续） 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。 101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。

2xx （成功） 表示成功处理了请求的状态代码。 代码 说明 200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。 201 （已创建） 请求成功并且服务器创建了新的资源。 202 （已接受） 服务器已接受请求，但尚未处理。 203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。 204 （无内容） 服务器成功处理了请求，但没有返回任何内容。 205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。 206 （部分内容） 服务器成功处理了部分 GET 请求。

3xx （重定向） 表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。 代码 说明 300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。 301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。 302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。 303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。 304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。 305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。 307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4xx（请求错误） 这些状态代码表示请求可能出错，妨碍了服务器的处理。 代码 说明 400 （错误请求） 服务器不理解请求的语法。 401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。 403 （禁止） 服务器拒绝请求。 404 （未找到） 服务器找不到请求的网页。 405 （方法禁用） 禁用请求中指定的方法。 406 （不接受） 无法使用请求的内容特性响应请求的网页。 407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。 408 （请求超时） 服务器等候请求时发生超时。 409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。 410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。 411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。 412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。 413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。 414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。 415 （不支持的媒体类型） 请求的格式不受请求页面的支持。 416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。 417 （未满足期望值） 服务器未满足”期望”请求标头字段的要求。

5xx（服务器错误） 这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。 代码 说明 500 （服务器内部错误） 服务器遇到错误，无法完成请求。 501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。 502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。 503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。 504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。 505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

4.22计算机网络各个协议

应用层:FTP,DNS,RIP,DHCP

传输层:TCP,UDP

网络层:IP,ARP

数据链路层:PPP,IEEE

4.23HTTP各个协议

1.GET方法 GET请求会向数据库获取信息，只是用来查询数据，不会修改，增加数据。使用URL传递参数，对所发送的数量有限制，一般在2000字符

2.POST方法 POST向服务器发送数据，会改变数据的种类等资源，就像insert操作一样，会创建新的内容，大小一般没有限制，POST请求参数在请求体中，安全性高，POST不会被缓存

3.PUT方法 这个方法这post很像，也时通过服务器提交数据，但他们不同的是put是指定了资源在服务器上的位置，而post没有。

4.HEAD方法 指请求页面的首部

5.DELETE方法 删除服务器上的某个资源 请求服务器删除指定的页面。 DELETE请求一般返回3种码 200（OK）——删除成功，同时返回已经删除的资源。 202（Accepted）——删除请求已经接受，但没有被立即执行（资源也许已经被转移到了待删除区域）。

6.OPTIONS方法 它用于获取当前url所支持的方法，如果请求成功会有一个allow的头，包含类似“get”，“post”这样的信息。

7.TRACE方法 trace方法被用于激发一个远程的，应用层的请求回路

8.CONNECT方法

把请求连接转换到透明的tcp/Ip通道

4.24H5新特性

  1. 语义化标签

（1）比如：header、conent、footer、aside、nav、section、article等语义化标签。

（2）语义化标签的好处：结构清楚，易于阅读，可维护性更高，有利于SEO的优化。

  1. 表单新特性

（1）input控件新增输入类型：date，color，month，email，tel，url、search、number等。

（2） 新增表单元素：keygen（公钥私钥），datalist，progress，meter，output等。

（3）新增表单属性：placeholder，min/max，pattern，required，width，height，multitype等。

1.HTML5表单新特性之——新的input type

HTML5之前已有的input type:

text、password、radio、checkbox、file、submit、reset、button、image、hidden

HTML5新增的input type:

1.Email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示矿口(可定制内容不能定制样式)

2.url:URL地址输入域。在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口

3.number:数字输入域，在表单提交时提供简单的数字格式验证，并弹出一个提示窗口

4.tel:电话号码输入域，在手机浏览器中弹出数字键盘

5.search:搜索输入域，在手机浏览器中右下角呈现搜索按键

6.range：范围选择控件，帮助用户在一定范围内选择一个数字

   <input type="range" min="" max="" step="">

(7)color：颜色选择控件，浏览器并未自己实现颜色选择框，而是使用操作系统自带的颜色选择控件

   <input type="color">
​
 (8)date：日期选择控件，FF没有实现，推荐使用第三方插件代替，如jQueryUI-datepicker、laydate等
​
   <input type="date">

(9)month：月份选择控件，FF没有实现

   <input type="month">

(10)week：星期选择控件，FF没有实现

   <input type="week">

4.25Promise的理解

一、什么是Promise?我们用Promise来解决什么问题？ 我们都知道，Promise是承诺的意思，承诺他过一段时间会给你一个结果。 Promise是一种解决异步编程的方案，相比回调函数和事件更合理和更强大。 从语法上讲，Promise是一个对象，从它可以获取异步操作的信息

二、Promise有三种状态 pending 初始状态也叫等待状态 fulfiled 成功状态 rejected 失败状态 状态一旦改变，就不会再变。创造Promise实例后，他会立即执行。

三、Promise的两个特点 Promise对象的状态不受外界影响 Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆

四、Promise的三个缺点 无法取消Promise,一旦新建它就会立即执行，无法中途取消 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部 当处于pending（等待）状态时，无法得知目前进展到哪一个阶段，是刚开始还是即将完成

五、Promise是用来解决两个问题的 回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输出这种现象 Promise可以支持多并发的请求，获取并发请求中的数据 这个Promise可以解决异步的问题，本身不能说Promise是异步的

六、Promise的方法

Promise.all() 此方法用于将多个Promise实例包装成一个新的promise实例。它会等待数组中的各个Promise都执行成功后按顺序返回结果，如有一个不成功则执行不成功的promise的失败的结构

Promise.race() 用法与.all()差不多，都是传入数组。但是.race()是谁先返回结果就先执行谁

4.26Ajax的创建步骤

  • 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  • 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  • 设置响应HTTP请求状态变化的函数
  • 发送HTTP请求
  • 获取异步调用返回的数据
  • 使用JavaScript和DOM实现局部刷新

4.27.hash和history的区别

  • 1.hash路由在地址栏URL上有#，用 window.location.hash 读取。而history路由没有会好看一点
  • 2.我们进行回车刷新操作，hash路由会加载到地址栏对应的页面，而history路由一般就404报错了（刷新是网络请求，没有后端准备时会报错）。
  • 3.hash路由支持低版本的浏览器，而history路由是HTML5新增的API。
  • 4.hash的特点在于它虽然出现在了URL中，但是不包括在http请求中，所以对于后端是没有一点影响的，所以改变hash不会重新加载页面，所以这也是单页面应用的必备。
  • 5.history运用了浏览器的历史记录栈，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法，它们提供了对历史记录进行修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。
  • 6.history的这种模式需要后台配置支持。比如：当我们进行项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404

4.28 document.write()和innerHTML的区别

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。（获取div里面的内容 ，修改内容）你可以精确到某一个具体的元素来进行更改。

write是方法，会全部重写网页内容。 而innerHTML则是属性，而且是定向改写。

5.React

5.1.React双向数据绑定

通过受控组件

受控组件是指表单元素的值由React组件的state控制。当用户输入时，React会触发onChange事件来更新组件的state，从而实现单向数据绑定。为了实现双向数据绑定，需要在onChange事件中更新state的同时，也更新表单元素的值。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
  }
​
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
​
  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

5.2.React和Vue的不同之处

1.vue是响应式的数据双向绑定系统，而react是单向数据流，没有双向绑定。

2.vue的语法较为简单，适用于小型项目创建，而react更适用于Web端和原生App的开发，侧重于大型应用。

3.Templating vs JSX

React和Vue.js之间最大的区别在于模板的实现方式。

4.状态管理与对象属性

react: 如果你熟悉React，你就会知道应用状态是一个关键概念。甚至还有一些专门用于管理大型状态对象的框架，比如Redux。另外，React应用程序中的状态数据是不可变的，这意味着它不能直接更改(尽管这并不完全正确)。在React中，你需要使用setState()方法(或useState()钩子)来修改本地状态中的任何内容。 vue： 对于Vue.js，不需要本地状态对象，数据是通过Vue对象上的data属性管理的。 在Vue中，不需要调用像setState()这样的状态管理函数，因为Vue对象上的data参数充当了应用程序数据的持有者。 在关于大规模应用程序的状态管理的话题上，Vue.js的创建者Evan You说过，这种解决方案适合小规模应用程序，但不能扩展到大型应用程序。 在大多数情况下，框架本身提供的内置状态管理模式对于大型应用程序是不够的，必须使用像Redux或Vuex这样的专用解决方案。

5.3.类组件和函数组件之间的区别是

1.类组件有 this，函数组件没有 2.类组件有生命周期，函数组件没有 3.类组件有状态 state，函数组件没有

5.4.React 中 refs 是做什么的

Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中，props 是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它。凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用 Refs。 咱们可以在组件添加一个 ref 属性来使用，该属性的值是一个回调函数，接收作为其第一个参数的底层 DOM 元素或组件的挂载实例。

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

5.5.state 和 props 区别是什么？

1.state 是组件自己管理数据，控制自己的状态，可变； 2.props 是外部传入的数据参数，不可变； 3.没有state的叫做无状态组件（函数组件），有state的叫做有状态组件；

5.6.什么是高阶组件？

高阶组件(HOC)是接受一个组件并返回一个新组件的函数。

5.7.在构造函数调用 super 并将 props 作为参数传入的作用

子构造函数中能够通过this.props来获取传入的 props

5.8.为什么不能直接更新 state 呢

需要使用setState()方法来更新 state。它调度对组件state对象的更新。当state改变时，组件通过重新渲染来响应：

5.9.React组件通信如何实现？

  • 1.父组件向子组件通讯:父组件可以向子组件通过传 props 的方式，向子组件进行通讯

  • 2.子组件向父组件通讯:props+回调的方式,父组件向子组件传递props进行通讯，此props为作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中

  • 3.兄弟组件通信:找到这两个兄弟节点共同的父节点,结合上面两种方式由父节点转发信息进行通信

  • 4.跨层级通信:Context设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言,对于跨越多层的全局数据通过Context通信再适合不过

  • 5.发布订阅模式:发布者发布事件，订阅者监听事件并做出反应,我们可以通过引入event模块进行通信

  • 6.全局状态管理工具:借助Redux或者Mobx等全局状态管理工具进行通信,这种工具会维护一个全局状态中心Store,并根据不同的事件产生新的状态

5.10.React Hooks优点

简洁: React Hooks解决了HOC和Render Props的嵌套问题,更加简洁

解耦: React Hooks可以更方便地把 UI 和状态分离,做到更彻底的解耦

组合: Hooks 中可以引用另外的 Hooks形成新的Hooks,组合变化万千

6.Vue3

6.1.Vue2和Vue3响应式的区别

vue3的响应式原理：

vue3 响应式是使用 ES6 的 proxy 和 Reflect 相互配合实现数据响应式，解决了 vue2 中视图不能自动更新的问题。

vue2的数据劫持不能监听到深层对象数据和数组数据的更改。

proxy 是深度监听，所以可以监听对象和数组内的任意元素，从而可以实现视图实时更新。但是有兼容性问题，不兼容IE9。

6.2.vue3 组合式API生命周期钩子函数有变化吗？

setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显示的定义它们。其他的钩子都可以编写到 setup 内。

6.3.Composition API 是啥?

Composition API 是 vue3 新增的，所以 vue2 没有。在 Composition API 中，根据代码逻辑功能来组织的，一个功能所定义的所有 API 都会放到一起，这样即使功能复杂，代码量增大，都可以一下子定位到某个功能的所有代码，代码维护方便。它的最大特点就是：高内聚，低耦合。

6.4.watch 和 watchEffect 的区别

1、watch需要明确监听哪个属性 2、watchEffect会根据其中的属性，自动监听其变化 3、watcheffect初始化时，一定会执行一次（收集要监听的数据，不然不知道监听的是什么），watch只有你设置了初始化监听才会监听

6.5.v-if 和 v-for 的优先级哪个高

在 vue2 中 v-for 的优先级更高，但是在 vue3 中优先级改变了。v-if 的优先级更高。

6.6.使用script setup的好处

crtpt setup 是 vue3 的语法糖，简化了组合式 API 的写法，并且运行性能更好。使用 script setup 语法糖的特点：

  • 属性和方法无需返回，可以直接使用。
  • 引入组件的时候，会自动注册，无需通过 components 手动注册。
  • 使用 defineProps 接收父组件传递的值。
avatar
文章
阅读
粉丝