【测试】一些面试题目和需要补足之处

2022-06-30 10:05:22 阅读：179 来源： 互联网

标签：function 题目请求面试 window ready 拷贝补足页面

网络码、promise状态、var同名变量和函数的区别、盒模型中居中、sass中定义一个全局变量（例如定义一个颜色，进行全局使用）、限制css格式仅在本页面内、window.onload和document.ready的区别、select的数据绑定、link引入外部css格式用哪个标签、阻止冒泡、点击绑定多个事件、优化页面、递归、this的指向、es6新特性、深浅拷贝、setInterval和setTimeout的区别、三元式、数组去重。

1.网络码

状态码的第一个数字代表了响应的五种状态之一。

（以下均为个人理解，如需要较官方解释请访问——HTTP 状态码 | 菜鸟教程 (runoob.com)）

1XX：表示服务端已收到请求，需要客户端继续操作。（除实验条件下，服务器禁止客户端发送1XX响应）

2XX：表示请求已经成功被服务器接收并处理。

3XX：（重定向）表示还需要客户端进一步操作才能完成请求。（可以理解为，和所请求的资源相关出现了问题）

4XX：客户端的请求出现了错误。（可以理解为，前端出现了错误）

5XX：表示服务器在处理请求过程中有错误。（可以理解为，前端没有问题，是后端出现了问题）

常用：

200——请求成功。（标准成功返回）

301——资源（网页）等被永久转移到其他地址

404——请求的资源（网页）不存在

500——内部服务器错误

2.promise状态

promise有三种状态：

pennding——初始状态；fulfilled——成功；rejected——失败。

一个完成的例子

new Promise(function (resolve,reject){
      .....
}).then(function(){
      .....
}).catch(function(){
      .....
});

3.var同名变量和函数的区别

考点——变量提升

例如，

var x
var x = function（）{...}

则函数会覆盖变量

4.盒模型中居中

已经有前辈写的非常详细非常好了，参考——盒模型居中方法总结_hui_style的博客-CSDN博客_盒模型上下居中

在flex中我常用的就是如下：

justify-content: center;/*设置水平方向*/
align-items: center;/*设置垂直方向*/

5.sass中定义一个全局变量（例如定义一个颜色，进行全局使用）

$defaultColor: #3f3f3f;

/* flex布局 */
@mixin flex($justify:space-between, $align: center, $wrap: nowrap) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

通过$定义一个变量，之后在要用到的页面中进行外部引入就可以进行使用了。

参考—— sass 配置全局变量_learning_H的博客-CSDN博客_sass全局变量

6.限制css格式仅在本页面内

这个超级常见基础简单

<style lang="scss" scoped>
</style>

scoped就实现了

7.window.onload和document.ready的区别

简单来理解，

window.onload，即页面加载，必须要页面内所有东西都加载完成后才能执行；

$(document).ready()是DOM执行完成后执行，不必须等到网页资源加载完毕。

其次，他们的可编写方法个数也不同：

$(document).ready()可以同时编写多个，并且都可以得到执行；
window.onload不能同时编写多个，如果有多个window.onload方法，只会其中执行一个

另外，关于简化写法两者也不同：

window.onload没有简化写法；
$ (document).ready(function(){ })可以简写成$(function(){方法体 });又因为JQuery的默认参数是document，则还可以写成$().ready(function{ })

8.select的数据绑定

这个也超级简单的，需要注意的是他的数据绑定直接在select标签上进行数据绑定

9.link引入外部css格式用哪个标签

这个可以总结为——url和herf以及src都在什么时候进行使用

url不是属性，浏览器通过url从web服务器请求页面

src是属性，src的路径是元素加载的路径。常用的标签有：img、script、iframe

herf是属性，src的路径是要跳转和引用资源的路径。常用的标签有：a、link

10、阻止冒泡

最常用基础的——event.stopPropagation()

参考： JS中阻止冒泡事件的三种方法_LeungZhenPang的博客-CSDN博客_js阻止事件冒泡的方法

11、点击绑定多个事件

最常用基础的——addeventlistener

12、优化页面

这个方法很多啦，参考：前端页面性能优化 - 简书 (jianshu.com)

在这里简单写一下：从请求、操作、资源、加载等方面考虑

请求：减少网络请求次数和大小

操作：减少DOM操作，减少重绘和回流的发生

资源：外部引入CSS和JS，减小引入图片等资源的大小，减少代码量

加载：多使用懒加载，减少页面重定向

13、递归

递归是一种解决问题的有效方法，在递归过程中，函数将自身作为子例程调用。

需要注意的地方，如果写出死循环，就要电脑风扇呜呜转了。

14、this的指向

参考： this指向（全）_MiemieWan的博客-CSDN博客_this 指向

简单描述几个：

箭头函数：指向外层函数的作用域的this指向

构造函数：指向实例

setInterval（）指向window

15、es6新特性

参考：ES6 新特性 - 前端杂货 - 博客园 (cnblogs.com) ECMAScript 6 简明教程 | 菜鸟教程 (runoob.com)

let、block、const作用域

箭头函数

函数参数默认值

spread/rest操作符

对象词法扩展

二进制和八进制字面量

对象和数组的结构

对象超类

模板语法和分隔符

for..of VS for...in

Map VS WeakMap

Set VS WeakSet

类

Symbol

迭代器

Generators

Promise

Proxy与Reflect

字符串

模块

asyn/await

16、深拷贝和浅拷贝

参考：浅拷贝与深拷贝 - 知乎 (zhihu.com)

简单的个人理解：浅拷贝只复制地址，深拷贝会在内存里真实克隆一份

实现方法：

浅拷贝

Object.assign()

Arrary.prototype.concat()

Arrary.prototype.slice()

深拷贝

JSON.PARSE(JSON.stringify())

手写递归

函数库lodash

17、setInterval和setTimeout的区别

setTimeout只执行一次，而setInterval是循环执行的

定时器的清除：

setTimeout()对应的是 clearTimeout();

setInterval()对应的是 clearInterval();

18、三元式

例如：a？b：c

a是一个返回值为true或false的判断式，若为true则执行冒号前（此处为b），false则执行冒号后（此处为c）

19、数组去重

最常用的——es6中的set去重

双for循环，然后splice去重

indexOf去重

includes

filter

Map（）

利用对象

详细参考：JS数组去重的方式详细总结（7种） - 掘金 (juejin.cn)

标签：function,题目,请求,面试,window,ready,拷贝,补足,页面
来源： https://www.cnblogs.com/TitiAndCow/p/16425743.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【测试】一些面试题目和需要补足之处